Using breadcrumbs is a way to improve the navigation of your website. As a web designer, you want to organize your site in a way that users will relate to.
Just like Hansel and Gretel from the popular fairy tale, these digital clues create a path, but to what end?
This article will cover:
- When it makes sense to use breadcrumbs
- Some benefits you can expect to see from using breadcrumbs
- Design considerations when using breadcrumbs
- Mistakes to avoid when using breadcrumbs
Contents:
- Should You Be Using Breadcrumbs Navigation
- Types of Breadcrumbs
- Benefits of Using Breadcrumbs
- Design Considerations When Using Breadcrumbs
- Mistakes to Avoid
1. Should You Be Using Breadcrumbs Navigation?
Although breadcrumbs can be a very helpful addition to a web design, it does not apply to every site.
Single-level websites are one example. There would be no need for this type of extra navigation. These websites are simple enough that the navigation bar on the home page provides all the guidance needed.
Breadcrumbs are a great help as secondary navigation for websites with multiple levels nested together. But they are not necessary if sections are stand-alone.
Breadcrumbs are a great addition to the information architecture of a large, complex site, but it does not replace menu navigation. It should be a complement.
2. Types of Breadcrumbs
Breadcrumbs can be created in various models.
Which breadcrumb trail model you implement on your site would depend on the type of information and pages you have on your site and the common search habits of your users.
These are the three types of breadcrumbs to choose from:
Attribute-Based Breadcrumbs
This is a breadcrumb component based on the attributes of the page or the items on the page. For example, if your website has a filter function, most likely, it is based on attributes of products or content.
If you can separate your pages by attributes, this would be your best bet as a breadcrumb trail.
Most attribute-based breadcrumbs are not based on parent-child hierarchy, but on tags or categories.
Path-Based Breadcrumbs
These breadcrumbs show the visitor the exact path they took to get to where they are now. Another name for this type of breadcrumb is history-based because it is based on the visiting history of the user.
They can see each page they have visited in the breadcrumb nav. They can simply push the back button or click on the breadcrumb link to get to where they want to go.
Location-Based Breadcrumbs
These breadcrumb items are based on where the visitor is on the site's hierarchy. It is the most common type of breadcrumb structure used in website design.
Location-based breadcrumbs are highly dependent on the parent-child page structure, but it does not display the current page location.
Think of these breadcrumbs as similar to a physical address. You can live in a house, on a street, in a town, in a state, in a country, or on the planet.
Each of the locations is held within a larger location.
3. Benefits of Using Breadcrumbs
You may wonder whether it is worth spending extra time and energy to set up breadcrumb navigation in your UI kit.
Here are a few benefits that breadcrumbs will provide for your site:
Adds Convenience for Users
When implemented well, breadcrumbs make navigating your site for users easier. They can jump around your site without ever losing their sense of location.
By providing a breadcrumb trail, you contribute to a better user experience, adding guidance and a map to make users feel comfortable on your site.
Accepted Feature
Users are used to seeing these and recognize their purpose, as long as you don’t confuse them by making the breadcrumb label vary much from the page title itself.
In other words, breadcrumbs aren’t a new idea that will make them uncomfortable. Users understand their functionality as a way to map out the website’s hierarchy.
Reduce Bounce Rates
Breadcrumb design patterns help users see more value in your site beyond the landing page.
Like a table of contents in a book, breadcrumbs give an overview of all the content on your site and can pique the curiosity of your visitors.
Invites users to explore more web pages on your site, providing more reasons to stay, and more opportunities to turn your first-time visitors into regulars, or your regular visitors into clients.
You can also use the Google Heart method to improve UX!
4. Design Considerations When Using Breadcrumbs
Now that we’ve covered the “why” of adding breadcrumbs to your website design, let's tackle the “how”.
Take these tips into consideration when designing your breadcrumb trails, and you’ll drastically improve your user experience in this area.
Each Breadcrumb Should be “Click-and-Go”
The use of breadcrumbs is only helpful if your users can backtrack through their entire journey on your website. The only way they can do this is if every breadcrumb is clickable.
There should be no disabled breadcrumbs. When they click any breadcrumb they have already visited, they should be able to click on the link and arrive back to that page.
Acceptable Symbols to Separate Hyperlinks
Now, you can’t just go and use any symbol as a separator of your breadcrumb hyperlinks. That’s just madness.
For your visitors to understand the pathway, there are only a few accepted symbols to use.
The most popular option is the greater than symbol “>”. Another option is the forward slash “/”, and lastly, if you want to get fancy, you can use arrows.
Whatever option you choose, the point is to have the flow of progression point to the right, clearly showing the hierarchical relationship between the links.
Truncate Longer Paths
If your breadcrumb trails get too long, you may need to use an ellipsis to cut the path short.
How long is too long?
The typical accepted length of a breadcrumb trail is four or fewer. If your user has been taking a long trip around your site, they may collect more than four higher-level pages on their breadcrumb trail.
To keep the breadcrumb trail from taking up more than the recommended half page of the website, you can shorten the path by placing an ellipsis near the beginning of the trail, condensing the trail.
That does not mean the path disappears. The user should be able to see the entire expanded path when clicking on the ellipsis.
Be sure to keep the origin of the visit visible and the last backward breadcrumb. If the page names are longer than normal, you may even need to truncate some link names.
The rules of truncation design can get a little blurry. The guidelines in this article by Baymard Institute can help you to stay on target.
Keep Breadcrumbs Consistent with Style Guide
Just because breadcrumbs are often an afterthought in the user's navigation, that doesn’t mean that they need to be boring.
In fact, keeping your breadcrumbs consistent with the colors and style of the product design can help the design of the website as a whole.
This applies to the fonts used for the breadcrumb names as well, but that doesn’t mean you have to stick to just text. You can add style to your breadcrumbs by using icons instead (if this applies to your site.)
Icons can help the user quickly distinguish between pages without even having to read. (We all picked the books with the most pictures when we were young. There’s no shame in it.)
When using icons, it’s important to choose icons that are universally understood. For example, everyone knows the icon for the shopping cart, settings, and documents.
Consider Making Breadcrumbs Removable
We like to give our users as much control as possible. When they can tailor their visit to their own unique needs, they will undoubtedly stay on the site longer and enjoy their visit.
You can give them more control by allowing them to make breadcrumbs removable.
Checkboxes or “Xs” that allow the user to delete or remove a link from the pathway is the best way to make this an option. Your users who are looking to delete a link in their breadcrumb trail will easily find this option.
This option is most beneficial for attribute-based breadcrumb trails since removing one attribute may expand their search parameters instead of simply removing a page in the path.
Take, for example, this breadcrumb trail:
The user was originally looking for mens blue pants in an XXL size. When removing pants from the breadcrumb trail, visitors can see all men’s XXL blue clothing, not just pants, if they so choose.
Consider Adding Drop-Down Menus
For applicable breadcrumbs, you may want to consider adding a dropdown menu from the breadcrumbs link, allowing for sideways navigation instead of backward.
This allows users to change their path without going all the way back. It's like a choose-your-own-adventure user interface design system.
Let’s take the example of a university website. The breadcrumbs link may look something like this:
home/academics/areas of study/business
If the user then changed their mind and wanted to learn about the social sciences program instead of business, they could hover over the link to the areas of study page, and a drop-down menu would display all the available study programs offered at the university.
5. Mistakes to Avoid
When you know the potential pitfalls ahead of time, you’re bound to make fewer mistakes.
So, here is a list of mistakes to avoid when creating a breadcrumb design pattern:
Don’t Allow Breadcrumbs to Clutter the Page
Keep breadcrumbs small but visible. A font size just a touch smaller than the rest of the text on your site is best.
As we already mentioned, breadcrumb trails should not exceed half the page.
Place the breadcrumb trail at the top of the page. Not in the header with the navigation menu, but directly under it.
Don’t Make Breadcrumbs Too Close Together
We’ve already discussed how important it is for users to have control over the breadcrumb trail and how each link should be clickable.
Well, if you place your links too close together, users may get frustrated trying to click on each individual breadcrumb.
Space them out and make them easily clickable.
Don’t Forget to Adapt for Mobile
Breadcrumbs for mobile versions is a whole different ballgame. The trail can easily begin to wrap to multiple lines on phone screens, which can translate to half the entire screen.
Be sure to adjust your breadcrumb navigation for your website's mobile version to take this into consideration.
In most cases, just one backward navigation will suffice for mobile users.
Don’t Show Multiple Paths
Polyheirarchal sites need to stick with just one breadcrumb path. You don’t want to confuse the user.
Decide on what type of breadcrumb (location, attribute, or path-based) you will use and stick with that site hierarchy throughout.
To decide which type of breadcrumbs navigation to use, focus on what would be most helpful to the user.
How will they want to interact with your site?
Don’t forget to test! Read our Simple Guide to UAT
Conclusion
Adding breadcrumbs as secondary navigation can improve your site’s UX design when you use the best practices above. Failing to follow these tips can cause your visitors to get lost on your site and leave.
After you’ve designed your breadcrumb navigation, you may wonder how your visitors are reacting to your chosen design.
Try our website feedback tool and get the low down straight from the horse’s mouth.
.png)
