Хлебные крошки: влияние на юзабилити сайта
Помните сказку «Гензель и Гретель», где брат с сестрой рассыпали хлебные крошки, чтобы по ним найти дорогу домой? Аналогичный прием используется и на сайте, где элементы навигации показывают структуру вложенности страниц, по которым пользователь может вернуться на шаг назад или в начало.
Хлебные крошки отображаются в верхней части страницы и обычно состоят из нескольких элементов, разделенных символом ">", " » " или "/". Каждый элемент представляет собой ссылку на соответствующую страницу или раздел сайта. Например, на странице товара в интернет-магазине хлебные крошки могут выглядеть так: "Главная > Категория товара > Подкатегория товара > Название товара".
Основная цель хлебных крошек – упростить использование сайта для пользователя. Они позволяют понять текущее расположение на сайте и вернуться на пройденный этап. Это особенно полезно на сайтах с большим количеством страниц или глубокой иерархией, где пользователю бывает сложно найти нужную информацию из-за сложной структуры вложенности.
Хлебные крошки улучшают ранжирование сайта в поисковой системе, так как путь пользователя помогает краулерам точнее просканировать структуру сайта. Внедрение технологии повышает трафик и увеличивает количество клиентов.
Breadcrumbs используются на различных типах сайтов, включая новостные, корпоративные, магазины, блоги и образовательные ресурсы. Они особенно полезны, когда структура имеет более двух уровней вложенности, и пользователь хочет вернуться на предыдущий шаг без необходимости нажимать кнопку "Назад".
Существуют различные виды хлебных крошек. Прямые breadcrumbs представляют собой одну строку с последовательностью ссылок, которые ведут от текущей страницы к главной. Если бы пользователь был на странице «Яблоки», то путь выглядел бы так: Главная > Продукты > Фрукты > Яблоки.
Второй вид - выпадающий список, который позволяет пользователю выбрать любой предыдущий раздел для навигации. Третий вид - обратный порядок, где самая последняя ссылка представляет текущую страницу, а предыдущие ссылки ведут к главной странице. На примере «Яблок» навигация выглядит так: Яблоки > Фрукты > Продукты > Главная.
Для настройки хлебных крошек необходимо соблюдать логику сайта и повторять путь, который совершил пользователь. Рекомендуется использовать короткие названия или сокращения, чтобы не загромождать пространство хлебных крошек. При этом важно, чтобы названия были понятными и информативными, чтобы пользователь мог легко ориентироваться и выбрать нужный раздел для возврата.
