Design Pattern of the Week: Breadcrumbs

This post is part of a series on mobile user interface design patterns, excerpted from Designing the Mobile User Experience, John Wiley & Sons, 2007. This second set of patterns will address screen design for mobile applications.

Breadcrumbs are a popular mechanism for locating the user within a site and providing supplemental navigation.

Design

Breadcrumb design for stylus devices is similar to breadcrumb design for desktop devices. Use the same rules of thumb for font size and color, with the caveat that some mobile devices support only one font. Ensure that the breadcrumbs are meaningful, and enabled as links.

Consider restricting the breadcrumbs to only one line, with a link like "<<<" on the left edge for access higher in the hierarchy. The right side of Figure 6.6 illustrates breadcrumbs for a stylus device.

The traditional style of breadcrumbs is not appropriate for scroll and select devices. To provide the orientation and navigation capabilities offered by breadcrumbs, use a drop-down list near the top of the screen as illustrated on the left side of Figure 6.6. If scripting is available, simply go the the relevant page when an item in the drop-down is selected. Otherwise, include a Go button. If at all possible, set the default focus below the breadcrumb controls. Note that this implementation shares much in common with computer folder navigation mechanisms.

Applicable Devices and Platforms

Most popular on web sites but can be used in applications as well. The enhanced navigation capabilities available to applications make breadcrumbs less important on non-web platforms.

When Used

Most typically used in complex, hierarchically arranged web sites. Can be used elsewhere, but the breadcrumbs tend to designate locations in the hierarchy.

Rationale

Breadcrumbs have a lot of text. Home > Products > Printers > HP 6131 > Specs can have a smaller font and be unobtrusive on a desktop site; on a mobile phone with only one or two font sizes, that information will take two or three of a device's eight to 15 available lines of text, and is further in the most valuable place on the page. The space is much better used for content, not supplemental navigation.

and is further in the most valuable place on the page. The space is much better used for content, not supplemental navigation.

This is not true, a breadcrumb at the top of the screen adds both supplmental navigation and an indication of a users relative position in the application structure which is hard to convey without such a thing.

I definitely agree that using the breadcrumbs for signposting is an excellent use. Where I disagree is using 2-3 lines of a 8-10 line display for signposting. This is on top of any header matter and softkey labels and maybe also a browser “title bar”. Thus that 8 line display may only have 6 lines of text available for a web page, and half of that just got used for the title and breadcrumbs (assuming that the title itself is only one line). That’s too much space.

Thus the design pattern uses only one line of text, providing the sign posting and navigation without the space costs of traditional breadcrumbs.