Tabs for Navigation are OK (There, I said it!)

Using tabs for navigation is a bit controversial for some interaction designers. Quite a few people I have worked with over the years despise (yep, that's right, despise) the use of tabs for navigation. Mr. Nielsen has said "placing a horizontal set of tabs across the top of the 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." Not mincing his words there.

History of tabs as navigation
It all started with Amazon back in 1998. Luke W has tracked the "colourful" (literally) history of Amazon's tabs. Amazon went through loads of tab variations and stuck with its tabs until 2007 (Amazon has used a left-hand side navigation since then). Even though Amazon has abandoned tabs, tab navigation had already taken on a life of its own. Others sites had started using the tab metaphor for their main navigation. And here's the thing - I think that so many sites started using tabs for navigation that the original metaphor morphed. No longer did a tab mean "alternative views of the same information object". It now meant "main navigation". And that's OK. Just because this doesn't fit with the traditional, physical world metaphor for a tab doesn't mean that it's a bad thing.

When to use tabs for navigation
Yahoo's pattern library contains a great page on navigation tabs. They suggest using tabs for navigation when:
  • There are 3 - 10 category titles.
  • The category titles are relatively short and predictable.
  • The number of categories is not likely to change often.
  • The entire width of the page is needed for content. An alternative approach is to use a left bar navigation
  • The categories belong to a single site.
  • You need to represent the highest level navigation options on a site.
  • You need to indicate the user's current location in the set of available options.
  • You need to change the entire page and not a sub-section of content within the page.
  • You need a way to control the highest level of navigation.
Ironically, if Amazon had considered these points, they probably would never have used tabs as navigation in the first place!

Not everyone agrees with me
Here's a final word from Mr. Nielsen:

"I maintain that tabs would be better used for switching between alternative (but related) views than for navigating to unrelated locations. But unfortunately, users will soon lose any understanding they may have had of tabs as a special design element if more and more sites keep abusing tabs. I still think that less than 50% of sites use tabs in the (erroneous) meaning of navigating to the main sections of the site. Thus, I still think that the correct use of tabs is preferred and I recommend using different techniques to visualize the main areas of the site. But this may be a losing battle and I may have to revise this recommendation in a year or so if more and more sites adopt a misguided use of tabs."

Change is difficult for some.


eric said...

I'm having a hard time thinking of any examples where tabs are used for "alternative views of the same information object".

An extra note on the continuing evolution/subversion of tabs: consider the modern browser, where different pages from completely different websites are represented as tabs across the top of the browser window.

Suze Ingram said...

Eric, thx for the comment. I agree, I think the use of tabs in modern browsers is pushing the metaphor even further. There's some great discussions going on about this very topic. Take a look at this:

Cheers, Suze Ingram.

Anonymous said...

Eric, you say "I'm having a hard time thinking of any examples where tabs are used for "alternative views of the same information object"".

I think where Jakob got that from was configuration dialogs in desktop GUIs. You are setting the preferences of MS Word / options on paragraph formatting / config parameters of an AirPort base station and each tab shows you a different aspect of the object (Word / the paragraph / the base station). In that sense, he has a point.

I agree with both Suze and Jakob though that boiling-the-frog type increased use in other contexts by designers will water down the tab metaphor to mean nothing more than "a list of stuff".

I *dis*agree with Jakob's definition in the sense that while the tabbed nav on fulfils his definition (it shows various sort orders of the same list), it is to me a very counterintuitive use of tabs.

Mike Beasley said...

I think that tabs have been cut off completely from their original metaphor at this point, particularly as there are more and more "digital natives" on the Internet who have always seen tabs used in this manner.

At this point, tabs are functionally no different from a row of buttons.

Sam said...

Interesting post Suze... I think the key thing here is that interface design is a language and all languages evolve over time. Tabs for primary navigation are now an acceptable convention which help connect the navigation with the content.

Ida said...