Как оформить хлебные крошки на сайте (bredcrumbs)
Название “хлебные крошки” исходит из детской сказки “Гензель и Гретель” Братьев Гримм, в которой один из главных героев оставляет хлебные крошки по пути в дремучий лес, чтобы затем найти дорогу домой.
По этой аналогии, на веб-сайтах создается путь (навигационная цепочка) из «хлебных крошек» от главной страницы до текущего раздела, на котором находится пользователь.
Зачем нужны хлебные крошки на сайте:
- Хлебные крошки показывают текущее положение пользователя на сайте. Пользователь, который попадает на страницу продукта нелинейным образом (например, из внутреннего или внешнего поиска), сможет быстро сориентироваться по хлебным крошкам куда он попал (категория товаров, бренд и т.п.). По этой же причине важно указывать весь путь от главной страницы, а не только последние шаги в хлебных крошках
- Хлебные крошки дают доступ в 1 клик к верхним уровням сайта. С помощью хлебных крошек пользователь, которому не подошел текущий продукт, или он просто хочет увидеть другие продукты того же типа (например, для сравнения), может использовать хлебные крошки для беспрепятственного перехода вверх по иерархии сайта и, таким образом, продолжить просмотр продуктов, не прибегая к резким скачкам по сайту в виде возврата на главную страницу или заново.
При этом, хлебные крошки:
- Занимают мало места на сайте;
- Просты в реализации;
- Никогда не вызывают проблем у пользователей;
- Учитываются поисковыми системами.
Поисковые системы учитывают наличие хлебных крошек на сайте и отображают их в результатах поисковой выдачи. Что упрощает навигацию по сайтам и косвенно влияет на поисковую оптимизацию сайта.
Сверху — вниз: Kari.com, Google, Яндекс.
Хлебные крошки улучшают размер и привлекательность сниппета (отображение сайта в результатах поисковой выдаче), выводя под заголовком путь. За счет этого сниппет становится больше и заметнее за счет дополнительной строки контрастного цвета. Также за счет хлебных крошек страницы сайта быстрее индексируются. Поскольку крошки есть на каждой странице и каждый “шаг” в пути является ссылкой, поисковой робот быстрее индексирует страницу и за один обход охватывает больше разделов сайта.
Отсутствие хлебных крошек
Если хлебные крошки на сайте отсутствуют, то пользователям, приходится возвращаться на главную страницу и начинать путь заново или выполнять повторный поиск, что замедляет и затрудняет подбор товаров.
При этом, хлебные крошки не смогут исправить сложную архитектуру сайта, поэтому их можно отнести скорее к вспомогательным навигационным средствам. Но хлебные крошки стали неким стандартом юзабилити и дизайна, помогая пользователям ориентироваться на веб-сайтах. В ходе тестирования мы наблюдали как испытуемые искали хлебные крошки и удивлялись их отсутствию.
Как оформить хлебные крошки:
Наиболее распространенное использование хлебных крошек — это возвращение пользователей в категорию, из которой они пришли, что похоже на действие кнопки «назад» в браузере, только в случае с хлебными крошками это часть интерфейса веб-страницы.
Поэтому хлебные крошки — это простой способ вернуться и продолжить просмотр продуктов в категории, переключаясь между страницей продукта и списком продуктов. Однако ссылки на хлебные крошки часто работают не так, как кнопка «назад» в браузере, поскольку они обычно основаны на иерархии, тогда как кнопка «Назад» основана на истории браузера пользователя. Поэтому важно показать весь путь, а не только последние шаги в хлебных крошках. А также важно правильно оформить хлебные крошки, рекомендации по оформлению ниже:
- Путь начинается с главной страницы (название бренда);
- Разделяются уровни знаками: “>” (больше чем) или “/” (косая черта, слеш) или “→” (стрелка направо) чтобы прослеживалось направление движения:
Раздел меню > Подраздел (1 уровень) > Подраздел (2 уровень) … > Карточка товара;
- Не стоит разделять уровни следующими символами: “ | “ (вертикальная черта), “ — “ (горизонтальная черта, дефис/тире),”:” (двоеточие), “;” (точка с запятой), “…” (многоточие) они могут вызвать путаницу;
- Последний уровень выделяется жирным шрифтом или цветом;
- Каждый уровень (кроме последнего) является кликабельны и ведет в соответствующий раздел сайта;
- Так как пользователь всегда находится на последнем уровне, то делать его кликабельным не нужно;
- Располагать хлебные крошки желательно в левой-верхней части экрана, именно там пользователи искали их чаще всего, что говорит о выработанной привычке.
Всё большую популярность набирают хлебные крошки с выпадающими списками (изображение ниже). Подобный подход не вызывал трудностей у пользователей в ходе тестирования.
Все эти рекомендации применимы и к мобильным версиям сайтов. Здесь важно учесть то, что пространство экрана меньше, чем на настольных компьютерах, поэтому хлебные крошки желательно не делать в несколько строк, а уместить на одной, оставив возможность горизонтальной прокрутки строки с хлебными крошками.
Ошибки при оформлении хлебных крошек
Ниже два примера с ошибками в оформлении хлебных крошек. Так на сайте Техно парк путь начинается не с главной страницы из-за этого не сразу понятно что означает данная строка. Также не указан последний уровень (не выделена текущая страница) из-за этого непонятно где сейчас находится пользователь и не понятен путь до текущей страницы.
А на сайте Harbery уровни разделены точкой из-за чего не прослеживается направление движения направо. В результате оформления хлебных крошек с ошибками, они не выполняют свою функцию и не помогают в навигации по сайту.
Точка роста конверсии: используйте хлебные крошки и избегайте ошибок при их оформлении
В данной статье рассмотрена лишь одна точка роста конверсии. Узнать ещё 100+ точек роста конверсии и UX-исследований можно в электронном учебнике Conversant.
