User experience: Bottom navigation design for mobile APP UI

Designers know that design is not just for good looks. Design also determines how users fit into a product, whether it's a website or an app. It's a conversation. A navigation menu is a conversation. Because if the user doesn't understand how to use it, your website or app will be no good.

Image source: Behance

Why is bottom navigation so important?

Steven Hoober in his research on the use of mobile devices found that 49% of people rely on one finger to complete the operation on their phones. In, the screen of the phone shows the approximate touch range, and the different colors indicate the area that the user can touch on the screen with his thumb. Green means easy to touch, yellow means you need to stretch your finger, red means you need to change the way you hold it.

The picture shows the comfort level of one-handed operation of the smartphone. Image source: Uxmatters

　　It is important to put the most important and most common operations on the bottom of the screen because they can be easily touched with one finger.

tab bar

Many applications follow this rule by using the bottom navigation (also known as the Tab bar) as the most important app feature. Facebook's core functionality is a touch away and can quickly switch between features.

Facebook's IOS bottom tab bar.

3 keys for bottom navigation design

Navigation is usually carried by the user's vehicle. Bottom navigation should host top-level destinations of equal importance. These destinations need to have a direct access anywhere in the app.

The excellent bottom navigation design follows the following 3 laws:

1. Show only the most important destinations

Use 3 to 5 top destinations in the bottom navigation. If less than 3, consider using a label instead.

The bottom design navigation avoids using more than 5, because the click Target is too close to each other. Placing too many items in the tab bar makes it difficult for people to point their goals. The complexity of the app adds a point to each more display of a label.

If your top-level destination does have more than 5, do not use the bottom navigation to host these portals, consider placing them in a different location.

Avoid content scrolling

The obvious solution on a small screen is partially hidden navigation--you don't have to worry about the limitations of the screen space, put the tab item in the Scrolling tab bar. But scrolling content is inefficient because you have to swipe to see the options you want.

There is a "can't see" problem in the iOS version of Rookie Cam app.

2. Express the current position

There is no representation of the current location, which may be the most common error in the app menu. "Where am I?" "is one of the basic questions that users need to answer, which is a prerequisite for smooth operation.

The user should see how to go from a to B without any external boot. The appropriate visual cues (icons, labels, and colors) should be provided, and no explanation is required for the operation.

Icon

Because the bottom navigation is represented by an icon, the content they express should be appropriate to be represented by an icon. Some users are familiar with common icons, which usually represent search, mail, print and other functions. Unfortunately, the "generic" icons are few. App designers often use icons to represent very hard-to-distinguish features.

The old version of the Bloom.fm app is Android version. It's quite difficult to understand where the user is currently located.

I highlighted this issue in this article, "The icon is part of a good user experience."

Color

Avoid using different color icons and text labels at the bottom of the tab bar. You should use the app's main color to represent the visual focus.

Left: Icons of different colors make the app look like a Christmas tree. Right: The main color should be used only.

Follow a simple rule-use the app's main color to brighten the current bottom navigation (including icons and text tags).

The bottom menu bar of the iOS version of Twitter. Messages is the currently selected item.

If the bottom navigation bar has a background color, use black and white icons and text labels.

Left: Avoid using a combination of colored icons and colored backgrounds. Right: Use black and white graphics.

Text labels

Text labels provide a short, meaningful description of the navigation icon. Do not use labels that are too long because they cannot be truncated or wrapped.

Avoid line wrapping, truncation, and narrowing of text labels.

Menu elements are easy to navigate. The user should be able to understand what happens when he clicks on an element.

Click Size

The target area is large enough to be easily clicked. Calculates the width of each bottom navigation action item by dividing the interface width by the number of action items. Or, set the width of all bottom navigation items to the widest.

The Android Spec recommends that the bottom navigation bar of the mobile end be designed according to the dimensions.

Fixed navigation bar on the mobile side. The unit is a logical pixel (DP). Source: Material Design.

Little Red dots on the tab bar

You can display a small red dot in the tab bar, indicating that there is new information associated with it.

You can add a small red dot to the tag bar icon in a low-key way.

3. Let the navigation be self-explanatory

Excellent navigation should feel like an invisible hand, guiding the user in the way of operation. After all, the coolest features and the most compelling content are useless if users can't find them.

Performance

Each bottom navigation icon leads to a destination. Instead of opening a menu or other pop-up window. Tap the bottom navigation icon to go directly to the interface or refresh the currently active interface.

Do not use the tab bar to provide controls to manipulate elements in the current interface or app mode. If you need to provide an action item, use the toolbar instead.

The iOS toolbar

Stay Unified

Display the tab bar as much as possible in each case. This will give the user a visual sense of reliability.

Do not remove a label because the feature is not available. If you remove a tag in some cases, other things will make sure your app's interface feels unreliable and unpredictable. The best solution is to ensure that all tags are available and then explain why a tag has no content. For example, if a user doesn't have an offline file, the Offline tab in Dropbox will show you an interface that teaches you how to add it. This function is empty.

The empty state interface of the Dropbox app.

Hide Tab Bar

If the interface is a scrolling flow of information, the tab bar can be hidden when scrolling through more content, swipe down to try to return to the top and then display.

The bottom navigation bar can be dynamically displayed and hidden based on scrolling.

Visual Pleasure

Avoid using lateral sliding motion to switch the interface. Active and inactive interfaces, toggle transitions should use the overlay fade effect.

Overlay fade animations. Source: Tancheng Life Circle http://www.0539g.com

Summarize

The bottom navigation should:

　　visible and structurally sound (use 3 to 5 top-level destinations and avoid scrollable content)

　　Clear (navigation bar elements to be easy to navigate, click the area to be large enough, easy to operate)

　　Simple (ensure that each navigation icon leads to the right destination, and that you can reach all elements through the bottom navigation)

User experience: Bottom navigation design for mobile APP UI