UI Controls Dictionary > Tabs

Tabs


Tabs can be a smart way to break up content into sections, but its 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 five on mobile1, less than seven 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).

Basic Usage

States

Tabs should have two 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.

Variations

Here are some common tab variations.

Tabs often have borders around the content area they refer to, but they aren't required.

References

  1. Smashing Magazine
  2. KDE Human Interface Guidelines
  3. macOS Human Interface Guidelines
  4. Microsoft Windows Desktop Guidelines


Further Reading


Leon BarnardBy Leon Barnard
Got questions or feedback? Email leon@balsamiq.com.