Adobe Systems Adobe Creative Cloud

Basic Patterns of Mobile Navigation

Once someone starts using your app, they need to know where to go and how to get there at any point. Good navigation is a vehicle that takes users where they want to go. But establishing good navigation is a challenge on mobile due to the limitations of the small screen and the need to prioritize content over chrome.

Different navigation patterns have been devised to solve this challenge in different ways, but they all suffer from a variety of usability problems. In this article, we’ll examine five basic navigation patterns for mobile apps and describe the strengths and weaknesses of each of them.

Hamburger Menu

Screen space is a precious commodity on mobile, and the hamburger menu (or side drawer) is one of the most popular mobile navigation patterns for helping you save it. The drawer panel allows you to hide the navigation beyond the left edge of the screen and reveal it only upon a user’s action.

In its default state, the hamburger menu and all of its contents remain hidden.

When To Use

The main downside of the hamburger menu is its low discoverability, and it’s not recommended as the main navigation menu. However, this pattern might be an appropriate solution for secondary navigation options. Secondary navigation options are destinations or features that are important for users only in certain circumstances. Being secondary, they can be relegated to less prominent visual placement, as long as users can quickly find a utility when they need it. By hiding these options behind the hamburger icon, designers avoid overwhelming users with too many options.

Uber uses a hamburger icon for this purpose. Because everything about the main screen of the Uber app is focused on requesting a car, there’s no need to display secondary options such as “Payment,” “History” or “Settings.” The normal user flow doesn’t include these actions, and so they can be hidden behind the hamburger icon.

Pros

Cons

Image source: lmjabreu

Out of sight, out of mind. The hamburger menu hides the user’s current location in the app.

Tips

Redbooth’s move from a hamburger menu to a bottom tab bar resulted in increased user sessions. (Image source: LukeW)

YouTube makes the main pieces of core functionality available with one tap, allowing rapid switching between features. (Source: Luke Wroblewski)

Tab Bar

The tab bar pattern is inherited from desktop design. It usually contains relatively few destinations, and those destinations are of similar importance and require direct access from anywhere in the app.

The tab bar doesn’t hide navigation, but allows direct access and presents feedback on the icon it’s related to.

When To Use

Tabbed navigation is a great solution for apps with relatively few top-level navigation options (up to five). The tab bar makes the main pieces of core functionality available with one tap, allowing rapid switching between features.

The tab bar in Twitter lets the user navigate directly to the screen associated with the item.

Pros

The tab bar fairly easily communicates the current location. Properly used visual cues (icons, labels and colors) enable the user to understand their current location at a glance.

Image source: Ramotion)

Tab bars are persistent. The navigation remains in sight no matter what page the user is viewing. The user has clear visibility of all the main app views and has single-click access to them.

With a thumb zone, the bottom navigation is easier to reach with the thumb when the device is held in one hand.

Ideal placement of navigation for the thumb zone, according to UXmag.

Cons

The navigation options are limited. If your app has more than five options, then fitting them in a tab or navigation bar and still keeping an optimum touch-target size would be hard.

Don’t use more than five options in a tab bar.

The location and logic of the tab bar options on iOS and Android are different. Platforms have different rules and guidelines for UI and usability, and you have to take them into consideration when designing a tab bar for a particular platform. Tabs appear at the top of the screen on Android and at the bottom of the screen on iOS. This happens presumably because Android’s control bar at the bottom is hardware. Please note that this rule doesn’t apply to mobile websites, because the experience with them should be consistent regardless of the device used to browse them (Android or iOS).

Proper location and logic will help to maintain a consistent experience with other apps on the platform and prevent confusion between actions and view-switching. Image source: Google

Tips

Most users can comfortably and reliably hit a 10 × 10-millimeter touch target. Image source: UXmag

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

Use text labels to provide short, meaningful definitions to bottom navigation icons.

Priority+ Pattern

The “Priority+” pattern was coined by Michael Scharnagl to describe navigation that exposes what’s deemed to be the most important navigation elements and hides away less important items behind a “more” button.

When to Use

This pattern might be good solution for content-heavy apps and websites with a lot of different sections and pages (such as a news website or a large retailer’s store). The Guardian makes use of the priority+ pattern for its section navigation. Less important items are revealed when the user hits the “All” button.

The Guardian employs the Priority+ pattern for its section navigation. Image credit: bradfrost

Pros

Cons

Floating Action Button

Shaped like a circled icon floating above the UI, the floating action button changes color upon focus and lifts upon selection. It’s well known by all Android users and is a distinct element of material design. Floating above the interface of an app, it promotes user action, says Google.

Floating action button

When to Use

