2c Usable designs for some common navigational elements

Breadcrumb trail

• Use as a navigation aid to show people where they are in a hierarchical site structure, and provide them with a way to go up in the hierarchy
  • Often used in sites with a deep structure
• Use arrows or chevrons to visually indicate hierarchy by communicating a sense of moving along from left to right
• Disable the link for the current page to further help explain to users where they are within the site structure
  • If the current page title is directly under the breadcrumb, the title can be left off the breadcrumb itself
• It is optional to use a ‘You are here:’ prefix before the top (home) link in the hierarchy

Tabs:

• Use as a navigation aid to show people where they are in a hierarchical site structure, and provide them with a way to go up in the hierarchy
• Tabs should look like real-world tabs:
  • Make sure the current tab looks like it is in the front and all the other tabs look like they are behind
  • Ensure a clear visual connection/ continuity between the current tab and current page
• Stick to a single row of tabs – multiple rows of tabs can become very confusing

In-page contents list (for navigating within a page) [see 8c for an example used for an FAQ page]:

• Use for long structured pages to help the reader see an outline of the page contents and navigate directly to different sections further down the page [see 3a]
• Place the contents list directly under the page title, or just under a short summary passage
• Put a clear title before the list to clearly communicate that the links are within page, such as ‘On this page’
• Use a bullet or ordered list of in-page links to the main section headings
• Use the same titles as the headings
• Indent to show any hierarchy of subsections