Designing and Developing Usable Websites

Website Navigation Guidance

All members of the public should be able to use your website regardless of their level of experience in using the web or the device/operating system they use. The following guidance aims to help make navigation easier to use and access for everyone.

All navigation should be fully accessible through the keyboard

A fully accessible site should have no applications that depend only on a mouse or similar cursor control.

Be consistent with navigation layout

Consistent and well laid out content makes it easier for the person to navigate and find the content that they are looking for.

The layout, structure and colour of the content should be consistent to make information easier to find. The exception for consistent formatting/layout may be the homepage if necessary.

The positioning and appearance of recurring items, such as the logo, navigation bar and headings should be consistent throughout.

Provide a link back to the homepage from every page.

Example of good website design. Use consistent structure and layout. Presenting recurring features such as the navigation bar, headings and logo, consistently helps make the website easier to navigate

Navigation bars should be easy to identify and distinguish

Use clear navigation bars that are distinguishable from the content.

Navigation bars should provide feedback

The navigation bar should clearly identify where the person is on the website. This can be done by highlighting the person’s current location on the navigation bar, and by disabling the link to the current page.

Example of good website design. Navigation bars should provide feedback and clearly identify where the person is on the website. This can be done by highlighting the current location on the website and disabling the link to the current page

Make webpages appear and operate in predictable ways

Webpages, applications and online interfaces should be intuitive and predictable in how they operate. Websites typically have a set structure. This helps people to easily find information and navigate new websites.

Your website should be easy and intuitive to use for members of the public. Examples of established website features, which make navigation more intuitive to use, include:

  • ‘Breadcrumb’ navigation: This provides information about where the current page is in the site structure and provides navigation to higher levels.
    An example of this could be Home > About > Services.
  • Within page ‘contents’ section: For long pages, a contents list for the page should be provided.
  • Primary navigation bar: This is usually presented horizontally near the top of the page.
  • A search box: This is usually in the top right area of the page. The search box should be visible on each page without scrolling.

Customer Communications Toolkit for the Public Service – A Universal Design Approach

Digital and Web Based Communication Systems and Services

Website navigation Checklist

If possible and appropriate web content should be usable on a variety of devices

Web content and applications should be usable by the widest variety of browsers, devices and assistive technologies by using fluid design and relative widths. (Note: Talk to your web designer about ‘responsive websites’).

Design for different size screens and devices. People should be able to access information on a variety of devices from smartphones to tablets.

Learn more

The Centre of Excellence in Universal Design (CEUD) provides information on navigational aids

For further information on page structure, see section 2.2 in CEUD’s ‘Universal Design Guidance for Online Public Services’ (2012).