Tab

Tabs allow navigation between groups of related content at the same level of hierarchy.

Overview

When to use

  • When the data to be displayed is easily broken into sections
  • When a single page has a robust amount of content that could overload the user (ex: lots of scrolling)
  • When saving space is imperative
  • When you you want users to access each section separately

When not to use

  • When there is a minimal content
  • When it’s more powerful to see related content grouped together.
  • When content is sequential.

Not sure? Ask yourself...

  • Does your content break up into clearly distinct groupings? Then yes tabs.
  • Would it take more time for users to open a new tab than to scan the page? Then no tabs.
  • Do people need to compare the info behind different tabs? Then no tabs.

As the Neilson Norman group says: Having to switch back and forth puts an added burden on their short-term memory, increases cognitive load and interaction cost, and lowers usability compared to a design that puts everything on one big page.

When in doubt, user test.

 

Content

  • Tab names are related, make sure that relation is evident
    • E.g.: say “Month, week, day” but not “30 day period, week, day”
  • Use strong entity names
  • Use plain language
  • Sentence case
  • 1-3 words max

Content pattern

You can combine both content patterns in the same group of tabs.

Noun

  • Plan names: Essentials, Plus, Basics
  • Sign in info: Phone, Email
  • Time periods: Week, Month, Day

Noun + adjective

  • Employee info: Personal details, Job details

 

Best practices

Navigation vs Filtering

Use tabs for navigation, not for performing actions or filtering. For filtering, use the segmented control instead.

Do
Tabs-DoDont-NavvFilter-Do
Don’t
Tabs-DoDont-NavvFilter-Dont

 

Behavior

  • Default active is first tab, unless another tab has an alert (then the alert tab is active on page load)
  • Tab content (content below the tabs) should left align with first tab
  • Stick to only one row of tabs, no wrapping (use slide)

 

Alert icon vs badge

  • Alert icon: use when count is not needed or when you need lower priority alert (ex: warning)
  • Badge: use when a count is needed
Tabs-Example-AlertIconvBadge

 

Fixed vs sliding

Do
Tabs-DoDont-FixedvSliding-Do

 

Don’t
Tabs-DoDont-FixedvSliding-Dont

 

Resources

(internal only)

Figma

Storybook

Enhancements