Friday, April 20, 2007

Breadcrumb Navigation Increasingly Useful

Not all design decisions are a matter of website survival. Of course, it's important to get the big things right, or you won't have any users. But getting the small things right enhances usability and fosters user comfort. A perfect example here is the breadcrumb trail.

Breadcrumbs won't help a site answer users' questions or fix a hopelessly confused information architecture. All that breadcrumbs do is make it easier for users to move around the site, assuming its content and overall structure make sense. That's sufficient contribution for something that takes up only one line in the design.
Breadcrumbs have always been a secondary navigation aid. They share this humble status with site maps. To navigate, site visitors mainly use the primary menus and the search box, which are certainly more important for usability. But from time to time, people do turn to the site map or the breadcrumbs, particularly when the main navigation doesn't quite meet their needs.

Despite their secondary status, I've recommended breadcrumbs since 1995 for a few simple reasons:
Breadcrumbs show people their current location relative to higher-level concepts, helping them understand where they are in relation to the rest of the site.
  • Breadcrumbs afford one-click access to higher site levels and thus rescue users who parachute into very specific but inappropriate destinations through search or deep links.
  • Breadcrumbs never cause problems in user testing: people might overlook this small design element, but they never misinterpret breadcrumb trails or have trouble operating them.
  • Breadcrumbs take up very little space on the page.

So, despite the merely mid-sized benefits, the overall cost-benefit analysis comes out quite strongly in favor of breadcrumbs. Their downside is incredibly small: while they do take up space, that space is minute. When you divide a mid-sized numerator by a tiny denominator, the resulting fraction is substantial.

The main argument against breadcrumbs is that many users overlook them. So, why do something that only benefits a minority?

As I've long argued, breadcrumbs are different than most other little-used design elements for the simple reason that they don't hurt users who ignore them.

Growing Popularity

The case against breadcrumbs is crumbling. Every year we see more people use breadcrumbs in our studies. Because breadcrumbs are not important enough for a dedicated study, I don't have an exact number for the current percentage of breadcrumb users. But it's definitely growing over time.

In testing an e-commerce site last month, for example, one user complained: "This is missing a feature to go back to the previous page."

I found this apparent request for a Back button puzzling, since the button was featured prominently in the browser and the person had easily used it earlier in the test session. Also, for six years, it's been an established guideline to avoid duplicating browser functionality in the page design.

It quickly became clear, however, that the user wasn't asking for a duplicate Back button. Elaborating on the previous complaint, she pointed to the place on the page where breadcrumbs typically appear and said she wanted the list of links to higher-level pages.
In other words, the user wanted breadcrumbs. She'd seen them before, but didn't know what they were called, so she asked for them using words that -- if taken literally -- would have been easily misinterpreted.

This is a great example of the hard-won lesson of usability: don't comply with user requests. Give more attention to what study participants do than to what they say.

Consistency Breeds Familiarity

Human behavior doesn't change much over the years. My recent book documents a few cases where Web design guidelines from the mid-1990s have changed. But mainly, usability guidelines stay the same decade after decade.

Why are people now using breadcrumbs to the extent that they actually miss them when sites don't offer them?

It's exactly because of breadcrumbs' modest nature that people are becoming accustomed to them. There aren't too many ways to mess up breadcrumbs in a design. No fancy stuff, just a line of textual links.

Breadcrumbs are almost always implemented the same way, with a horizontal line that
progresses from the highest level to the lowest, one step at a time;
starts with the homepage and ends with the current page;

has a simple text link for each level (except for the current page, because you should never have a link that does nothing); and

has a simple, one-character separator between the levels (usually ">"). This consistency means that people know a breadcrumb trail when they see one, and immediately know how to use it. Consistency breeds familiarity and predictability, which breed usability. This again means that you must comply with conventions in the design of your own breadcrumbs.

Breadcrumbs are also useful for intranets: 80% of this year's award-winning intranets use breadcrumbs.

Hierarchy or History?I'm sometimes asked whether website breadcrumbs should follow the fairytale model of Hansel and Gretel. In that story, the children walk through a bewildering forest, dropping breadcrumbs behind them in hopes that they might later find their way out.
In user interface design, it's often dangerous to take metaphors too far, and breadcrumbs are again the perfect example. Offering users a Hansel-and-Gretel-style history trail is basically useless, because it simply duplicates functionality offered by the Back button, which is the Web's second-most-used feature.

A history trail can also be confusing: users often wander in circles or go to the wrong site sections. Having each point in a confused progression at the top of the current page doesn't offer much help.

Finally, a history trail is useless for users who arrive directly at a page deep within the site. This scenario is when breadcrumbs show their greatest usability benefit, but only if you implement them correctly -- as a way to visualize the current page's location in the site's information architecture.

Breadcrumbs should show the site hierarchy, not the user's history.
For non-hierarchical sites, breadcrumbs are useful only if you can find a way to show the current page's relation to more abstract or general concepts. For example, if you allow users to winnow a large product database by specifying attributes (of relevance to users, of course), the breadcrumb trail can list the attributes that have been selected so far. A toy site might have breadcrumbs like these: Home > Girls > 5-6 years > Outdoor play (note that the links should be colored as well as underlined, but I don't do this here to avoid confusion with these dummy links).

Looking ahead, people will use breadcrumbs even more because they're an important navigation tool in Windows Vista. Most users don't distinguish clearly between the operating system, applications, and content or websites. Users will thus transfer their understanding of Vista's interaction techniques to your website.

If you don't have breadcrumbs, it's time to start planning for them. They'll improve your usability a bit now, meet increasing user expectations in the future, and -- most importantly -- they won't hurt.

No comments: