Подписывайтесь на мой новый канал: делюсь интересными фичами из мира e-commerce 3 раза в неделю

РАБОТА С ХЛЕБНЫМИ КРОШКАМИ

ЛУЧШИЕ ПРАКТИКИ UX/UI В E-COMMERCE
83
ГАЙДЛАЙНА
Хлебные крошки – это небольшие ссылки на страницах товаров, которые облегчают навигацию клиента по сайту. Казалось бы, что может быть проще? Это же просто ссылки. Но есть много факторов, которые отделяют «вкусные» и эффективные хлебные крошки от «чёрствых» и бесполезных. В этой статье мы разложим хлебные крошки на атомы. 83 гайдлайна с примерами.

Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. Подпишитесь на выход новых статей в Telegram и делитесь этим постом с друзьями и коллегами.
Партнер Experience.Partners
Автор сайта HardClient.com
СТРУКТУРА СТАТЬИ
Для удобства статью я разбил на блоки. Так будет легче для восприятия. Каждый из блоков содержит в себе детальный чек-лист.
29 детальных чек-листов по e-commerce доступны в моем Telegram.

1. РАЗМЕЩЕНИЕ ЭЛЕМЕНТА

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

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

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

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

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

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

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

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

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

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

Не в футере

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

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

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

В рамках first impression frame

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

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

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

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

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

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

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

2. СТРУКТУРА КРОШЕК

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3. ОФОРМЛЕНИЕ ССЫЛОК

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4. СМЕЖНЫЕ РАЗДЕЛЫ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5. РАЗДЕЛИТЕЛИ

Добавлены

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

6. МОБИЛЬНАЯ ОПТИМИЗАЦИЯ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

7. ПЕРЕХОДЫ ПО ССЫЛКАМ

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

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

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

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

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

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

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

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

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

Если в листинге были активированы фильтры, при нажатии на кнопку «назад» на странице товара и возврате к листингу они должны сохраняться.
TO BE CONTINUED...
Итак, в этой статье мы разобрали работу с хлебными крошками. Как видим, не все так просто, как кажется на первый взгляд, а причины успехов и фэйлов, как всегда, кроются в деталях.
Следующие статьи будут с таким же уровнем детализации. Продолжаем создавать крупнейшую открытую русскоязычную базу лучших практик UX/UI в eCommerce.
Не забудьте подписаться на канал в Telegram и поделиться этим постом с друзьями и коллегами. Будем на связи.
Все статьи по e-commerce