Website Breadcrumbing: To breadcrumb or not to breadcrumb?
January 4th, 2012by Stacey Crisler
This is a question we often hear from clients. They want to understand do users actually make use of breadcrumbs as navigation? Is it worth cluttering the page with this information? Will it increase user efficiency? Should breadcrumbs be dynamic (i.e., representing the user’s path) or representative of the site architecture?
In this post, we seek to answer the basic question: Should I provide users breadcrumbs on my site or not? The short answer is yes, but let’s look at some of the pros and cons of providing breadcrumbs.
PROS:
- When implemented correctly, breadcrumbs are a great way of providing a user with information about your site and how it is structured
- Breadcrumbs give users an alternative way to navigate to areas of interest
- Users who enter deep into the site due to search engine linkage can easily back out to a broader level of detail and begin an exploration of additional pages on your site
- In situations where the “Back” button does not work (never ideal!) or may jump users back further than they would like (i.e., after making filter selections to narrow choices in a retail clothing category), breadcrumbs can provide an alternative, making the site easier to navigate and providing expected functionality
- Even if users do not utilize the breadcrumbs as navigation it can teach them the site organization and expose them to other levels of information they may not have been aware of
- When implemented correctly, breadcrumbs are a great way of providing a user with information about your site and how it is structured
- Breadcrumbs give users an alternative way to navigate to areas of interest
- Users who enter deep into the site due to search engine linkage can easily back out to a broader level of detail and begin an exploration of additional pages on your site
- In situations where the “Back” button does not work (never ideal!) or may jump users back further than they would like (i.e., after making filter selections to narrow choices in a retail clothing category), breadcrumbs can provide an alternative, making the site easier to navigate and providing expected functionality
- Even if users do not utilize the breadcrumbs as navigation it can teach them the site organization and expose them to other levels of information they may not have been aware of
CONS:
- Adds additional text and potentially, clutter to a page
- Path shown in breadcrumb trail may not match a user’s path to the page (as breadcrumbs should match site architecture, not a specific user path)
- Adds additional text and potentially, clutter to a page
- Path shown in breadcrumb trail may not match a user’s path to the page (as breadcrumbs should match site architecture, not a specific user path)
As you can see, the pros outweigh the cons, and the cost of including breadcrumbs is relatively low, as these are generally text links that take up minimal space on a page. However, like all other page elements, breadcrumbs are only useful when implemented correctly. Following are the top usability do’s and don’ts to think about when including breadcrumbs on your site:
TOP 5 DO’s
- Do keep breadcrumbs simple; extreme design or visual interest should not be the goal
- Do keep balance in mind when designing breadcrumbs: they must be evident enough to be useful, but not take away from the content of the page
- Do keep the breadcrumbs close to the page content, preferably near the title of the page
- Do make each level of the breadcrumbs a clickable link (clearly indicated using whatever color, underline, etc. link convention you are employing in your site), except for the final level, i.e., the current page
- Do be consistent in your use of breadcrumbs – you cannot do this only for a section of your site; it must be done throughout
TOP 5 DON’TS
- Don’t utilize breadcrumbs as a primary navigational element
- Don’t rely on breadcrumbs to make up for poor main navigation options or navigation placement
- Don’t dynamically change breadcrumbs to match a user’s path except when displaying customized information such as applied filters; base breadcrumbs on the site’s hierarchy
- Don’t allow breadcrumbs to be a source of confusion; if your site has many cross-links and pages fit into a variety of categories, breadcrumbing may not be a good option for you as it might create confusion rather than eliminate it
- Do not substitute breadcrumbs for the page heading / title; breadcrumbs should be secondary to the content of the page and the page should be able to function even if the breadcrumbs are taken away
Let’s look at some examples of different breadcrumb implementations to see what works – and what doesn’t.
MyRecipes.com includes a clear and easy to read breadcrumb; however, it only contains 3 levels and loses the initial stages of navigation once one is deeper in the site:
Apple features a more visually interesting breadcrumb structure:
However, the breadcrumbs only exist in the Apple Store and are missing when users navigate to information about a product such as “Features”:
Overstock.com provides a highbred model of breadcrumbs. It includes the navigational hierarchy, but also easily lets users remove the last selection made in the manner of a filter indicator:
Wine.com’s page is cluttered and the breadcrumbs become lost:
I hope these examples give you an idea of how to move forward with breadcrumbs on your own site! To read more about usability best practices you should be employing everywhere on your site, visit our other blog entries and our newsletter.
