Хлебные крошки на сайте: как проверить навигацию в каталоге и блоге

Цепочка разделов отвечает на вопрос «Где я?»

Хлебные крошки полезны, когда человек попадает сразу на внутреннюю страницу и хочет посмотреть соседние товары или материалы. Короткая цепочка над содержимым показывает, к какому разделу относится страница и куда можно подняться. Чтобы оценить её пользу, достаточно открыть карточку по прямой ссылке и попробовать найти похожее предложение. Если путь непонятен, цепочка нуждается в изменении.

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

Разделы и история посещений — разные вещи

В шаблоне W3C хлебные крошки описаны как ссылки на родительские страницы в порядке иерархии. Обычно их располагают перед основным содержимым. Источник — Breadcrumb Pattern. Это объясняет отличие от кнопки браузера «Назад»: та возвращает к предыдущему посещению, которое могло быть на другом сайте.

При прямом входе предыдущей страницы каталога нет. Цепочка всё равно нужна, если карточка относится к понятной группе и посетитель может продолжить в ней выбор.

Для глубокого каталога я предпочла бы устойчивую цепочку разделов, а возврат к прежнему списку сделала отдельным действием, потому что человек решает две разные задачи: понять место товара и продолжить подбор с уже выбранными параметрами. Если смешать эти задачи, название категории начнёт обещать то полный раздел, то случайный результат фильтра. Пользователю будет трудно предсказать переход. Лучше прямо назвать кнопку «Вернуться к подбору», когда требуется сохранить фильтры, а в хлебных крошках оставить связь товара с каталогом. При испытании видно, понимает ли человек, какая ссылка сохранит выбранные параметры.

Где добавление цепочки оправдано

У многоуровневого каталога задача очевидна. Для небольшой страницы услуги без вложенных разделов цепочка может повторять единственную ссылку на главную и почти не помогать. Решение стоит принимать по структуре и действию посетителя. В блоге переход от статьи к теме также полезен, если тема собирает материалы, которые действительно связаны между собой.

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

Как выбрать родительский раздел и понятные названия

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

Категория должна обещать соседний ассортимент

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

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

Чтобы оценить название раздела, сначала прочитайте его без перехода и назовите ожидаемый ассортимент, а затем откройте ссылку: расхождение покажет, почему покупатель может уйти в другую группу, хотя был готов продолжить выбор среди похожих товаров. Если результат отличается, проблема может быть в подписи, составе раздела или выбранном родителе. Менять только цвет ссылки в таком случае бесполезно. Маркетологу стоит записать расхождение обычными словами и обсудить его с сотрудником, который ведёт ассортимент.

Длинное имя и сокращение

Название в цепочке может быть короче полного заголовка страницы, если смысл сохраняется. Однако служебный код категории, внутреннее сокращение или общий пункт «Продукция» вместо понятной группы не помогают покупателю выбрать направление. Сокращение оценивают вместе с соседними элементами, потому что именно порядок слов превращает набор ссылок в объяснение структуры. Профессиональное сокращение оставляют, если покупатели сами используют его при выборе. Словарь отдела закупок для этого недостаточен.

На последнем месте можно показать текущую страницу обычным текстом, чтобы не предлагать бессмысленный переход на неё же. Если она остаётся ссылкой, W3C рекомендует обозначить её атрибутом aria-current со значением page. Для текущего элемента без ссылки этот атрибут необязателен. Это конкретное техническое условие из шаблона W3C, которое разработчик может подтвердить при сдаче.

Переименование не заканчивается в меню

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

Пустой раздел не стоит оставлять родителем активных карточек без объяснения. Если ссылка выводит человека на страницу без товаров, продолжить выбор он не сможет. Здесь требуется исправить связь или содержимое раздела, а не просто скрыть цепочку, чтобы дефект перестал попадаться на глаза.

Сможет ли человек воспользоваться цепочкой на телефоне и с клавиатуры

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

Мобильное сокращение требует решения

В компоненте GOV.UK предусмотрено сокращение цепочки на узких экранах до первого и последнего элементов. Это пример конкретного подхода из дизайн-системы GOV.UK, а не обязательное правило для любого каталога. Если последний видимый элемент у вас — название товара, такое сокращение может убрать именно ссылку на ближайшую категорию. Для магазина важнее сохранить полезный переход к соседним товарам, чем любой ценой уложить всю цепочку в одну строку. Иногда достаточно переносов, иногда — сокращения промежуточных уровней. Выбор подтверждают на узком экране: человек видит связь и может нажать нужный пункт, не попадая в соседнюю ссылку. Скрытый за многоточием смысл нельзя считать сохранённым лишь потому, что полный текст остался в коде.

На телефоне ссылку выбирают пальцем, поэтому нужно испытать размер области нажатия и расстояние между соседними пунктами.

Как цепочка звучит при чтении страницы

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

Заказчику не требуется читать HTML, чтобы принять результат. Специалист демонстрирует, что цепочка распознаётся как отдельная навигация, ссылки имеют понятные имена, а текущая страница отличается от родительских разделов. Сам пример W3C отдельно требует испытания с целевыми браузерами и вспомогательными технологиями. После переноса примера в шаблон разработчик повторяет испытания уже на страницах сайта.

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

Что наблюдать в показе подрядчика

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

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

Какой вопрос задать при сдаче каталога

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

Набор страниц для приёмки

• Карточка с обычным родительским разделом: ссылка ведёт к ожидаемым соседним товарам.
• Товар в нескольких группах: выбранный путь понятен при прямом входе.
• Глубокий раздел: каждый промежуточный пункт открывает полезное содержимое.
• Статья блога, если используется тот же компонент: тема ведёт к связанным материалам.
• Мобильная страница с длинными названиями: ближайший полезный переход доступен.

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

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

Наблюдение вместо догадки о пользе

Если компания собирает аналитику переходов, стоит смотреть, куда человек пришёл после клика и продолжил ли подбор. Дополнительно полезен короткий просмотр задачи с участником, который не знает структуру сайта. Участник сначала называет ожидаемое содержимое раздела. Затем открывает ссылку. Расхождение ожидания и результата подскажет, надо ли менять слова, состав категории или положение карточки. Меню помогает выбрать направление по всему сайту, а цепочка связывает открытую страницу с её родительскими разделами. Оценивать её нужно именно в этом месте выбора.

Финальный разговор с исполнителем сводится к простому уточнению: «Почему родителем этой страницы выбран именно этот раздел и сможет ли новый посетитель продолжить там свой выбор?» Если цепочка помогает продолжить подбор, она полезна. Если объяснение сводится к настройке по умолчанию, правило ещё предстоит определить.