Tabs help organize content on a high level and makes it easy for the users to figure out navigation. It has to communicate relationship and context. It provides an elegant solution to the age-old problem of navigation plus it can also segment data based on a given criteria. In both cases it has to:

• Show the user what is available to pick from
• Show the user where she’s at

Navigation

When using tabs for navigation you need to figure out the typical paths the user takes to address multiple jobs within your app. Let’s say you are building a booking app. Your tab navigation items could be “New reservation”, “Upcoming” and “Past bookings”. It might be something else, but to find the fitting navigation learn about the jobs the app is solving for your users and you’ll have yourself some pretty solid categories.

Segmenting data

Tabs can be used to break up content into manageable chunks. It makes finding things faster and more efficient. Think of it as a high-level filter. So in the case of a newspaper it could be the different topics that are covered, like “Tech”, “Business”, “Design”, “Startups”. This gives the user direction and helps them find their way around your content.

Where am I

The tab navigation has to clearly signal where the user is at the moment. It’s like looking at a map with a huge “you are here” marker, which helps you to locate where you are in reference to other options. The same applies to navigation in your app. Knowing where you are and can go helps you quickly visualize how to get there. Make sure to clearly mark the active tab and show relevant information to the selected group or category.

Where can I go

It is important to show the user what are the options. These should be things that are logically on the “same level”. So if you are thinking in terms of a music player, it probably makes sense to have genres as tab items. If you are building a news app, then categories or topics should be what you are looking for. Don’t mix and match from different categories. It confuses the user and doesn’t provide a clean list to choose from.

Visible options

As with the bottom navigation pattern, tabs provide a better solution for getting around than let’s say the hamburger menu does. First and foremost all options are visible, might be that you need to scroll to find what you are looking for, however it is on the same level and is not completely hidden under an icon that might or might not be recognizable by everyone.

A scrollable list

If you have multiple options provide a scrollable tab list. Sometimes all options won’t fit into the view at once, so providing a horizontally scrollable list solves this problem. Avoid adding multiple levels of depth, like a “More” option which opens a modal with additional items.

View interactive example

Use it with icons

You can use text only or add icons. It is advisable to avoid icon only solutions because it’s easy for the user to misinterpret them or just simply don’t understand what it stands for. So adding icons can help to quickly communicate what it is, but there is always the fallback of the text which explains.

View interactive example

Smaller chunks

Use tabs to break up content into smaller groups. In case of a movie or music player this can be genres or categories. Make sure not to mix in items that are not relevant to the segmentation criteria.

View interactive example

It is important to help users find their way around your app so providing clean navigation is key. If they understand how to explore content it will be easier for them to get value and stay for the long haul.

If you are looking for quick, no-hassle solutions that can be literally implemented in minutes, check out the products we provide at Mobiscroll.