Tabs

Guidance

Tabs used effectively don’t draw attention to themselves but facilitate access to the content. Users should intuitively know how to use tabs without further exploration or error-prone guessing.

• Use tabs to alternate between views within the same context, not to navigate to different areas. This is the single most important point, because staying in place while alternating views is the primary use case for implementing tabs.
• Logically organize the content behind the tabs so users can easily predict what they'll find when they select a given tab.
• Use tabs only when users don't need to see content from multiple tabs simultaneously. If people do need to compare the info behind different tabs, then 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.
• Design tabs that are parallel in nature. If the tabs are significantly dissimilar, users will interpret them as site navigation.
• Highlight the currently selected tab. Make sure that the highlighting is prominent enough so people can tell which tab is selected.
• Place the row of tabs on top of the tab panel — not on the sides or the bottom, where users often overlook them.
• Connect the current tab to the content area, just as if you were shuffling several physical index cards with tabs stuck to them. This emphasizes which panel is being shown, and also tells users which tab is selected when there are only 2 tabs.