WORKING WITH BREADCRUMBS

UX/UI BEST PRACTICES IN E-COMMERCE
83
GUIDELINES

Working with breadcrumbs

UX/UI best practices in e-commerce
83
guidelines
Breadcrumbs are small links on webpages that make it easier for customers to navigate the website. It would seem that what could be easier? These are just links. But there are many factors which separate the "tasty" and effective breadcrumbs from the "stale" and useless ones. In this article, we'll break breadcrumbs down into atoms. 83 guidelines with examples.

If you have any ideas for additions, be sure to contact me, I'll be happy to discuss. Sign up for new articles on Telegram and share this post with your friends and colleagues.
Partner at Experience.Partners
Author of HardClient.com
СТРУКТУРА СТАТЬИ
For convenience, I have divided the article into blocks. This way it will be easier to comprehend. Each of the blocks contains a detailed checklist.
22 детальных чек-листа по eCommerce доступны в моем Telegram.

1. ELEMENT LOCATION

Available on product pages

Breadcrumbs allow to quickly return to the listing and continue searching for products. These also make it easier to navigate if the customer has not landed on the product page through the listing.
hardclient

Available in product listing

If a customer is on a subcategory page, breadcrumbs will help them quickly expand their product range by going to a higher-level category.
hardclient

Not visible in navigation

If your catalog has only 3 levels of categories, displaying breadcrumbs inside it is unnecessary: client will be able to see the full hierarchy anyway.
hardclient

At the top left of the page

Place the breadcrumbs where most customers expect to see these - at the top left of the page.
hardclient

Without non-standard placement

Placing breadcrumbs in unusual locations, we run a risk that these simply will be harder to see, which will make the navigation more difficult.
hardclient

Not in the footer

A special case of non-standard placement of breadcrumbs - the footer of the site. The chances that a client will not notice these at quite high.

Next to the navigation bar

Place related elements close to each other. Breadcrumbs located next to the navigation bar will make it easier for a user to switch between sections.
hardclient

Within the first impression frame

On mobile devices, make the breadcrumbs accessible within the first screen, so that a user does not have to scroll to find these.

On a uniform contrasting background

If possible, place the breadcrumbs on a uniform contrasting background, so that the client does not experience any inconvenience reading these.
hardclient

Not next to the banners

First, these will be much less visible in contrast. Second, there is a risk of spreading banner blindness to the crumbs.
hardclient

Not visible if structure is flat

If the structure of the catalogue has only 1-2 levels and the return to the category or home page takes just one click, there is no need for breadcrumbs.
hardclient

2. BREADCRUMB STRUCTURE

From the general to particular

The breadcrumbs should be structured in a way that level of details grows when moving left to right.
hardclient

Supplementing the main navigation

Breadcrumbs should not completely replace the main navigation in the page header, but rather play supplementary role, improving the customer experience.
hardclient

Hierarchy direction

In countries where reading from left to right is widespread, arrange the categories from left to right, from general to particular.
hardclient

Canonical hierarchy

If a product is included in multiple hierarchies, use the most common and most frequently used one to display the breadcrumbs.

Product categories

It is more convenient, if the structure of breadcrumbs includes product categories, rather than just brand names.
hardclient

Without multiple structures

In case of a polyhierarchy do not display multiple breadcrumbs with different structures. This will only overload the interface and make navigation more difficult.
hardclient

Start with the home page

If you have a lot of valuable and interesting content on your home page, you shouldn't cut it in breadcrumbs: let the customer go to it in 1 click.
hardclient

Contains the brand name

Even if a user landed on a product page from broad listing, add a brand name to the breadcrumb structure so that they can view other brand products in 1 click.

Not too many levels

Many levels in the directory structure not only complicate navigation, but also make breadcrumbs visually too bulky.
hardclient

The structure is not too flat

However, if there is a catalog structure, do not remove it completely from the breadcrumbs, leaving only the home page and the product page. Otherwise these will become useless.
hardclient

Not a search history

Avoid placing search history in breadcrumbs. There is a "back" button in the browser to return to previous pages. Most of users are familiar with it.

The "back" link next to the sections

Sometimes the main breadcrumb structure can also be supplemented with the "back" link, which helps to quickly return to the product listing with active filters having been saved.
hardclient

The "back" link is visually different

Since the functions of the "back" link and the links to sections are different (search history vs. category hierarchy), make these visually different.
hardclient

Не только ссылка «назад»

However, do not replace breadcrumbs completely with a "back" link: it significantly reduces the speed and convenience of navigation for users.
hardclient

Links to adjacent sections

When a user hovers over a section in crumbs, adjacent sections can be displayed in the dropdown format. This will make it easier to switch between categories.
hardclient
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram

