Saturday, December 4, 2010

OneBusAway iPhone App UI Design Question

I'm looking for some feedback on a user-interface design issue in the OneBusAway iPhone app. I figure there are some iPhone designers and users out there that might have some good ideas on how to tackle the problem. The problem is this:

When you are looking at real-time info for a stop, there are a variety of actions you might want to take: add a bookmark, filter the routes, see nearby stops, show the full schedule, see service alerts, report a problem... the list gets longer every day. And so does the list of buttons at the bottom of the arrivals screen:


I think that list of action buttons is getting a little overwhelming. One option is to put them all on a separate screen with a single action button leading things off:


The problem with this approach is that it reduces the visibility of those options. In fact, the very first revision of the app worked this way and I had a lot of reports from users that they couldn't figure out how to bookmark their stop, mostly because the action wasn't very visible.

Update:

Another option is some sort of detail indicator on the stop name itself:


Also a number of people have commented on the Service Alert indicator. The image above shows what happens when you have an unread stop-oriented service alert (very visible). Once you've read the service alert, the main service alert element shown above goes away. However, we still include it the action list at the bottom so that you can go back an access the service alert after you've read it.

Our options are limited in some ways, because some normal places you might put action buttons (the upper right corner, the lower toolbar) are already spoken for.

Does anyone have any thoughts on how to deal with this trade-off between an increasing number of actions and the desire to make them visible to the user? Especially in an iPhone app? Maybe you've seen another app that does this well. I'd love your feedback.

Feel free to leave a comment or drop an e-mail at contact@onebusaway.org. Thanks!

19 comments:

Shawn Medero said...

I didn't even find the action list until a few months ago... I just never scrolled down far enough to see it.

What about the Twitter UI's action toolbar - swipe over a tweet to reveal things like "read later, favorite, retweet, etc" ?

Do you have metrics on the most used features from the actions list? Maybe elevate the most used one as an button icon to right next to the stop name (say bookmark) and then swiping over the stop name would reveal the rest of the action list?

Brian Ferris said...

@Shawn:

Ha, visibility is tough. I'd never seen that swipe behavior in the Twitter app before and I've been using it for months!

I'm not sure I could come up with meaningful icons for all the relevant stop actions. That said, I think there might be some options for indicating the actions from the stop name. Let me post a mock up.

Michael Hoffman said...

The service alert stuff should be more visible at the top, when there is a service alert.

I think a grid of icons beneath would relieve the effect of a long list of actions.

mamster said...

This is the sort of thing that I usually grouped under the "outbox" icon. I don't know what its actual name is, but it's the square with an arrow coming out of it, that means "do something with the data currently on the screen." It pulls up a modal dialog with several options in it--it's often used to email the thing you're looking at, for example.

I think many (but probably not most) users understand that if there's something they want to do to the current data that's not obvious, it's probably in that box somewhere.

Brian Ferris said...

@Michael:

I posted an image that shows the UI when you have a new, unread service alert. Hopefully you'd agree it's a bit more visible.

Yaw Anokwa said...

mamster is correct. most apps i've seen (byline, newsrack, instapaper) all use the outbox icon as a way to handle five or so actions.

i love the twitter interaction, but it's only natural when you have a list of things you want to manage. discoverability is easy -- do a demo video on first launch.

i'd change the bus stop screen to include those actions as buttons at the screen, then add the outbox icon on the right hand side. that should give you about ten actions to work with. going back from that bus stop screen would go to your previous screen with the old menu.

Brian Ferris said...

@Yaw:

I've never seen an app with an intro video. Is that a common practice? Do you think anyone would actually watch?

I'm not sure I understand your UI suggestion. Any way you could it describe it in more detail?

Tommy Vernieri said...

Mockup: http://twitpic.com/3dacos

I would try to split them up so there aren't so many things you're trying to display all together.

You could put Nearby Stops and Full Schedule as buttons in the bottom corners. They would cause the page to flip left-to-right or right-to-left revealing the back of the page with the alternate view. It's a pattern used in the Weather app (with lower-case "i" icon) and the iPod app on the Now Playing page.

You could move the Add to Bookmarks button up to the stop name header as an icon. I feel like a star icon usually means favorites rather than bookmarks, but it's probably close enough. Or you could use a plus icon, like the one used in Safari.

I thought of putting the Report a Problem button as an icon in between the two other new buttons on the bottom, but I'm not sure if there's an icon that would clearly communicate its meaning to people who were actually experiencing a problem. You could try an exclamation point with a different style than what you have for the service alerts.

