Хлебные крошки – это небольшие ссылки на страницах товаров, которые облегчают навигацию клиента по сайту. Казалось бы, что может быть проще?

Это же просто ссылки. Но есть много факторов, которые отделяют «вкусные» и эффективные хлебные крошки от «чёрствых» и бесполезных.

В этой статье мы разложим хлебные крошки на атомы. 83 гайдлайна с примерами.

Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. Подпишитесь на выход новых статей здесь и в Telegram, делитесь этим материалом с коллегами.

Это один из 20+ чек-листов по UX/UI в e-commerce. К середине декабря 2022г все они будут доступны в моем профиле на Habr.

Структура статьи

Для удобства статью я разбил на блоки. Так будет легче для восприятия. Каждый из блоков содержит в себе детальный чек-лист.

1. Размещение элемента

Доступны на страницах товаров

Позволяют быстро вернуться к листингу и продолжить поиск товаров. Также облегчают навигацию в случае, если клиент перешел на страницу товара не через листинг.

Смотреть пример
✅

Доступны в листинге

Если клиент находится на странице подкатегории, хлебные крошки помогут ему быстро расширить спектр товаров за счет перехода к более высокоуровневой категории.

Смотреть пример
✅

Не видны в каталоге

Если каталог у вас состоит всего из 3 уровней категорий, отображать внутри него еще и хлебные крошки излишне: клиенту в каталоге и так будет видна вся иерархия.

Смотреть пример
❌

В верхней левой части страницы

Разместите хлебные крошки там, где их ожидает увидеть большинство клиентов – в верхней левой части страницы.

Смотреть пример
✅

Без нестандартного размещения

При этом, размещая хлебные крошки в непривычных местах, мы рискуем тем, что их попросту будет тяжелее заметить, и навигация будет затруднена.

Смотреть пример
❌

Не в футере

Частный случай нестандартного размещения хлебных крошек – футер сайта. Шансы на то, что клиент вообще их не заметит, очень высоки.

Смотреть пример
❌

Рядом с панелью навигации

Подобное к подобному. Размещение хлебных крошек рядом с навигационной панелью позволит облегчить восприятие и быстрее сориентироваться.

Смотреть пример
✅

В рамках first impression frame

На мобильных устройствах разместите хлебные крошки так, чтобы они были доступны в рамках первого экрана, без необходимости прокрутки.

Смотреть пример
✅

На однородном контрастном фоне

По возможности размещайте хлебные крошки на однородном контрастном фоне, чтобы у клиента не возникало проблем с их считыванием.

Смотреть пример
❌

Не рядом с баннерами

Во-первых, на контрасте они будут гораздо хуже заметны. Во-вторых, есть риск распространения на крошки баннерной слепоты.

Смотреть пример
❌

Не видны, если структура плоская

Если в структуре каталога всего 1-2 уровня и вернуться к категории или на главную и так можно в 1 клик, особой надобности в хлебных крошках нет.

Смотреть пример
✅

2. Структура крошек

От общего к частному

Структура хлебных крошек должна предполагать движение от общего к частному, с повышением детализации.

Смотреть пример
✅

Дополнение основной навигации

Хлебные крошки не должны полностью заменять основную навигацию в шапке страницы, а лишь играть роль ее дополнения, улучшающего клиентский опыт.

Смотреть пример
✅

Слева направо

Расположите категории слева направо в порядке повышения детализации. Какие-либо другие направления могут затруднить восприятие.

Смотреть пример
❌

Каноническая иерархия

Если до товара можно дойти несколькими путями через разные категории, для отображения выберите наиболее часто используемый путь.

Смотреть пример
✅

Товарная классификация

При этом будет удобнее, если хлебные крошки все же будут включать в себя товарные категории, а не только бренд производителя.

Смотреть пример
❌

Без различных путей

В случае с множественной иерархией не прописывайте в хлебных крошках разные пути. Это лишь перегрузит интерфейс и затруднит навигацию.

Смотреть пример
❌

Начинается с главной страницы

Если на главной странице у вас много ценного и интересного контента, ее не стоит обрезать в хлебных крошках: дайте клиенту перейти к ней в 1 клик.

Смотреть пример
✅

Содержит название бренда

Даже если клиент перешел к товару из общего листинга, добавьте в структуру хлебных крошек бренд, чтобы клиент в 1 клик мог ознакомиться с аналогами от производителя.

Смотреть пример
✅

