Приветствую вас, уважаемые читатели!
Используете ли вы на своих сайтах «хлебные крошки»? Если вы впервые слышите об этом понятии, то рекомендую прочитать статью до конца, так как далее мы рассмотрим, что это такое и для чего необходимо. Если же вы имеете некоторое представление о хлебных крошках, то в данном материале вы найдёте ответ на вопрос, в каких случаях стоит их использовать и в каком виде они должны быть.
Определение
Хлебные крошки (по англ. – breadcrumbs) – это элемент навигации, включающий в себя часть структуры сайта и позволяющий понять, какой уровень вложенности имеет просматриваемая страница.
Для понимания проще всего увидеть живой пример: перед вами одна из страниц интернет-магазина товаров для кондитеров.
В данном случае, находясь на странице товара, посетитель сайта понимает, в какой рубрике он сейчас находится. Все элементы, входящие в состав хлебных крошек (кроме последнего), являются кликабельными ссылками и позволяют быстро перейти на уровень выше.
Для чего нужны?
Основная функция – улучшение юзабилити веб-сайта, повышение удобства пользования ресурсом. Согласитесь, что находиться на сайте с продуманной навигацией и чётко выстроенной структурой гораздо приятнее, чем на том, где удобство пользования находилось при разработке не на приоритетном месте.
Предположим, что вы зашли в интернет-магазин бытовой техники и ищете себе блендер. Категория «Блендеры» делится на «Погружные» и «Стационарные». При наличии хлебных крошек вы с карточки одной из моделей погружного блендера можете быстро перейти в общий раздел «Блендеры» и продолжить поиск среди стационарных образцов.
Если крошки будут отсутствовать, то для совершения такого же действия вам нужно будет снова заходить в общий каталог, искать там технику для кухни, а уже затем искать нужную категорию. Неудобно и занимает гораздо больше времени, не правда ли?
Давайте небольшим пунктиром подытожим – для чего же необходимы breadcrumbs?
- Удобство навигации – быстрый переход на раздел, расположенный уровнем выше.
- Информативность – понимание того, в какой части сайта и на каком уровне вы сейчас находитесь.
- Внутренняя перелинковка – так как хлебные крошки являются ссылками, то они обеспечивают дополнительную перелинковку страниц сайта, что является положительным фактором при SEO-продвижении. Желательно также включить их в микроразметку.
- Улучшение поведенческих факторов. Если посетителю удобно ориентироваться на сайте, то он задерживается на нём дольше и просматривает большее число страниц. Всё это в сумме улучшает поведенческие факторы, а это – хороший знак для поисковых систем.
Когда нужно использовать?
В примерах выше были рассмотрены интернет-магазины. Дело в том, что сайты такого типа дают отличное представление о полезности и удобстве хлебных крошек. Разветвлённая структура, наличие множества категорий и подкатегорий – всё это является поводом для того, чтобы без всяких сомнений использовать их.
Однако это не значит, что ими стоит пренебрегать на других сайтах – блогах или корпоративных ресурсах. Если ваш проект предполагает наличие нескольких уровней страниц и много разделов, то для улучшения юзабилити обязательно используйте этот небольшой, но крайне полезный навигационный элемент. Посетители скажут вам спасибо.
Возникает вопрос: делать ли хлебные крошки на небольших сайтах-визитках? Ведь на них трудностей с навигацией быть не должно – обычно главное меню включает в себя список всех существующих страниц, а уровни вложенности отсутствуют.
Скажу, что размещать breadcrumbs на сайтах из 5-10 страничек особого смысла нет, но если вы их всё-таки сделаете, то минусом это не является. Самое главное – чтобы навигационная цепочка гармонично вписывалась в дизайн и не отвлекала пользователя от просмотра основного контента.
Как выглядят?
Как правило, навигация начинается с главной страницы (в некоторых случаях обозначается домиком) и заканчивается текущим разделом. Но этот вариант не является правилом, поэтому создавать цепочку следует, исходя из собственных задач.
Не обязательно использовать в качестве первого элемента главную страницу, если по смыслу она не является родительской для рассматриваемого раздела.
Например, на вашем корпоративном ресурсе есть отдельный раздел «Блог», и читателям вы хотите помочь ориентироваться только по данному разделу. В этом случае цепочка начнётся со ссылки «Блог». Аналогичным образом можно организовать навигацию по каталогу, начав её с элемента «Наш каталог».
Мало кто знает, но хлебные крошки – это не только элемент, отображающий несколько уровней страниц, вложенных друг в друга. Это также и кнопка «Вернуться назад» или просто «Назад», предоставляющая пользователю возможность вернуться на ранее просматриваемую страницу. К примеру, на предыдущий товар или на страницу с результатами поиска. Интернет-магазинам со сложной структурой и большим количеством товара такая кнопка будет крайне полезна.
Принимать решение об использовании и внешнем виде хлебных крошек следует после составления технического задания и прототипа сайта. Именно тогда будет понимание того, нужны они или нет. А если нужны, то какова должна быть их основная функция на разрабатываемом сайте.
Если у вас есть вопросы по теме статьи, задавайте их в комментариях.