HCI and the Web

XI.5 September + October 2004
Page: 79
Digital Citation

Breadcrumb navigation

William Hudson

back to top 

In a popular Grimm fairytale, Hansel and Gretel are taken deep into the forest in the hope that they will not find their way out. 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 realize1.

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 three billion searches conducted each month in the U.S. alone, averaging 32 per search engine user. (The figure is even higher in the U.K., at nearly 42 per user as of April 2004 according to ComScore Networks.)

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. Figure 1 is an example from a site selling electronic and mechanical engineering supplies.

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 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:

  • Pop-up windows
  • Animated ads (the kind that drop down or march across the page and then disappear)
  • Explanatory pop-up 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.

back to top  References

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

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

Grimm's Fairy Tales: www.ucs.mun.ca/~wbarker/fairies/grimm/

back to top  Author

William Hudson
Principal Consultant
Syntagm Ltd

back to top  Footnotes

1 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 top  Figures

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

back to top 

©2004 ACM  1072-5220/04/0900  $5.00

Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. To copy otherwise, to republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee.

The Digital Library is published by the Association for Computing Machinery. Copyright © 2004 ACM, Inc.

Post Comment

No Comments Found