Поддерживайте удобную навигацию вашего сайта добавляя хлебные крошки, отражающие информационную структуру вашего ресурса. В мобильной версии лучше не использовать слишком «маленькие крошки», а так же стоит избегать переноса крошек на несколько строк.
Хлебные крошки — это важный навигационный элемент, который поддерживает навигацию — информируя пользователей об их текущем местоположении в рамках иерархической структуры веб-сайта. Хлебные крошки — это список ссылок, представляющих текущую страницу и ее «предков» (родительская страница, страница прародителей и т. д.), обычно ведущих на домашнюю страницу сайта. NNgroup рекомендует хлебные крошки еще с 1995 года, поскольку они обеспечивают множество преимуществ пользователям практически без затрат для UI.
Хлебные крошки представлены в виде цепочки ссылок в верхней части страницы, обычно чуть ниже глобальной навигации; домашняя страница (или корневой узел иерархии) является первой ссылкой, и ссылки обычно разделяются символами «>» или «/». Мы рекомендуем использовать символ «>», хотя функциональной разницы нет, и любой из них приемлем.

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

2. Хлебные крошки должны отображать текущее местоположение в иерархической структуре сайта, а не историю сеанса.
Хлебные крошки не предназначены для отображения истории страниц, которые вы посетили, во время работы на сайте (в виде кнопки «Назад» браузера); они предназначены, чтобы показать иерархическую структуру сайта. Мы отмечали это в течение многих лет, но это стоит повторить; пытаясь показать список страниц, к которым пользователь получил доступ, действие становится длинным и запутанным, с большим количеством повторений, и не будет предоставлять пользу для пользователей, перешедших на глубинную страницу непосредственно из внешней ссылки, которая является одним из основных видов использования хлебных крошек.
3. Для многоуровневых сайтов хлебные крошки должны показывать один путь в иерархии сайта.
Хлебные крошки — это неотъемлемое противоречие с многоуровневыми сайтами (в которых страница имеет более одного родителя). В таких ситуациях мы не рекомендуем показывать две или более цепочки «хлебных крошек», отражающих различные пути в иерархии, потому что они могут запутать пользователей и занять много места в верхней части страницы.
Если у страницы есть несколько разных родителей, укажите коренной путь к ней в иерархии сайтов и покажите этот путь в хлебных крошках. Не пытайтесь персонализировать «хлебные крошки», чтобы они отражали индивидуальный путь каждого пользователя в иерархии сайта, потому что вы в конечном итоге будете отправлять смешанные сигналы поисковым системам. И вам все равно нужно будет указать один путь в иерархии в качестве основного маршрута для тех посетителей, которые приходят по внешней ссылке.
4. Включите текущую страницу в качестве последнего элемента в цепочке.
5. В цепочке, хлебная крошка, соответствующая текущей странице, не должна быть ссылкой.
У вас не должно быть ссылки, которая ничего не делает. Последняя хлебная крошка (обозначающая текущую страницу) не должна быть ссылкой. Чтобы избежать путаницы пользователей, визуально различайте текущую страницу и предыдущие связанные элементы хлебных крошек, предпочтительно используя подчеркнутый или синий текст.

6. Хлебные крошки должны включать только страницы сайта, а не логические категории в вашей информационной архитектуры.
Каждый узел в цепочке должен представлять собой ссылку на страницу предка (с важным исключением ссылки, соответствующей текущей странице, как отмечено выше). Если у некоторых меток подкатегорий в глобальной навигации нет отдельной страницы, посвященной им, не включайте эти подкатегории в цепочку хлебных крошек.
Способность “click-and-go” является важной частью понимания пользователями хлебных крошек, поэтому все элементы (кроме текущей страницы) должны представлять собой место, куда пользователь может перейти.

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


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

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

10. Не используйте хлебные крошки, которые слишком малы или тесно расположены.
Некоторые сайты пытаются сделать так, чтобы хлебные крошки занимали меньше места на экране, делая ссылки меньше или ближе друг к другу. К сожалению, это решение не работает на сенсорных экранах: метки должны быть не менее 1 см х 1 см.
11. Подумайте о том, чтобы сократить цепочку из крошек, чтобы включить только последний уровень (уровни).
На некоторых страницах единственная крошка, указывающая на уровень, может быть всем, что необходимо для поддержки основных целей пользователя. Например, на сайте электронной коммерции, если пользователь попадает на страницу сведений о продукте (например, с помощью поиска в Google), он может захотеть увидеть другие варианты продукта в этой же категории для сравнения, поэтому крошечные ссылки, связанные с родительским уровнем в иерархии может поддерживать эту общую задачу. Это решение позволяет избежать длинной и переполненной цепочки, поедающей драгоценное место.
Обратите внимание, что этот совет противоречит рекомендации № 8 и должен выполняться только на мобильных устройствах. На десктопных устройствах — там, где больше места — всегда показывайте полную цепь.

Выводы
Хлебные крошки — это вторичная форма навигации, которая помогает пользователям получить доступ к содержимому в иерархической структуре. Они особенно полезны, когда пользователи переходят на сайт по внешней ссылке и не начинают работу с домашней страницы. Убедитесь, что все элементы в цепочке «хлебные крошки» являются ссылками и что каждый отдельный узел становится более конкретным по мере продвижения вниз по сайту. На мобильном устройстве хлебные крошки могут занимать слишком много места или труднонажимаемыми; рассмотрите возможность сокращения пути цепочки, если задачи ваших пользователей позволяют это.
Перевод статьи NNGroup.
Читайте так же: Почему критика хороша для творчества