14 Guidelines For Web Site Tabs Usability

14 Guidelines For Website Tabs Usability

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.
  • Usability Tab Metaphor
    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).
  • Tabs for Content Separation
    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.
  2. Tabs used as Module Tabs and Navigation Tabs
    Ryanair's home page makes good use of navigation tabs (top) and module tabs
  3. 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.
  4. Tabs on the side
    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
  5. 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.
  6. Amazon Tabs
    This screenshot of Amazon.com from 2000 illustrates why having more than 1 row of tabs makes them less usable
  7. Always have one of the tabs pre-selected: This adds more impact to the tab, which is vital especially within the first few seconds.
  8. 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.
  9. 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.
  10. Active Inactive Tabs
    An excellent example of how active and inactive tabs can be rendered
  11. 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.
  12. Tabs Connected to Content
    Delibar app's web site adopts an unusual yet very interesting approach to show the active tab's connection to content
  13. 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.
  14. 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.
  15. 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.
  16. 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).
  17. All Caps Tab Labels
    The labels of the above tabs are longer than 2 words and are written in all caps (Source: onebigfield.co.uk)
  18. 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.
  19. 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.
  20. Tab Grouping By Color
    Inkd.com's web site makes use of color to group tabs
  21. 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.
  22. Tabs and Breadcrumbs
    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

Useful Resources & Inspiration for this Post

  • http://myows.com myows

    Good article – i love tabs! My next question is, are users not increasingly expecting tabs’ content to be preloaded or loaded with AJAX (no page refresh between tabs)?

    • http://usabilitygeek.com Justin Mifsud

      @myows Indeed they are, especially if the tabs are used as module tabs. In fact, in point 12 I wrote that one must ensure fast response times when using tabs.

  • Andy Kyle

    This is a great overview of best practices for tabs. I’m curious about the 0.1s number in guideline #12. How was this determined? Do you have more numbers for user expectations around other types of interactions?

    • http://usabilitygeek.com Justin Mifsud

      @ Andy Kyle

      First of all, thanks for your comment. I have retrieved the 0.1s response time (mentioned in guideline#12) from Jakob Nielsen’s post: Tabs, Used Right (which is listed in the Inspiration for this post section). In it he cites a paper that may interest you: Response Times: The 3 Important Limits

      • http://www.facebook.com/ Ally

        At last some rtaniaolity in our little debate.

  • http://www.ryanbradley.info/ Ryan B.

    These are great. People would be surprised how many developers don’t make tabs look and behave like tabs.

  • Daniel King

    Thanks for the first clear guide to designing tabbed navigation I have found.

    Any suggestions for alternative navigation structures/metaphors if you have too many tabs? (Apart from grouping tabs, which may be a possibility in this case)

  • http://www.intuitionhq.com/ Tim for IntuitionHQ

    Great overview. Navigation forms an important factor on your site. I believe Amazon is a perfect example of how tabs can make navigation easier.

  • http://www.facebook.com/dieter.deppisch Dieter Deppisch

    What is the exact meaning of a RESOURCES tab?
    What should be filed here? I cannot find any consistency amongst various webites.

  • Pingback: 14 Guidelines For Web Site Tabs Usability | Usability Geek | GForce()

  • Pingback: An Overlooked Tab-oo in LibGuides Design | Designer Librarian()

  • Adam Gorbahn

    Good article for usability.