DES 2.1 - Provide effective navigation based on recognised conventions

Use common, accepted layouts and navigation standards. This means the user will not need to spend time working out how to use your site. Simplicity and consistency is the key.

  • Be consistent with navigation across each page of the site.
  • Provide a link back to the homepage from every page:
    • e.g. logo at top left of page, an explicit 'home' link.
  • Use clear navigation bars:
    • Make them distinct and distinguishable from the content;
    • Choose the labels for the navigation bar items very carefully - make them meaningful and understandable. Avoid ambiguous terms.
  • Provide feedback on navigation bars:
    • Highlight the current page on navigation bars where possible;
    • Disable the link to the current page:
      • this provides extra non-visual feedback,
      • This avoids potential misunderstanding and reloading of the same page.
  • Be careful with dropdown menus:
    • Avoid specifying multi-levelled cascades:
      • these can be difficult to use, especially where fine control is required;
    • If using dropdown menus then test them once they are coded:
      • test with a range of users to ensure ease of use,
      • Ensure the menus can be used with a keyboard,
      • Ensure the navigation the menu provides is available without the need for scripting, e.g:
        • Make the top menu item a link to an overview page that presents the full set of links present in the cascading menu.
  • Make all in-page links easily recognisable:
    • Style links so that they are clearly distinguishable from other non-link text:
      • Blue underlined is the standard but other styling is fine as long as it is obvious that a link is a link;
    • Limit the number of styles you use (ideally to just 1) and use consistently.
  • Place in-page links where they are needed for action and are supported by the surrounding context:
    • Do not force a user to hunt for a link elsewhere if it makes sense to place it right where it is needed.
  • Be careful not to overdo links in body text:
    • Rather than pepper a passage with many links, consider a separate section at the end that lists related links.

Poor: Menu item for current page is active and indistinguishable from the rest. Good: highlights current page and is not an active link  Poor: multiple nested (cascading) roll down menus
Good: in dropdown menus make the top item link to an overview page that contains the other links too  Provide links in their appropriate context do not make people search in menus