Navigation

Website structure

Categories, hierarchies and labels should be as the users would think about them. An information architect (IA) can advise on how to find out what these should be and how to test your proposals with users.

Usability guidelines

  • Content must be organised into categories that make sense to your user.
    Users won‘t be able to find content if it‘s not where they expect it to be.

Common mistakes

  • Organising content in a manner that reflects the internal structure of the organisation.
    Users are unlikely to know, understand or care about how your organisation is structured. They will expect the content to be organised in a manner that is logical to them. An exception may be a company intranet site where it may be sensible to organise by department. Following a proper IA process will establish this.

Primary navigation

Primary navigation is usually delivered via horizontal tabs in a bar underneath the header.

Fig. 1 – example horizontal tabs for main navigation.

Usability guidelines

  • Place the navigation bar consistently on each page.
    A consistent navigation approach helps keep users orientated. Possible exceptions are pages within a process where navigation is reduced to minimise distractions within the process.
  • The navigation bar must be clearly differentiated from the rest of the page and the tabs should look and behave like traditional tabs.
    Users need to be able to clearly recognise the navigation elements.
  • The whole of the tab must look and be clickable.
    Users need to be able to recognise links and be able to easily click on them.
  • Highlight the tab that denotes the current page or section.
    The different visual treatment helps users know where they are within the site structure.
  • The tab labels should be concise yet clearly describe the destination content.
    Users scan labels for trigger words that will tell them what content they can expect to see if they click that link.
  • Tabs should be ordered left to right in order of priority.
    This order gives top priority to the most popular content or tasks.

Common mistakes

  • Using fly out menus that interfere with user‘s mouse actions when trying to use the rest of the page.
  • Using too many tabs.
    Horizontal tabs are not scalable. The fewer tabs there are the more focus each one will get.
  • Not making the whole tab area clickable.
    This causes problems for users who have problems with fine motor movements.

Left hand navigation

The left hand navigation area will contain the primary or secondary navigation (depending on whether or not a horizontal tab bar is used).

Task or product focused sites

Sites such as aviva.co.uk, where users are likely to be interested in finding one specific product or service, may use a task focused navigation that drills down showing one level at a time. This saves having all of the links shown at once removing unnecessary distractions. Ensure that the top link takes the user back up to the higher level.

Fig. 2 – product focused left navigation.

General browsing sites

Sites which require general browsing, such as aviva.com, should expand or contract the list to show the different levels of content. Typical limit would be 3 levels that can be shown using left navigation. The main category link should be at the top of the list.

Fig. 3 – general browsing left navigation.

Usability guidelines

  • Highlight the currently selected page within menu.
    Giving it a different visual treatment helps users know where they are within the site structure.
  • Link labels should clearly and concisely describe the content they point to.
    Users scan labels for trigger words that will tell them what content they can expect to see if they click on this link.
  • Page hierarchy should be shown through indentation.
    Communicating any hierarchy through visual design will help the user understand where they are in relation to the site structure.

Common mistakes

  • Overuse of bold. Bold only adds emphasis when used in moderation. If everything is bold the emphasis is lost and readability is significantly reduced.
  • Not allowing enough white space around the menu.
    Having some white space around the menu to prevent it being crowded out and possibly overlooked.

Usability guidelines

  • Use meaningful link labels. The link label should clearly describe the destination page in a concise yet descriptive manner.
    Users scan for keywords within links in order to find what they are looking for.
  • Underline contextual or body copy links.
    Underlining individual links helps with their recognition.
  • Avoid underlining links that are obvious navigation areas.
    The underline reduces the readability so if it isn‘t required to identify a link it should be omitted.
  • Ensure links stand out from the surrounding content. They should have a consistent colour – blue is considered best practice.
    Users scan for links. Help them find them.
  • Use “title values” with extra information to support links where ever possible.
    The more you can communicate about what and how a link will work the better a user will be able to judge if it links to content that meets their needs.

Fig. 4 – example of a meaningful link.

Fig. 5 – tool tip text to add more information about the link.

