Navigation Tabs Edit
Problem summary
The user needs to navigate among sections of a website and while having clear indication of what section the user is currently looking at.
Example
Usage
- 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 you want the navigation to fill the entire width of a page
- Use when you want to provide a list of the highest available sections/subsections of the website
- Do not use when wanting to show content-specific data. For instance for showing latest articles
- Do not use when there is no need to single-out the currently selected option
- Do not use when the list of sections or categories call for a “more…” link. Then consider another navigation pattern.
Solution
- A horizontal bar contains the different sections or categories of your website.
- Each section or category is represented by a tab that resembles a button. This is why the whole button should be clickable, and not just the text that labels the section.
- Optionally, a bar below the top bar can contain subsections of the currently selected item in the top bar
- The same navigation tab is used on all pages that is linked from the navigation tab.
- The same structure (order) of the navigation tabs should be maintained from page to page, so that the user can relate the navigation of the different pages to each other.
- The current selected tab should visually stand out compared the the not selected tabs.
- If subsections are used (a second horizontal bar below the top bar) there should be a clear visual connection between the currently selected top tab and the bar below showing subsections.
Rationale
- Navigation tabs lends itself from the physical metaphor of a folderes in a file-cabinet and is thus familiar to the user.
- Navigation tabs provide a clear visual indication of what content can be found on a website and places the current location in context by highlighting it.
More example images of the 'Navigation Tabs' pattern
-
-
Navigation tabs are used at digg.com
-
Navigation tabs with large clickable areas are used on spd.org.
-
Large rounded navigation tabs on the vimeo front page.
This document is in version 1 and was last updated on Dec 25, 2008 by Anders. Edit this pattern.
You are reading the "Navigation Tabs" pattern.
