Menu Search
Jump to the content X X

Sponsored Article The Golden Rules Of Bottom Navigation Design

Design is more than just good looks – something all designers should know. Design also covers how users engage with a product. Whether it’s a site or app, it’s more like a conversation. Navigation is a conversation. It doesn’t matter how good your site or app is if users can’t find their way around.

In this post, we’ll help you better understand the principles of good navigation for mobile apps, then show you how it’s done using two popular patterns. If you want to take a go at prototyping your own navigation, you can download and test Adobe’s Experience Design CC1 for free and get started right away.

Further Reading on SmashingMag: Link

Let’s Get Started Link

Navigation UI patterns are a shortcut for good usability. When you examine the most successful interaction navigation designs of recent years, the clear winners are those who execute fundamentals flawlessly. While thinking outside the box is usually a good idea, there are some rules that you just can’t break. Here are four important rules for creating a great mobile navigation:

Simple Link

First, and most importantly, a navigation system must be simple. Good navigation should feel like an invisible hand that guides the user. An approach to this is to prioritize content and navigation for mobile apps according to the tasks a mobile user is most likely to carry out.

Visible Link

As Jakob Nielsen says5, recognizing something is easier than remembering it. This means that you should minimize the user’s memory load by making actions and options visible. Navigation should be available at all times, not just when we anticipate a user needs it.

Clear Link

Navigation function must be self-evident. You need to focus on delivering messages in a clear and concise manner. Users should know how to go from point A to point B on first glance, without any outside guidance. Think of the shopping cart icon; it serves as an identifier to check out or view items. Users don’t have to think about how to navigate to make a purchase; this element directs them to the appropriate action.

Consistent Link

The navigation system for all views should be the same. Don’t move the navigation controls to a new location on different pages. Do not confuse your user — keep words and actions consistent. Your navigation should use “The Principle of Least Surprise.”6  Navigation should inspire users to engage and interact with the content you are delivering.

Design With Thumbs In Mind Link

In his research7 on mobile device usage, Steven Hoober has found that 49% of people rely on one-thumb to accomplish things on their phones. In the figure below, the diagrams on the mobile phones’ screens are approximate reach charts, in which the colors indicate what areas of a screen a user can reach and interact with their thumb. Green indicates the area a user can reach easily; yellow, an area that requires a stretch; and red, an area that requires users to shift the way they’re holding a device.

bottom navigation thumbs8

Representation of the comfort of a person’s one-handed reach on a smartphone. Image Source: uxmatters9

When designing, take into account that your app will be used in  several contexts; even people who prefer to use a two-handed grip will not always be in a situation where they can use more than one finger, let alone both hands to interact with your UI. It’s very important to place top-level and frequently-used actions at the bottom of the screen. This way, they are comfortably reached with one-handed and one-thumb interactions.

Another important point — bottom navigation should be used for the top-level destinations of similar importance. These are destinations that require direct access from anywhere in the app.

Last but not least, pay attention to the size of targets. Microsoft suggests10 you set your touch target size to 9 mm square or greater (48×48 pixels on a 135 PPI display at a 1.0x scaling). Avoid using touch targets that are less than 7 mm square.

11

Touch targets shouldn’t be smaller than 44px to 48px (or 11mm to 13mm), padding included.

Tab Bar Link

Many apps use the tab bar for an app’s most important features. Facebook makes main pieces of core functionality available with one tap, allowing rapid switching between features.

bottom navigation12

Facebook bottom tab bar for iOS. (Large preview13)

Three Crucial Moments For Bottom Navigation Design Link

Navigation is generally the vehicle that takes users where they want to go. Bottom navigation should be used for the designated top-level destinations of similar importance. These are destinations requiring direct access from anywhere in the app. Good bottom navigation design follows these three rules.

1. Show Only The Most Important Destinations Link

Avoid using more than five destinations in bottom navigation as tap targets will be situated too close to one another. Putting too many tabs in a tab bar can make it physically difficult for people to tap the one they want. And, with each additional tab you display, you increase the complexity of your app. If your top-level navigation has more than five destinations, provide access to the additional destinations through alternative locations.

Avoid using more than five destinations

Avoid using more than five destinations.

Avoid Scrollable Content Link

Partially hidden navigation seems to be an obvious solution for small screens — you don’t have to worry about the limited screen estate, just place your navigation options into a scrollable tab. However, scrollable content is less efficient, since users may have to scroll before they’re able to see the option they want, so it is best to avoid if at all possible.

Avoid scrollable content in tab bar

Out of sight, out of mind. You should avoid placing too many items in the tab bar to prevent users from scrolling before they can click on the option they want.

2. Communicating The Current Location Link

