Usability best practice, Part 1 – Tab navigation
Using tabs as a navigation device has long been an established metaphor and is widely accepted as a user-friendly way to display top-level navigation (primary). But this wasn’t tabs original use they were used to show alternative views of the same group of information known as ‘module’ tabs.
Somewhere along the line it evolved into ‘primary’ navigation as we know it today. One of the first companies to adopt the use of tabs as its primary navigation system was Amazon in 1998. Amazon was largely responsible for establishing the navigation device online with many websites adopting. Interestingly, Amazon has since ditched using tabs in favour of left-hand side navigation largely due to the tab navigation system not being able to accommodate all their new products. For an interesting history of Amazon’s use of tabs read Luke W’s article ‘The History of Amazon’s Tab Navigation’.
Usability guru Jacob Nielsen takes a dim view of this ‘new’ use of tabs: “placing a horizontal set of tabs across the top of the screen… is a bad design and an abuse of the tab metaphor…Tabs are supposed to be used for rapid switching between alternative views of the same information object.”
Below is an example (Yahoo Finance) of how Nielsen see’s how tabs should be used.
As this metaphor has been so heavily used some web designers now see them as old-hat but love them or hate them tabs seem here to stay. So putting all the above to one side here are some points on how and when to use tabs from a usability perspective:
- If you have between 3-10 category titles
- Only one row of tabs at the top of the page (not on the side or bottom)
- Be consistent make sure they all work the same way
- Number of categories known and won’t change
- Categories should only represent the highest level navigation (primary)
- Enough width to accommodate safely
- Keep category title names short and relevant
- Tabs should always appear in the same locations and not move when a user navigates from one tab to another
- The link area should cover the whole tab
- Make sure they work from a technical perspective so tabs can ‘swap’ quickly
- Never ‘stack’ multiple rows of tabs as this will disorientate the user (See Blackcircles.com example)
Play.com is an example of a good use of tabs as a navigation device (see below)
- The selected tab (and next level) should come forward so use a prominent colour
- Use a single background colour for non-active parts
- Change the font colour on the active tab
- Use curves/rounded corners to make it look like a tab