The humble breadcrumb

Recently I designed a site that had two navigation menus: a global navigation bar and a breadcrumb trail. It was the first time I had ever used breadcrumbs as the only form of secondary navigation, and it got me thinking about this humble form of website navigation.

What are breadcrumbs?

Let’s start at the beginning. What is a ‘breadcrumb’ anyway? Breadcrumbs are those ‘trails’ of plaintext navigational links you see on websites, usually sitting right above the page content:

They get their name from the fairy tale Hansel and Gretel, where Hansel dropped a trail of breadcrumbs in the woods in order to find his way back home. Breadcrumbs work much the same way in a website, allowing the user to visualize their current position within the site’s information architecture, and trace a path back to the homepage.

There are two types of breadcrumbs: path and location. Path breadcrumbs are dynamic, and are a visual representation of the decision path a user undertook to reach their present location. In other words, path breadcrumbs replicate the browser’s history state. For this reason I would argue that path breadcrumbs are somewhat redundant, and in fact you will hardly ever see them on a site. Location breadcrumbs on the other hand are persistent, and display the user’s location within the site hierarchy, for example: Home > Electronics > Hi-Fi > MP3 Players. Location breadcrumbs answer the question “where am I?” at a glance.

Unlike most other forms of navigation, breadcrumbs are backwards looking. Instead of anticipating the page a user might like to see next, breadcrumbs allow them to return to a previously visited page. They provide a user with information about their location within the site, and allow them to easily jump to a page higher up the site hierarchy. For this reason breadcrumbs are especially useful to visitors who want to ‘drill down’ to view content in a particular branch of the site hierarchy, then return to a higher level page and select a different branch to explore.

Do breadcrumbs improve usability?

I had always assumed that the widespread presence of breadcrumb navigation on websites (especially large corporate sites) must mean they improve usability. Well, that depends on who you listen to.

A 2003 study By Bonnie Lida Rogers and Barbara Chaparro for the Software Usability Research Laboratory found that users were more inclined to use other forms of navigation (global navigation menus, in-page links and the back button) than breadcrumbs, and that using breadcrumbs produced no noticeable improvement in the time it took to complete navigational tasks.

On the other hand, a subsequent study by Charles Halcomb and Barbara Chaparro showed that using breadcrumbs does in fact enable users to finish tasks more quickly, but significant benefits are only apparent when the user is TRAINED how to use breadcrumbs first! It seems as if super users understand and exploit the benefits of breadcrumbs, but Joe and Jane Average either don’t know what breadcrumbs are, or don’t understand how to use them effectively.

Interestingly, the Rogers and Chapparro study found that exposure to breadcrumbs may actually affect the user’s mental model of the site structure. When asked to select a graphical representation of the way the test site was organized, breadcrumb users almost all opted for a (correct) hierarchical model, whereas a control group were much more inclined to select an (incorrect) non-hierarchical model. So although breadcrumbs may not noticeably affect the average user’s browsing efficiency, exposure to breadcrumbs still improves their understanding of site architecture, and perhaps in the long-term may result in improved navigational efficiency.

When to use breadcrumbs

So if the navigational benefits of breadcrumbs are questionable, and average users often ignore them, why should us web designers bother with them at all? I can think of three reasons that a breadcrumb trail might be beneficial, irrespective of any efficiency benefit.

Deep site structure

Often secondary menu systems are limited in the number of level they are able to display. When I design a left-hand secondary menu, it will typically only display pages that are three levels deep, or less. If the site contained pages nested at a greater depth – say, four or five levels deep – then breadcrumbs can be an ideal way to communicate the user’s current location within the hierarchy.

Signposting

Breadcrumbs are great for showing a site visitor where they are. In many cases breadcrumbs are prefixed by the words “you are here” or “your location” just to make it really obvious. On a large site where a user might easily become lost and disoriented, this could be very reassuring.

No ‘left-hand’ navigation menu

Breadcrumbs are often used in addition to a global and secondary navigation system, but there is no reason not to give breadcrumbs prominence as a major navigational device in their own right. On large sites like Yahoo! Groups breadcrumbs are useful to help visitors get their bearing as they navigate a vast directory of content. Even on smaller websites breadcrumbs can provide a practical secondary navigation solution. A List Apart has no secondary navigation menu as such, but in areas of the site that are several levels deep breadcrumbs are used to help the user orient themselves and jump up to parent levels.

Designing breadcrumbs

In the Rogers and Chapparro study I mentioned above, it was found that breadcrumbs placed underneath the page title and close to other links on the page were used much more frequently than breadcrumbs located at the very top of the page. This understanding has obviously been absorbed by web designers: I did an analysis of the PC Magazine Top 101 Classic Web Sites of 2006, and found that 92% of breadcrumbs were located below (or to the right of) the global navigation menu.

It is not just in the choice of location that breadcrumb design is consistent between sites, the visual style of breadcrumbs is incredibly uniform too. Of the sites I looked at, 100% of breadcrumbs were organized in a horizontal fashion, and 82% were separated by the ascii ‘greater than’ symbol (>):

I find it interesting that despite the myriad possibilities CSS offers web designers for prettying up breadcrumbs, almost everyone opts to keep them looking as plain as white bread. Here are a few examples of websites where the designer chose to stray from the flock:

When it comes to the best way to semantically markup breadcrumbs, there is some debate (web designers love a good debate!). Dan Cederholm wrote a nice little piece on SimpleBits where he concluded that nested unordered lists were probably the most semantic approach, but that a simple paragraph tag containing a series of anchor tags is probably the most practical. Personally, I would go either with the paragraph and anchors method, or with an unordered list – a nested list seems way too verbose.

Conclusion

Hopefully you’ve found a nugget or two during our foray into the wonderful world of breadcrumbs. If anyone has thoughts about the usefulness of breadcrumbs, I’d love to hear them.