Хлебные крошки для сайта: что, когда и как

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

Хлебные крошки для сайта

Изображение взято: oseyourmarbles

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

Иерархическая навигация полезна

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

  • Где я? Информирование о местонахождении по отношению к иерархии сайта.
  • Куда я могу пойти? Улучшение перемещения по разделам сайта и страницам. Структуру сайта легче понять, когда он выкладывается по цепочке, чем если он помещена в меню.
  • Должен ли я пойти туда? Связывание контента и стимулирование просмотров сайте (например, пользователь онлайн-магазинов перейдя на страницу продукта, который им не понравился, могут посмотреть другие товары из той же категории). Это, в свою очередь, снижает показатель отказов сайта.

Уменьшение количества действий

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

Занимает минимум места

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

Пользователи не страдают из-за технических проблем

Люди могут игнорировать этот маленький элемент дизайна, но они всегда верно поймут, даже при возникновении проблем эксплуатации.

Когда нужно использовать

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

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

Виды хлебных крошек для сайта

Могут быть на основе: местоположения, пути и атрибута.

На основе местоположения

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

Хлебные крошки для сайта

Изображение взято: marketingland

В приведённом ниже примере (от Best Buy), каждая ссылка на страницу находящаяся справа выше уровнем.

Хлебные крошки для сайта

Местоположение от Best Buy

На основе пути

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

Хлебные крошки для сайта

Изображение взято: Oracle

Исходя из атрибута

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

Хлебные крошки для сайта

Изображение взято: marketingland

Например, в TM Lewin, маршрут показывает атрибуты элементов, отображаемых на определённой странице:

Хлебные крошки для сайта

Отображение всех костюмов, которые имеют атрибут «Slim Fit». Изображение взято: T.M. Lewin

Иерархия или история?

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

Иерархическая навигация лучшая практики

При проектировании цепочки переходов, нужно держать в виду следующие вещи:

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

Иерархическая навигацию Apple

Не включайте ссылку на текущую страницу в навигацию

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

Используйте разделители

Самый узнаваемый символ для разделения ссылок символ «больше чем» (>). Как правило, знак > применяется для обозначения иерархии, как в формате родительской категории > детские категории. Другие используемые символы стрелки, указывающие вправо (→), правый угол кавычки (») и чертой (/). Выбор зависит от эстетики сайта:

Хлебные крошки для сайта

Изображение взято: Dribbble

 

Хлебные крошки для сайта

Изображение взято: Dribbble

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

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

Не делайте фокусной точкой в дизайне

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

Хлебные крошки для сайта

Изображение взято: Dribbble

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

Хлебные крошки для сайта

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

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

Вывод

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

Спасибо!

Автор статьи Nick Babich, перевод А.А. Шадрин.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *