Breadcrumb Navigation
March 26, 2006
Q) What is Breadcrumb Navigation, and why should I use it in my web site?
A) Breadcrumb Navigation improves the customer’s ability to find your products/offerings. It is like the “You are Here” circle on the Mall map.
I am not a big fan of mall shopping, so I head straight for the map to gain my bearings. It gives me a sense of where I am in relation to other parts of the mall. Breadcrumb navigation accomplishes this for our users – especially ones who do not like shopping on the Internet. We have seen breadcrumb navigation like this while surfing the web.
Each part of the Breadcrumb Navigation represents a level of the website. In this example, we can see that we are “3 levels deep” in the website. By clicking on any of the levels within the navigation we are immediately transported rather than figuring out how many times we need to hit the back button to get where we want to be.
Breadcrumb Navigation is Great for any Size Website
Breadcrumb navigation is for more than just hulking ecommerce sites like Amazon and the Yahoo Directory. Even if our site is relatively small, the user does not know that – they just know that they may or may not find the answer to their question here.Breadcrumb Navigation Guards our “Side Doors”
Looking over my server logs, I have users that visit various sites from all kinds of links from search engines or other websites. When they land on my site, I want to give them an immediate orientation. For this reason malls have their maps at every entrance – to maximize every opportunity to improve the shopper’s experience.Expert Advice on How to Use Breadcrumb Navigation
- Breadcrumb navigation is meant to supplement, not replace current navigation structures – Keep using your vertical or horizontal navigation. Users are comfortable with these. Also, some sites use breadcrumbs in lieu of distinct page names (the part in the blue bar at the top of your browser). Search engines place strong emphasis on the importance of page names when ranking sites for their index. More importantly, many of our customers at least glance a the page title when navigating a site –
- Make breadcrumbs consistent and easy to see – Somewhere in the top-left of the screen is a great spot. Users eyes naturally fall in this area.
- Vertical breadcrumb navigation is better – 95% of current sites use vertical breadcrumb navigation. Use existing conventions whenever possible. Save originality for the product.
- Keep navigation simple – It does not have to take up much space at all. Usually a simple arial or verdana font works well. Avoid temptation to use fancy graphics.
- Use the words, “You are Here” Users are pre-trained (through experiences like my mall example) to know what those words mean.
- What divider do I use? – the “>” notation seems to be the most popular. Besides, it suggests motion – like we are drilling down into the site.
- Mark the Current Page – The last item shows our current location. Make this item stand out with Bold face (and do not have a link, which removes the underline) so that it stands out to the user. This tells the user – “Well done – you have reached the correct page” or “Keep looking”.
- Use a consistent linking scheme that matches the rest of the site – This way the user knows that they can click on the levels to move around as well. Remember that the user has already been there, so pay attention to the color used for “visited links”
