Breadcrumb Navigation Best Practices

If your users are Hansel and Gretel, then your website is the woods, and your navigation is their breadcrumb

The word “breadcrumb” is derived from that old fairytale, Hansel and Gretel. Remember them? They left a trail of breadcrumbs to remind them of where they came from when they ventured into the woods. Well, on the Internet you can consider your website the woods, and your navigation the breadcrumbs.

Breadcrumbs look like this: Home > Topic Name > Article Name

Breadcrumbs have been considered a web design best practice, but Jared Spool of User Interface Engineering made a good point about why a publisher would use breadcrumbs. Breadcrumbs shouldn’t be used to overlook the overall design of your site. In this context, Spool argues that “breadcrumbs are only a little better than the back button (or links labeled “back” or “previous”). Users only pay attention to the breadcrumb when they have lost the scent or somehow need context as to where they are in the site. If users are looking for breadcrumbs in this context, it’s likely that it’s because the scent is poor. Instead of making the breadcrumbs robust, it’s better to invest the development effort in improving the scent.”

[text_ad]

Breadcrumbs themselves are considered a best practice in website navigation, but Steve Krug, author of Don’t Make Me Think, claims that these are the best practices for breadcrumbs themselves:

• Put the crumbs at the top
  • Keeping the breadcrumbs at the top the page make for an effortless non-confusing way of navigation. It is also the most common quadrant to find breadcrumbs, so users looking for this navigation will be able to find yours easily.
• Use (>) between levels
  • According to Krug, trial and error seems to have shown that the best separator between levels is the ‘greater than’ character.
• Use tiny Type
  • To make it apparent that the breadcrumbs are simply an accessory and not part of your content.
• Use the words “You are here”
  • Even though the type is small it cannot hurt to make it self-explanatory.
• Boldface the last item
  • The boldness will make it obvious to the user where they are on your website.
• Don’t use them instead of a page name
  • Do not make the last item double as page name and navigation location. If you are going to use breadcrumbs use both.

The key to persistent navigation is to help the user find anything on the site, fast. No clicking around or desperately hitting the back button. Make it clear where they are, how to get somewhere else, and how to return to where they came from.