Tabs can be a smart way to break up content into sections, but their use is a double-edged sword.
On the one hand, it focuses attention on a subset of content to make the page easier to take in. On the other hand, it buries other content, making users guess where it is, or if it even exists. It is an example of the Master/Detail screen pattern.
In "About Face 3: The Essentials of Interaction Design", Alan Cooper says "navigation is excise" — meaning that any time a user is required to jump from one page to another, it adds a cognitive cost to their experience. The authors write: "the work that users are forced to do to get around in software and on Web sites is seldom aligned with their needs, goals, and desires" and urge designers to minimize the amount of navigation required.
When to use tabs
Tabs are one of the most popular navigation patterns (along with menu bars and vertical navigation). The biggest advantage of tabs is that they are familiar and often persistent, so that even when a user has navigated around in a site or application, they don't feel lost.
There are a few considerations to keep in mind when using tabs, however. Such as:
- Only use tabs when there is a limited number of navigation options available (up to 5 on mobile1, less than 7 on desktop2).
- Tab width is usually determined by the text in each tab, so consider the impact of localization and font size adjustments.
- Only use tabs "to present closely related peer areas of content."3 Content separated by tabs should be related in some way and exist at the same level in a hierarchy.
- Avoid using tabs for sequential tasks or "wizards" — tabs should be able to be used independently from each other.4
How to use tabs
- Avoid using multiple sets of tabs.
- If you do, make sure to visually distinguish the second set from the first (see variations below)
- Put the most important content in the first tab.
- Make sure the controls within a pane (the area that the tab applies to) only affect content in the same pane.3
- You should never have only one tab.4
- Don't wrap tabs to a new line. If the tabs won't fit, consider using scrolling or drop-down tabs, as shown in the variations below.
- Be wary of using icons alone for tabs. Adding text above or below is recommended. "[F]or most icons, text labels are necessary to communicate meaning and reduce ambiguity."1
- Consider vertical tabs when the number of horizontal tabs would be too many (or use a different kind of navigation entirely).
Tabs should have 2 primary states: selected and non-selected. A hover state can also be used to invite action, similar to a button. As shown above, the selected tab should be visually distinct from the non-selected tabs, with the selected tab more prominent (higher contrast) than the others. Bold text can be used to emphasize the selected tab.
Here are some common tab variations.
Tabs often have borders around the content area they refer to, but they aren't required.
- Smashing Magazine
- KDE Human Interface Guidelines
- macOS Human Interface Guidelines
- Microsoft Windows Desktop Guidelines