Module Tabs

Problem summary

The user needs to browse through a series of tabs without refreshing the page

Use when there is not enough space on the website to show all of the content inside all tabs – or if such a listing is irrelevant.
Use when there are more than 2 sections
Use when there less than 8-10 sections depending on the length of each section name.
Use when section names are relatively short
Use when the content of each tab can be viewed separate from each other, and not in context of each other.
Use when the content for each tab has similar structure
Use when you need to show what tab is currently being viewed

Do not use when the content inside each pane would function just as well in its own separate page.

Present the content of one tab inside a box (content area)
Place a horizontal bar on top of the content area with links representing tabs
Refrain from having more than one line of links in the top horizontal tab bar
Use color coding or other visual support to indicate what tab is currently being viewed
Present the content of each tab in the same content area
Only one content area should be visible at a time

Maintain the same structure of the top horizontal tab bar after a new tab has been clicked
Only the content area of the tabs and the horizontal tab bar should be changed when a user clicks a new tab
If possible, the page is not refreshed when a tab is clicked.
A new page is not loaded when a tab is clicked

Navigation tabs lends itself from the physical metaphor of a folderes in a file-cabinet and is thus familiar to the user.
Module Tabs provide an easy way to show large amounts of similar structured data parted by categories
Tabs place the content area of the tabs into a context as the selected tab has been highlighted.


From canon.com.	From cbs.com.	From intuit.com.

This pattern was last updated on February 07, 2008