What Makes A Great Tab Bar In Mobile Apps

Tab bars (also called „navigation bars“ in Material Design) have been the primary navigation pattern in mobile apps for years. Placed at the bottom of the screen, they are always present, easy to reach, and communicate the app's contents.

Unfortunately, many apps still struggle to present users with a great primary navigation in the form of a tab bar.

Use Icons And Labels

One of the common problems is the use of icons as the only element that communicates the contents of a tab. Even if some icons seem to be obvious to many of us (like magnifying glasses for searching), there are still people who do not associate a certain symbol with a certain meaning. This gets worse the more app-specific a feature or section becomes.

As such, it is recommended to use labels in combination with icons in a tab bar. This helps to avoid misunderstandings and clearly communicates what the app has to offer.

All Tabs Are Equally Important

Another problem that is not as obvious as missing labels is how the app structures its contents across the tab bar. It is quite common to see four to five tabs with the first one being a „home“ or „start“ tab. This is usually an indicator of either lazy or complex and evolved information architecture design.

What happens is that users tend to spend more and more time in the first tab and less and less in other tabs. One of the remaining tabs could be „profile“ or „settings“, something you do not use most of the time when using the app. Or, even worse, it’s a tab labeled „more“.

When all primary use cases are placed in the first tab (since they are the most important and have to be the most important tab, right?), the original idea behind a tab bar is lost. The tab bar presents the sections of the app, they are all equally important, and on the same level of the hierarchy.

Thus, a truly great tab bar manages to spread all the main use cases of the app across the tab bar and encourages users to use all tabs equally. This also helps to keep the contents and information density of a single tab manageable and easy to understand.

Airbnb is a good example of this. The tab bar spans the whole user journey from start to finish. You explore places to visit, save your favorites to your wishlist, book a trip, and talk to your host before, during, and after the trip.

Good tab bars have labels and icons, and great tab bars sit on the shoulders of good information architecture.