Monday 4 July 2011

Tabs, top or bottom?

In my previous post 5 tips for converting iOS UI to Android tip number one was that Android apps should use top tabs instead of bottom tabs like their iOS counter parts often do. This tip was based on recommendations from Google's Android developer advocates.

The recommendation started a discussion about tab location. There seem to be a lot of opinions on both sides of the argument. I think this topic deserves a new post for focused discusion.

But wait! Why should we care? Why can't all developers just implement what they want? 

The answer is of course platform consistency. We can serve our users much better if all apps on Android behave consistently. That way users won't have to learn to work with each app separately.

Following arguments have been put forth by various people. Special thanks to Mark Murphy (@commonsguy), Adam Lewkovytz and Stefano Forenza for participating in the discussion!


For bottom tabs: On larger screen size phones it is difficult to reach to the tabs if they are located at the top.


For bottom tabs: Default dialer app uses bottom tabs. If they would be a problem arguably the most important application of the phone would not use them.



For top tabs: Phone's physical buttons are located at the edge of the screen and having apps' main navigation right next to them can cause accidental key presses. These can be especially problematic in case of the back button.


For top tabs: Consistency between Android smartphones, Android Honeycomb and web. Web and Tablets always have top navigation.


For top tabs: Android app Action Bar is located on top. It makes sense to locate app's main navigation next to it for convenient access.



For top tabs: On-screen keyboard won't interfere with tabs on top but it will with bottom tabs.




What arguments are missing? Please leave a comment!


My opinion
I still find myself leaning towards top tabs. I use Sony Ericsson Arc with fairly large screen and personally I don't have any problems reaching the top of the screen for navigation (I'm aware of uselessness of anecdotal evidence and it's just my opinion).

I think that consistency between Honeycomb and web is the most important argument. Consistency between iOS app and Android isn't important. Not many people use Android and iOS but many people use we and Android and in the future probably Android tablets.

I found this heat map from Tobii Technology (Creative Commons). I think it reflects average smartphone usage pretty well. It seems to support the view that top is a ergonomically natural place for app main navigation.

image by Tobii Technology (CC)

Your opinion?
What do you think? Please leave a comment! If possible please include a source link to corresponding studies / articles.


[Update 2011-07-05]
Related twitter discussions

Android developer advocates Nick and Roman reiterated their stance on the tab location


 Nick Butcher 
@ 




 Roman Nurik 
@  



Tom Gibara pointed out an accessibility problem with bottom tabs. Check out his blog post about it.

 Tom Gibara 
@ 

20 comments:

  1. top tabs+ swipe gesture. Users can therefore switch between tabs using the lower part of the screen, which is the main advantage of bottom tabs.

    ReplyDelete
  2. Hi jotarun,
    Exactly! Combining workspaces with tabs make the navigation always easier. It's not always possible but when it is a viable navigation model it should always be implemented.

    ReplyDelete
  3. Tabs on top ++. Bottom not only for capacitive buttons but also the menu.

    ReplyDelete
  4. Tabs on top!

    BTW: My phone app has the tab on the top (and not the bottom as is mentioned in this article)

    ReplyDelete
  5. I'd say it depends on the app.
    The problem with top tabs is that it is easier for your hand hide the screen.
    (skinned) bottom tabs are also more visually pleasing for certain kind of apps where it is important.

    ReplyDelete
  6. Tabs on bottom, because action bar is already on top (on phones)

    ReplyDelete
  7. In your previous post (5 tips...) the screenshot of Foursquare on Android looks really ugly to me :s
    A large part of the top screen is used by:
    - status bar
    - action bar
    - tab bar
    - switch bar

    (btw, I'm really an "Android fan")

    ReplyDelete
  8. Thank you for your comments.

    Pierre, while I do agree that fousquare isn't the best example for visually pleasing design it is very functional. It could be improved while still keeping tabs on top.

    ReplyDelete
  9. Even the Google team now uses bottom-ios-tabs http://googlemobile.blogspot.com/2011/07/finding-great-deals-is-easier-with.html
    Me sad panda :(

    PS : nice blog anyway!

    ReplyDelete
  10. Hey Pedro,
    Yeah. Unfortunately Google doesn't seem to be very consistent with their own official app quality. I really think they should be much more careful.

    Thanks :)

    ReplyDelete
  11. The picture where the thumb is, is missleading. I hold far more at the lower end. Probably this is caused, by the iPhone, where inputs are conetrated at the bottom, so that the top is mainly for viewing, which is not obscured by the thumb.
    Same goes for tablets. to reach buttons at the far side the arm hast to go over the screen...

    Thanks for the post:For me to port an iOS-App to android, this was a helpfull info that andoid-users expect it differently...

    ReplyDelete
  12. Where do you get that the default dialer has tabs on bottom?

    The Gingerbread dialer has top tabs: http://goo.gl/vN08s

    ReplyDelete
  13. Anonymous, it depends on the version and OEM skin. You're right that 2.3 was updated to the top tabs and that's good :)

    ReplyDelete
  14. moze, Thanks, yeah. It does depend on a phone a lot though.

    ReplyDelete
  15. I'd choose tabs on bottom as well.

    ReplyDelete
  16. I'd choose Tabs on tops. That's simply awesome.

    ReplyDelete
  17. I prefer top tabs. Somehow I keep hitting the bottom buttons accidentally, with the bottom tabs. It's a good thing I manage my guitar tabs much better!

    ReplyDelete
  18. I still don't get why not if the sytem works and convenient.

    ReplyDelete
  19. I think it depends on the screen size. As the Android phones are mostly equipped with a 4"+ screen, it makes more sense to move ALL things pressable to the bottom. Phones are meant to be controlled by one hand, not two. Accidental key presses is a non-issue for handsets with large screens. On the contrary, by stretching your thumb to reach the top tabs/navigation/whatever damn thing up there, you are prone to miss press the keys in the bottom. Eliminating the needs to ever reach the upper part of the screen should be the way to go. After all, we are not talking about a 3.5" iPhone here. Why do we Android users have to suffer from the flawed design of the iPhone apps?

    ReplyDelete
  20. I see the consistency argument, of course, but functionality and UX always have to come first IMO. Proper design and NUIs will guide the user and limit the 'confusion' red herring.

    With the action bar along the top, then a row of tabs, and (in my app) a row of spinners (for data filters), you end up with a clumsy looking app. The content ends up starting a quarter to a third of the way down the screen. Maybe my app could use a NUI style interface as well, but in many cases the design costs are not feasible in startup land.

    Blanket statements on UI design should be saved for the trivial apps they tend to serve best. Apps should be designed to maximize the user experience so that they CONTINUE to use your app.

    ReplyDelete