Design Guidelines: Breadcrumbs

Breadcrumbs are a very handy UI element and yet we often forget to use it, or we apply it in the wrong way. Here are a few guidelines when you are using breadcrumbs.

• Breadcrumbs should aid navigation and not replace it.
• A crumb is related to it’s neighbor through hierarchy.
• Use the same labels to describe crumbs and their corresponding pages. Calling a crumb “Home” and the page “Index” is bad practice.
• Only crumbs that are higher up in the hierarchy should be clickable. The current or last crumb should not be a link, after all, the user is already on that particular page.
• The location of breadcrumbs is also important. They should always appear close to the title, at the top of the page.

Notes:
Stick to convention when using breadcrumbs. Breadcrumbs are of real value when a user enters a page somewhere deeper in the hierarchy of the site, especially when a user finds a page via a search engine. In the case of web applications, crumbs are less common, after all, there is not always a real hierarchy. It can however, function as an orientation tool in such an application. (eg. Calendar > Add Event > Event Details)

An example of breadcrumbs, as applied by Ebay:

Apple’s take on breadcrumbs is mostly good expect for the fact that the current breadcrumb, “MacBook Pro”, isn’t clickable although it has the same appearance as “Shop Mac”, which in turn, is clickable.

If you found this post to be informative you could also take a look a the following posts:
Design Guidelines: Drop Down Menu’s
Design Guidelines: Tabs

Tags: guildelines, breadcrumbs, apple, ebay