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.
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.
Common
Use common characters (arrow, slash or chevron) for separators, so as not to raise questions on the client side and to highlight the link hierarchy.
Visually differ from links
Make the separators different from the links (using different colors). This will help emphasize the links and visually separate them.
Hierarchy direction
Direct the separators in the breadcrumbs from left to right: this is more common. If you use non-directional characters, the breadcrumbs may not comprehended that well.
Sufficient indentation
Make the indents between separators and links sufficient so that the links in the breadcrumbs don't look too crumpled.
Uniform
A hygiene point. And, again, I wouldn't include it if I haven't faced it on one of the largest e-commerce websites. Separators should look the same, without any variation.
In good quality
If you decide to use pictures, rather than symbols, for separators, make sure to upload these in good quality so these do not look blurry or pixelate.
No response to hover
Since the separators have no function other than to separate links and nothing happens when you click, these should not respond to hover.
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram
6. MOBILE OPTIMIZATION
Not in multiple lines
On mobile, don't display breadcrumbs in multiple lines by default, otherwise there is a risk that these will take up too much space, crowding out the main content.
Without the current page on mobile
To optimize the length of the breadcrumbs line, the product page header (which most often takes up a lot of space) can be eliminated on mobile.
Icon instead of homepage link
In order t save space on mobile, the link to the homepage can be presented not as text, but only as an icon. Its meaning will be clear to the majority of users.
Link underline
On mobile you can make it more clear to users that the breadcrumbs are links by underlining these by default.
Indentation on mobile
Make the indents between the breadcrumbs and other objects large enough to reduce the risk of tapping the wrong link by mistake.
Scroll on mobile
On mobile, breadcrumbs may not fit in one line and take up too much space. Horizontal scrolling can help solve this problem.
Without system scrollbar
The system horizontal scrollbar will only overload the interface, so it is better to refrain from it when implementing breadcrumbs scroll (compare this example with the previous one).
Side fade on scroll
If you use horizontal scroll on mobile, adding fading to the edges of the line can further highlight that it is scrollable.
Scroll button
The breadcrumb line swipe can be supplemented with a scroll button. This can increase the likelihood of performing the targeted action.
Short category names
Shorter category names not only make these easier to read, but also reduce the length of breadcrumbs. This is especially important on mobile.
Short version o breadcrumbs
Another display option is when only 1-2 parent categories are visible. But when you tap on the hidden part, the whole breadcrumbs area becomes visible.
The mobile version of breadcrumbs
In some cases, you can also find a full version of the crumbs, optimized for mobile devices. Clicking on the desired link becomes much easier:
Only parent category
Alternatively, on mobile the breadcrumbs can be reduced to just a parent category. But bear in mind that this may increase the total number of taps required for navigation.
7. FOLLOWING THE LINKS
Current page link is not clickable
If you include the current page in breadcrumbs, make it non-clickable. Cyclical links make no sense and create problems for SEO.
All category links are clickable
All links in breadcrumbs (except the current page) should lead to existing pages of the website. There should not be any non-clickable categories.
Clickable area
Limit the clickable area of each of the breadcrumbs to the area between the separators. Otherwise there is a risk of users following the wrong links.
Correct target pages
Target pages should be named the same as in breadcrumbs. Differences in titles can confuse users and make the navigation more difficult.
Saving filters upon return
If filters have been applied on product listing page, when users click the "back" button on the product page and return to the listing, these should remain applied.
TO BE CONTINUED...
In this article we have discussed the breadcrumbs. As you can see, these are not as simple as it seems at first glance, and the reasons for the successes and failures, as always, are in the details.
The following articles will have the same level of detail. I will continue on my way to cover all the key aspects of the Customer Journey in eCommerce.
Don't forget to subscribe to my channel in Telegram and share this post with your friends and colleagues who might be interested in the content. Keep in touch.
ВСЕ СТАТЬИ ПО E-COMMERCE
