Minimize text size Reset text to normal size Increase text size

7:7 Present Tabs Effectively

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




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


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.


  • 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.


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


Good Example:

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


Related Resources: