Designers know that design is more than good looks. “The design is how it works” (Steve Jobs) Product experience is just like a conversation and navigation plays an important part in this conversation. Unable to navigate in the app feels similar to unable to find the right words in your conversation. That’s why today we will explore one of the most efficient ways of creating good mobile navigation-bottom navigation.

Why bottom navigation is so important?

Steven Hoober in his research of mobile devices usage, found that 49% of people rely on a one thumb to get things done on their phones. In figure below, the diagram that appears on the mobile phones’ screens are approximate reach charts, in which the colors indicate what areas a user can reach with the thumb to interact with the screen. 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 in which they’re holding a device.

It means that:

It’s important to place top-level and frequently-used actions at the bottom of the screen, because they are comfortably reached with one-thumb interactions.

How to design bottom navigation

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

3 Crucial Moments for Bottom Navigation Design

Good bottom navigation design follows these three rules.

1. Show only the most important destinations

Bottom navigation should be used for the top-level destinations of similar importance. These destinations requiring direct access from anywhere in the app. Strive for three to five top-level destinations in bottom navigation.

Do not put more than five destinations in bottom navigation because tap targets will be too tiny and located too close to one another. As a result, you will putting too many tabs in a tab bar can make it physically difficult for people to tap the one they want. More to this, 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 destinations not covered in bottom navigation through alternative locations.

Avoid Scrollable Content

Partially hidden navigation such as scrollable tab bar is a pretty obvious solution for small screens. But it’s vital to remember that scrollable content is less efficient, since you have to scroll once before you’re even allowed to see the option you want. Thus, do not use it as a primary navigation method. At the same time, scrollable tab can be used in some areas of your product that has too many options (i.e. photo editing in mobile app)

2. Communicate the Current Location

Failing to indicate the user’ current location is probably the single most common mistake to see on apps menus. “Where am I?” is a fundamental question that users need to answer to successfully navigate. You should use the proper visual cues (icons, labels and colors) so that the navigation doesn’t require any explanation.

Icons

Because bottom navigation actions are presented as icons, they should be used for content that can be suitably communicated with icons. There are a universal icons that users are familiar with—icons like search, email, print and so on. Unfortunately “universal” icons are rare. And app designers often hide functionality behind icons that are actually pretty hard to recognize. I’ve highlighted this problem in article Icons as Part of an Awesome User Experience. Thus, when you select icons, conduct usability testing to ensure that users do not have any problems decoding the meaning.

Color

Avoid using different colored icons and text labels in your bottom tab bar because it will make your app look like a Christmas tree and distract users from the interaction. Instead, use the app’s primary color to indicate the view in focus.Left: Different colored icons makes your app look like a christmas tree. Right: Use only one primary color insead.

Follow a simple rule — tint the current bottom navigation action (including the icon and any text label present) with the app’s primary color.

If the bottom navigation bar is colored, make the icon and text label of the current action black or white.Left: Avoid pairing colored icons with a colored bottom navigation bar. Right: Use black or white iconography.

Text Labels

Menu elements should be easy to scan. Users should be able to understand what exactly happens when they tap on a element. Text labels should provide short and meaningfully definitions to navigation icons. Do not use labels with more than two words.Avoid wrapping, truncating and shrinking text labels.

Target Size

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

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

3. Make navigation self-evident

Predictable behavior

Each bottom navigation option must lead to a target destination. Tapping on a bottom navigation icon should guide user directly to the associated view. It should not open menus or other pop-ups.

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.Toolbar for iOS.

Strive for Consistency

As much as possible, display the same options in tab bar in every part of the product. It will give users a sense of 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 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 have them. This feature called Empty state.

Hide It

If the screen is a scrolling feed, the tab bar can be hidden when people scrolling for new content and revealed if they start pulling down trying to get back to the top.

Clear state transitions

Avoid using lateral motion to transition between views. Transition between active and inactive views should use a cross-fade.Cross-fade animation. Source: Material Design.

Conclusion

Helping users navigate should be a high priority for almost every site and app. The easier your product is for people to use, the more likely they’ll be to use it. And when you design bottom navigation, remember to make it:

• Visible and Well-Structured (Use three to five top-level destinations and avoid scrollable content in bottom navigation).
• Clear (Bar elements should be easy to scan and targets should be big enough to be easily tapped).
• Simple (Make sure that each navigation icon lead to the proper destination and use all elements, including bottom navigation, across your application consistently).

Follow UX Planet: Twitter | Facebook

Originally published at babich.biz