Tabs in web design: when & how to use them:

Abstract: Tabs don't work very well on the Web because they have many limitations. Tabs are only suitable to define separated and unconnected sections. However they are often not used properly

Why tabs in a web site?

Tabs were created to make searching information easier by using a metaphor and thus imitating a real world element. In this way, web pages try to imitate tabs in a filing cabinet. Tabs help users to see all the site sections quickly and where they are in the site's structure. Tabs also make easier for users to find what they are looking for.

When and how tabs should be used?

Real world tabs separate different spaces which contain different documents in a filing cabinet. There are not several copies of the same document in more than one space because it would confuse users looking there. There are no connections between spaces other than the tab itself. If you are in one space it's impossible to move to another without using the tab.

Web tabs are properly used when separate "books", "CDs" or "DVDs" sections are completly separated and cannot include the same elements. Links shouldn't exist between tabs and the only way to move to another tab should be by selecting other one. Because of this total separation of contents and absence of cross-navegation, the labels of the tabs should be very clear and perfectly fit user's mental model. Otherwise in case of confusion user would be unable to find his goal and this will produce a fatal error.

Under these circumstances not every web site can use tabs. Actually I only can give one perfect example of good use of tabs, Google.com.

How to design tabs

Every tab should be of a different color. Also there should be a contrast between the active and passive states of the tab, but always using the same color. Bankinter.com is a bad example because tab color changes completely and after selecting a tab it doesn't look like you are in the sample place you selected.

In order to make the selection easier, all the tab area should be active and not only the text.

Tabs should look like real world tabs to accurately represent their function. Despite of this in many sites tabs have been simplified and stylised so much they don't look like tabs anymore.

Errors using tabs

There are many sites where it is possible to find a product in several tabs at the same time and it is also possible to move from one tab to another via internal links. But when tabs don't imitate reality accurately, do they add any value to the site? In my opinion in these cases it should be better to use other element than tabs to structure information.

Some web sites with complex structures have created two levels of tabs (Bankinter.com) which don't follow the basic principles above. They also include too many tabs to be useful. In my opinion, the maximum number of tabs should be 7, but I recommend not more than 4 or 5.

Nowadays tabs are so popular they are just another way to present and structure links in a attractive maner, but often incorrectly. Example of tab abuse.

The homepage problem

Which tab should come first on the homepage is a serious problem for many sites. You can only avoid the using of the problematic "welcom" tab if the site has a clearly dominant section. Many sites which don't have this dominant section choose to use a "Welcome" tab (Amazon.com) or "Home" tab (Fnac.es). However this tab doesn't correspond to any section and has many links to other tabs, breaking the principle of separation betwen tabs.

Only Google.com solvesthis problem well because it has a completly dominant first tab (Web). Also all Google's tabs contents exclude each other.

In many sites these "Welcome" tabs are created because the marketing department wants a space to place and promote different products from several tabs (sections). Data analysis often shows that products placed in this "Welcome" tab have the highest sales and evevn sometimes the only ones sold. Usually this analysis isn't correct. It's so difficult to find products in many sites, that just products on the "welcome" tab are found and thus possible to buy. That doesn't mean that using the "welcome" tab is the best solution, but the design of the site has many other problems in its information architecture.

Short history of tabs

Originally the use of tabs comes from Windows where they are used to show different details of the same information element. For example, configuration of dial-up connections.

On the Web, Amazon has made tabs famous. Despite of that its number of tabs have been increased and decreased all the time. It seems they have had strong internal discussion about the perfect number of tabs.

Reader comments - Updated 02/02/2002

Javier Darriba - Xperience Consulting comments:

"... you said tabs are suitable when they are unconnected spaces whitout links betwen them and when there are not the same information in two different tabs. I cannot understand why you say that. I have tested several sites with tabs not following these principles you comment on and they have worked perfectly"

Eduardo Manchón's answer:

When you use a metaphor you try to imitate reality in order to make the site more usable. When tabs have links between them they don't imitate reality accurately and therefore don't work as metaphors. That doesn't mean the user necessarily should have problems with these tabs. That only means these tabs are not really tabs and they just work as a superior navigation area. Navigation areas have not the same meaning as properly designed tabs (quick view of site's structure, feedback about situation, etc.) however they work well in many sites.

When tabs are connected and the user can move between them by links, he doesn't get any feedback about the change of tab. The site takes control over user and he can get lost in the structure of the site. Although it's not very clear whether to indicate "where you are" is useful, this is another disussion. If you are interested you can read my article about navigation areas (in Spanish).

References:

- Nielsen, J. When Bad Design Elements Become the Standard. Useit.com.

- Uieweb.com. The Tabbed Dialogs: Semantic Minefields. How tabs work in windows systems.

- Whitman. J. Revenge of Killer Tabs. Coments about use and misuse of tabs.

- Menon, M. The mystery of the disappearing Amazon tabs.

- Sullivan, D. Google's New Look & New File Types. Tabs in Google.