Breadcrumbs

The Design Need:

You need to provide feedback about the user’s location within the website structure and allow to navigate back to a higher level.

Design Solution:

Breadcrumbs show the titles of the sections in the website hierarchy that lead to the current page. When using a breadcrumb trail, keep in mind that they are a secondary navigation aid and users often do not see them. If the breadcrumb does get noticed it can be a very helpful element. Design best practices for breadcrumbs are as follows:

• Do not use a “path”-based trail that shows the path taken by the user to get to the current page. This duplicates the function of the back-button, does not reveal anything about the website’s structure and is useless when the user arrives via an external link. The latter type of user often benefits most from using a breadcrumb trail, if it is showing.
• Make your breadcrumbs look like breadcrumbs, with:
  • A horizontal line
  • Near the top of the page
  • A simple, arrow-like, separator between the different crumbs
  • A simple text link for each level
• Do not make a link out of the current page.
• Do not use “You are here” since it is non-functional extra text, and if your breadcrumbs are well-designed they will be recognized as such.
• Show the full path from the current page to the home page.
• Make sure that the text link in the breadcrumbs matches the titles of the related sections.
• Do not place breadcrumbs at the highest level of the hierarchy since they will not lead anywhere and only repeat the page title.

When to use:

Use breadcrumbs as a secondary navigation aid. Use breadcrumbs on websites with a hierarchical structure and several levels of content.

Breadcrumbs are especially useful for users who come in via pages deep in the hierarchy, e.g. via a Google search. The breadcrumb trail reveals the structure of the site and can attract users to pages at a higher level that might contain related content. This can help to reduce the bounce rate.

Do not use breadcrumbs if they do not add anything, i.e. if the breadcrumb only shows levels that are easily recognized in the main navigation and is placed very close to these components.

Do not use breadcrumbs when sections are categorized in multiple categories. Breadcrumb trails work best in static hierarchies where each item is placed in one category.

Why use this solution (rationale):

Breadcrumbs can help the user to get an idea about the structure of the website. It is therefore important that the breadcrumbs represent the site hierarchy correctly.

One of the most important arguments against the use of breadcrumbs is the fact that many users do not see them. Reasons to use a breadcrumb include:

• Breadcrumbs offer good assistance to those users who do see them.
• More and more users are used to them and miss breadcrumbs when they are not there.
• A missed breadcrumb trail doesn’t cause problems for the user.
• Breadcrumbs do not take up much space in the interface.

More info elsewhere:

“Usable breadcrumbs with guidelines” on www.baekdal.com

“Breadcrumb Navigation Increasingly Useful” on www.useit.com

“Breadcrumbs In Web Design: Examples And Best Practices” on www.smashingmagazine.com

“Breadcrumbs” design pattern on www.welie.com

“Breadcrumbs” design pattern on www.ui-patterns.com

“Breadcrumbs” design pattern on www.developer.yahoo.com

• Categorized as Design Patterns