8 bottom navigation bar design tips extracted from mainstream overseas products

Hello everyone, I am Clippp. Today I will introduce the article about the design of the bottom navigation bar. Many popular products have design considerations that are worth learning and drawing lessons from. By analyzing mainstream overseas products, I will help you master the basic knowledge of the bottom navigation bar (Tab Bar), find solutions to problems and develop creative thinking.

Before you begin, please think about the following two questions:

Question 1: Does your product really need a Tab Bar?

It seems not. Although most mainstream products such as Taobao, WeChat, Weibo, and Meituan are using Tab Bar, it does not mean that all products need it.

Many apps do not have Tab Bar, such as Calendar, Calculator, Didi, Uber, etc. Whether to use Tab Bar in an app should be considered flexibly according to different situations.

Question 2: Why should the product have a Tab Bar?

The answer is for ease of use, which means using a simple design like the Tab Bar to easily help users navigate to the page.

After understanding the above problems, the next step is to consider how to design the Tab Bar to better meet user needs and experience.

1. Display the most important information

The navigation bar should contain only the most useful information and should not be cluttered with too many useless labels. Many apps add search functionality to the navigation bar because it helps users navigate and retrieve content faster.

In the Spotify bottom navigation, the Home option is used to play or listen to all content, the Search option is used to search for the next song and podcast, the Music Library option is used to play favorite and saved songs in the playlist, and the separate Membership option allows users to easily click and quickly complete the purchase operation.

2. Expand navigation functionality

Mainstream apps prefer to use 4-5 tabs in the bottom navigation bar, which keeps the navigation bar tidy and avoids the situation where too many tabs make it difficult for users to accurately click on options.

Pinterest only has four options on the navigation bar, which helps users click easily. The message option will update the number of messages in real time, which is very intuitive for users. In addition, the search function is included in the navigation bar, making it easy to switch back and forth between the home page and search results.

3. Accommodate various label formats

Most apps use an “icon + text” label format in the bottom navigation bar, which can clearly inform users of the results after clicking the label.

Sometimes we also see that some products’ navigation bars only have icons but no text, but this form does not affect our operation, because when the navigation bar labels use shapes and connotations that users are particularly familiar with, text can be completely omitted.

The navigation bar of the IKEA App uses icons that are familiar to the public, so even without adding text, we can clearly know that these three icons represent the home page, category, and mine respectively.

Compared with IKEA, Youtube's navigation bar seems a bit complicated. Since users may not be very familiar with the meaning of Youtube's icons, it is necessary to add text descriptions.

4. Text labels should be short

Text labels should be short and clear. Accurate text descriptions play a key role in helping users use the correct navigation.

All the text labels in TikTok navigation are short, and the add icon in the middle hides the text to attract users' attention.

5. Avoid hiding the navigation bar

Tab Bar usually contains the most important navigation information and should always be displayed to the user to avoid being hidden when the user scrolls the page.

The design of the Pinterest navigation bar is an exception. When the page is scrolled, the navigation bar at the bottom will hide. The reason for this design may be to prevent the navigation bar from blocking the image and ensure that users can see more image content.

6. Communicate location

Tab Bar helps users navigate easily, but if users don’t know where they are, it will affect their experience of browsing and using the product.

The Duolingo App changes the style of navigation icons to allow users to clearly know all their sections.

Headspace adds a line decoration to the bottom navigation bar. Every time you switch options, the line will switch with it to ensure that users are informed of the exact location.

7. Learn from feedback and keep improving

Feedback is key. If you want to improve your product’s navigation bar design, consider and test which navigation option your users like best, which they don’t use, whether they need four or five options, etc.

Pinterest continuously improves the design of the navigation bar by collecting user feedback to help users use the product more conveniently. These continuous improvements are the key to the product's success.

8. Show updates in the navigation bar

Tab Bar not only serves as a navigation function, but can also inform users of more information through state changes in many cases.

In the Twitter homepage navigation, when new content is pushed, the homepage will show an updated status to prompt users to check out the new content. This design is used in many mainstream products such as Youtube and Pinterest.