This post originally appeared on babich.biz, written by Nick Babich. Nick is a software developer who’s passionate about user experience.
Breadcrumbs (or breadcrumb trail) is a secondary navigation system that shows a user’s location in a site or web app. The term came from the Hansel and Gretel fairy tale in which the main characters create a trail of breadcrumbs in order to track back to their house.
In this article, Nick explores the use of breadcrumbs on sites and discusses some best practices for applying breadcrumb trails to your own website. Highly recommended read!
Same as in fairy tale, visitors needs to know their location in the site’s hierarchical structure in order to possibly browse to a higher level in the hierarchy.
Breadcrumbs serve as an effective visual aid, indicating the location of the user within the site’s hierarchy. This property makes breadcrumb navigation a great source of contextual information for users and helps them to find answers on following questions:
- Where am I? Breadcrumbs inform visitors of their location in relation to the entire site hierarchy.
- Where can I go? Breadcrumbs improve the findability of site sections and pages. The structure of the site is more easily understood when it is laid out in a breadcrumb than if it is put into a menu.
- Should I go there? Breadcrumbs communicate content value and encourage browsing (e.g. e-commerce site visitor might land on a product page, the product might not be a good match, but the visitor might want to view other products from the same category). This, in turn, reduces the overall site bounce rate.
Reduces Number of Actions
In terms of usability, breadcrumbs reduce the number of actions a site visitor needs to take in order to get to a higher-level page. Instead of using the browser’s “Back” button or the site’s primary navigation to return to a higher-level page, visitors can use the breadcrumbs.
Take Up Minimal Space
A compact mechanism not taking much of the page space as it is just the text with links in a horizontal line. The benefit is that they have little to no negative impact in terms of content overload.
No Users Suffer Problems Because of Breadcrumbs
People might overlook this small design element, but they never misinterpret breadcrumb trails or have trouble operating them.
When Should You Use Breadcrumbs?
A great way to determine if a site would benefit from breadcrumb navigation is to construct a site map or a diagram representing the site’s navigation structure, and then analyze whether breadcrumbs would improve the user’s ability to navigate within and between categories:
- You should use breadcrumbs when you have a large amount of content organized in a strict linear structure with defined categories. An excellent scenario is e-commerce website, in which a large variety of products is grouped into logical categories.
- You shouldn’t use breadcrumbs for single-level websites that have no logical hierarchy or grouping.
Types of Breadcrumbs
Breadcrumbs can either be on the basis of: location, path, and attribute.
Location-based breadcrumbs are a representation of a site’s structure. They help visitors understand and navigate your site’s hierarchy, which has multiple levels (usually more than two levels). This type of breadcrumb is very supportive for visitors who enters the site on a deeper level from an external source (e.g. search engine results).
In the example below (from BestBuy), each text link is for a page that is one level higher than the one on its right.
Path-based breadcrumbs (also known as a “history trail”) show the entire path traveled by the user to reach on a particular page. This type of breadcrumb link is typically dynamically generated. Sometimes path-based breadcrumbs can be helpful, but the most time they’re puzzling — visitors often browse very wildly, jumping from one page to the other. Having such a meandering path doesn’t offer much help for user and can be easily replaced by a “Back” button in the browser. Finally, a history trail is useless for visitors who arrive directly at a page deep within the site.
Below is an example of path-based breadcrumb links that show two paths to navigate to the target page.
Attribute-based breadcrumb lists the categories to the specific page or most often product — as this kind of breadcrumb type are useful for e-commerce sites. This type of breadcrumbs helps the visitors to understand the relationship of products and offers a different approach.
For example, in TM Lewin, breadcrumb trails show the attributes of the items displayed on a particular page:
Hierarchy or History?
A rule of thumb for breadcrumbs is to show the site hierarchy, not the user’s history. Thus, use location-based/attribute-based breadcrumbs, not path-based ones.
Breadcrumb Navigation Best Practices
When designing a breadcrumb navigation, make sure to keep following things in mind. Breadcrumb navigation is an additional aid to improve your users’ experience on your site.
Breadcrumbs as an additional navigation
Breadcrumb navigation should be regarded as an extra feature and shouldn’t replace effective primary navigation menus. Keep in mind that it’s a convenience feature; a secondary navigation scheme; an alternative way to navigate around your web site.
Don’t link current page in breadcrumb navigation
The last item in the breadcrumb trail (current user’s location) is optional — if you want to display it, make sure that it’s not clickable or tappable. Since users are already on the page, it does not make any sense to add a link of the current page to the breadcrumb navigation.
The most recognizable symbol for separating links in breadcrumb trails is the “greater than” symbol (>). Typically, the > sign is used to denote hierarchy, as in the format of Parent category > Child category. Other symbols used are arrows pointing to the right (→), right angle quotation marks (») and slashes (/). The choice depends on the aesthetics of the site and the type of breadcrumb used:
Select size & padding
Think carefully about target size and padding when designing. There should be enough gap between different breadcrumb levels. Otherwise, people might find it hard to use them. But at the same time you don’t want your breadcrumbs dominate the page, thus they should be less prominent than the primary navigation menu.
Don’t make it the focal point of the design
You should not use fancy fonts or bright color because these will beat the very purpose of using breadcrumb navigation. A breadcrumb navigation shouldn’t be the first item that grabs the user’s attention when landing on a page. The breadcrumb trail below isn’t bad, but it’s too eye-catching and might distract visitors from the primary navigation and main content.
Google doesn’t make breadcrumb navigation look fancy, but users can easily locate and use it.
All that breadcrumbs do is make it easier for visitors to move around the site, assuming its content and overall structure makes sense. It’s one of the few simple things that enhances usability and fosters user comfort. And that’s sufficient contribution for something that takes up only one line in the design.
About the author:
Nick is a software developer who’s passionate about user experience. In his blog, he writes almost everything about interface design and UX best practices.
Designing forms for your website: The good, the bad and the ugly of web forms.
Building a web page or web app takes a lot of time, resources and patience. I get that. And because of these reasons, the little things get overlooked. When building a new website or application, you probably count your website form as one of those little things. But it really shouldn’t be overlooked, this little…
How to improve loading times of your website
Developing a great website requires a lot of work. Besides the development process itself, there are a lot of things to consider. Think about SEO, content, optimizing every single page with a clear call-to-action, and so on. We’ve built dozens of websites ourselves. Usersnap actually evolved from our work in building websites & web applications for…
20+ fantastic web development newsletters worth reading
This article was brought to you by Usersnap – a visual feedback & bug tracking tool, used by software companies like Facebook, Google, and Microsoft. Get your free 15-day trial, too. Recently I’ve present you a collection of the best web development blogs and podcasts available. If you’re like me and more like an inbox…
How to be a faster programmer: 7 helpful tips for being faster & more successful.
A while ago, I published some ideas on how to become a faster programmer on Quora. Since then, people have left comments and wrote follow-up questions. I think I have dipped into an interesting topic and decided to collect my tips in a blog post. I hope you’ll find it helpful and it will make…
6 mistakes to avoid when collecting design feedback
There are several lists on web design mistakes out there. Most of them focus on the web design itself but forget about other components such as how a good design becomes a great design through the right way of collecting feedback. There’s always a feedback stage in the web design process which requires intensive interaction…
Get started in web development today. With these 9 basic tips everyone should know.
I have recently published a piece on “what no one tells you about working in web development” in which I shared some insights on how working on web development projects, well, works. Starting out in web development can be quite difficult, but it is a worthwhile adventure if well prepared. Here’s my web development tutorial…
Get website feedback. Keep clients happy. Repeat.
Let clients draw directly in the browser.
Fix bugs in minutes with screenshot & metadata.
Trusted by 1000+ customers worldwide.