Breadcrumbs

Example of the Breadcrumbs UX pattern.

Problem

Your users need to know where they are or where they’ve been in an application or site.

Solution

Provide a list of side-by-side links that give users a sense of where they’ve been or where they are and how it fits in the overall structure of your site or application.

Context

The Breadcrumbs pattern has two primary contexts:

Structural Breadcrumbs – Use when your site or application has a logical structuring of steps or a hierarchy where the user could get lost without an aid showing them where they are.
Historical Breadcrumbs – Use when it is important or helpful for your users to know where they have been in your site or application. You want to show the user where they’ve been or what they’ve seen in the application or site and enable them to revisit those through their personal history.

Rationale

Both kinds of breadcrumbs serve the dual purpose of providing navigational information and facilities. For structural breadcrumbs, by far the most common, the information is where the current view sits in the overall structure of your site/app, i.e., how youthink about your site/app structure. This is helpful to users because it helps them to understand where they are in your structure, and the links provide facilities for exploring the related areas in a highly structured and rational fashion. It is a breadcrumb in the sense that if they followed your structure logically down the path, that is the path they would have taken.

For historical breadcrumbs, the focus not on how you think about your structure but on how the userhas experienced that structure. The value here is in providing memory aids to users and easy access to areas that they have already experienced and may be interested in experiencing again. This kind of breadcrumb perhaps more aptly fits the metaphor but users would use it less to retrace steps in a linear progression and more as a pick and choose sort of progression.

Because browsers and many apps (imitating the browser) provide basic back-forward navigation facilities, if you use a historical breadcrumb, you want to add value on top of that by (at least) persisting the history across uses/visits and most likely filtering the history to important stops along the way such only storing product pages and not, e.g., search results, lists, or other things that are likely not as interesting to users.

Implementation

For structural breadcrumbs, you typically should put them in the top left area of the page, as that is convention and where users will expect to find them. The breadcrumb should be horizontally oriented, with the highest/top-most/first logical step in your structure starting on the left and leading to the right with each step. The first item can simply be “Home” (or a home icon), but if you have something more meaningful and specific, you should prefer that, but keep in mind that on that view—the first/topmost—it is pointless to show the breadcrumb, so don’t.

The last item in the breadcrumb should be the current page, and its title should match the current view’s title, or be close to it if it needs to be shorter, but this should not serve as the view’s title—you still need a more obvious title. The last item should not be a link, as a rule.

Prior items should link to views with matching titles, but if you need to shorten, you can use an ellipsis (…) to trim them. Ideally, the breadcrumb should be single-line, which shouldn’t be a problem if you don’t make your structure too deep (a good practice). Separate each link with a visual divider; a common choice is the greater-than symbol (>), and be sure that these dividers are not links themselves.

It’s best to force the link coloring to be consistent (i.e., don’t let it indicate if it has been visited or not). Remember the purpose is not historical but structural.

For historical breadcrumbs, you have more leeway in terms of implementation. There are fewer conventions as it is less often used, but it is common to list “recently-viewed items” in a sidebar area, and you can even link that to an entire view dedicated to listing and managing the history, if you so choose. You’ll typically want to show the most recent at the top and, except on the dedicated page, you’ll want to limit it to the most recent 2-4 items.

You have to be careful to not confuse the user—they don’t need to know they visited a thing several times throughout the history, so if they visit an item again, move it to the top (don’t copy). Remember, it is not a linear breadcrumb that they use to literally retrace their steps. Also, it is a good practice to give users the ability to turn this sort of breadcrumb off as some users might view this as some kind of impingement on their privacy.

Help Me Get There

Infragistics has some tools that can jumpstart your efforts to implement this pattern. Broken down by technology, they are as follows.

Windows Forms

You can use the NetAdvantage for Windows Forms Control WinNavigator to implement this pattern. If you download the NetAdvantage for Win Client bundle, you can find a sample in the WinForms sample browser called MyFinancesto see it in action.

WPF

You can implement this pattern using the hierarchical view of the XamDataCarousel Control. If you download the NetAdvantage for Win Client bundle, you can find a sample in the xamFeatureBrowser called Breadcrumb Navigation to see it in action.

JavaServer Faces

Create bread crumbs in JSF with the ig:link component. Using JSTL or facelets, you can easily create breadcrumbs that will dynamically update based on the user’s location within your application. See an example here.

Accessibility

Each breadcrumb label should match the corresponding page title.

Allow the breadcrumb and each link to be navigated to with the Tab key.

When an individual breadcrumb label has keyboard focus, the Enter key will navigate to the linked page.

Examples

The primary example for this pattern is from the Yahoo! Travel site. You can see they use the standard > to separate the items, the current page is not linked, and the top-most page goes to Travel (the “home” page for the travel site).

http://quince.infragistics.com/113n