usabilitygeek.com http://usabilitygeek.com/14-guidelines-for-web-site-tabs-usability/

14 Guidelines For Web Site Tabs UsabilityBy 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 asRyanair, 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 firstpopularized by Amazon in 1998. Although Amazon eventually dropped tab navigation in 2007, there aresome excellent and creative uses of tabs in web sites for both modules as well as navigation. In this post I willbe providing a list of 14 guidelines that you can use as a checklist to ensure that tabs on your web site areusable.

Why tabs are good for usabilityWhen used and implemented correctly, tabs are considered to be an excellent User Interface (UI) control thatcontribute towards improving usability. This is because tabs:

Are excellent metaphors: In UI terminology, metaphors are ideas or objects that are used tofacilitate the familiarity between the user and the application. The use of tabs in the UI is an excellentmetaphor since they look like real-world tab dividers in files or tabs on folders in a file drawer. Thus, itis more intuitive for users to know that these tabs are dividing content into sections and just like in reallife, 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

AirMalta's web site makes use of tabs to effectively separate content related to booking options

Improve content organization: Tabs divide content into meaningful sections which occupies lessscreen space. In this regard, users can easily access the content that they are interested in (ratherthan having all the content in paragraphs).

Are visually pleasing: Implemented correctly, tabs can improve the visual aspect of a website. Dueto their shape and functionality, they add an interesting UI element which is intuitive to use and alsovery hard to miss by users.

Usability Guidelines for tabsI have compiled the following list of guidelines from various sources and through my own personalexperience. Whilst there may be other guidelines and recommendations, I consider this list of 14 guidelinesas 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

Ryanair's home page makes good use of navigation tabs (top) and module tabs

The web site for the Little Black Dress society features the tabs on the side. In this case it is good practice since thetabs are used for secondary navigation. Primary navigation is (correctly) located at the top, where users expect it

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.

2. Place navigation tabs at the top of the page: If tabs are being used for navigation purposes, it isbest 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 pageincreases the likelihood that users will not see them. Remember that users will start ‘searching’ a pageeven before the actual content and layout of that page is loaded. Thus, they will focus on the top leftsegment of your web page, even before this has loaded because there they expect to find your site IDand primary navigation.

3. Only have 1 row of tabs: Stacking tabs on top of each other, complicates the UI and makes it harderfor the user to navigate. This guideline specifically refers to having two or more sets of tabs and does

This screenshot of Amazon.com from 2000 illustrates why having more than 1 row of tabs makes them less usable

An excellent example of how active and inactive tabs can be rendered

not include double tab navigation. The latter is in fact considered a good convention to introducehierarchy within tabs.

4. Always have one of the tabs pre-selected: This adds more impact to the tab, which is vitalespecially within the first few seconds.

5. Clearly indicate which tab is currently active: This can be done through the use of colour, bymaking the it larger than inactive tabs, by making its label bold and by making it appear in front of theinactive 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/orfaded. At the same time, make sure that they are still visible and their labels readable so that userscan still see them and select them.

7. The active tab should appear connected to the content area: So as to reinforce the real-life tab

Delibar app's web site adopts an unusual yet very interesting approach to show the active tab's connection to content

metaphor, you must make the active tab appear as being connected with the page containing itscontent. This is what users would expect with a filing cabinet.

8. Arrange tab labels in an order that makes sense for your users: You should determine if thereis an order in which your tabs should be presented so as to facilitate the use of your site. Whencarrying out this exercise it is important to adopt an outward looking view and place yourself in theshoes 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 andunderstand the tabs. In this it will be easier for them to predict the type of content that clicking on eachtab will lead to.

10. Tab labels should consist of 1 – 2 words: Labels on tabs should clearly describe their function ordestination within 2 words at most. This ensures the likelihood that users understand the meaning ofthe tab, thus resulting in an error-free selection. Constraining yourself to 1 – 2 words will also help youin 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 firstcharacter of each word should be written in uppercase. As with all text on web sites, it is not advisableto write the tab labels in all caps since this makes them difficult to read (although the negative effect inthis 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)

Inkd.com's web site makes use of color to group tabs

12. Ensure fast response time: Users expect content to show up faster when clicking a tab (typicallyless than 0.1s), rather than when clicking a link. This can be achieved using AJAX by loading contentin the background and making it visible on tab click. However, you can use any technique as long asthe end result gives users the impression that a physical connection exists between their mouse clickon 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. Insuch cases, the use of additional cues such as color can come handy. However, as always, never relyon color alone as a cue. This is because up to 10% of users have some form of colour blindness whilsta percentage of users will still fail to perceive the reason why you used color.

14. Do not use tabs to replace breadcrumbs: Although tabs can be used to explain where you areand 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 morethan 2 levels deep (i.e. Home > Level1 > Level2). Users recognize both tabs and breadcrumbs when

PSDtoDNN's web site effectively makes use of both tabs and breadcrumbs. The current page's hierarchy is correctlybeing 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

they see them and they know how they should behave. Using one to replace the other will negativelyaffect your site’s usability.