Александр
Хлебные крошки показывают место страницы в структуре сайта и дают короткий путь к более широкому разделу. Они особенно полезны в каталогах и базах знаний, где посетитель может прийти сразу на вложенную страницу. Разберём типы этой навигации и семь задач, для которых можно спроектировать свою цепочку.
Что такое хлебные крошки
Хлебные крошки — вспомогательная навигационная цепочка, например «Главная → Электроника → Ноутбуки → Модель». Обычно она располагается над заголовком страницы. В иерархическом варианте цепочка отражает структуру сайта, а не последовательность переходов конкретного посетителя.
Три подхода к навигационной цепочке
Выберите подход по тому, что нужно объяснить читателю: положение в каталоге, выбранные условия или историю переходов.
- Иерархия разделов. Цепочка «Главная → Электроника → Ноутбуки» позволяет подняться на один или несколько уровней. Названия должны совпадать с названиями разделов в основной навигации.
- Атрибуты и фильтры. В автомобильном каталоге условия «Марка: Toyota» и «Год выпуска: 2025» удобнее показать отдельными метками с возможностью сброса. Не смешивайте выбранные фильтры с постоянной иерархией категорий.
- История переходов. Такая цепочка зависит от действий посетителя. Если нужна именно возможность вернуться к результатам поиска, понятная ссылка «Назад к результатам» часто полезнее длинного перечня просмотренных страниц.
Когда хлебные крошки помогают пользователю
Добавляйте цепочку там, где структура действительно содержит несколько уровней. На простом сайте с плоской навигацией она может только повторять меню.
Ориентация внутри каталога
Посетитель видит, к какому разделу относится текущая страница, и может открыть родительскую категорию. Это полезно при входе из поисковой системы: предыдущей страницы сайта в истории браузера ещё может не быть.
Понятная структура и внутренние ссылки
Связные названия разделов и доступные ссылки помогают просматривать сайт. Для поисковой системы важны также корректные адреса и согласованность разметки с видимой цепочкой. Одно добавление хлебных крошек не гарантирует роста позиций.
Возврат к выбору
На странице товара цепочка помогает открыть категорию и сравнить другие варианты. При этом выбранные фильтры и сортировку лучше сохранять отдельно: переход в категорию не должен неожиданно лишать пользователя результатов его работы.
Семь сценариев для проектирования хлебных крошек
1. Каталог книг: ориентир — Amazon
Для большого книжного каталога полезна цепочка от общего раздела к жанру: «Книги → Художественная литература → Детективы». На странице конкретной книги она даёт путь к похожим изданиям. При разборе Amazon обращайте внимание на глубину категорий и различия между типами товаров.
2. Семейство продуктов: ориентир — Apple
В каталоге с небольшим числом семейств достаточно короткого пути: «Компьютеры → Ноутбуки → Модель». Такой сценарий можно разбирать на примере продуктовой структуры Apple. Цепочка должна помогать перейти к семейству, не дублируя все пункты главного меню.
3. База знаний: ориентир — Википедия
Материал может относиться сразу к нескольким темам. Категории Википедии полезны для изучения таких связей, но сами по себе не равны линейной цепочке хлебных крошек. В своей базе знаний выберите основной путь к статье, а дополнительные темы покажите отдельно.
4. Каталог обуви: ориентир — Nike
Для спортивной обуви можно разделить постоянную категорию и условия выбора: «Обувь → Беговая обувь», а размер и цвет оформить фильтрами. Изучая каталог Nike, оценивайте, какие переходы меняют категорию, а какие лишь сужают выдачу.
5. Поиск жилья: ориентир — Airbnb
Географическая цепочка «Страна → Регион → Город» помогает расширить область поиска. Для сценария аренды, знакомого по Airbnb, важно отдельно сохранять даты и число гостей: эти параметры не являются уровнями географической иерархии.
6. Маркетплейс: ориентир — eBay
В крупном маркетплейсе товар может подходить нескольким категориям. На примере eBay удобно изучать, как выбирается основной раздел. Для своего каталога задайте устойчивую иерархию и избегайте разных цепочек, которые без причины меняются при каждом входе на страницу.
7. Продукты и документация: ориентир — Adobe
В продуктовой экосистеме, подобной Adobe, путь к продукту и путь к справочной статье решают разные задачи. Для документации полезна цепочка «Справка → Продукт → Тема». Не помещайте в неё маркетинговые разделы, если они не помогают найти соседние инструкции.
Как собрать цепочку в макете
Начните с названий реальных разделов. Покажите текущую страницу последним элементом, визуально отделите её от ссылок и выберите один разделитель. Для длинных названий подготовьте компактный вариант, который сохраняет смысл и доступ к родительскому разделу.
В Pixso можно собрать компонент цепочки и проверить его на нескольких страницах: короткой, глубоко вложенной и мобильной. Добавьте состояния ссылок и видимого фокуса, а затем обсудите с разработчиком поведение при переносе строк и сокращении промежуточных уровней.
Что проверить в прототипе
Дайте участнику открыть соседний раздел, вернуться к категории и найти другой товар. Наблюдайте, замечает ли он цепочку и понимает ли её названия. Если для этих задач используется только главное меню, проверьте расположение и полезность дополнительной навигации.
Сохраните удачную цепочку как компонент в Pixso и примените её к страницам разных уровней. Так проще увидеть непоследовательные названия, слишком длинные пути и различия между настольной и мобильной версиями.
