Blog Article

How to use breadcrumbs to enhance UX

Sign up and start improving your Google rankings and website traffic today!

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:

Location breadcrumbs

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

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.

Path breadcrumbs

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.

Top tips

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:

  1. Try not to duplicate anything in your trail of breadcrumbs as this can lead to confusion for your site visitors.
  2. 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.
  3. To help with search engine optimisation (SEO), use keywords for the names of your various categories.
  4. 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.
  5. 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!

Date: 01.02.17

Our Clients

Clubhouse Brewing Company in white on a transparent background
White Boulder logo with a red icon on a transparent background
Cawdor Cars logo in red and white text on a transparent background
Clee logo in white and red on a transparent background
White Big Retreat Wales logo on a transparent background
Direct Kitchen Doors logo in green and white on a transparent background
Assured Property Packs logo in white with a red tick on a transparent background
DRS FM Services logo in white with a purple arrow on a transparent background
EFT Consult logo in white and orange on a transparent background
TJB logo in white and light green gradient on a transparent background
Neath Port Talbot Council logo on a transparent background
James & Co Property Surveyors logo in white on a transparent background
Swansea University logo in white on a transparent background
White Kaymac branding and logo on a transparent background
Include logo in yellow on a transparent background
Energise Renewable Energy in orange and white on a transparent background
Practic Creations logo in white with light blue gradient swirl on a transparent background
Automated Marketing Partners logo in white on a transparent background
Weaver Motorsport logo in blue, white and black on a transparent background
Ten21 branding with transparent background
White Unit9 logo with transparent background
Barry Male Voice Choir logo in white on a transparent background
White Sinners logo with transparent background
GBR Technical Services logo in white on a transparent background

Boost traffic, generate leads and increase sales with our SEO services