4

I have a project that has 8 different areas, e.g, travel, weather, etc. The front page is going to have 8 different icons; they will navigate to each section. I will then need something like a tab bar for 4–8 options within each of the above 8 areas.

Apples guidelines suggest that not having a standard tab bar across the whole is a no-no, but having 25 options on a uniform tab bar would be a UX nightmare if I were to go this route.

Does anybody have any ideas on what else I could use, or know if apple will actually reject the app if I use a different tabbar for each section of the app?

1

2 Answers 2

8

Working on the assumption that you've addressed the information architecture issues and determined that there are infact this many primary and secondary navigation options required for the application there are a few routes you can take for displaying multiple options in a tab-panel (or similar control).

The first example here is from Snapseed:

enter image description here

Here they've taken the decision to have a scrollable list of options in place of the traditional tab panel. Considering Apple gave this app away in their 12 days of Christmas it's probably save to assume they allow this sort of navigation in their apps (but you never can be sure about these things!).

The second option is from the actual Apple iPod Music app:

enter image description here

where they give you the option to drag your 'favourite' menu options to the primary nav at the bottom, and leave the lesser used ones within the 'More' link.

2
  • Great minds think alike :-) Feb 28, 2012 at 9:27
  • Thanks chaps that is very helpful. The swiping menus at the bottom of the screen would be preferable I think.
    – Bannywhey
    Feb 28, 2012 at 10:39
5

Navigation bars are very common on iPhone apps, and therefore are easier for users to understand and operate.

The project might have 8 different areas, but maybe only 3-4 of them are REALLY important and of frequent use. In this case, use the first 3-4 tabs for them and add a "more" tab at the end, which will either open a menu with the rest of the options (see SXSW's new Android app) or redirect to a page which contain these 4 sections together, if possible.

If all sections are equally important, you can try:

  1. A "swipable" navigation tab (like Groupon's app, inside "Now"). If you go this route, don't forget to make an "affordance" for swiping (e.g. make the last tab half visible, fading out at the end, implying that it can be dragged sideways).
  2. A seperate navigation pane, sliding in from the side (like Facebook's native and web app).

What ever you do, make sure that on every screen the user can easily tell where he is and how to navigate away.

For other navigation options, take a look at this mobile pattern gallery.

3
  • 1
    +1 for the pattern library link, that's really useful. I also forgot about the Facebook slide-in navigation, that's also a great approach.
    – JonW
    Feb 28, 2012 at 9:54
  • 1
    TBH I think I prefer your answer to my own. The link to a pattern gallery as well as a good description for the swipeable nav tab were great.
    – JonW
    Feb 28, 2012 at 13:43
  • I think that your answer is more appealing because you used images directly instead of referring to them. Once again, just "usable" is not enough, and aesthetics should follow :-) Feb 28, 2012 at 13:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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