home > usability > navigation

navigation

Navigation is the most important aspect of a web site. It helps users find their way around, and tells them where they are and where they can go within the site. It provides a visual means for demonstrating the hierarchy of information to be found. Good navigation often reflects good site structure.

Usually found in these forms:

1. navigation panel
2. location indicator device (breadcrumbs)
3. home button
4. links
5. html title
6. site map
7. search facility
8. the 404 (and other error pages)
9. graphics as navigation and/or links

navigation panel

• Set of links on left hand side or top area of page
• Best saved as a server side include
• Can be text links or graphics
• Should take up as little space as possible
• Keep in a consistent form across the web site
  • Same place
  • If a change of color indicates a different section of the web site - make sure there are other means of indicating the change (see color blindness issues)

back to top

location indicator device (breadcrumbs)

• Should be added to every page other than the home page
• Near the top of the page
• Shows the visitor where the page belongs - where they are in relation to the rest of the web site
• Should be as concise as possible and follow the navigation structure of the site
• Often as a small section of the site map
  • (e.g.) home > usability as on this page
  • Each preceding item needs to be a link
  • The last item should not be a link as it is the current page and provides an visual indication of this

back to top

home button

• Not necessary on actual home page
• A home button / company logo (link to home page) at the very top left
  • Should make sure there is a textual link to home on all pages for visitors who aren't familiar with the logo being a link
    • The location indicator device (see above) provides a textual link to the home page

back to top

links

• All textual hyper links should be underlined
  • The visitor should not have to mouse over, or hover, on a link to realise it is a link - make it obvious
• Provide plenty of textual links within the web site to allow the visitor to cross reference information
• Try to provide these in stacked lists of links, rather than "hidden" within the text
  • Links within text can slow down reading flow, but this may be a good thing sometimes by highlighting particular words
• Differentiate between internal links (links within the web site) and external links (links to other web sites)
  • If you are linking within the web site, simply link the appropriate text
  • If you are linking to an external web site, try to include the full web site address (e.g. http://www.othercompany.com/) in the text
    • This is so visitors know they are going to a different web site before they click on the link
• Don't make links open in a new window by using target="_blank"
  • Visitors can get confused and/or irritated by this
  • Destroys the back button - a common means of back tracking
• When linking to large files, such as .avi or .pdf
  • Provide a KB size in brackets next to the link so visitors know how large the file is before downloading it
• Make sure visitors know when they have been to a link
  • Change the color from blue to red/purple, or a least make visited links a less saturated color than unvisited links

back to top

html title

• In the HTML header
• Keep it relevant to current page
• Shows in the top title bar of the browser
• Keep it useful for those who may bookmark your site
• See also the search engine section for how this affects listings

back to top

site map

• A separate page which shows a site map
• The hierarchical structure of the site with links to all relevant pages
• Have a prominant link to the site map from every page

back to top

search facility

• Some users choose a search facility before using any other navigation feature
• Other users will use a search facility as a last resort
  • Make sure your site has one
  • Put the search box in a prominant position on every page
  • Keep it as simple as possible
    • Don't add extra choices for the user - can be confusing/time consuming
  • Make sure you know/adjust the relevancy of results
  • There are plenty of companies providing free service for smaller sites
    • http://www.atomz.com (used on this site) is free for sites less than 500 pages
    • Allows you to choose how relevant the page title, meta tags, body text etc are.

back to top

the 404 (and other error pages)

• Use your error pages effectively
  • If you don't they will probably leave your web site
• Provide a custom error page for each type of error (404 page not found, 403 forbidden etc)
  • Visitors know they are on your web site
  • Provide the same site wide navigation as on your other pages
  • Utilize it for their benefit
    • Provide a brief description of your web site, why they have got this error and include a site map so they can navigate to something useful quickly

back to top

graphics as navigation and/or links

• Be careful when using graphic/images as links or navigation
• If the border="0" on the graphic tag, there may be no obvious way for the visitor to tell it is a link
  • If they don't mouseover the graphic, they will not see the cursor change to a hand
• Try and provide textual links to the same information as well as the graphic
• If aesthetics are less important - keep the border="1" on graphics/images as links
• See the information on image maps as navigation

back to top