- Send us a note
- info@addicottweb.com
- (773) 633-7078
Hansel and Gretel Would be Great Web Designers
Are you new here?
If this is your first time visiting our website, welcome! Learn more about us and what we do, or look through our complete blog archives for more good ideas.
Posted on February 12, 2009 under Usability, Web Design
In the Brothers Grimm fairytale, Hansel and Gretel get lost in the woods, yet are able to find their way home because they left a trail of breadcrumbs on the path. Web designers use breadcrumbs for the same reasons – in fact, the fairy tale is where the term came from.
What are breadcrumbs?
Chances are you’ve seen breadcrumbs before, as many websites feature them in some form or another. But for those who are new to the concept, what exactly are breadcrumbs?
Simply put, they are another form of navigation that your visitors can use to find their way around your website when the main navigation doesn’t quite meet their needs. Breadcrumbs are almost always implemented the same way:
- Progressing from the highest level to the lowest, one step at a time
- Starting with the home page and ending with the current page
- Having a simple text link for each level, except for the current page
- Separated by a one-character symbol between the levels, usually an “>” or a “/”
Of course, the ideas behind using them are slightly more complicated than that, which is what I want to talk about here. I’m going to go over the main usability benefits from using breadcrumbs before giving some pointers on how to use them in ways that will both benefit your visitors and SEO.
Why should you use breadcrumbs?
There are a few main reasons why breadcrumbs should be used on a website:
- Pinpoint your location - Like the large maps at the mall, breadcrumbs show people where they in relation to the rest of your website. They can also show people where the page that they’re looking at is relative to higher-level content as well.
- Help rescue those who get lost – Most people tend to ignore breadcrumbs until they get to a page that isn’t quite what they were looking for, and want to find their way back up to a more familiar page on the website. Breadcrumbs are just another way that you can help your visitors do that, especially if they parachuted into a very specific but inappropriate place on your website and want to get their bearings.
- Open up the information hierarchy – Breadcrumbs allow your visitors to jump more than just one level of content at a time because by nature they show the exact pages that led to the page that they’re currently on. (Note: this is different from showing them the exact pages that got them to where they currently are.) This can give your visitors a better sense of how the website is organized.
- People are familiar with them – Breadcrumbs are common enough now that most people are somewhat familiar with them. Because they are one of those little touches, your visitors might not notice if they are there, but they also might miss them if they’re not there.
- Consistency leads to usability – Breadcrumb trails are for the most part styled the same way, making it easy for people to immediately know how to use it when they see it. Just remember to keep your breadcrumbs styled according to common conventions so that you don’t leave people guessing about what those links are.
How to implement them correctly
Now that you’ve made the decision to use breadcrumbs on your website, you need to make sure that they’re well-designed in order to have an impact on your website’s usability. Here are some tips for using them:
- Proper placement is key – My personal belief is that breadcrumbs should go in your main content area, directly above the main title of the page. Of course you don’t want them to be so obtrusive that they take up a lot of room there, but you also want to make sure that they’re easy to find. Putting them in a spot that will at least visually register with your visitors is important, because then if they go looking for the breadcrumbs, they know where to find them.
- Style them appropriately – As I’ve written about previously, how you style your text links is important from a usability perspective because it helps people know what are the links and what aren’t. When I’m styling my breadcrumbs, I like to make the links underlined and colored differently from the last breadcrumb level, which is the page the visitor is on. I’ve seen breadcrumbs on many websites where all the text, links included, looks the same, and I can never understand why someone would choose to style it that way.
- Show site hierarchy, not user history – Breadcrumbs are not meant to be a trail of how the user got to that page, but rather should be thought of more as beacons that pinpoint the page location relative to the rest of the website’s content. The user can just as easily click their web browser’s “Back” button to return to where they came from – they don’t need breadcrumbs to do that.
- Focus on how they’re written for additional SEO benefits – If you’re focusing on ways to incorporate SEO into your website, breadcrumbs are another great opportunity to mix in some of those keywords you’re optimizing for. Just make sure that your breadcrumb links provide enough detail about what the pages are about, without being overly lengthy. I generally try to keep my breadcrumb links to within 1-3 words, at most.
Breadcrumbs can’t solve all your usability problems
It’s not absolutely essential that a website incorporate breadcrumbs, even though if they’re done right, they can enhance the overall usability of your website. But if you are going to use them, there’s one catch, and it’s a big one.
They’ll only work if the overall content and structure of your website make sense in the first place.
If people can’t find what they’re looking for on your website to begin with, having breadcrumbs on your content pages isn’t really going to help them very much. Chances are, if your navigation is that bad, it will already have made such a poor impression of your website that the visitor won’t even have made it that far anyways.
As a web designer, your first priorities have to be creating a site hierarchy that makes sense and then constructing a navigation to make the content easy to find within that hierarchy. That being said though, don’t just throw in the breadcrumbs as an afterthought. Badly implemented breadcrumbs might do more harm than good, so if you want to incorporate them, spend at least some time making sure they’re implemented properly.
Thoughts?
If you don’t already have breadcrumbs on your website, do you plan to incorporate them? If you already have them, what do they look like, and what have you found that works or doesn’t work? Share your thoughts about these questions and more by filling out the comment form below!
Similar Posts
- Ways to Create Breadcrumbs in WordPress (April 29, 2009)
- 9 Places to Insert Keywords on Your Website (September 23, 2009)
- My Definitive List of 40 WordPress Plugins (December 15, 2009)
Gaurav M wrote on February 16, 2009:
Added to delicious nice post!!!
Posted at 12:31 am
Westley Knight wrote on February 16, 2009:
Nice article. The best point of which is: “They’ll only work if the overall content and structure of your website make sense in the first place.”
I’m not the biggest fan of the breadcrumb trail personally, and will only implement it in the case that a client is insistent on its inclusion (usually when there’s a large amount of available menu options or sub-categories).
I believe that if you can show the user where they are, using the menus available on the screen at that particular time, then that is a better ‘design solution’. The best example I can think of for this (off the top of my head) is the current Play website.
Digg used to also do this, but I’m not such a big fan of their new drop-down navigation, as it no longer displays the sub-category you’re in (perhaps they should add a breadcrumb trail?).
Posted at 8:30 am
Addicott Web wrote on February 16, 2009:
It’s interesting to hear your thoughts Westley, thanks for contributing! I do like the Play website, and I agree that if you have an effective navigation/sub-navigation combination that shows you where you are, it will do wonders to help show people where they are.
The one thing I don’t like about the Play website example is when you’re digging down into the content, they don’t make it very easy to browse through the books/music/etc. There is a left-hand navigation in some of the sections, but when you get to the page for an actual item, it would be nice to make it easy for you to get back there.
In contrast, take a look at this random page from Barnes and Noble’s website. Not only do they have an effective main navigation where the section you’re in stays highlighted, they also use breadcrumbs to help you get back to the higher levels that you came from. I think in combination with everything else on their website, this works well.
I think the question of when to use it depends on the website. For some of the smaller websites that I’ve constructed, where the hierarchy only goes to a maximum of three levels deep, there’s not really a need. But for some of the more complex sites I’ve worked on (and that are out there in general), I think it makes more sense to incorporate them.
Posted at 4:05 pm