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:

  1. Hamburger menu
  2. Tab bars
  3. Gesture-based navigation

Hamburger Menu

Screen space is a precious resource on mobile; the hamburger menu is a popular mobile navigation pattern that helps you save it. The main advantage of the Hamburger menu is its ability to present a large number of navigational options in a tiny space.

The Hamburger menu frees up screen real estate by shifting options off the screen into a side menu

The Hamburger menu frees up screen real estate by shifting options off the screen into a side menu

"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:

The hamburger help avoid overwhelming the user with too many options.

The hamburger help avoid overwhelming the user with too many options.

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.

“What’s out of sight, is out of mind.” Hamburger menu hides current user’s location within the app.

“What’s out of sight, is out of mind.” Hamburger menu hides current user’s location within the app.

Tabs

The idea of tabs is something we’re all familiar with. It comes from the use of tabs in folders, a real world object most people have experience with.

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.

The tab bar communicates the current location easily.

The tab bar communicates the current location easily.

Another benefit of tab bar navigation is that it can display and highlight notifications as well.

You can display a badge on a tab bar icon to indicate that there is new information available for that view.

You can display a badge on a tab bar icon to indicate that there is new information available for that view.

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.
Tab bar from Twitter app for iOS

Tab bar from Twitter app for iOS

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.
Featured,’ ‘Top Charts’, ‘Explore’, ‘Search’ and ‘Updates’ are different destinations for AppStore app for iOS.

Featured,’ ‘Top Charts’, ‘Explore’, ‘Search’ and ‘Updates’ are different destinations for AppStore app for iOS.

  • 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.
Music genres can be represented as tabs in top tab bar. Image credits: Material Design.

Music genres can be represented as tabs in top tab bar. Image credits: Material Design.

"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.

Bloom.fm app has a Tab bar full of abstract icons

Bloom.fm app has a Tab bar full of abstract icons

Gestures

Gestural navigation allows users to use swipe gestures to navigate between peer views. Most commonly, mobile apps use cards as content items for such navigation. This type of navigation can be used together with hamburger menu or tab bars.

Tinder app for iOS: navigation integrated into content

Tinder app for iOS: navigation integrated into content

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.

This type of navigation can take users on a journey of what they’re interested in. Menus simply don’t have this engaging effect.
This type of navigation can take users on a journey of what they’re interested in. Menus simply don’t have this engaging effect.

"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.

Conclusion

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.

Picture
Author

Nick Babich is a developer, tech enthusiast, and UX lover. He has spent the last 10 years working in the software industry with a specialized focus on development. He counts advertising, psychology, and cinema among his myriad interests.

1 comment

  • 5d228524891f104c2a4557bc60f0c955

    Martin Scurry on Feb 15, 2017

    Hello Nick

    i want to share one of the good tip here " When holding a tablet, the sides and bottom of the screen are most easily reached with the thumb"

    Thanks

Comments have been closed