UX design for tab

Open a browser, start searching for whatever you like then gradually, on the top of the browser, you will see this:

Fig 1.1 Browser tab

And this is what I am going to share in today’s article — Tab.

Tab is a common UX component used for various kinds of interfaces. And in our daily lives, we use tab as well to classify our documents. The usage of a tab is so widespread that I can see it almost everywhere, and that also makes me started to think about what might be the best practice for tab design. With that in mind, I tried collecting the tab design that looks special or interesting since last year. Now I am going to share those collections in this article:).

1 Basic Principle

According to Nielsen Norman group’s research, there are 12 different principles for tab design. I read it through, but then I found that when it comes to real-life practice, more scenarios are needed to consider. For instance, when the users are reading news feeds, sometimes they develop the need to customize the tabs to read what they like first. In the following part, I will share more instances for various design scenarios.

2 Tab design practice

1) Make the most of the space

Fig 2.1 Make the most of the space

What happens if there is a large number of tab categories? Would that be crowded to display them all together? Bitmoji is an app to design avatars, and yes, it has many categories for users to customize their avatar. But instead of displaying them all together, Bitmoji group and hide the similar categories and show them again when needed.

Fig 2.2 Bitmoji tab

There is another similar idea in a weather app. Showing the date information in the tab is good, yet it is crowded to display all the information together. Therefore the week information shows only when it is selected.

Fig 2.3 Moji Weather tab

The above designs varied in scenarios and interaction patterns, but they all reflect the concept of saving space. During the design process, we need to do a bit of trade-off to display the most critical information selectively.

Fig 2.4 Tab design from icon to detail

2) Tab and secondary page

On selecting the tab, the users will expect to see the whole page displaying contents related to the tab category. In this case, the contents should be refreshed, and maybe more importantly, engage the users with the immersive reading experience.

In the meantime, that leads to another question, how to go back to the previous page?

I can think of two different ways. One is by clicking the back button, and the other is by swiping gestures.

Fig 2.5 Swipe down to go back

Fig 2.6 Click to go back

The swiping gesture seems more natural, but it is not all perfect. Imagine the scenario when the users want to refresh the content on the same page. I assume the first option that comes to their mind would be swiping down since pull to refresh has been a long-existing UX pattern.

So I would say the two go back patterns both have pros and cons, and we need to consider all the possible user scenarios to design carefully.

Fig 2.7 Page refreshing

3) Complicated tab

In certain cases, it probably is not compulsory for the tab to be displayed horizontally. Based on the layout and information architecture, it could flexibly fit into the interface.

Overall, the design of tab should match the user’s expectation. Excel app’s layout looks complicated but is consistent with the layout of the pc version, making it easier for the users to learn and use.

Fig 2.8 Vertical tab layout

Fig 2.9 Vertical+horizontal tab layout from Excel app

Fig 2.10 Excel on PC

3 Other scenarios

1) Tab and customization

Fig 3.1 Tab and customization

Sometimes there are too many tab categories, and it’s hard to display them all on the same screen. It would be better if there is an option to view all the categories. In the following example, the users can slide to view the other tab categories or click the little button on the right to view all the categories.

Additionally, tabs may not necessarily need to be visible all the time. Take Pinterest lens as an example, and it uses the tab to recognize and recommend similar images automatically. I assume maybe because Pinterest wants the users to focus on the recognition task instead of being distracted by the tab selection. Pinterest lens’ tab is hidden below the screen, and the users can slide up to view the tabs.

Fig 3.2 Pinterest lense

2) Tab and anchoring

While scrolling the home page, the tab selection will change accordingly. This design can be used for pages with specific information hierarchy in which the home page contains all the tab categories.

Fig 3.3 Tab and anchoring

3) Horizontal Slide

Except for vertical slide, users can sometimes slide horizontally to switch to different tabs.

Fig 3.4 Horizontal Slide1

The other days I notice an interesting detail from Naver App, which allows users to view a second page within the same tab by sliding. Why not just put them on the same page? I notice that the first page is about the news for everyone, and the second page is my news with all the news I feel concerned about. I think this solution saves more space for the tab yet provides a clear information hierarchy.

Fig 3.5 Horizontal Slide2

Fig 3.6 Naver App tab design

4) At the end

Fig 3.7 At the end of the tab

At the end of the tab, when no more slidings are allowed, we can provide the hints for the users as well. For instance, the more button can rotate a bit as the user slides, guiding the users to click and view more tab categories.

4 Summary

The design details of the tab are interesting in that it changes and evolves based on different scenarios and user needs. Hopefully, I can discover and share more UX design details soon :).

Reference

Tabs, Used Right: https://www.nngroup.com/articles/tabs-used-right/