Не слишком много уровней

Множество уровней в структуре каталога не только усложняют навигацию, но и делают хлебные крошки слишком объемными.

Смотреть пример
✅

Структура не слишком плоская

При этом, если структура каталога есть, не стоит удалять ее полностью из хлебных крошек, оставляя лишь главную и страницу товара. В этом случае они теряют свою ценность.

Смотреть пример
❌

Не история поиска

Избегайте размещения в хлебных крошках истории поиска. Для возврата к предыдущим страницам и так есть знакомая всем кнопка «Назад» в браузере.

Ссылка «назад» рядом с разделами

Иногда основную структуру хлебных крошек также снабжают ссылкой «назад» для быстрого возврата к листингу товаров с сохранением активных фильтров.

Смотреть пример
✅

Ссылка «назад» визуально отлична

Так как специфика ссылки «назад» и ссылок на разделы разная (история поиска vs. иерархия категорий), сделайте так, чтобы они визуально отличались.

Смотреть пример
❌

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

При этом полностью заменять крошки ссылкой назад не стоит: это значительно урезает возможности быстрой навигации для клиента.

Смотреть пример
❌

Ссылки на смежные разделы

При наведении курсора на раздел в крошках можно отображать смежные разделы того же уровня в формате dropdown'а. Это упростит переключение между категориями.

Смотреть пример
✅

3. Оформление ссылок

Визуально второстепенны

Так как хлебные крошки – не основной, а лишь вспомогательный элемент страницы, их можно сделать визуально второстепенными.

Смотреть пример
✅

Помещаются в 1 строку

По возможности проектируйте хлебные крошки так, чтобы они не занимали больше одной строки. Это поможет избежать визуальной перегрузки интерфейса.

Смотреть пример
❌

Скролл при наведении

Если хлебные крошки все же не помещаются в 1 строку, интересным решением может быть их авто-прокрутка при наведении курсора:

Смотреть пример
✅

Без лишнего текста

По возможности при переходе от категории к бренду не дублируйте ее название. Клиенту и так все будет понятно, а размер крошек можно будет сократить.

Смотреть пример
❌

Без излишней иерархии

В некоторых случаях используются лишние технические категории, не несущие никакой ценности и дублирующие текст категорий верхнего уровня. Так делать не стоит:

Смотреть пример
❌

Без лишней пунктуации

В выделении текущей категории в хлебных крошках с помощью кавычек нет смысла. Особенно если в заголовке их нет.

Смотреть пример
❌

Без количества товаров

Количество товаров можно разместить в фильтрах, как часть заголовка в рамках листинга. Но в хлебных крошках это смотрится не совсем уместно и визуально перегружает их.

Смотреть пример
❌

Без дублирующих подсказок

Удалите дублирующие контекстные подсказки из хлебных крошек, т.к. они не несут никакой дополнительной ценности для клиента.

Смотреть пример
❌

Сокращенные названия товаров

Встречаются кейсы, в которых название товара в хлебных крошках сокращается и остается только ключевой текст, но смысл при этом сохраняется.

Смотреть пример
✅

Категории понятны

Названия категорий должны быть понятны для представителей целевой аудитории и не должны вызывать вопросов.

Смотреть пример
✅

Скрытие хлебных крошек?

Если строка слишком длинная, ее можно скрыть по умолчанию, снабдив подсказкой. Но все же это будет не оптимальным решением, «лечащим симптом, а не причину».

Смотреть пример
?

Контрастность

Сделайте ссылки в хлебных крошках достаточно контрастными, чтобы их можно было легко прочитать.

Смотреть пример
❌

Текст не слишком мелкий

Не мучайте клиента – не делайте текст хлебных крошек чересчур мелким. Он должен легко читаться, даже если у человека плохое зрение.

Смотреть пример
❌

Формат единообразен

Выполните хлебные крошки единообразно на всех страницах сайта. Изменение формата крошек может стать для клиента неожиданностью.

Смотреть пример
❌

Единообразие регистра

Выполните все хлебные крошки в едином регистре. Нет смысла без каких-либо причин выделять одни категории CAPS LOCK'ом, а другие – оставлять «без внимания».

Смотреть пример
❌

Без форматирования ссылок на ПК

В отличие от обычных ссылок в тексте, в версии для ПК ссылки хлебных крошек по умолчанию можно не подчеркивать. Их функция и так понятна большинству.

