Take the 2-minute tour ×
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

3 Answers 3

up vote 3 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

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 Jun 18 '13 at 14:08

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

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.