Верните Гензеля и Грету, или Хлебные крошки в веб-дизайне
Позиция сайта в интернете во многом зависит от правильной подачи контента. Но если пользователю сложно ориентироваться на веб-ресурсе, он не будет на нем задерживаться. К счастью навигацию можно упростить, и для этого существует понятие "навигационная строка" или "хлебные крошки".
Сказка про двух ненужных детей - Гензеля и Гретель
"Добрый" папа из известной зарубежной сказки отвел своих детей в лес на погибель, потому что дома нечего было есть. Но умные брат и сестра по пути бросали на землю камешки. Так они потом смогли отыскать дорогу домой. Хотя, зачем был нужен такой дом, если детей во второй раз отправили в лес? По дороге малыши отщипывали от хлеба крошки и бросали их на землю. Но их склевали птицы, поэтому детей похитила злая ведьма, и они перенесли много несчастий, пока не вернулись домой.
Представьте себе, что breadcrumbs или цепочка навигации - хлебные крошки, а Гензель и Гретель - посетители вашего сайта. Элемент навигации представляет собой путь от "корня" web-ресурса до страницы, на которой в настоящее время находится посетитель. Название "хлебные крошки" - это ироничная отсылка к сказке, к счастью никто в интернете хлебные крошки склевывать не собирается.
Как выглядят "хлебные крошки" на сайте
Навигация необходима сайтам с большим контентом, размещенным иерархически. Обычно это ссылки под шапкой, расположенные горизонтально, разделенные символом ">". Он символизирует стрелку и указывает уровень страницы относительно других, высших по иерархии. Но дизайнеры представляют и другие виды строки навигации, о которых мы расскажем чуть ниже.
Почему нужно любить "хлебные крошки" - про SEO и юзабилити
- Навигационная строка позволяет посетителю понимать, на какой странице он находится в настоящее время.
- Позволяет быстро перемещаться к верхнему уровню иерархической структуры веб-ресурса, выполняя роль упрощенного меню. Можно в один клик вернуться на более высокий уровень иерархии, не пользуясь кнопкой в браузере "Назад". Если человек выставил на странице какие-то фильтры (например, в интернет-магазине - "женская одежда", фильтр "красные куртки 56 размера"), то, вернувшись так на уровень выше, он их просто потеряет.
- Дизайнер стимулирует на просмотр других страниц, которые могут вызвать интерес посетителя.
- Улучшает индексирование веб-ресурса поисковыми системами за счет внутренней перелинковки. Ссылки в строке навигации участвуют в распределении веса ключей по страницам.
- Правильно размоченные "хлебные крошки" позволяют получить удобный сниппет. По нему пользователь может переходить на разделы веб-ресурса из поисковой выдачи.
Виды строк навигации по отображению ссылок
Следы по "хлебным крошкам" можно разделить на три вида: иерархический (локационный), путевой и атрибутный.
Вариант 1 - Иерархический
Основывается на местоположении пользователя, раскрывая ему структуру сайта. Подходит для веб-проектов, которые имеют, как минимум, два уровня вложенности меню. Очень помогают сориентировать посетителя, если он заходит на сайт на глубоком уровне. К примеру, посадочная страница или реклама ведет на страницу товара, а клиент может заинтересоваться другими продуктами.
Дополнительные вариант - по принципу возврата
Вместо навигационной цепочки в строке размещается ссылка "Назад", которая по факту дублирует одноименную кнопку браузера. Часто применяется на мобильных версиях сайтов и при использовании функции поиска.
Комбинированный вариант
Это линейная цепочка со ссылкой "Назад". Подходит для навигации по результатам поиска на сайте, но иногда используется в обычных разделах.
Вариант 2 - На основе путей
Такие "хлебные крошки" создаются дина