Are you following best-practices guidelines for navigation?

Based on our usability findings and research over the years we’ve compiled a list of best-practice guidelines for navigation. How does your website compare to these best practices?

Global navigation

  • Let users begin the top task or two directly on the Home page, without requiring any navigation
  • Provide a small number of links to major sections of content or functionality
  • Provide a link to the Home page from every other page of the site, but no active Home link on the Home page
  • Link the logo to the Home page
  • Provide links to all major parent pages of the current page
  • Include a site search box on every page, with the possible exception of application pages which may have their own dedicated search capabilities

Local navigation

  • Emphasize links to the top tasks, relevant to the current context, which are not directly supported on the current page
  • Provide sub-links, roll-over text, or some other form of “look ahead” to help visitors predict where each link will take them (“where can I go?”) if there is the potential for any ambiguity
  • Provide cues as to the person’s current location (“where am I?”) – e.g. highlight the currently active navigation elements
  • Provide cues as to the path one could, or did, take to get to the current page (“how did I get here?”) but this should always be secondary to the primary goal of navigation (“where can I go?”) – Breadcrumbs can be used to concisely show a page’s location within the site hierarchy
  • Provide links to other, task-relevant pages at the same level
  • Provide direct access to the top website task(s) directly on the Home page and to the top tasks for a given section on the main landing page for that section
  • If expanding menus are provided, manage visitor expectations by providing a clear indicator that the menus do expand
  • Ensure all link destinations are specific and unique

The following annotated screen shots, taken from the Transport for London website (http://www.tfl.gov.uk/businessandpartners/default.aspx), provide a visual summary of some of the best practices.

Image of Transport for London website, highlighting best-practices

Image of Transport for London website, highlighting best-practices

Image of Transport for London website, highlighting best-practices

Image of Transport for London website, highlighting best-practices

Terminology and presentation

  • Make link labels clear, concise, unambiguous and consistent
  • Use the language of your customer, not internal jargon or organizational terms
  • Left-justify text in a vertical menu to make it easier to scan
  • Begin each menu item with the most specific, information-carrying words
  • Do not start several menu items with the same words because it makes the menu difficult to scan

General

  • Use minimal global or local navigation on web application pages where people are involved in the process of filling out a form, making a transaction, etc.
  • Ensure the navigation element associated with the current page is not an active link
  • If drop-down or fly-out menus are provided, ensure a clear arrow icon is associated with each parent item to indicate the presence of the additional menu information
  • Make sure links are readable, using a sans serif font of appropriate size – make sure they resize with browser settings
  • Maintain a consistent navigation approach throughout the website
  • Place the main navigational elements where people expect them to be – generally along the top and left-hand side of the page
  • Ensure the required navigation is available, when needed, but does not dominate the page
  • Always use text for navigation links, not images

Contact us if you’d like to discuss applying these best-practices to your website.

Back to Top

This entry was posted in Uncategorized. Bookmark the permalink.

Comments are closed.

Contact

  • +1 613 271 3001 Main
  • +1 866 322 8522 Toll-free
  • +1 866 232 6968 Fax

Follow Us    Twitter   LinkedIn

© 2012-7 Neo Insight. All Rights Reserved