Смотреть пример
✅

Без пунктирного подчеркивания

Избегайте в оформлении ссылок пунктирного подчеркивания, т.к. это достаточно распространенный паттерн отображения текста с контекстной подсказкой.

Смотреть пример
❌

Текущая страница vs. разделы

Сделайте текущую страницу визуально отличной от разделов, чтобы подсветить функциональное различие между ними.

Смотреть пример
✅

Вариации главной страницы

Вместо текста «Главная» текст ссылки можно выполнить в менее стандартном ключе: например, подсветив название своего магазина. Главное, чтобы смысл был понятен.

Смотреть пример
✅

Ссылка на главную с иконкой

Ссылку на главную страницу можно снабдить соответствующей иконкой в виде домика, понятной для широкой аудитории.

Иконки категорий

Названия категорий в хлебных крошках можно снабдить релевантными иконками. Это поможет улучшить восприятие информации и может оживить интерфейс.

Смотреть пример
✅

Ссылки реагируют на наведение

Сделайте все ссылки в хлебных крошках интерактивными, чтобы они реагировали на наведение курсора и меняли свой вид, давая визуальную обратную связь.

Смотреть пример
✅

Реакция текущей страницы на hover

Так как хлебная крошка текущей страницы некликабельна, ее визуальная реакция на наведение курсора может ввести клиента в заблуждение.

Смотреть пример
❌

Курсор при наведении

При наведении мыши на ссылки курсор должен становиться кликабельным. Это позволит дополнительно подсветить факт того, что на них можно нажать.

Смотреть пример
✅

4. Смежные разделы

Используются

Прямые ссылки на смежные разделы упростят навигацию, т.к. клиенту не придется переходить в раздел верхнего уровня и отдельно выбирать другую подкатегорию.

Смотреть пример
✅

Подразделы в dropdown'е?

В некоторых случаях вместо смежных разделов dropdown содержит подразделы. Как считаете, лучше это или хуже предыдущего пункта? Напишите в комментариях.

Смотреть пример
?

Dropdown виден при наведении

Лучше открывать список при наведении курсора на ссылку. В противном случае есть риск ошибочного нажатия на саму ссылку, а не на стрелку открытия dropdown'а.

Смотреть пример
❌

Без dropdown'ов, если раздел один

Если у раздела нет смежных разделов, отображать dropdown, в котором будет всего одно значение, не стоит – это будет некорректным управлением ожиданиями.

Смотреть пример
❌

Текущий раздел в dropdown'е

Так как ссылка на текущий раздел уже есть в самом верху dropdown'а, смысла добавлять ее еще 1 раз нет. Либо не включайте ее, либо сделайте текст некликабельным.

Смотреть пример
❌

Скрытие смежных разделов

Если dropdown'ы контролируются кликом, при нажатии на кнопку скрытия должно происходить сворачивание списка, а не переход к основной категории.

Смотреть пример
❌

Переход по основной ссылке

Наличие списка смежных категорий не должно усложнять переход по основной ссылке: он должен осуществляться в один клик. От такого исполнения лучше воздержаться:

Смотреть пример
❌

5. Разделители

Добавлены

Базовый момент: добавьте разделители между ссылками, чтобы информация в них легче воспринимались клиентом.

Смотреть пример
❌

Общепринятые

Используйте для разделителей общепринятые символы (стрелка, слэш или шеврон), чтобы не вызывать вопросов на стороне клиента и подсветить факт иерархии ссылок.

Смотреть пример
✅

Отличаются от ссылок

Сделайте разделители отличными от ссылок (например, за счет цвета). Это поможет сделать акцент на ссылках и визуально дополнительно разделить их.

Смотреть пример
✅

Направление иерархии

Направьте разделители в крошках слева направо: это более общепринятый вариант. Если использовать ненаправленные символы, хлебные крошки могут хуже считываться.

Смотреть пример
✅

Отступы достаточны

Сделайте отступы между разделителями и ссылками достаточными, чтобы ссылки в хлебных крошках не выглядели слишком скомканными.

Смотреть пример
❌

Единообразны

Базовый момент. И, опять же, я бы не включил его, если бы это не встречалось у крупных игроков. Разделители должны быть одинаковыми, без каких-либо вариаций.

Смотреть пример
❌

В хорошем качестве

Если разделители вы решили выполнить не символами, а картинками, загрузите их в хорошем качестве, чтобы они не пикселили.

