Hansel and Gretel escaped the forest by retracing their steps from the breadcrumbs laid by Hansel. Though Wikipedia’s version tells Hansel left a trail of pebbles.
Anyway, the trail is identified as the breadcrumb navigation in website design. In a website with a deep menu structure, you’ll find a navigation which looks similar to this:
You are here: Home > Products > Kitchen > Microwave > Model
This is the most common breadcrumb navigation. Personally, the design criteria for this navigation is to:
- Tell the user it’s a breadcrumb. Normally by the “you are here”.
- Differentiate the webpage you’re on from the trail you used.
In addition, here are my other principles to breadcrumb navigation design.
Unobtrusiveness
The breadcrumb navigation is most commonly located directly beneath the main navigation. Otherwise, directly above the primary content of the website. A breadcrumb navigation is not a replacement of the main navigation but a complimentary navigation.
Readability
I grew from using a minimum typeface size of 11px to 14px (if possible). The only time I used a 10px typeface size is when I’m forced to or the content presented is of no real importance – copyright information. However, I’d avoid using a 10px size for the breadcrumb whenever possible.
Strong Contrast
I’d say this is one of the difficult ones to achieve. Being designers, we end up busy sprucing up the rest of the website, we’d have a tough time trying to make the link colors and activated text color stand out in the breadcrumb navigation. Look at NASA’s website.
Their primary navigation link color and the activated text color of the breadcrumb navigation ended in collision. Oh well.
Other than breadcrumb as a navigation, folks of Delicious applied the breadcrumb concept to a tag filter. Neat.
But before I conclude this article, I personally think slahes (“/”) are not ideal for breadcrumb navigation because they can be easily misinterpreted as divisions and choice (“or”) statements.
Well, these are just my principles when designing a breadcrumb navigation.
P.S.: This article was inspired by Smashing Magazine’s Breadcrumbs In Web Design: Examples And Best Practices.