Tabs

Problem

You have a series of related information with a clearly defined hierarchy, and comparable length that needs to be presented at a similar level without wasting too much vertical space.

Solution

Arrange horizontally the headings of all items of those elements, but display only the content of one. The visibility of each one can be toggled by users.

TABS are widely used in web design and are therefore recognizable by users. They use a metaphor of the labels on folder archives which make them easy to understand. TABS should be used to alternate between views within the same context1 rather than between pages. That is, they do not take the user to another page, only the visibility of the content changes.

You should clearly identify which is the active tab. The tab heading should be visually connected to the content for better making this distinction. You should take special attention when there are only two tabs, because the inactive state can be more easily mistaken as being active.

TABS work better when you only have a few tab modules that fit on the width of the page, and there is only one row of tabs. Two rows or more of tabs are a quite confusing and not very elegant. If you have a list of tabs headings that do not fit the width of the device it is better to truncate part of the list and to provide a method for scrolling through the tabs headings — a behavior similar to a SLIDESHOW. Nonetheless, it may be a better idea to revise your design and think of an alternative approach. A VERTICAL LIST or a SLIDESHOW can sometimes be an option.

***

Web Design Patterns for Mobile Devices
BBC News, 04/2012
Web Design Patterns for Mobile Devices
Airbnb's product page, 04/2012
  • Tabs, in Designing Mobile Interfaces
  • Tab Menu, in Mobile Design Pattern Gallery