Another option would be to leave Report a Problem where it is and move Filter & Sort down to an icon in the bottom center. I'm not sure what the UI looks like when you choose that, but you could consider having the page scroll up rather than scrolling left.

Peter Abrahamsen said...

The design under "Update" is the right direction, and I agree with Tommy V.

Any operations not afforded by the initial view should be available by engaging the stop name, but I'd prefer to show them in an overlay so I don't feel like I'm being taken to yet another screen. I'm not sure what the stop should look like to suggest this is possible--maybe an "i" for "information" icon?

If there is a service alert, there is probably only one. Keep the icon but replace the text with a teaser or the title of the alert (I don't know what they look like). If there are more than one, keep the text you show in your design.

Bookmarking should be a one-tap operation on something that looks like a bookmark or a star. Change its state to show that it's bookmarked, adding an affordance to rename the bookmark.

You should be able to fit the nearby stops link on the same line as the bookmark, putting both just attached to and just beneath the stop name.

I'm not convinced that "Filter and sort" is important here. Can you show an example of a stop where filtering is less work than just browsing through the routes?

"See full schedule" could be an action on a screen for the stop, or could be the last entry in the arrivals list--"more arrivals," or keep "see full schedule." That would leave no action list below the arrivals list.

I also think I agree with @theplanetmike about scrolling the bottom bar.

Cheers,
Peter
UW HCDE

Richard Fuhr said...

OneBusAway has a very rich set of features. I suggest that in your next release you provide an online help page (or pages) which would provide a clear yet complete summary of all the functionality of the app. In that way, you won't have to worry so much about making all of your features "discoverable". With the limited screen real estate of the iPod and iPhone, it is challenging to implement all the functionality in easily navigable and discoverable ways, so I think that online help would be incredibly useful.

Brian Ferris said...

@Richard:

@Richard:

There already is an on-line help page outlining all the features:

http://onebusaway.org/p/Tools_IPhone.action

True, there is no linkage from the app to that page. Might be helpful, but of course the best apps need no explanation I suppose.

Richard Fuhr said...

Thanks for the link to the help page: http://onebusaway.org/p/Tools_IPhone.action

I added that page to the home screen of my iPod Touch, as it is nice to have the reference available as a companion to the OneBusAway app when I am away from my computer.

dwiggins14 said...

For service alerts, perhaps a badge could show up on the bottom toolbar (using the "more" button if you go with that down there)? Along the lines of when you have waiting updates and you're in the app store.

Mitch said...

Pardon me if this as already been suggest; I haven't read many of the previous comments.

How about spreading some of the actions around the page. For instance:
-The bookmark feature could be achieved via a star to the right of the stop name.
-Then perhaps the 'see full schedule ' could be achieved by "scrolling past" the bottom of the page (similar to how you scroll past the top of the page to refresh). Alternatively, simply leave this option, "report a problem", and "nearby stops" at the bottom of the page (exposed) since these are the options people would most like to see if the current page didn't satisfy them.
-If you combined "route" "destination" "time" into a button and made it link to the "filter and sort" menu that would seem pretty intuitive.

Lastly, what about removing the refresh button, turning it into "actions", and putting "refresh" as yet another option. Then you could have "shake to refresh" for the OCD, but still have all of the other actions a little more prominent.
Thanks for your work -- love this app!

Jessica Moskowitz said...

The main "extra" options that are important to me are: bookmarks, report a problem, and sort routes. If there is an alert I can find it elsewhere and I can go back to the map to see other stops nearby. If you are changing the UI, I also wanted to make a suggestion for the sorting routes option. I have been at a stop with many different routes and when I want to see one route, I have to uncheck every route. I think everything should be unchecked to begin with, and then you can check off what you want to see, rather than uncheck what you don't want to see.

Anca said...

I like the service alerts at the top like you showed. I would leave the actions/tools list on the same page since people probably often scroll all the way to the end of the routes list and they'll see the options. One solution would be to have a button (tools icon) near the top that when clicked auto-scrolls to where the actions list starts. You might be able to make some space next to the stop name or between the refresh icon and the "updated...".

vinfotech said...

The App providing the information about the nearby stop is awesome.thanks for sharing it.
iphone App Design

vinfotech said...
This comment has been removed by the author.
vinfotech said...

I always like location based App...And this one is very useful for the local people.
Opensource Development