Design Cop-out #2: Breadcrumbs

by Jared M. Spool


Hansel and Gretel


Breadcrumbs on a web site serve a similar purpose. The trail found on the page is there to help the user find their way back to where they started. (Interestingly, Hansel and Gretel’s breadcrumbs were eaten by the small animals inhabiting the woods, rendering them unavailable for the return trip.)


  • Location Breadcrumbs show the user where they are within the site’s hierarchy.
  • Attribute Breadcrumbs show the user the attributes they’ve chosen while conducting a faceted search.
  • Application Breadcrumbs show the user the progress they’ve made in an application.

Most sites that provide breadcrumbs show the location variety. In this case, each page displays the optimal path the user could’ve clicked on to get it. For example, the page, “A Brief History of Coal Use” displays the breadcrumb trail of “Educational Activities > Energy Lessons > Coal-Introduction > Coal History” even though the user could get there without clicking on any links in that trail.

Even though path breadcrumbs are most like their fairytale ancestors, they are infrequently used on sites. It’s rarely useful to display the oft circuitous route the user takes. Attribute breadcrumbs are more common now that guided navigational techniques have come into vogue. And, designers use application breadcrumbs to denote the completed steps in a multi-step workflow, such as checkout.

Typically, each element in the breadcrumb is a link, allowing the user to click to go “back”. But, it’s not really back because, in many cases, the user never traversed those pages to get where they now are. Therefore, breadcrumbs really are a way to open up the site’s hierarchy for inspection—to let the user access a broader perspective of the site content—and that’s where the problem comes in.

The Symptom


Because the designers live within the site’s hierarchy—frequently making decisions as to where content “lives” relative to what’s already on the site—it makes sense to expose that hierarchy to the user. Breadcrumbs make that easy. In a way, they act as a type of map, showing the user where they are within the site at any time.


How Are Breadcrumbs a Bad Thing?

Breadcrumbs aren’t bad, per se. However, like all things, they take resources to implement well. Of course, with less resources, you can create poorly designed breadcrumbs. But poorly designed breadcrumbs won’t help anyone, so if you’re going to make them useful, you need to spend the resources to do so.


Acoustic Guitars

Several years ago, while watching users shop on eBay, we observed a young man who was interested in getting a new acoustic guitar. In the site’s search box, he mistakenly typed “accoustic guitar”, apparently thinking that’s how it was spelled.

To his benefit, dozens of eBay sellers also believed that’s how it was spelled, as there were 35 ‘accoustic guitars’ for sale. (When I tried the same search recently, it produced 83 products, so apparently ‘accoustic’ instruments are a growing market.)

Our young man suspected something wasn’t right because the number of products seemed too low. He clicked on the breadcrumb labeled “Acoustic Guitars” to find more than 3,000 products and was pleased. The breadcrumbs helped him find the selection he was seeking.

The Root Causes

It is true—the breadcrumbs helped our guitar purchaser get to the right selection. However, he was in the wrong place because of a problem.



Interestingly, today’s does have features to avoid this. For example, typing in the two starting letters into the search box “ac” yields a drop-down suggestions, like “acer”, “accordian”, and “acoustic guitars”. If the user misses that clue, there’s a link at the top of the results stating, “Did you mean… acoustic guitars? (7969 items)”

Different scenarios can bring users to need breadcrumbs. One is the “accoustic guitar” scenario, where the user produces search results that don’t quite meet their need. Another is they searched with a ‘correct’ query, but the results are difficult to interpret and the users makes a sub-optimal choice.

It’s also possible that the user clicks on category links, thinking they are following a good scent, only to find themselves someplace they didn’t expect. It’s also possible that everything worked great, they found the content they wanted, but are looking to explore the topic more.

Breadcrumb Failures

Even in the rare instance when it makes sense to use the breadcrumbs, they are hard to implement well. Many users don’t recognized them and, therefore, don’t take advantage of them. They may recognize them, but become confused because the elements in a location breadcrumb doesn’t represent any path the user thinks they’ve traversed.

For those that do recognize what breadcrumbs are, the wording of the individual trail elements becomes very important. If the user isn’t familiar with the topic area or domain, the terms can be confusing or meaningless. To help them have more scent, they have to be longer links, but real estate for breadcrumbs is often at a premium.


Determining What Users Really Need


For example, in the instance where the user wants to explore a topic in more depth, there’s probably a better way to indicate the “next topic” than a simple, overarching heading of the topic area. Perhaps a suggestion list of specific follow-on topics will serve their need better? Understanding the user’s need will easily spawn some great ideas.

Breadcrumbs aren’t evil. Users won’t collapse in their chairs.

About the Author
