Minimize text size Reset text to normal size Increase text size

7:2 Differentiate and Group Navigation Elements

View all available chapters

7:2 Differentiate and Group Navigation Elements

Relative Importance:

Relative Importance rating of 4 out of 5

Strength of Evidence:

Strength of Evidence rating of 3 out of 5

Document Type: Guideline




Clearly differentiate navigation elements from one another, but group and place them in a consistent and easy to find place on each page.


Group and place navigational elements (e.g., group of links) consistently throughout the website. Maintain expected conventions, such as left or right hand navigations. Use vertical lists to help users move from link to link with a single eye movement.


  • Bailey, R.W. (2000b, October). Link affordance. Retrieved November 2005, from
  • Detweiler, M.C. & Omanson, R.C. (1996). Ameritech Web Page User Interface Standards and Design Guidelines. Ameritech (now SBC).
  • Evans, M. (1998). Web Design: An Empiricist’s Guide. Unpublished master’s thesis. Seattle: University of Washington. Retrieved May 2003, from
  • Farkas, D.K. & Farkas, J.B. (2000). Guidelines for designing web navigation. Technical Communication, 47(3), 341-358.
  • Hornof, A.J. & Halverson, T. (2003). Cognitive strategies and eye movements for searching hierarchical computer displays. CHI 2003 Conference Proceedings, 249-256.
  • Koyani, S.J. & Nall, J. (1999, November). Web site design and usability guidelines. National Cancer Institute, Communication Technologies Branch Technical Report. Bethesda, MD.
  • Lynch, P.J. & Horton, S. (2002). Web Style Guide (2nd Edition). New Haven, CO: Yale University Press. Retrieved November 2005, from
  • Nielsen, J. & Tahir, M. (2002). Homepage Usability: 50 Sites Deconstructed. Indianapolis, IN: New Riders Publishing.
  • Niemela, M. & Saarinen, J. (2000). Visual search for grouped versus ungrouped icons in a computer interface. Human Factors, 42(4), 630-635.

Good Example:

Navigation elements are grouped (high-level topic areas across the top of the page) and consistently placed across the website.

Related Resources: