Website Navigation Design Guidelines

Support User Tasks

Support the performance of the user's tasks:

• Organize the overall website navigation to support the performance of user tasks by providing navigation paths based on the natural order of frequent user interactions.
• Group interfaces related to the same common user task on the same webpage if the resulting webpage is not too large or complex.

Rationale:

• This maximizes user productivity by minimizing user navigation actions.
• This makes the website more understandable and helps the user learn the structure of the underlying knowledge.
• Hypertext production is largely about ensuring that navigation is meaningful from the users' perspectives.

Home Page

Provide links back to the home page:

• Every webpage (and major content frame) should have at least one link back to the home page.
• The digital brand logo should typically provide an image mapped link back to the home page.

Rationale:

• Users can get lost in large websites, and need an easy way to start over.
• Web search engines and user stored favorite URLs may cause users to link into the middle of a website, which can make it difficult for users to know where they are and to get back to the homepage of the website.
• If frames are used for navigation purposes, all frames (e.g., navigational frames) may not be visible if the user surfs into the middle of the website (e.g., by returning to a favorite page).

Major Website Pages

Provide links to major website pages:

• Every webpage should have links to the major webpages (sections) of the website.
• On commercial websites, this should especially include the webpages directly involved with making money (e.g., ordering, registering).

Rationale:

• This allows users to rapidly navigate to the major webpages of the website.

Major Webpage Subsections

Every long webpage should have links to its major subsections.

Rationale:

• This allows users to see what is hidden below the "fold line".
• This allows users to easily navigate to the major subsections without scrolling.

Top and Bottom

At the end of each major subsection, each long webpage (i.e., webpage that requires scrolling to reach the bottom) should provide links to the:

• Top of the webpage.
• Bottom of the webpage of the webpage.

Rationale:

• Standard links to the top of the webpage enable users to easily navigate back to the top without scrolling.
• Standard links to the bottom of the webpage enable users to easily navigate there without scrolling (e.g., if lists of related links are listed at the bottom).

Redundant Links

Provide only appropriate redundant links:

• Provide redundant textual links for any image mapped links:
  • Provide textual links that redundantly repeat the links provided by any image mapped graphics.
  • Place these redundant textual links at the bottom of each webpage.
• Avoid excessive redundant links:
  • Avoid making a link out of every occurance of a common phrase on a webpage.
  • Only make links out of the first occurance and any important occurances that users would expect to be links.

Rationale:

• This enables users who have turned off graphics to increase download speed to be able to navigate the links.
• This enables users using textual browsers to navigate the links.
• This enables blind users to be able to navigate the links.
• Placing these links at the bottom minimize their intrusion on the majority of users with graphical readers.
• Too many redundant links makes the content difficult to read, because readers must stop and decide whether or not to follow the link.

Make Links Obvious

All links should obviously be links:

• Textual links should:
  • Be meaningful to the user within the context of the content (e.g., clearly labeled with the destination rather than something lame like "click here").
  • Flow well with the surrounding text, and thus not detract from the readability of the content. Text should be able to stand alone as a printable non-hypertext document.
  • Be underlined.
  • Have their own standard colors (either browser default colors or else website-specific or digital branding colors defined by Cascading Style Sheets).
• Any graphical icons for links should be obviously links (e.g., buttons or arrows).
• Only graphic link icons should have beveled edges.
• Graphic links and imagemap links should have mouseover comments clearly indicating their destinations.

Rationale:

• This allows users to easily navigate to other webpages.
• Content should be about the subjects of the webpages, not about the mechanics of navigation that may become obsolete.
• Not everyone may by using client hardware (e.g., mouse) and interfaces that support clicking (e.g., a voice portal).
• Meaningful links support the creation of meaningful user bookmarks and hot list entries.
• Beveled edges on graphic links make them look clickable.
• Mouseovers allow users to know the distination of nontext links.
• Mouseovers also support text-reading programs for visually-impaired users.

Group Similar Links

Group similar links together:

• Localize links into cohesive groups (e.g., major sections of the website, major topics of a large webpage).
• Try to keep the number of related links in a group less than 7 plus or minus 2.

Rationale:

• This enables users to more easily find the link they want.
• This enables users to ignore irrelevant links.
• Whereas 7 plus or minus 2 is the maximum number of items (e.g., links) that most people can keep in their short term memory, they usually can deal with larger numbers of links if they are grouped into multiple cohesive lists of links.

Corresponding Textual Links

Provide corresponding textual links for graphic linked (e.g., button, arrowhead) and image-mapped links.

Rationale:

• This enables navigation by users who have turned off graphics (e.g., to increase download speed).
• This also enables navigation by users who click on the stop button before the images completely load.

Consistent Links

Links should be consistent:

• Links should be in consistent location(s) on each webpage. For example:
  • Digital brand logo link on upper left corner of homepage.
  • Primary links on the left.
  • Webpage internal (e.g., topic) links on the top.
  • Related secondary links on the bottom.
  • Redundant textual links on the bottom.
• Different kinds of links should have consistently different colors.
• Button or arrowhead links should have consistent sizes, shapes, and beveling or shadowing.

Rationale:

• Consistent navigation:
  • Simplifies usage.
  • Decreases learning time.
  • Minimizes navigation errors.
  • Increases user productivity.

Minimize Degrees of Separation

Minimize the degrees of separation between webpages within the website:

• No webpage should be more than 4 links from the homepage.
• Create a site map, site index, and/or site search webpage that allows users to directly link to every webpage.
• Where practical, limit the depth of the website navigational hierarchy to 3 or 4.
• Instead of just listing subsections of another linked webpage, add links to its subsections so that the reader can navigate directly to the desired subsection.

Rationale:

• This enables users to easily and quickly navigate to any webpage.

Download Sizes

Specify the sizes of large (> 20KB) webpages and files.

Rationale:

• This enables users to decide if they want to wait for a long download before clicking on the corresponding link.

Relative Rather than Absolute URL

Use relative rather than absolute URLs when linking to other pages within the same website.

Absolute URL (Bad) Example:
www.donald-firesmith.com/Components/WorkProducts/RequirementsSet/ SystemRequirementsSpecification/SystemRequirementsSpecification.html

Relative URL (Good) Example:
../../SystemRequirementsSpecification/SystemRequirementsSpecification.html

Rationale:

• Relative URLs are more maintainable, because they require fewer changes when subdirectories move.
• Relative URLs are typically shorter and less likely to contain typographical errors.

Link and Anchor Quality

Evaluate the quality of links and anchors:

• Use a link analyzer to evaluate the website for broken anchors and links.
• Regularly use a link analyzer to links to website-external webpages.

Rationale:

• No user likes to navigate broken anchors and links.
• Links may be to external websites that may move or go out of business.