Breadcrumb Navigation: There's More to Hansel and Gretel than Meets the Eye

William Hudson

In a popular Grimm’s fairytale, Hansel and Gretel are taken deep into the forest in the hope they will not find their way out [1]. However, clever Hansel has left a trail of breadcrumbs to show their return path. While the story inspires the term “breadcrumb navigation”, it also provides a metaphor of Web usage that is much stronger than many designers realise (see footnote).

An alarming number of sites (both Web and intranet) are still designed and usability-tested with the home page as the starting point. Yet there are over 3 billion searches conducted each month in the US alone, averaging 32 per search engine user. (The figure is even higher in the UK, at nearly 42 per user as of April 2004 according to ComScore Networks [2].)

While some of these searches may link to a homepage, the vast majority lead directly to a page deep within a site. This is the Internet equivalent of Hansel and Gretel's scenario and probably the most important reason for having breadcrumb navigation. Here is an example from a site selling electronic and mechanical engineering supplies:

Back To: All Products | Mechanical | Fasteners/Fixings | Fasteners – Steel

(As is the case with virtually all breadcrumb navigation, this line appears at the top of the content area of each page.)

There are a number of reasons why breadcrumb navigation is better than the alternatives:

• Providing only a link to the home page is inadequate for all but the simplest sites. Users are already in an area they find interesting. With a home page link you are making them leave the forest so they can find their way back to where they started.
• Site navigation is often difficult to follow backwards – a little like trying to follow trail signs in the wrong direction. This is especially true when the location of each page being viewed is not reflected in the navigation itself (with a highlight or other marker of some type).
• Site navigation usually does not (and probably should not) reflect the whole depth of a hierarchy on each page of a site. In the example above, the product page is at the sixth level in the hierarchy (or more if there is content above “All Products”).
• Users may not understand your site navigation very well, especially if they are not too clear what they are looking for (the “I'll know it when I see it” model). Under these circumstances, following a linear breadcrumb navigation line with increasingly general topics to the left does not require that users understand what each of the headings means.

In fact, there really is only one downside to breadcrumb navigation, albeit a fairly important issue: users often ignore it. There may be several reasons for this:

• Many sites don't include it all.
• Some sites don't include it consistently. For example, Amazon has a breadcrumb navigation line at the top of some intermediate pages, but not individual product pages.
• Designers seem to be ashamed of their breadcrumb navigation. They make the text too small, hide it in the heading, rather than the content area, or fail to use underlines to make the links visually obvious.

However, a study at Wichita State University [3] suggests that investment in breadcrumb navigation may be well-rewarded. It showed a significant improvement in the usability of a site where breadcrumb navigation was present and users were shown how it worked. Of course, this raises the-not-entirely-trivial issue of trying to explain breadcrumb navigation via the web, but we could reasonably expect that this would be a short-term measure. Plus, our friends in the advertising world have demonstrated a number of effective (although potentially annoying) methods of attracting users’ attention:

• Popup windows
• Animated ads (the kind that drop down or march across the page and then disappear)
• Explanatory popup text (using the HTML title keyword)

I admit these are not the most popular of techniques, but they would be in aid of a worthy cause. And while we are waiting for users to catch up with technology (our usual predicament it seems), let’s make sure we are not losing too many in the woods.

References

1. Grimm’s Fairy Tales: http://en.wikipedia.org/wiki/Hansel_and_Gretel

2. ComScore Networks Press Releases: http://www.comscore.com/press/pr.asp

3. Breadcrumb Navigation Study: http://psychology.wichita.edu/surl/usabilitynews/61/breadcrumb.htm

Footnote

Strictly speaking “breadcrumb navigation” is a misnomer since Hansel's breadcrumbs were eaten by birds with the result that he and Gretel remained lost, started snacking on the witch's gingerbread house, and so on. His earlier attempt with white pebbles was more successful, but “white pebble navigation” doesn't have quite the same ring! Back to article