iOS Design Patterns, Part 3 – Navigation
This is the third of a series on design patterns. This chapter will focus on view dynamics and user experience.
Navigation
The iOS SDK offers an excellent set of tools for providing your users with a familiar and usable interactivity idiom. Two very common components are UINavigationController and UITabBarController. This section covers some useful patterns for working with a navigation controller nested within a tab bar.
Prefer shallow stack structure
Users can easily find themselves lost in the stack. The back button in the navigation bar, also know as a bread crumb, only allows the user to step one level up on the stack. They have no context of how many times they might need to “go back” in order to get to the top.
Maintain narrow workflow focus (eliminate distractions)
Unlike the web, where every page has a SEO-friendly footer and some kind of high level navigation, mobile development is much more sensitive to user distraction. Use high level navigation to organize your users’ actions into narrow workflows. Limited screen real estate dictates the breakup of complex tasks into simpler components. After they have chosen a workflow path, make sure there are no interactive components on screen that take the user out of the workflow, except a single “cancel” or “discard” button.
Note: when using a tab bar with a navigation controller, it is often necessary to wrap workflow views in a navigation controller and present the result modally. The key is to obscure the tab bar for the duration of the workflow. If the tab bar is not obscured, users can easily select other tabs (intentionally or accidentally), which often leads to context confusion.
Use a center button in a tab bar to highlight the most important use case
Tab bars are great for grouping similar and/or related use cases together. Often, tasks can be organized within the context of a single tab. Sometimes, though, there is one task or workflow that is more important than all the others in the app. In that case, consider using a UIButton superimposed over the middle tab of the tab bar to trigger a modal presentation of the primary task or workflow. By introducing a modal workflow, this guarantees the user will be back where they were once the task is complete and the modal view dismisses. The UIButton approach allows you to make a component that stands out above the other tabs. It also allows you to set the bounds to whatever you like, allowing the button to be larger than the tab bar for extra effect.
Maintain consistent context
With a touch-based interactivity idiom, there is a strong time component in the user experience. Interface designers can not simply focus on the current view. It’s important to maintain a context of the previous view when designing the experience. If the user is browsing a collection and they select an item from that summary view, the subsequent detail view should include controls to traverse the set. Otherwise, the user is forced to go back to the summary view, scroll to another item, and select that in order to see its details. It is far better to offer a cursor control to allow the user to cycle through the collection in both views. More information about this topic is available in this post on Bifocal Collection Navigation.