The design of the floating action button hinges on the premise that users will perform a certain action most of the time. You can make this “hero” action even more heroic by reinforcing the sense that it is a core use case of your app. For example, a music app might have a floating action button that represents “play.”

Use the floating action button for actions that are strongly characteristic of your app. Playback tells users that this is a music app.

The button is a natural cue to users for what to do next. In user research, Google found that users understand it as a wayfinding tool. When faced with an unfamiliar screen, as many users are regularly (like when running an app for the first time), they will use the floating action button to navigate. Thus, it is a way to prioritize the most important action you want users to take.

Pros

Cons

A red button stands out from the background and focuses user attention. Image source: Paul van Oijen

Same icon, different meanings: “Compose” in the Gmail and Inbox apps, but “Edit” in
the Snapseed app. Here, context helps to explain the action.

Tips

Multiple floating action buttons should never appear on screen at one time because that would confuse the visual hierarchy.

Full-Screen Navigation

While with other patterns mentioned in this article, you’d be struggling to minimize the space that the navigation systems take up, the full-screen pattern takes the exact opposite approach. This navigation approach usually devotes the home page exclusively to navigation. Users incrementally tap or swipe to reveal additional menu options as they scroll up and down.

Image source: Smashing Magazine

When to Use

This pattern works well in task-based and direction-based websites and apps, especially when users tend to limit themselves to only one branch of the navigation hierarchy during a single session. Funnelling users from broad overview pages to detail pages helps them to home in on what they’re looking for and to focus on content within an individual section.

Full-screen navigation options in Yelp

Pros

Cons

Tips

Image source: Cookly via Dribbble

Gesture-Based Navigation

29 June 2007 was a game changer. From the moment Apple launched the first fully touchscreen smartphone on the market, mobile devices have been dominated by touchscreen interaction.

Image source: Aaron Wade

Gestures immediately became popular among designers, and many apps were designed around experimenting with gesture controls.

Gesture driven to-do app Clear

In today’s world, the success of a mobile app can largely depend on how well gestures are implemented in the user experience.

When to Use

This pattern is good when users want to explore the details of particular content easily and intuitively. Users will spend more time with content than they will with navigation menus. So, one of the reasons to use in-context gestures instead of a standard menu is that it’s more engaging. For example, as users view page content, they can tap on a card to learn more.

Ramotion

Pros

Cons

The navigation is invisible. One important rule in designing a UI is visibility: Through the menus, all possible actions should be made visible and, therefore, easily discoverable. An invisible UI can be seductively beautiful, but because it’s invisible, it will likely have many usability issues.

User effort increases. Most gestures are neither natural nor easy to learn or remember. When designing gesture-based navigation, be aware that every time you remove UI clutter, the application’s learning curve goes up; and without proper visual hints and cues, users could get confused about how to interact with the app.

Tips

Pudding Monsters uses an animated hand to present a new scenario to users.

3D Touch

3D Touch is a subtle touch mechanism that was first introduced in Apple’s iPhone 6s and 6s Plus. It allows for some new interactions, which Apple defines in two main categories:

3D Touch quick-action shortcuts for the camera, messages and maps apps.

3D Touch immediately previews an email, which disappears when the user removes their finger. Image source: Gizmodo

When to Use

Using 3D Touch, you can make the most frequent actions the most accessible. Think of 3D Touch like keyboard shortcuts on a desktop computer: They enable people to do repeated tasks more quickly. You can use 3D Touch to help users skip a few steps or to avoid unnecessary steps altogether.

From the home screen, the camera lets users access common features: taking a selfie, recording video or taking a normal photo. Image source: Gizmodo

However, just like keyboard shortcuts, essential features shouldn’t be exclusive to 3D Touch. Users must be able to operate your app normally without it.

Pros

Cons

Innovative Navigation Patterns

People are shifting to larger-screen phones. Large smartphones don’t surprise anyone anymore. But the bigger the display is, the less easily accessible most of the screen is, and the more necessary it is to adapt the design (and navigation, in particular) to improve the user experience.

Image source: LukeW

To solve this problem, designers are forced to look for new solutions to navigation. A couple of interesting innovative solutions can be found in the recently published article “Bottom Navigation Interface.” One solution can be found in a health app named Ada. This app’s interface layout is a mirror image of a basic interface with a hamburger menu: Everything that’s usually at the top is conveniently at the bottom, in the easy-to-access zone.

The start screen in Ada for iOS.

The second solution is a concept for a calling app that applies one-handed navigation principles. The method feels good for calling and messaging apps because users tend to use one hand for dialing and texting.

Image source: cuberto

Conclusion

Helping users navigate should be a high priority for every app designer. Both new and returning users should be able to figure out how to move through your app with ease. The easier your product is for them to use, the more likely they’ll use it.