I am ready for a long road flight for work with a week- or months-long projects.
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.
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.
СТРУКТУРА СТАТЬИ
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.
29 детальных чек-листов по e-commerce доступны в моем 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.
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.
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.
At the top left of the page
Place the breadcrumbs where most customers expect to see these - at the top left of the page.
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.
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.
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.
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.
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.
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.
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.
Hierarchy direction
In countries where reading from left to right is widespread, arrange the categories from left to right, from general to particular.
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.
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.
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.
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.
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.
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.
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.
Не только ссылка «назад»
However, do not replace breadcrumbs completely with a "back" link: it significantly reduces the speed and convenience of navigation for users.
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.
Будьте в курсе выхода новых статей – подпишитесь на мой канал в 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.
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.
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.
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:
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.
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.
Without duplicating cues
Remove duplicating contextual cues from breadcrumbs, as these do not provide any extra value to users
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
The categories are clear
The names of the categories should be clear to the target audience and should not be ambiguous.
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.
Contrast
Make the links in the breadcrumbs contrast enough, so that these are easy to read. Contrast ratio should be at 4.5:1.
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.
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.
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.
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.
Current page vs. sections
Make the current page visually distinct from the sections within the breadcrumbs to highlight its functional difference.
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.
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.
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.
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.
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.
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.