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

Хлебные крошки - это важный навигационный элемент, который поддерживает поиск пути, давая пользователям понять их текущее местоположение в иерархической структуре сайта. Хлебные крошки - это список ссылок, представляющих текущую страницу и ее "предков" (родительская страница, страница дедушки и т.д.), обычно идущих до главной страницы сайта. NN/g рекомендует использовать хлебные крошки с 1995 года, поскольку они обеспечивают множество преимуществ для пользователей практически без затрат для пользовательского интерфейса.

Хлебные крошки представлены в виде дорожки ссылок в верхней части страницы, обычно чуть ниже глобальной навигации; главная страница (или корневой узел иерархии) является первой ссылкой, а ссылки обычно разделяются символами ">" или "/". Мы рекомендуем использовать символ ">", хотя функциональной разницы нет, и любой из них приемлем.

Untitled

*REI.com: Дорожка хлебных крошек (1) отображается в своем типичном месте в верхней части страницы, чуть ниже глобальной навигационной панели. Она показывает местоположение текущей страницы в иерархии сайта. Каждый элемент в хлебных крошках является ссылкой на страницу-предок; символ ">" разделяет хлебные крошки. В данном примере главная и текущая страницы опущены в хлебных крошках, что не рекомендуется.*

Если пользователи достигают глубокой страницы, пройдя от главной страницы через все страницы-предки этой страницы, они имеют достаточно четкое представление о том, где они находятся в информационной иерархии сайта. Но когда они пропускают некоторые из этих уровней (например, потому что попали на сайт по внешней ссылке, такой как результат поисковой системы), хлебные крошки сориентируют их и помогут найти путь к другим, возможно, более релевантным страницам.

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

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

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

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

Untitled

На сайте Travelsouthdakota.com отображаются хлебные крошки, которые также служат навигацией по разделам. Вместо традиционного маршрута хлебных крошек (который выглядел бы так: Home /Explore /Itineraries / Cultural Immersion), маршрут хлебных крошек включает элемент первого уровня (Explore) и родительскую страницу (Itineraries). Ссылка на родительскую страницу представляет собой выпадающее меню с братьями и сестрами текущей страницы (нижнее изображение). Более удачный дизайн предполагает отдельный пользовательский интерфейс для локальной навигации, чтобы пользователи могли переходить на боковые страницы в текущем разделе сайта.

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

Хлебные крошки не предназначены для отображения истории страниц, пройденных во время сеанса на сайте (как родная кнопка "Назад" в браузере); они предназначены для отображения иерархической структуры сайта. Мы отмечали это на протяжении многих лет, но все же стоит повторить: попытка показать список страниц, на которые пользователь заходил по порядку, быстро станет длинной и запутанной, с большим количеством повторений, и не принесет никакой пользы пользователям, которые попадают на глубокую страницу непосредственно по внешней ссылке, что является одним из ключевых применений хлебных крошек.

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

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

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