From Interaction-Patterns.org
[edit] Module Tabs
[edit] Quick Summary
The user needs to browse through a series of tabs without refreshing the page. Welie.com had it under Dealing with Data.
The user needs to navigate through one or more stacked panes of content without refreshing the page.
[edit] Visual Examples
[edit] Examples found on the World Wide Web
[edit] Use When
- There are multiple panes of content, but there is space to only show one content pane at a time.
- The different panes of content do not need to be viewed in context with each other.
- You need a way to switch between the content without going to a different page. For navigating to different pages within a site, use Navigation Tabs instead.
- There are 2-10 category titles.
- The category titles are relatively short and predictable.
- It is important to communicate which content pane is currently being viewed.
[edit] Possible Solution
- Present a single-line row of links immediately above the stacked panes of content they will control.
- Never stack multiple rows of tabs to control a single piece of content.
- Separate the links with the vertical bar character "|" or through an equivalent graphic.
- Always show one tab as selected with its content visible
- Indicate the selected tab by highlighting the background of the "cell" around it. Yahoo! adds a "pointer" to the bottom of the selected tab.
- The content should be visually connected to the tab it is associated with and be visually bounded (usually by a box.)
- Only one content area may be visible at a time.
- Maintaining the Metaphor
- Tabs should appear in the same location as the user clicks from one tab to another.
- Wherever possible, do not refresh the entire page upon selection of a new tab.
- Selecting a tab will not affect other parts of the page.
- Selecting a tab will not navigate to a different page or perform an action (beyond switching the visible content.
[edit] Rationale
- Tabs provide context. They give visual indication of a user's location within a body of information.
- Tabs build on a real world metaphor. The selected state is reinforced with the file folder tab metaphor of a folder physically in front of the others in the set.
- Tabs provide navigation. They provide the ability to navigate alternate content views.
[edit] Accessibility
- Allow the user to navigate across the tabs in a logical order with the Tab key.
- A focused tab can be selected with the Enter key.
- Indicate the active tab (pane) by one of these alternative means (in addition to visual indication):
- Include a TITLE attribute with the word "active" into the link that was just activated.
- Include an invisible graphic with an ALT attribute and a word "active" into the link.
- Attach an ALT attribute with the word "active" to Yahoo!'s graphic that indicates active link.
[edit] This pattern is being used to
[edit] Source
