Subnavigation on iPhone

Question

If your app has a bottom tab nav, and you want to open another page that has a contextual sub-nav, where do you place this sub-nav? How do you decide?

Answer 1

What you call "bottom tab nav" I recognize as the Tab Bar, described in the iOS UI Element Usage Guidelines. It is good reading.

1. Avoid if possible

I do not think apple has given a standard for sub-navigation menus. I guess some reasons are that

1. the scope of the apps tend to be narrow,
2. a mobile user is less focused and need to be able to orientate quickly, and
3. the size of screens invite you to rather be creative given the content on each tab, than creating a subsystem of navigation menus.

I would try to avoid sub navigation menus within a page.

2. Keep the recognition factor

I think the bottom toolbar used for navigation within an iPhone app is better off if it is kept static, than changing. The recognition of the same menus is worth a lot for the user who is trying to navigate, as it also serves as a form of breadcrumbs. Remember the Office menus that kept changing depending on how they where used? Breadcrumbs should not adapt like that. The documentations also says it "should be accessible from every location in the application".

I would try to keep the Tab Bar static.

3. No silver bullet

I can think of some examples of sub navigation menus in standard apps. But I guess it requires a case specific design and tweaking to make it just right. These sub-menu examples from the App Store app are very case specific. I think it is better to try to adapt to the content of purpose of the page, than to keep a silver bullet sub-Tab bar standard that should work for all cases.

Answer 2

Without the wireframe, I can only guess, but this is my suggestion to your problem. When your user press the second item in the bottom tab navigation I change the sub tab navigation to be displayed as an hierarchical one instead. To get to the top user have to push the << navigation item. Moving down the hierarchy user can choose Two A or Two B.

^{download bmml source – Wireframes created with Balsamiq Mockups}

I hope this is what you mean since contextual menu on iPhone is only visible when user selects an item on the screen.

^{Image from iphone-tips-and-advice.com}