• Text Resize A A A
  • Print Print
  • Share Share Share Share

View all available chapters

7:7 Present Tabs Effectively

Relative Importance:

Relative Importance rating of 3 out of 5

Strength of Evidence:

Strength of Evidence rating of 3 out of 5

Document Type: Guideline


Topic:

Navigation


Guideline:

Ensure that navigation tabs are located at the top of the page, and look like clickable versions of real-world tabs.


Comments:

Users can be confused about the use of tabs when they do not look like real-world tabs. Real-world tabs are those that resemble the ones found in a file drawer. One study showed that users are more likely to find and click appropriately on tabs that look like real-world tabs.


Sources:

  • Bailey, R.W., Koyani, S., & Nall, J. (2000, September 7). Usability testing of several health information Web sites, National Cancer Institute Technical Report. Bethesda, MD.
  • Kim, J. (1998). An empirical study of navigation aids in customer interfaces. Behavior and Information Technology, 18(3), 213-224

Poor Example:

The design of these navigation tabs provides few clues to suggest that they are clickable until a user mouses-over them. Mousing-over is a slow and inefficient way for users to discover navigation elements.

07_07_bad_example1

These links behave like tabs, but they are confusing because they do not look like tabs.

07_07_bad_example2

Good Example:

These clickable tabs look just like tabs found in office filing cabinets.

07_07_good_example

Related Resources: