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.

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 mobile, less than seven on desktop).
  • 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.” Content separated by tabs should be related in some way and exist at the same level in a hierarchy. (macOS Human Interface Guidelines)
  • Avoid using tabs for sequential tasks or “wizards” - tabs should be able to be used independently from each other. (Microsoft Windows Desktop Guidelines)

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 only affect content in the same pane. (macOS Human Interface Guidelines)
  • You should never have only one tab. (Microsoft Windows Desktop Guidelines)
  • 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 on mobile. Adding text above or below is recommended. In “Basic Patterns For Mobile Navigation: Pros And Cons”, the author writes: “for most icons, text labels are necessary to communicate meaning and reduce ambiguity.”
  • Consider vertical tabs when the number of horizontal tabs would be too many (or use a different kind of navigation entirely).

Basic Usage


Types of Tabs

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 them, but they aren’t required.




Edit this page