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.
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

Fixed vs sliding
Do

Don’t

Resources
(internal only)