The single most common mistake seen on app menus is failing to indicate the user’s current location. “Where am I?” is one of the fundamental questions users need to answer to successfully navigate. Users should know how to go from point A to point B based on their first glance and without any guidance from the outside. You should use the proper visual cues (icons, labels, and colors), so the navigation doesn’t require any explanation.

Icons Link

Bottom navigation actions should be used for content that can be suitably communicated with icons. While there are universal icons that users know well, mostly they are representing functionality like search, email, print and so on. Unfortunately “universal” icons are rare. Unfortunately, app designers often hide functionality behind icons that are actually pretty hard to recognize.

Abstract and meaningless icons in the bottom navigation14
In this previous version of Bloom.fm app for Android, it’s hard to understand the user’s current location.

I’ve highlighted this problem in the article Icons as Part of a Great User Experience15.

Color Link

Avoid using different colored icons and text labels in your bottom tab bar. Instead, follow this simple rule – tint the current bottom navigation action (including the icon and any text label present) with the app’s primary color.

Use only one primary color insead to focus on an icon16

Left: Different colored icons makes your app look like a Christmas tree. Right: Use only one primary color insead.
Alt-Text

This is the bottom bar menu in the Twitter app for iOS. The messages view is active.

If the bottom navigation bar is colored, make sure to use black or white for the icon and text label of the current location.

Alt-Text

Left: Avoid pairing colored icons with a colored bottom navigation bar. Right: Use black or white iconography.

Text Labels Link

Text labels should provide short and meaningfully definitions to navigation icons. Avoid long text labels as they do not truncate or wrap.

Avoid long text labels17

Avoid wrapping, truncating and shrinking text labels.

Menu elements should be easy to scan. Users should be able to understand what exactly happens when they tap on an element.

Target Size Link

Make targets big enough to be easily tapped or clicked. To calculate the width of each bottom navigation action, divide the width of the view by the number of actions. Alternatively, make all bottom navigation actions the width of the largest action.

Android guidelines suggest following dimensions for the bottom navigation bar on mobile.

target-size-bottom-menu.png18

This shows a fixed bottom navigation bar on mobile with the units in density-independent pixels (dp). Source: Material Design.

Badge on a Tab Link

You can display a badge on a tab bar icon to indicate that there is new information associated with that view or mode.

badging-the-active-tab19

Consider badging a tab bar icon to communicate unobtrusively.

3. Make Navigation Self-Evident Link

Good navigation should feel like an invisible hand that guides the user along their journey. After all, even the coolest feature or the most compelling content is useless if people can’t find it.

Behavior Link

Each bottom navigation icon must lead to a target destination, and should not open menus or other pop-ups. Tapping on a bottom navigation icon should guide a user directly to the associated view, or refreshes the currently active view. Don’t use a tab bar to give users controls that act on elements in the current screen or app mode. If you need to provide controls, use a toolbar instead.

bottom-navigation-icloud

Each bottom navigation icon must lead to a target destination.
use-toolbar-for-current-screen-controls20

To provide on-screen controls, use a toolbar instead of the bottom navigatoin.

Strive for Consistency Link

As much as possible, display the same tabs in every orientation. It’s best when you can give users a sense of visual stability.

Don’t remove a tab when its function is unavailable. If you remove a tab in some cases but not in others, you make your app’s UI unstable and unpredictable. The best solution is to ensure that all tabs are enabled, but explain why a tab’s content is unavailable. For example, if the user doesn’t have offline files, the Offline tab in the Dropbox app displays a screen that explains how to obtain them. This feature called Empty state21.

use-toolbar-for-current-screen-controls22

The empty state screen for the Dropbox app

Hiding the tab bar upon scrolling Link

If the screen is a scrolling feed, the tab bar can be hidden when people are scrolling for new content and revealed when they start heading back to the top.

hide-navigation-when-scrolling.gif

The upper tab navigation can disappear dynamically upon scrolling.

Visual Delight Link

Avoid using lateral motion to transition between views. Transitioning between active and inactive views should use a cross-fade animation.

hide-navigation-when-scrolling.gif23

Cross-fade animation Source: Material Design.

Pictorial Icons: Creative Navigation Link

The size of the display is a major challenge in communicating your point to the user. Using pictorial icons as menu elements is one of the most interesting solutions to the problem of saving mobile screen space. The shape of the icon explains where it will take you, making them more space-efficient. They can make navigation simple and easy-to-use, but still with enough freedom to separate you from others.

Floating Action Buttons24

Google Material Design, Floating Action Button

Google Material Design uses the term Floating Action Buttons25 for this type of navigation. They are distinguished by a circled icon floating above the UI and have motion behaviors. Apps like Evernote simplified these controls by using a floating action button for the most important user actions.

26

A floating action button in Evernote app for Android Image Source: Evernote27. (Large preview28)

