How to use breadcrumbs to enhance UX
When you hear the word breadcrumbs, Hansel and Gretel may be the first thing that comes to mind, however, in the web development world, this is changing.
Breadcrumbs can enhance your website with regards to ease of navigation as well as aiding Google to understand your website’s positioning.
Breadcrumbs is the navigational trail on a website. For example, if you’re searching for a particular product on a website – let’s take a cordless electric drill as an example, and you click through the different options until you find the one you are looking for, the website will show you your navigational trail of how you got to the end result. It will likely show you that you reached the electric drill section via selecting “Electronics” > “DIY” > “Drill” > “Cordless”, for example.
For visitors, relying on a simple trail like this can help keep an eye on their location on a site. A trail of breadcrumbs will keep track of, and display the pages that are viewed by a visitor, and can be integrated into your site navigation meaningfully.
There are three main types of breadcrumbs that you can implement:
Perhaps one of the most popular kind of navigation is location breadcrumbs, which can inform your visitors where they stand in the hierarchy of your site. In terms of organisation, location breadcrumbs are direct. They allow for clean-cut orientation, making this type of navigation wildly used.
For sites that acquire several layers of content and navigation, location breadcrumbs provide users with the power to go back to previous levels of content, all done with a simple click. Location breadcrumbs are also static. As they never change, they are a reliable way of helping visitors reorient themselves on your site.
Attribute breadcrumbs are the second major type of breadcrumb navigation that you’ll encounter. Working like a filter, they aren’t static like location breadcrumbs, instead they change continuously based on user preference.
Whilst attribute breadcrumbs don’t inform users of their location on your site, they do however display metadata on the page’s content, making them a popular choice for e-commerce sites where you are able to customise what you want to buy.
Out of all three variations, path breadcrumbs are the least frequently used. Path breadcrumbs’ main function is more or less replicating what a browser’s back button does already.
Sometimes referred to as a ‘history trail’, path breadcrumbs don’t provide any further context, or information to site users, as they are already within the site’s hierarchy. Because of the issues with UX, it is becoming increasingly rare to see path breadcrumbs on sites these days.
As always, we want to help you get the best information as possible. Because of this, here are some top tips you should look to when including breadcrumb navigation:
- Try not to duplicate anything in your trail of breadcrumbs as this can lead to confusion for your site visitors.
- To break up the links in your breadcrumbs, try using a simple separator, such as a greater-than sign (>). Users already experience this from pre-existing site conventions, and will become comfortable with the familiarity.
- To help with search engine optimisation (SEO), use keywords for the names of your various categories.
- Start a trail of location breadcrumbs, beginning with a link to the home page. The trail can then end with the user’s current page.
- Aim to ensure that whatever breadcrumb you choose to include appears clickable, and is clickable. For instance, if you choose to include location-based breadcrumb links for mobile devices, you must make sure that the links make a visitor tap to continue.
As with all design elements, an amazing concept can become a negative if they aren’t applied correctly, which is certainly true for breadcrumbs. Whilst not compulsory for all sites, breadcrumbs can give website users an extra level of navigational help, when confronted with multiple layers of content.
Ultimately, the full potential in usability from the inclusion of breadcrumbs is determined by how web designers apply them. By knowing the purpose behind each type of breadcrumb navigation, you can rest assured you are making the right choice for the site you’re designing. At the end of the day, good design choices mean happy users and happy customers.
Let us know about your experiences with breadcrumbs, and we don’t mean the food kind!