Breadcrumbs

From MobileDesign

[edit] 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 the figure 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.

[edit] 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.

[edit] 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.

[edit] Rationale

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