Web Site Navigation
The Best Choice .... according to the experts
Clear navigation increases the confidence in users about your site and may encourage users to "explore" your content further.
From U.S. Dept. of HHS (2006), Nielsen (1997), Bernard (2001)
Recommended Strategies
- Theory of Information Scent
- Provide consistent navigation across pages
- Create a site-wide title or identifier
- Place table of contents on long pages
- Show users which page they're on
- Provide links to key pages (e.g. home, search, sitemap) on all pages.
- Use clear menu labels
- Embed external links in content
Rationale
Nielsen (2004) – "Information scent refers to the extent to which users can predict what they will find if they pursue a certain path through a website...If users are clicking through a site hunting for specific products or answers, they'll keep going as long as they continue to find links that seem to take them closer and closer to their goal."
Basic Information
Provide Consistent Navigation Across Pages
U.S. Dept of HHS (2006) – "Clearly differentiate navigation elements from one another, but group and place them in a consistent and easy to find place on each page."
Tips
- Use a list of links across the top for small sites (no more than 10 pages). Side menus can also be used, but will take up more screen real estate
- Use left side menus for medium size sites (about 10-30 pages)
- Consider grouping page links into categories if you have more than 10 links.
- Larger sites often use horizontal tabs for major sections and left side menus listing the contents in each section. Major section navigation should always be visible on large sites.
- Extremely large sites (e.g. universities, major corporations) create "portal" or "gateways" for different user types.
- Sites where users perform interactive actions (e.g. ANGEL, eLion) may require additional menu items for different actions.
- Avoid dead-end pages - pages with no way back to the rest of the site
Create a site-wide title or identifier
Nielsen (1997) – "Include a site identifier on every page to let users know where they are relative to the Web as a whole. Usually, this takes the form of a corporate logo in the upper left corner of the screen (upper right if the site is in a language that reads right-to-left). "
Tips
- Penn State pages should include the Penn State logo in the upper left (Policy A.D. 54)
- An additional title bar on the top of each page is also recommended, so users can determine where on Penn State they are. For instance this page includes a title bar at the top identifying the unit "Teaching and Learning with Technology" and the section "Research into Teaching and Learning".
Table of contents on long pages
U.S. Dept of HHS (2006) – "On long pages, provide a ’list of contents’ with links that take users to the corresponding content farther down the page."
This shows readers what is on the page without scrolling. It adds additional information for the busy user determining if they're on the correct page.
Show Users Which Page They're On
U.S. Dept of HHS (2006) – "Provide feedback to let users know where they are in the Web site."
Tips
- Provide a unique title for each page
- Provide a distinct "here" label in the menu for the current page (e.g. different color, not underlined)
Always provide links to key pages
Nielsen (1997) – "Make it easy to get to landmark pages: every page should be linked to the home page and to the search page....[Create] a sitemap that shows the most important levels of your information structure and the relations between different parts of the site."
Tips
- Include a menu item for "Home" on each page, preferably in the top-level of navigation.
- A sitemap is a page listing all pages on the site by category. This is recommended for large sites with multiple sections.
Use clear navigation labels
U.S. Dept of HHS (2006) – "Ensure that [navigation] labels are clearly descriptive of their function or destination"
Tips
- Use concrete labels (e.g. "links, buy T-shirts ") over abstract categories (e.g. "additional resources, products ")
- Avoid technical jargon (e.g. "assessment") in favor of plainer language (e.g. "grading").
- Replace acronyms (e.g. "CLC") with services offered (e.g. "Computing Labs").
Embed external links in content
Bernard (2001) – "Participants significantly preferred the Embedded link arrangement to the other arrangements. Conversely, placing links at the bottom of a document was perceived as being the least navigable arrangement, and was consequently least preferred."
Tips
- If your text includes information from another Web page, include the link within the text.
References
Balasubramanian, V. (1993). A systematic approach
to user interface design for a hypertext framework. Retrieved May
14, 2003, from
http://www.isg.sfu.ca/~duchier/misc/hypertext%20review/chapter4.html
Bernard, M. (2001). Where should you put the
links? A comparison of four locations.
Retrieved May 14, 2003, from
http://psychology.wichita.edu/surl/usabilitynews/3S/links.htm
Festa, P. (1998). Web design not what you pay
for. Retrieved May 14, 2003, from
http://www.news.com/News/Item/0,4,21150,00.html
Lynch, P. & Horton, S. (1997). Web Style
Manual, 2nd ed. Yale Center for Advanced Instructional Media. Retrieved
May 14, 2003, from
http://info.med.yale.edu/caim/manual/contents.html
Nielsen, J. (1997). The tyranny of the page:
Continued lack of decent navigation support in version 4 browsers.
Retrieved May 14, 2003, from
http://www.useit.com/albertbox/9711a.html
Nielsen Norman Group Report (2002). Site Map Usability: 28 design guidelines based on usability studies with people using site maps. Retrieved May 14, 2003, from http://www.nngroup.com/reports/sitemaps/
Rosenfeld, L. (1997). Organizing your site from
A to Z. Retrieved May 14, 2003, from
http://webreview.com/wr/pub/97/10/01/arch/index.html
Shneiderman, B. (1998). Designing the user interface: Strategies for effective human-computer interaction, 3rd ed. Reading, MA: Addison-Wesley Publishing.
U.S. Department of Health and Human Services (2006) Research-Based Web Design and Usability Guidelines. Retrieved Jan 19, 2007 from
http://www.usability.gov/pdfs/guidelines.html