Small screen real estate on mobile gives room to the battle between content and chrome. In this article, we’ll investigate the challenge of making navigation both accessible and discoverable.
In this article we’ll examine three basic navigational patterns for mobile apps and investigate what contexts in which they are each useful:
"The main advantage of the Hamburger menu is its ability to present a large number of navigational options in a tiny space."
When to use the Hamburger menu
Since the main downside of the hamburger menu is its low discoverability, it’s not recommended as the main navigation menu. However, when designing secondary navigation options this pattern might be an appropriate solution. Secondary navigation options are options/features that are important for users only under certain circumstances. Being secondary, they can be relegated to the less prominent visual placement as long as users can quickly find a utility when they need it.
Uber might be a good example:
Since everything about the main screen of Uber app is designed to request a taxi, secondary options such as ‘Payment’, ‘History’ and ‘Settings’ shouldn’t be available prominently because a regular user flow (main functionality) doesn’t include these actions and they can be hidden to the hamburger menu.
Pitfall: The hamburger menu hides context
Hamburger menu doesn’t communicate current location in glance, so it’s harder for users to surface the information about their current location. It’s only visible when a person clicks on the hamburger icon.
For a tab bar to be effective it should contain a relatively few the most important destinations which should be directly accessible from anywhere in the app. The tab bar communicates the current location with ease: properly selected icons together with labels and color language make it self-evident.
Another benefit of tab bar navigation is that it can display and highlight notifications as well.
When to use tabbed navigation
A tabbed navigation is a great solution for apps with relatively few navigational options (up to 5 top-level destinations). If your app has more than 5 options, it’s hard to fit them in a tab bar and keep an optimum touch-target size.
Things to remember
You need to consider a number of things when designing tabs:
- Users expect to see a certain order for the Tab Bar: the first tab item has to be the home screen of the app and the order tabs should relate to their priority or logical order in the user flow.
- One of the tabs should always be active and should visually be highlighted.
- Icons that are used in tab bar should be usability tested. Users should be able to understand what happens when they tap on a element.
- For apps that provide any operations with content (e.g. mail app, Twitter mobile app), user expect to see a notification badge near the icon.
When should you put the tab bar in the top or in the bottom?
While the top tab bar and bottom tab bar may often share similar design, they have a strong cognitive difference:
- Bottom tab bar (often called navigation bar) should be used to quickly move between a small number of top-level destinations. When users click on a item in navigation bar they expect to be taken to a separate view which might not be related to the current view.
- Top tab bar (often called action bar) should be used for actions specific for the current view. Natural hierarchy of things go from top to bottom and users scan a new screen from top to bottom, thus when users interact with top tab bar, they thinks of related actions/data to the the opened tab. They don’t expects to see a completely different view with no related data.
"If it takes you more than 5 seconds to think of an appropriate icon for view/feature, it is unlikely that an icon can effectively communicate it’s meaning."
Pitfall: Abstract icons in tab bar
App designers sometimes hide functionality behind icons that are actually pretty hard to recognize. At the same time, users should be able to understand what exactly will happen before they tap on a element. That’s why icons for complex and abstract features should always be displayed with a proper text label.
There is a simple 5-second rule that can help you check your icons: if it takes you more than 5 seconds to think of an appropriate icon for view/feature, it is unlikely that an icon can effectively communicate it’s meaning.
When to use gesture navigation?
This pattern is good when users want to explore details of specific content easily and intuitively. For example, as users view page content, they can tap on card (or any other content element) they find interesting.
"Users spend more time with content than they do with navigation"
Things to remember
Users spend more time with content than they do with navigation menus. So one of the reasons to use in-context gestures instead of standard menus is because it’s more engaging.
Pitfall: Increased user effort
The important aspect of good navigation is visibility: through the menus, all possible actions can be made visible and, therefore, easily discoverable. Since gestures are always hidden, users need to find them first. When designing gesture-based navigation, be aware that every time you remove chrome, the application’s learning curve goes up and without proper visual hints, users could get confused about how to interact with the app.
Helping users navigate should be a high priority for every app. Unfortunately, there isn’t a one-size-fits-all solution for mobile navigation, it always depends on your product and on the context. But in order to create the relevant navigation for your app you should think about your user persona, about the goals they have when using it, and design your navigation to help them meet those goals.
2 Hamburger Menus and Hidden Navigation Hurt UX Metrics by Kar Pernice and Ralica Budiu