On April 10, 2007, Jakob Nielsen’s Alertbox was titled “Breadcrumb Navigation Increasingly Useful.” I teach a section of an online class in information technology tools and applications at the San José State University’s School of Library and Information Science. One of my students, while doing the style guide assignment for the final project, mentioned that I didn’t discuss breadcrumbs. Earlier in the semester I suggested reading chapter 6, “Street Signs and Breadcrumbs: Designing Navigation” in Steve Krug’s Don’t Make Me Think. Here is the missing mini-lecture.
Krug wrote that “breadcrumbs show you where you are.” He continues, “They’re called Breadcrumbs because they’re reminiscent of the trail of crumbs Hansel dropped in the woods so he and Gretel could find their way back home.” In a subnote he says of the H&G story, “basically, it’s a story about how unpleasant it is to be lost.” In terms of good usability, the web site designer wants the visitor to always be able to know where they are and to be able to find their way home. Make your overall navigation elements a more pleasant experience.
Breadcrumbs are a secondary navigation path that is generally near the top of the page. A breadcrumb path helps visitors visualize where they are in the Web site and gives them confidence in moving around the site. I stress again that breadcrumbs are secondary navigation. Nielsen writes that breadcrumbs won’t “fix a hopelessly confused information architecture.” Krug writes, “they are most valuable when used as part of a balanced diet, as an accessory to a solid navigational scheme.”
Breadcrumbs are unlike H&G breadcrumbs because they don’t usually show a visitor where they have been. A visitor may have landed on the current page by clicking on a link in a search engine or on another web site. Breadcrumbs are not implemented the same way on every site. It is a web site style issue to determine if the breadcrumb should be based on history or hierarchy. Both Nielsen and Krug recommend hierarchy over history.
Visually, there is a single-character separators between crumbs. The separator, whether it is an arrow, a greater than symbol (>), a hyphen, a comma, or a pipe symbol (|), should indicate levels in the site. Both Nielsen and Krug agree that the greater than symbol is the easiest for visitors to understand. The primary point is that the designer must be consistent and use the same separator between each crumb in the path. If the site doesn’t have a hierarchy, then Nielsen writes that the breadcrumbs should “show the current page’s relation to more abstract or general concepts.”
Nielsen’s article summarizes the reasons for using breadcrumbs. In one bullet point he writes, “Breadcrumbs never cause problems in user testing; people might overlook this small design element, but they never misinterpret breadcrumb trails or have trouble operating them.”
Accessibility and Section 508 compliance are important elements in developing Web sites. Breadcrumb navigation improves accessibility.
Breadcrumbs have a function beyond usability and better access, they have an SEO (search engine optimization) benefit as discussed in this article by Stephan Spencer: SEO: Breadcrumb Trail Boosts Rankings.
Additional Links
Yahoo! Developer Network: Design Pattern Library: Breadcrumbs.
Breadcrumbs can also be used in a category map. See example:
Usability Glossary: information Architecture.
Coding Breadcrumbs
Basketcase Web Development: PHP Breadcrumbs class. This is a PHP class that has many configuration options. It is a server-side solution that requires PHP to be running on the server that hosts the web site.
For a JavaScript method, see Lee Underwood’s tutorial on
How to Create a JavaScript BreadCrumb Script.
Dynamic Drive posted a bit of CSS code that styles the breadcrumbs: CSS Breadcrumbs.
The SimpleBits author posted an example of various ways to create breadcrumbs in HTML. The author’s question is, should the designer wrap the path in a paragraph element, use an unordered list element, a definintion list element, or something else. There are many responses to this 2004 post.
All quotations from Krug are from the first edition of his book.
The second edition is available at Amazon.com:
Don’t Make Me Think: A Common Sense Approach to Web Usability (2nd Edition)