Tumblr has nice pictorial icons as well as proper labels for them. These icons also conveniently disappear when you’re just scrolling through the app.

29

Tumblr30 mobile application. (Large preview31)

However, this pattern has one major downside — the floating action button conceals content. From a UX point32 of view, users shouldn’t have to take an action to discover what other actions they can take.

Also, many researchers33 have shown that icons are hard to memorize and are often highly inefficient. Only universally understood icons work well (e.g. print, close, play/pause, reply, tweet). That’s why it’s important to make your icons clear and intuitive, and introduce text labels next to your icons.

Conclusion Link

Navigation is generally the vehicle that takes users where they want to go. Always think about your user persona, and the goals they have when using your app. Then, tailor your navigation to help them meet those goals. You’re designing for your users. The easier your product is for them to use, the more likely they are to use it.

This article is part of the UX design series sponsored by Adobe. The newly introduced Experience Design app34 is made for a fast and fluid UX design process, creating interactive navigation prototypes, as well as testing and sharing them — all in one place.

You can check out more inspiring projects created with Adobe XD on Behance35, and also visit the Adobe XD blog to stay updated and informed. Adobe XD is being updated with new features frequently, and since it’s in public Beta, you can download and test it for free36.

(ms,aa)

Footnotes Link

  1. 1 http://adobe.ly/2dHqYbP
  2. 2 https://www.smashingmagazine.com/2016/09/the-thumb-zone-designing-for-mobile-users/
  3. 3 https://www.smashingmagazine.com/2017/02/shadows-blur-effects-user-interface-design/
  4. 4 https://www.smashingmagazine.com/2017/01/more-than-just-pretty-how-imagery-drives-user-experience/
  5. 5 https://www.nngroup.com/articles/ten-usability-heuristics/
  6. 6 https://en.wikipedia.org/wiki/Principle_of_least_astonishment
  7. 7 https://www.smashingmagazine.com/2016/09/the-thumb-zone-designing-for-mobile-users/
  8. 8 https://www.smashingmagazine.com/wp-content/uploads/2016/10/Representation-of-the-comfort-of-a-person-one-handed-reach-on-a-smartphone-preview-opt.png
  9. 9 http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
  10. 10 https://msdn.microsoft.com/en-us/windows/uwp/input-and-devices/guidelines-for-targeting
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2016/10/Touch-targets-preview-opt.png
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2016/10/Facebook-bottom-tab-bar-for-iOS-large-opt.png
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2016/10/Facebook-bottom-tab-bar-for-iOS-large-opt.png
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2016/11/abstract-icons.png
  15. 15 https://www.smashingmagazine.com/2016/10/icons-as-part-of-a-great-user-experience/
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2016/11/meaningful-text-navigation-icons.jpeg
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2016/11/text-labels-large.jpeg
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2016/11/target-size-bottom-menu.png
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2016/11/badging-the-active-tab.png
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2016/11/use-toolbar-for-current-screen-controls.png
  21. 21 http://babich.biz/empty-state-mobile-app-nice-to-have-essential/
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2016/11/empty-state-dropbox.png
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2016/11/cross-fade-animation.gif
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/2016/11/floating-action-button-material-design.png
  25. 25 https://www.google.com/design/spec/components/buttons-floating-action-button.html
  26. 26 https://www.smashingmagazine.com/wp-content/uploads/2016/10/Floating-action-button-in-Evernote-app-for-Android.gif
  27. 27 https://blog.evernote.com/blog/2015/03/11/evernote-for-android-gets-a-material-design-update/
  28. 28 https://www.smashingmagazine.com/wp-content/uploads/2016/10/Floating-action-button-in-Evernote-app-for-Android.gif
  29. 29 https://www.smashingmagazine.com/wp-content/uploads/2016/10/Tumblr-mobile-application-preview-opt.jpg
  30. 30 https://www.tumblr.com/
  31. 31 https://www.smashingmagazine.com/wp-content/uploads/2016/10/Tumblr-mobile-application-preview-opt.jpg
  32. 32 http://www.lukew.com/ff/entry.asp?1945
  33. 33 https://www.nngroup.com/articles/icon-usability/
  34. 34 http://adobe.ly/2dHqYbP
  35. 35 http://adobe.ly/1U9LS0E
  36. 36 http://adobe.ly/2dHqYbP

