Tell me more ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

we have an iPhone app Design with an designed icon tab bar at the bottom.

enter image description here

For adoption to Android I have a few questions:

  1. Is there a need to put the tabs to the top? Or is it okay to break with Android UI standards sometimes?
  2. Is it okay to still develop with tab bars or would you really suggest using the ActionBar in case of Android? If so, why?
  3. Can we use the bar buttons like they are or do we need a ActionBar with smaller buttons and texts? Do we need a home button etc.?
  4. Is it possible to keep the orange button overlapped - with or without ActionBar?
share|improve this question

4 Answers

up vote 2 down vote accepted

Your example could easily converted to ActionBar. I strongly advise anyone porting an iOS app to stick with Android guidelines; it gives better integration to the overall platform. On iOS, it is very common to use tabs as there is a persistent tab bar at the bottom. On Android, we use tabs a little less and hierarchize the importance of toplevel application sections that would belong to the same tab strip on iOS.

I guess one of those tabs is used as "home screen" when the user runs the application. Then, you could have three tabs directly in the action bar: Shop, Stamps and Rewards. The Settings part, since it is less used (do users will use settings as much as other sections?), can be put in the overflow menu.

About the big button with a stamp on it: you could put it at the bottom of the screen whichever tab is active. In addition or in replacement, it is also possible to put the stamp as an action button available in the bar, at it looks like it is a major action that should be called often.

To wrap it up, the action bar may look like this:

[ icon  Shop | Stamps | Reward   <st> | ... ]

st stands for the icon for the quick action, identical tho the round stamp button; ... stands for the overflow menu, behind which you will find the Settings item.

Two additional benefits about using the ActionBar:

  • If there is not enough width to fit all, the tabs will automatically go on a second row.
  • If, on the opposite, the app runs on landscape or tablet and a much wider space is available, the quick action buttons or overflow menu elements can be configured to automatically show text and migrate to the bar depending on how much room is available. You decide the behavior for each button.
  • Programming is much faster. The ActionBar is already there. Bottom tabs would need a separate implementation.
  • And... you just stick to the guidelines and contribute to a consistent experience, which is part of UX quality.

In my opinion: putting iOS-styled tabs on bottom on Android is like putting traffic-light-colored window buttons on the top left of a Windows application frame. It belongs to a different system. I have seen many people today making mobile apps like they do websites, and thinking about such developments like they would do web pages. But, mobile apps are applications, not web pages; they belong to an ecosystem and we all need to keep this in mind.

share|improve this answer
Thanks for your detailed answer! Seems like its the better choice to go with ActionBar, I guess we will do that :) I checked the quick action (f.e. stackoverflow.com/questions/3059155/…). So its more like a context menu or can you make it fixed at the ActionBar? And can the stamp button be big with text (question 3) or even overlapping into the content (question 4)? Besides that I like the idea to put the stamp button at the bottom. – Jens Nov 30 '12 at 17:29
Thanks so much for your comment, I did not remember this QuickAction pattern! In fact, the one you mentioned is for a really different context; it is not the idea I was suggesting. I was talking about an Action, not a QuickAction. Suggested reading: developer.android.com/guide/topics/ui/actionbar.html Read the Adding Action Items and Choosing your action items sections, you'll get the idea. – DavLink Dec 4 '12 at 12:26
Cannot stress the 'abide by the rules that the platform you're building for have set' enough. Give the users a consistent experience with their environment, please! – Ruirize Dec 4 '12 at 16:47

1) A year ago it was okay to break Android UX guidelines, but now the community is getting stronger: they criticize Microsoft's outlook as well for not following the guidelines. (2.1 average rating)

2) it's okay to use tabs, but they have to be on top, and fit to the Android UX. Tabs are looking very nice in 4.x as well, so you can use them freely.

3) it is your choice, but please note, that even the icons look different in android. So a perfect iOS icon, like on your picture will stand out of the Android enviroment.

4) yes, you can do it, but it will still give an iOS feel for the users, and trust me, Android users hate if something looks iOS-y. They have chosen to have Android devices, and they will notice if something is from iOS

share|improve this answer
Your first point couldn't be more true. I personally have always been against breaking from UX guidelines and it's great to see users, developers, and designers all take a more firm stance on having a uniform look for Android. – MCeley Dec 5 '12 at 19:36

I'll try to answer the best way I can.

  1. No need for top tabs. There are several Android apps using bottom tabs. And yes, It's OK to break Android UI standard if there are a good reason for it, and you like to stay consistent between apps. But, don't break more than needed. Always consider that Android users expect Android behavior!
  2. Tab Bars are commonly used, but Action Bars looks like the one you need here "because the action bar offers users a consistent interface across applications and the system gracefully adapts the action bar's appearance for different screen configurations. You can control the behaviors and visibility of the action bar with the ActionBar APIs, which were added in Android 3.0 (API level 11)." Ref: ActionBar
  3. The image looks OK for Android users, and you need not to worry about the home button. It's visible outside of your app on the phone itself.
  4. Not really sure what you mean here, but custom notifications is possible to use.
share|improve this answer
Thanks for your answer! For 3. I am asking if its possible development-wise to have bigger buttons with text because on most ActionBar-examples there are tiny icons without any text. For 4. check the example picture with the big orange button - it is overlapping into the screen - I am curiuos if thats possible with an ActionBar. – Jens Nov 27 '12 at 10:12
@Jens You're welcome! – Benny Skogberg Nov 27 '12 at 10:13
@Jens Yes you can: stackoverflow.com/questions/10201736/… – Benny Skogberg Nov 27 '12 at 11:20
I have to disagree with the tabs on the bottom. It is good to stay away from them as much as possible, with the row of bottons just below them there is a lot of potential for users to mistakenly hit a system key instead of your tab. Also it unnecessarily changes from the standard behavior of the device. – powerj1984 Nov 27 '12 at 15:15
Also I'm assuming by 'home button' Jens means a button to take the user to the top level of the app. Typically this is handled in the ActionBar. – powerj1984 Nov 27 '12 at 15:16
show 1 more comment

For Android you probably want to use the Action Bar Tabs

Also we just released PortKit: UX Metaphor Equivalents for iOS & Android

It has side by side comparisons of the native UI-widgets and links to downloadable PSDs for designing.

share|improve this answer
Could you summarize the content of the link and add an explanation as to why that answers the question? Useful links are nice, but answers here are meant to be self-contained and complete (take a peek at other answers on the site/this question and you'll see). Link only answers are a bit spammy. – Ben Brocka yesterday

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.