Librarian Way

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)

Steve Krug spoke spoke to the San Diego chapter of the Society for Technical Communication (STC) about usability. Krug, author of Don’t Make Me Think: A Common Sense Approach to Web Usability (2nd Edition) (ISBN: 0321344758), says that software, Web sites, and other products require user testing. Too many products and Web sites are not tested and there is no need to avoid testing due to budget constraints. He says that though “it is really hard to get everything right,” and that even the best products may have flaws for various users, one can find the worst flaws (80%?) that may cause customers to go elsewhere or choose a different product.

He stressed that it is important to start testing early and iterate often. If you are designing a Web site, start by looking at competitors Web sites and see how they have handled the various elements. Note what areas puzzle you and think about how you could make the feature more usable. Look for good usability design. He also says that you can find most of the problems by having just three to five people use your product while you watch them for question marks over their heads. They have to speak out loud while they are using it, so that you understand their thought process and what is really puzzling them. I was quite surprised when he said that power users will trip over the same points that novice users trip over. Design for the novice users because the power users will appreciate the ease of use too.

He gave Google as an example of good usability design. They have a simple, uncluttered search page. For the power user they have additional limiting words and advanced search options, but the basic search is there for everyone and there is no need for the casual or beginning user to worry about Boolean or other search options.

When designing forms, make sure your instructions are very short and near the point of need. Don’t stick a large block of instructions at the top of the form. Remember, people are in a hurry and they scan. We are constantly parsing our environment for clues, and that goes for Web pages too. Make the clues easy to find and clear. Krug showed us a photo of a crosswalk pavement instruction in England. The words “look right” or “look left” with an arrow will instruct the walker on which direction they should be looking for cars. Walkers may read it the first couple of times they see one of these, but it becomes second nature to scan it and then look in both directions. This is more efficient for the walker then processing the word and looking for the arrow. The pavement lettering is at the point of need. It is concise and clear. Be careful not to over instruct.

When using icons, remember that not every culture or even everyone in the same culture is going to understand the icon. Use words too. Be consistent.

The second edition of his book will be out soon. He did usability testing on the first edition to find out what was missing and what should be slashed. He sent a copy of the book to ten people along with instructions with examples on how to edit his book. He also sent them colored markers. They went through and crossed out what they didn’t like or made comments about sections. Then they sent the books back to Krug.

Clarity is the key to usability.

Steve Krug’s Web site: Advanced Common Sense

Authors he mentioned:
The Design of Everyday Things, by Donald Norman (ISBN: 0465067107), User advocacy and human-centered design
Janice (Ginny) Redish, Redish & Associates, Inc., has written a number of articles on writing for the Web and usability design in Web sites.
Jakob Nielsen useit.com: Usability and Web Design.