Fig. 6 – PDF – use PDF icon and show file size. Tool tip text should state “Opens a PDF document”.

Fig. 7 – Video and images – show format and file size.

Fig. 8 – External website – Show the external website icon.

Fig. 9 – New window – Show the new window icon. Tool tip text should state “Opens in a new window”.

Common mistakes

  • Having links with the same label but link to different locations. Accessibility issue.
  • Having links with different labels that link to the same location.
  • Links unnecessarily running over multiple lines.
  • Excessive use of bold.
  • Links made up of upper case.
  • Using unnecessary words which don‘t add any value such as “click here”.

Fig. 10 – example of using unnecessary words.


Buttons as calls to action

Buttons should be used to perform an action.

Usability guidelines

  • Limit the number of buttons on a page.
  • The primary button should have the most prominent visual appearance. Any secondary buttons should be less prominent.
  • Button labels should follow the same conventions as link labels. eg descriptive yet concise etc…
    Buttons will compete for the user‘s attention. Be clear about about how the user will identify which path to take.

Common mistakes

  • Having multiple calls to action competing for the users attention.

Usability guidelines

  • Search box should be top right of every page and should consist of a text box with space for 25 characters followed by a button labelled “Search”.
    Users typically look for site search in the top right of a page.
  • Make the Search button the default action when the “Enter” key is pressed.
    After entering their search item many users will automatically use the “Enter” key instead of clicking on the search button.
  • Have clear and specific product and content titles in the search results
    Titles should be accurate and descriptive about the content that is returned to enable the user to find what they are looking for.
  • Prioritise search results
    Users will be unlikely to venture past the first page of results. The most relevant results should be as close to the top of the list as possible.
  • Display the populated search box at the top of the results page.
    Users are more likely to amend their original search terms rather than start again.
  • Do not display any wording in the search box by default.
    Users will recognise an empty search box with a “Search” button faster than a populated search box.
  • Provide a clear and easy–to–use paging device using a larger than usual font.
    If users want to view the subsequent search pages it should be easy for them to do so. Don‘t make it fiddly, or users with limited mouse control will have difficulty using it.

Fig. 11 – example of a search box.

Fig. 12 – example of pagination.

Common mistakes

  • Adding un-related superfluous promotional content which detracts from the users goal of finding what they are looking for. Users become irritated if their task is interrupted by unwanted distractions.

A breadcrumb trail should be used to help users orientate themselves within the site.

Usability guidelines

  • The breadcrumb should represent each level of the site hierarchy.
  • Each page other than the current page should be clickable.
    Users may wish to navigate back up the site hierarchy. It‘s not necessary for the breadcrumb to be displayed on the homepage.

Fig. 13 – example breadcrum.

Common mistakes

  • Not making the higher pages in the structure clickable.
  • Displaying the breadcrumb on the homepage.

Back button

Apart from links, the browser back button is the most commonly used web navigation device. Users rely on it heavily to support them while browsing; whether back–tracking after finding themselves on an incorrect page, or re–orientating themselves when they‘ve finished with a correct page.

Usability guidelines

  • If transaction pages prohibit the use of the browser back button for technical reasons then the application needs to provide an alternative back button. Conventionally placed on the bottom left of the page.
    Users will often need to go back to an earlier page. Providing a system back button will help support this need.

Common mistakes

  • Breaking the browser back button.
    eg Opening new windows. There must be a good reason for doing so as this will impede users‘ natural method of navigation.

Navigation tab order

Many users use the tab key to navigate through a web page‘s elements.

Usability guidelines

  • Ensure page headings are hierarchical.
  • Ensure code is proper semantic HTML.
    Helps support users who prefer tabbing through a web page as well as those using screen reading software.

Highlighting of current location

Navigation is aided by the user knowing their current location within the site.

Usability guidelines

  • Including an H1 page heading on every page. (A possible exception is the homepage.)
  • Highlighting the current menu selection.
  • Appropriate use of breadcrumb trail.
  • The content of the page is consistent with the page labels and links to that page.
    Helps orientate the user within the site.