Рекомендации по дизайну "Хлебных крошек"

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

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

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

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

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

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

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

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

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

Travelsouthdakota.com отображает цепочку хлебных крошек, которая также служит в качестве раздела навигации. Вместо традиционной цепи из крошек (которая будет: Главная страница / Исследование / Маршруты / Культурное погружение), цепочка включает в себя элемент уровня 1 (Исследование) и родительскую страницу (Маршруты). Ссылка на родительскую страницу представляет собой раскрывающееся меню с одноуровневыми элементами текущей страницы (нижнее изображение). Лучшим вариантом был бы отдельный интерфейс для локальной навигации, чтобы пользователи могли переходить на боковые страницы в текущем разделе сайта.

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

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

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

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

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

4. Включите текущую страницу в качестве последнего элемента в цепочке.

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

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

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

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

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

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

Newegg.com: в мегаменю глобальной навигации (вверху) есть подкатегории, у которых нет собственной страницы - например, Коммерческие сети (1). На странице «Проводная сеть» (внизу) цепочка «хлебные крошки» (2) не включает коммерческие сети, поскольку эта подкатегория не имеет связанной страницы. — Newegg.com: в мегаменю глобальной навигации (вверху) есть подкатегории, у которых нет собственной страницы — например, Коммерческие сети (1). На странице «Проводная сеть» (внизу) цепочка «хлебные крошки» (2) не включает коммерческие сети, поскольку эта подкатегория не имеет связанной страницы.

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

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

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

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

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

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

Веб-сайт правительства штата Орегон включает в себя цепочку из хлебных крошек, но не содержит ссылки на домашнюю страницу. Однако в этом случае это приемлемо, поскольку сайт также содержит ссылку «Главная» в глобальной навигации - дублировать эту ссылку на главную страницу не нужно, но ее нужно показывать в одном из двух мест. — Веб-сайт правительства штата Орегон включает в себя цепочку из хлебных крошек, но не содержит ссылки на домашнюю страницу. Однако в этом случае это приемлемо, поскольку сайт также содержит ссылку «Главная» в глобальной навигации — дублировать эту ссылку на главную страницу не нужно, но ее нужно показывать в одном из двух мест.

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

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

9. Не используйте хлебные крошки, которые переносятся на несколько строк.

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

Мобильный сайт REI.com использует слишком много пространства для цепочки хлебных крошек, поэтому название продукта находится ниже вкладки, даже на большом мобильном устройстве (в данном случае, iPhone X).

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

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

11. Подумайте о том, чтобы сократить цепочку из крошек, чтобы включить только последний уровень (уровни).

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

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

Bestbuy.com: Мобильный сайт (вверху) показывает укороченную цепочку (1), позволяющую получить доступ к родительской категории. На десктопной версии сайта (внизу) представлена полная цепочка хлебных крошек. (2). Этот компромисс на мобильных устройствах поддерживает поиск путей, но позволяет сохранить драгоценное место.

Выводы

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

Перевод статьи NNGroup.

Читайте так же: Почему критика хороша для творчества