Bottom Tab Bar 




Three Crucial Moments For Bottom Navigation Design 

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

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 SCROLLABLE CONTENT
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.

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


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 

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.

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 Experience.  Color 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.


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

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.


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

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


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


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

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


Consider badging a tab bar icon to communicate unobtrusively.

3. Make Navigation Self-Evident 

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


Each bottom navigation icon must lead to a target destination.

To provide on-screen controls, use a toolbar instead of the bottom navigation.
STRIVE FOR CONSISTENCY 

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 state.
Bottom Tab bar
Published:

Bottom Tab bar

Published: