Design Cop-out #2: Breadcrumbs

In a previous article, we discussed how site maps are a design cop-out. Cop-outs happen when the designers focus on treating a symptom instead of addressing the root problem. This week, we look at a second common cop-out: breadcrumbs.

Hansel and Gretel

According to the Brothers Grimm fairytale, two children of a woodcutter are abandoned in the woods. To assist them at finding their way back to their home, the children ingeniously leave a trail of breadcrumbs behind them.

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.)

Back in 2002, information architect Keith Instone pointed out that there were multiple types of breadcrumbs on a web site:

• Location Breadcrumbs show the user where they are within the site’s hierarchy.
• Path Breadcrumbs show the user the path they took to get to the content.
• 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 Energy.gov 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

The idea behind how breadcrumbs should be used is simple: the user ignores them until they get to a page that isn’t quite what they wanted. They discover the trail of links and click on the one most likely to contain the correct path to what they were originally seeking. Because they can jump more than one level, they can view enough of the hierarchy to let them pick up better scent to the content they’re seeking.

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.

Once, when discussing this topic with a web manager, he pointed out that he’d looked specifically at the log for all breadcrumb usage on his site, and found that users took advantage of it 11% of the time. One in nine users were clicking on a breadcrumb at some point in their travels through the site. Since so many users were making use of them, how could they be a bad thing?

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.

Thus comes the irony of a cop-out: if nobody is using them, then why spend the effort to build them? And, if there is enough demand to justify working on them, one has to ask where that demand is coming from? In the case of breadcrumbs, why are so many people lost on the site?

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.

We could say it was his own fault. After all, he mistyped the category. Had he entered it correctly in the first place, he would have ended up in the right place.

But, could eBay.com have countered the effects of his inability to spell correctly? Could they have prevented him from ending up in the wrong place?

Interestingly, today’s eBay.com 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.

The biggest problem is the lack of scent for the other areas of the site. If a user is in need of breadcrumbs because they are in the wrong part of the information tree, what they need most is good scent to the right part of the tree. However, the breadcrumbs only communicate the branch they’re on—not the branch they need to be on.

Determining What Users Really Need

We’re recommending that when teams see users needing breadcrumbs, they look for other holistic design solutions. They’ll need to watch users and see the circumstances leading up to how the need arises. In almost all cases, they’ll find a better way to solve the problem than traditional breadcrumbs.

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.