↑ Back to top Tweet itShare on Facebook

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

    Elevated Third

    November 2, 2016 4:40 pm

    Design should be simple, useful, and beautiful, like a good conversation.

    -5
  2. 2

    Just remember that Apple is holding this back from working on web. Let’s say you have a fixed footer nav with a search bar that can pop up in it…

    On iOS all fixed elements become absolutely positioned elements when an input is focused. So if a user clicks into the search bar and then scrolls your nav is now in the middle of the screen.

    3
  3. 3

    Great article, shame responsive mobile sites viewed on iPhone Safari has a small area that can’t be pressed at the bottom. The bottom area is used to reveal the browsers own menu. I ends up being 2 touches to activate bottom menu. This pattern is hackable but not ideal.

    3
  4. 4

    Abhishek Joshi

    November 3, 2016 7:54 am

    AVOID SCROLLABLE CONTENT:

    In first example you have u, an image editor where bottom navigation is not “actual navigation” but are available options which a user can try/apply on image without going to some other screen. This is perfect example of “grouping of similar kind” and here, in case of an image editor, ‘out of sight’ makes perfect sense.

    Also, scrolling takes relatively more effort than tapping. So this line is a bad assumption : “… that it is preventing users from scrolling before they can click”

    Btw, that should be ‘tap’ not ‘click’.
    ‘Click’ makes more sense for desktops.

    Take example of Instagram, Aviary, Apple and BB default image editors.
    For options of similar kind, it is perfectly fine to provide horizontal scroll.
    For an image editor, it is perfectly fine to use this strategy because main focus is on image and we do not want to lose focus due to some screen transition.

    Please use different example for scrollable content.

    -2
  5. 5

    While bottom bars are a common thing on iOS devices (which have a physical “home”-button at the bottom) they are not so common on android devices (which usually have 3 soft-keys in that area).
    I guess this is because of the higher risk of an accidental misuse which would probably through you out of your current app. You would have to add extra margin in between bar and OS-keys.
    That’s why Google uses the floating action button which has more distance to the bottom.
    Sony Mail App for example has a floating button which expands horizontally which I think is quite nice.

    3
    • 6

      But you should use the floating action button for actions, not navigation, right?

      1
    • 7

      The bottom navigation bar wasn’t in the Material Design spec until 03/2016, a lot of apps used either menu drawer or tabs for global nav before that time. Now that the bottom nav is there at least we are able to create unified navs between ios and android apps.

      0
  6. 8

    Ecphasis infotech

    November 3, 2016 9:41 am

    As I am new to mobile application developer,This is an eye opener to get to know about importance of each website designing elements

    1
  7. 9

    Timofey Petrov

    November 3, 2016 10:19 am

    Hello! Thanks for great article!
    “Avoid using lateral motion to transition between views.” – please, help me understand this point. I think lateral motion is great for spatial mental model.

    2
  8. 10

    “Avoid using lateral motion to transition between views. Transitioning between active and inactive views should use a cross-fade animation.” Care to elaborate why exactly? This seems like super dogmatic and awful advice, especially considering iOS where instant (animationless) view switching is the norm.

    0
  9. 11

    Steven Hoober

    November 3, 2016 7:00 pm

    > Steven Hoober has found that 49% of people rely on
    > one-thumb to accomplish things on their phones

    Well, this is misunderstood and misquoted a lot. One thumb does not mean one thumb and one hand. A LOT of that use is by people cradling the phone, using both hands.

    And this is from my first of many research reports. The reach charts are wrong in the end. The most easy to tap area is…

    …wait for it…

    The center. Josh’s thumb sweep charts are not true. I have a lot of observations, and have referenced other studies with a few million more observations. The center is preferred, and by far the most accurate.

    Summaries and links to all reports and some key presentations here: 4ourth.com/Touch

    So what to do? Not bottom nav, not tabs. Both are perilous and perform poorly. Recognize what primary content is, and make the center of the page all about that. Secondary functions along the edges, tertiary in menus (and if you do that, they work fine). Think about email or facebook or twitter: you come there, and first read stuff. Most actions are to an item in the list, not to any menu, action buttons, tabs, etc.

    Material design has done a good job with first-secondary actions. Compose a new Gmail? Big button well OFF the bottom edge of the screen. On purpose.

    3
  10. 12

    Michał Sadowski

    November 4, 2016 12:54 pm

    I just wanted to tell you that this is the quality of sponsored articles I’d love to see.
    In a way it’s all designers should know already, but on the other hand it’s crucial so you can use it as an argument when discussing design with stakeholders.

    1
  11. 13

    UXdesignresearch

    November 5, 2016 2:39 pm

    ‘Avoid using lateral motion to transition between views. Transitioning between active and inactive views should use a cross-fade animation.’ – would it be possible to get more details on the rationale behind this? Many thanks.

    0
  12. 14

    Just noticed you also promote 44px. Please, please no one believe that anymore.

    I have scads of data, but you can logic it out: touch accuracy is about people, not devices. A pixel varies by device. Your finger doesn’t change.

    Apple is wrong.

    1

↑ Back to top