Смотреть пример
❌

Без реакции на наведение

Так как у разделителей нет никакой функции, кроме как разделение ссылок, и при клике ничего не происходит, то и реагировать на наведение курсора они не должны.

Смотреть пример
❌

6. Мобильная оптимизация

Не в несколько строк

На мобильных не отображайте хлебные крошки в несколько строк по умолчанию, иначе есть риск, что они начнут занимать слишком много места, вытесняя основной контент.

Смотреть пример
✅

Без текущей страницы на mobile

Чтобы оптимизировать длину строки с хлебными крошками, заголовок страницы товара (который чаще всего занимает много места) в мобильной версии можно упразднить.

Смотреть пример
✅

Иконка вместо ссылки на главную

В мобильной версии для экономии места ссылку на главную страницу можно представить не в виде текста, а лишь в виде иконки. Ее смысл будет понятен большинству.

Смотреть пример
✅

Подчеркивание ссылок

В мобильной версии можно подсветить, что хлебные крошки – это именно ссылки. Поэтому можно сделать их подчеркнутыми по умолчанию.

Смотреть пример
✅

Отступы на мобильных

Сделайте отступы между хлебными крошками и другими объектами достаточно большими, чтобы снизить риск промаха и перехода не на ту страницу.

Смотреть пример
✅

Скролл на мобильных

На смартфонах хлебные крошки могут не помещаться в одну строку и занимать слишком много места. Горизонтальная прокрутка поможет решить эту проблему.

Смотреть пример
✅

Без системного скролла

Системный горизонтальный скролл будет лишь перегружать интерфейс, поэтому его можно убрать из прокрутки (сравните этот пример с предыдущим).

Смотреть пример
❌

Выцветание при скролле

Если на мобильных используется горизонтальная прокрутка, добавив выцветание по краям строки, вы можете дополнительно подсветить, что она прокручивается.

Смотреть пример
✅

Кнопка для скролла

Свайп строки с хлебными крошками можно дополнить кнопкой прокрутки. Это может повысить вероятность выполнения целевого действия.

Краткие названия категорий

Более краткие названия категорий не просто облегчают восприятие, но и позволяют сократить длину хлебных крошек. Это особенно важно в мобильной версии.

Смотреть пример
❌

Краткая версия крошек

Еще один вариант отображения – когда видны лишь 1-2 родительские категории. Но при тапе по скрытой зоне становится видимой вся область хлебных крошек.

Смотреть пример
?

Мобильная версия крошек

В некоторых случаях также можно встретить полную версию крошек, оптимизированную под мобильные устройства. Нажать на нужную ссылку становится гораздо легче:

Смотреть пример
✅

Только «назад» на мобильных

Как вариант, в мобильной версии хлебные крошки можно упразднить до кнопки возврата к родительской категории. Но учитывайте, что это может увеличить общее число тапов.

Смотреть пример
?

7. Переходы по ссылкам

Текущая страница некликабельна

Если вы включаете текущую страницу в хлебные крошки, сделайте ее некликабельной. Циклические ссылки не имеют смысла и создают проблемы для SEO.

Смотреть пример
❌

Все ссылки категорий кликабельны

Все ссылки в хлебных крошках (кроме текущей страницы) должны вести на существующие страницы сайта. Некликабельных разделов быть не должно.

Смотреть пример
❌

Кликабельная область крошек

Ограничьте кликабельную область каждой из крошек областью между разделителями. Иначе есть риск промахов и ошибочных переходов.

Смотреть пример
❌

Целевые страницы корректны

Разделы при переходе должны называться так же, как и в хлебных крошках. Различия в названиях могут ввести клиента в замешательство и ухудшить навигацию.

Смотреть пример
❌

Сохранение фильтров при возврате

Если в листинге были активированы фильтры, при нажатии на кнопку «назад» на странице товара и возврате к листингу они должны сохраняться.

Смотреть пример
❌


To be continued...

Итак, в этой статье мы разобрали работу с хлебными крошками. Как видим, не все так просто, как кажется на первый взгляд, а причины успехов и фэйлов, как всегда, кроются в деталях.

Следующие статьи будут с таким же уровнем детализации. Продолжаем создавать крупнейшую открытую русскоязычную базу лучших практик UX/UI в eCommerce.

Не забудьте подписаться на канал в Telegram и поделиться этим материалом с коллегами. Будем на связи.

Комментарии (0)