3. LINK DESIGN

Visually secondary

Since breadcrumbs are not the main, but the auxiliary element of the page, these can be made them secondary.
hardclient

Fit within a single line

If possible, design the breadcrumbs so that these do not take up more than one line. This will help to avoid visual overloading of the interface.
hardclient

Scroll on hover

If the breadcrumbs still do not fit into 1 line, an interesting solution would be to scroll these automatically on hover:

No unnecessary text

If possible, when moving from category to brand, don't duplicate the category name. Users will comprehend the wording, while the size of the crumbs will be reduced.
hardclient

Without excessive hierarchy

In some cases, extra technical categories are used that have no extra value for a user, and duplicate the text of the top-level categories. This example is not a good way to do it:
hardclient

Without excessive punctuation

There is no point in highlighting the current category in breadcrumbs with quotes. Especially if there are no quotes in the title.
hardclient

Without the number of products

The number of products can be placed in the filters or as part of the header within the listing. But it doesn't look quite appropriate in the breadcrumbs and makes these visually overloaded.
hardclient

Without duplicating cues

Remove duplicating contextual cues from breadcrumbs, as these do not provide any extra value to users
hardclient

Abbreviated product names

In some cases the name of the product in the breadcrumbs is reduced to only the key text, while the meaning remains
hardclient

The categories are clear

The names of the categories should be clear to the target audience and should not be ambiguous.
hardclient

Hiding the breadcrumbs?

If the breadcrumbs string is too long, you can hide it by default with a tooltip. But still, this would not be an optimal solution, as it treats the symptom rather than the root cause.
hardclient

Contrast

Make the links in the breadcrumbs contrast enough, so that these are easy to read. Contrast ratio should be at 4.5:1.
hardclient

The text is not too small

Don't torture your clients - don't make the breadcrumbs text too small. It should be easy to read, even if the person has poor eyesight.
hardclient

The format is uniform

Make breadcrumbs look uniformly on all pages of the site. Changing the format of the breadcrumbs may come as a surprise to a user.

Consistency of case

Make breadcrumbs case consistent. There is no point in highlighting certain categories with CAPS LOCK without any reason, while others are in sentence case.
hardclient

Without link formatting on desktop

Unlike links in the text, in the desktop version the breadcrumbs links can be not underlined by default. Their function is clear to the majority of users anyway.
hardclient

Without the dotted line

Avoid dashed underlines in the design of links, as this is a fairly common pattern of displaying text with context clues.
hardclient

Current page vs. sections

Make the current page visually distinct from the sections within the breadcrumbs to highlight its functional difference.
hardclient

Home page variations

Instead of "Home" the link text can be implemented in a less standard way: for example, highlighting the name of the store. The main thing is to ensure that the meaning is clear.
hardclient

Home link with icon

The link to the home page can be provided with an appropriate icon in the form of a house, which is quite intuitive for the majority of users.

Category icons

Category names in the breadcrumbs can be supplemented with relevant icons. This will help improve the perception of the information and can make the breadcrumbs more catchy.
hardclient

Links respond to hovering

Make all active links in the breadcrumbs interactive, so that they responded to hover and provided visual feedback.

Current page reaction to hover

Since the breadcrumb of the current page is not clickable, its visual response to hovering can mislead a user.

Cursor on hover

The cursor should become clickable when a user hovers is over the links. This will additionally highlight the fact that these are active.

4. ADJACENT CATALOG SECTIONS

Are implemented

Direct links to adjacent sections will simplify navigation, as a user does not have to go to the top level section and select another subcategory separately.
hardclient

Subcategories in the dropdown?

In some cases the dropdown contains subsections instead of adjacent sections. What do you think of this? is it better or worse than the previous point? Drop me a line in the comments.
hardclient

Dropdown is visible on hover

It's better to open the list when you hover over the link. Otherwise there is a risk of mistakenly clicking on the link itself instead of the dropdown arrow.

No dropdown if only one subcategory

If the section has no adjacent sections, displaying a dropdown with just one value is not a good idea. In this case the expectations would be managed incorrectly.
hardclient

Current category in the dropdown

Since the link to the current section is already at the top of the dropdown, there is no point in adding it once more. Either don't include it, or make the text non-clickable.
hardclient

Hiding adjacent sections

If dropdown can be opened and closed by click, clicking on the "hide" button should collapse the dropdown, rather than opening the category page.

Clicking on the main link

The presence of a list of related categories should not complicate following the main link: it should be done in 1 click. This design is better to refrain from:

5. SEPARATORS

Are implemented

The hygiene point: add separators between the links, so that the content was easier to perceive by the users.