Tech Word To Know: Breadcrumbs December 2, 2011 by Sarah Bauer BA English Literature

Turkey dinners and fairytales. When I think about “breadcrumbs”, no immediate connection to website navigation appears in my brain. No, I’m considering pesky birds. Flaky pastries.

But I’ve got to consider breadcrumbs in a tech context. And you might need to as well, especially if your business’ site has lots of pages and little organizational direction.

Here’s what Smashing Magazine contributor Jacob Gube has to say about breadcrumbs:

“A ‘breadcrumb’ (or ‘breadcrumb trail’) is a type of secondary navigation trail that reveals the user’s location in a website or Web application”.

Did you get that? Remember the purpose of Hansel and Gretel’s breadcrumbs in the fairytale story. It provided a backtracking tool as they hiked deeper and deeper into the forest. Imagine your web users crawling deeper through pages on your site, and being able to backtrack one step, or three, or seven, thanks to the breadcrumb trail being shown (usually below the title bars or headers, in a horizontal fashion).

How freeing for users! No “Back” button nonsense to worry about as they engage with your compelling content and click onwards.  Breadcrumbs answer the questions “Where am I? How do I get back?” with simplicity. For a site with loads of hierarchal and/or grouped information, breadcrumbs can greatly improve site design and user experience. And they don’t look half bad on the page, either.

There’s 3 types of breadcrumbs:

1. Path: This shows the user the trail they took through a site to get to where they are. This isn’t a popular practice online, because Path breadcrumbs basically handle what a “Back” or “Forward” button does.

2. Location: Static breadcrumb trail that displays the hierarchal sequence of links that have gotten you to where you are. It might look something like this:

Home page > About Us > Sarah Bauer

You can see where “Sarah Bauer” fits in the site’s organizational hierarchy. It can be accessed via the “About Us” page, which is accessed from the home page.  It’s not necessarily the path the user took, but it offers an explicit system for pinpointing location within a site.

3. Attribute: These “display the attributes of a particular page” (Gube). It would look something like this:

Home> Women’s Wear> Jeans>Slim Jeans> True Religion

In this trail, we see that the path has been laid out by the attributes of the items on the page. It’s everything in the “Slim Jeans” category, and the brand “True Religion”.

Exciting, right? Especially for us Tidy Teds out there, who like to keep things organized. But don’t go leaping into breadcrumb land unless you manage a multi-page site with lots of content. Even then, there are other options. This is just one.

If breadcrumb trailing looks like the right fit, remember these tips for effective implementation. And happy baking!

• Keep the trail horizontally placed at the top of the page, under the header. This makes it easy for the user to monitor.

• Keep breadcrumbs discreet. No need to get flashy. The trail isn’t the star attraction of the user experience, it’s the safety beacon, used if need be. With small text (but not too small) and standardized font, it can just hover quietly at the top of the page.

• Distinguish the current page from the rest in the trail heading by slightly altering the font, either in size or type. It reminds the user of the page they’re currently residing on.

• Commit. Decide if you’re going to go ahead with implementing breadcrumb navigation, and use it throughout, for all pages. And don’t assume this is the only means of navigation necessary. As web and interface designer Shay Howe suggests, “You should always provide users with a primary navigation from which they can navigate a website before using breadcrumb navigation.”

References:

1.     “Breadcrumb (navigation).” Wikipedia entry modified 22 September 2011. http://en.wikipedia.org/wiki/Breadcrumb_(navigation)

2.     Jacob Gube “Breadcrumbs in Web Design: Examples and Best Practices.” 17 March 2009. Smashing Magazine: http://www.smashingmagazine.com/2009/03/17/breadcrumbs-in-web-design-examples-and-best-practices-2/

3.     Shay Howe “Breadcrumb Navigation Examined: Best Practices and Examples.” 12 October 2009. Hongkiat.com: http://www.hongkiat.com/blog/breadcrumb-navigation-examined-best-practices-examples/

Are You LinkedIn Yet? Branding: The Next Frontier For Online Marketing?

Comments

There are 2 comments (add your own) Hide/Display all Comments

• Daddaddaddyo
  Posted on: December 2, 2011 at 4:45 pm

  Good article Sarah. Clear and informative!

• Arelthia - http://www.pintopproductions.com
  Posted on: December 14, 2011 at 5:54 am

  Sarah,
  Thanks for sharing this great explanation of breadcrumbs. I like that you point out that it is not the only option but can be very helpful in making a site easy to navigate.