usabilitygeek.com http://usabilitygeek.com/14-guidelines-for-web-site-tabs-usability/
14 Guidelines For W eb Site Tabs Usability
By Justin Mifsud / Posted in Guidelines / Published October 17, 2011
Tabs have long been used to show alternative views of the same group of information tabs in software.
Known as “module tabs”, these are still used today in web sites. For instance, airline companies such as
Ryanair, easyJet and AirMalta use module tabs to enable the user to switch between bookings for flights,
hotels and car hire.
With the emergence of web sites, tabs started being used for navigation purposes. This technique was first
popularized by Amazon in 1998. Although Amazon eventually dropped tab navigation in 2007, there are
some excellent and creative uses of tabs in web sites for both modules as well as navigation. In this post I will
be providing a list of 14 guidelines that you can use as a checklist to ensure that tabs on your web site are
usable.
Why tabs are good for usability
When used and implemented correctly, tabs are considered to be an excellent User Interface (UI) control that
contribute towards improving usability. This is because tabs:
Are excellent metaphors: In UI terminology, metaphors are ideas or objects that are used to
facilitate the familiarity between the user and the application. The use of tabs in the UI is an excellent
metaphor since they look like real-world tab dividers in files or tabs on folders in a file drawer. Thus, it
is more intuitive for users to know that these tabs are dividing content into sections and just like in real
life, reaching for the tab (emulated on the web by clicking on a tab) will show the respective content.
Tabs are excellent metaphors of real-life file tabs
Improve content organization: Tabs divide content into meaningful sections which occupies less
screen space. In this regard, users can easily access the content that they are interested in (rather
than having all the content in paragraphs).
AirMalta's web site makes use of tabs to effectively separate content related to booking options
Are visually pleasing: Implemented correctly, tabs can improve the visual aspect of a website. Due
to their shape and functionality, they add an interesting UI element which is intuitive to use and also
very hard to miss by users.
Usability Guidelines for tabs
I have compiled the following list of guidelines from various sources and through my own personal
experience. Whilst there may be other guidelines and recommendations, I consider this list of 14 guidelines
as being the most effective for ensuring tab usability.
1. Tabs must look and behave like tabs: Users have have pre-conceptions of how tabs should look
like and behave. These are a result of experiencing tabs both in the real world as well as online. Thus,
any deviation from these pre-conceptions will naturally confuse them.
Ryanair's home page makes good use of navigation tabs (top) and module tabs
2. Place navigation tabs at the top of the page: If tabs are being used for navigation purposes, it is
best to place them in the topmost part of your web page. This is the where users expect to find them.
Conversely, placing tabs at the bottom, on the sides or worse still, below the fold of your web page
increases the likelihood that users will not see them. Remember that users will start ‘searching’ a page
even before the actual content and layout of that page is loaded. Thus, they will focus on the top left
segment of your web page, even before this has loaded because there they expect to find your site ID
and primary navigation.
The web site for the Little Black Dress society features the tabs on the side. In this case it is good practice since the
tabs are used for secondary navigation. Primary navigation is (correctly) located at the top, where users expect it
3. Only have 1 row of tabs: Stacking tabs on top of each other, complicates the UI and makes it harder
for the user to navigate. This guideline specifically refers to having two or more sets of tabs and does
not include double tab navigation. The latter is in fact considered a good convention to introduce
hierarchy within tabs.
This screenshot of Amazon.com from 2000 illustrates why having more than 1 row of tabs makes them less usable
4. Always have one of the tabs pre-selected: This adds more impact to the tab, which is vital
especially within the first few seconds.
5. Clearly indicate which tab is currently active: This can be done through the use of colour, by
making the it larger than inactive tabs, by making its label bold and by making it appear in front of the
inactive tabs. Also, ensure that the label of the active tab is clearly visible and readable.
6. Clearly indicate which tabs are currently inactive: Ensure that inactive tabs are dimmed and/or
faded. At the same time, make sure that they are still visible and their labels readable so that users
can still see them and select them.
An excellent example of how active and inactive tabs can be rendered
7. The active tab should appear connected to the content area: So as to reinforce the real-life tab
metaphor, you must make the active tab appear as being connected with the page containing its
content. This is what users would expect with a filing cabinet.
Delibar app's web site adopts an unusual yet very interesting approach to show the active tab's connection to content
8. Arrange tab labels in an order that makes sense for your users: You should determine if there
is an order in which your tabs should be presented so as to facilitate the use of your site. When
carrying out this exercise it is important to adopt an outward looking view and place yourself in the
shoes of your user. Thus, it is your user’s logic that should prevail rather than yours.
9. Tab labels should be written in plain language: This makes it easier for users to scan and
understand the tabs. In this it will be easier for them to predict the type of content that clicking on each
tab will lead to.
10. Tab labels should consist of 1 – 2 words: Labels on tabs should clearly describe their function or
destination within 2 words at most. This ensures the likelihood that users understand the meaning of
the tab, thus resulting in an error-free selection. Constraining yourself to 1 – 2 words will also help you
in thinking more about selecting the best words for your tab labels.
11. Use title style capitalization: Tab labels should be written in title-case, that is, only the first
character of each word should be written in uppercase. As with all text on web sites, it is not advisable
to write the tab labels in all caps since this makes them difficult to read (although the negative effect in
this case is less since tab labels should consist of just 1 or 2 words).
The labels of the above tabs are longer than 2 words and are written in all caps (Source: onebigfield.co.uk)
12. Ensure fast response time: Users expect content to show up faster when clicking a tab (typically
less than 0.1s), rather than when clicking a link. This can be achieved using AJAX by loading content
in the background and making it visible on tab click. However, you can use any technique as long as
the end result gives users the impression that a physical connection exists between their mouse click
on the tab and the content that is loaded.
13. Consider “grouping” related tabs: If you have several tabs you may want to group related tabs. In
such cases, the use of additional cues such as color can come handy. However, as always, never rely
on color alone as a cue. This is because up to 10% of users have some form of colour blindness whilst
a percentage of users will still fail to perceive the reason why you used color.
Inkd.com's web site makes use of color to group tabs
14. Do not use tabs to replace breadcrumbs: Although tabs can be used to explain where you are
and where you can go within a web site, they should never be used as a replacement to breadcrumbs.
Breadcrumbs show a site’s hierarchy – something which is impossible to render if your site is more
than 2 levels deep (i.e. Home > Level1 > Level2). Users recognize both tabs and breadcrumbs when
they see them and they know how they should behave. Using one to replace the other will negatively
affect your site’s usability.
PSDtoDNN's web site effectively makes use of both tabs and breadcrumbs. The current page's hierarchy is correctly
being shown in the breadcrumb trail (marked with the grey arrow) while the tab is used to show the section where the
current page is located