How to design Tabs? I summarized these ten methods

Tabs are also called tabs (hereinafter referred to as tabs). They are an efficient way to utilize screen space. They map very closely to the directory index of cards. Users can quickly locate the target content based on index labels. This is also the experience of most users from the real world.

In web pages, its usage scenario is relatively simple. When the content of the page is large, tabs can be used to classify it. On the one hand, it can improve the efficiency of finding information, and on the other hand, it can streamline the amount of information that users obtain at a time, so that users can focus more on the currently displayed content.

This article summarizes 10 rules and methods that we should pay attention to from the two dimensions of "basic principles" and "avoidance of use" of tabs. If these principles are followed, it will not only help users complete tasks quickly and efficiently, but also make our design experience better.

Since Tabs involve many terminal devices and content, this article only discusses the usage of tabs on the Web, and does not discuss browser-level tabs and navigation tab design.

Basic principles

1. Label copy should be short and effective

The label copy should be short so that users can quickly identify it.

The label copy should use short and concise keywords as much as possible. If a longer copy is used, it will be a challenge for users to read and distinguish the information. The label copy needs to be clearly distinguished to avoid ambiguity for users; nouns should be used instead of verbs because verbs make users mistakenly think that this is an actionable button.

The label copy should be displayed efficiently

The information display and communication of labels should be efficient. For example, do not display the label text separately. For example, the status and quantity of the label page in the figure below are separated. Users will think briefly about whether the status or quantity is related to the content below. If the design style is very different from the conventional standard, users will be confused. Therefore, try to avoid changing the user's established behavior habits.

2. The selected label should be unique and prominent enough

Selected tags should be unique

Tabs are independent and mutually exclusive. Only one tab's content information is displayed at a time. Clicking a tab will not display detailed information of two or more tabs. The first tab is usually the default option, and if the user is not given a pre-selection, it will confuse the user. The width of the associated detailed content area should be the same. When switching between different tabs, do not change the width of its content.

The selected label should be prominent enough

Make sure the selected tab is prominent enough to let users know which tab is currently selected at a glance, especially when there are only two tabs. You can increase the visual weight of the selected tab by using font size, color, bold, etc.

3. The tab layout extends to the content area, which can strengthen the relevance between the tab and the content

If you keep the background color of the selected card-style tab consistent with the background of the content panel, you can enhance the sense of connection between the tab and the content.

4. The location and order of tabs should be based on people’s reading habits

Position: To emphasize or draw the user's attention, place it at the top

Because people read from left to right and from top to bottom, the top tabs have stronger visual guidance and attract users' attention than the bottom or left tabs. On the contrary, if users don't care much or even rarely switch these tabs, you can consider putting them at the bottom.

Sorting: Important and frequently used tags should be placed at the front

As mentioned above, people read from left to right, so the important and frequently used ones or those in logical order should be placed in front. Usually the default option (usually the first one on the left) is the first tab page that users see when they enter the page, so its information should be the most important or the most frequently used by users. The following is a ranking of product details on JD.com. The first tab page users see is the introduction of the product, the second tab page is the specifications and packaging of the product, and the third tab page is what after-sales guarantee the product provides, etc.

Use Avoid

1. Avoid using icons as tab text

In some scenarios, icons can sometimes cause users to misunderstand the information of the tab. If you want to use them, please add them all, not just some of the tabs. When using them, you still need to pay attention to placing the icons on the left side of the tab label.

2. Avoid truncating label text and make them large enough to be clicked

Avoid cutting off the text on the left side of the label. The reduced text will hinder users’ recognition and understanding of the information.

Complete label information can help users quickly identify their current location. As shown in the figure on the left, the reduction of label content will hinder users' understanding of the information, and will reduce the label's recognizability and the decision cost of switching operations.

Tabs should have enough space to avoid them entering compact mode

Each tab has a hierarchical guidance function and needs a certain area to display the tab information. For example, when there are too many tabs in a browser, it will cause two problems for users. First, the clickable area is very small, making it difficult to click accurately; second, the available information obtained by the tab is very little, and sometimes it is just an icon. Of course, for browsers, we can completely reopen a new window to solve this problem.

3. Avoid displaying this tab page when the data is empty

Generally speaking, if a tab is used to display data information categories, the tab needs to be displayed even if there is no data under the tab, otherwise the user will never know the existence of this tab.

4. Avoid tabs, use only when there is less content or for comparison

Avoid using tabs for very few content categories, as this will reduce the efficiency of information presentation.

Tabs are a way to classify too much content information. If there are only a few paragraphs of text or a few groups of input data information under a tab, you can consider displaying these contents on one page, which can not only improve the screen effect, but also reduce the switching cost of operation. As shown in the figure below, for three simple groups of data information, we can put them on one page and distinguish them through cards.

Avoid using tabs to compare different categories of information, as it increases the user's memory load.

Because it is very difficult for users to remember the information for a short time when they switch tabs to compare the information, so when comparing the content of different categories, you can consider displaying them on one page. The following figure shows the comparison of Mac models displayed on one page on Apple's official website, which can compare the information of three models at the same time.

5. Avoid nesting tabs. If you use them, increase their hierarchy

Avoid nesting tabs in web pages, because nesting makes the hierarchy more complicated, which may cause information confusion and make users unable to remember which tabs they have visited. If there are nested tabs, please visually increase their hierarchical relationship and reduce the number of first-level tabs as much as possible.

6. Avoid complex content tabs, and let users delete them directly

In a form, if deleting the tab page will cause a workload for the user, or even cause some data loss, the deletion operation needs to give the user feedback reminders and give the user a second confirmation to delete; if deleting the tab page will cause almost no burden to the user, or the cost of re-entering is low, it is not recommended to use a second confirmation, because the operational interference brought to the user is far greater than the cost of misoperation. For example, in the Microsoft Excel figure below, when the tab page has content entered, the deletion will require the user to confirm twice, but when the page content is empty, the deletion will not give the user any reminder.

In specific business scenarios, we need to find a relative balance between the user's deletion frequency, the cost of erroneous operations, and the interference of deleting components.

Summarize

The above are some of the things we need to pay attention to when designing tabs. If you follow these usages, it will not only solve the problem of information accumulation, but also greatly improve the clarity and usability of the page. If we find that users rarely click on these tabs or often make mistakes when using them, we need to consider whether these tabs are used properly or violate some of the basic usages mentioned above.

The scenarios covered by the above examples may not be comprehensive, but our ultimate goal is to use the tab component to guide users to focus their vision on the page content.