Эдвард Скотт написал о хлебных крошках в мобильных версиях интернет-магазинов.

— Основная навигация в них обычно скрыта: пользователю сложнее понять, где в иерархии сайта он находится, а также сложнее перемещаться через главное меню;
— Хлебные крошки делают жизнь пользователя проще;
— Размещайте в них полный путь к текущему товару или хотя бы ключевые уровни иерархии;
— Чтобы они не были слишком длинными: а) избегайте чрезмерной категоризации (то, что должно быть фильтром, может быть ошибочно реализовано как категория), б) уберите из них ссылки на главную страницу (на неё можно попасть, нажав на логотип) и текущий товар, в) сократите названия категорий;
— Если строка с хлебными крошками всё ещё слишком длинная, дайте прокручивать её по горизонтали. Для большинства пользователей это естественно (особенно, если начало или конец строки будут обрезаться и тем самым намекать на возможность прокрутки);
— Добавьте отступы, чтобы строка с хлебными крошками не сливалась с другими элементами в верхней части страницы;
— Их оформление должно отличаться от других элементов на странице. Используйте подчёркивание и стандартные разделители > и / между уровнями иерархии.

In English. #breadcrumbs #mobile

Альтернативные решения по организации хлебных крошек (в мобильных версиях интернет-магазинов) из опубликованной ранее статьи Эдварда Скотта:

— Чтобы уменьшить длину хлебных крошек, можно не отображать в них некоторые категории (уровни иерархии);
— Но тогда пользователи могут а) неправильно понять, как организован сайт и где они находятся, б) перейти на более высокий уровень иерархии, чем хотели бы, и увидеть менее релевантные товары;
— Также в хлебных крошках можно отображать только текущую категорию;
— Но это не позволяет а) понять, как организован сайт, б) перейти больше чем на один уровень иерархии за раз;
— Такое решение даёт удобную возможность вернуться на шаг назад, но создаёт проблемы тем, кто попадает на страницу товара нелинейно. Ссылка вернёт их в родительскую категорию? Сохранятся ли применённые фильтры и сортировки?
— Ссылки в хлебных крошках можно переносить на следующие строки;
— Но так пользователям сложнее прицеливаться в нужную ссылку, а верхняя часть страницы визуально перегружается. Решение актуально для сайтов с неглубокой иерархией, где вероятность переноса невелика.

In English. #breadcrumbs

Роман Камушкин написал о хлебных крошках.

— Обычно они начинаются со ссылки на главную страницу;
— Если ширины экрана не хватает, можно показать несколько последних ссылок, а в начале разместить контрол для отображения меню со списком всех ссылок более высокого уровня;
— Также сократить хлебные крошки можно в середине, заменив 2 и более ссылок на троеточие, нажатие на которое открывает меню с ними;
— Можно обрезать текст в ссылках и показывать его целиком в тултипе, чтобы все элементы хлебных крошек были примерно одной ширины;
— Чтобы уведомить человека о событии, произошедшем на более высоком уровне, рядом с соответствующей ссылкой можно показать бейдж;
— Если хлебные крошки формируются на основании применённых фильтров, а не пользовательского пути или иерархии каталога, можно показать крестик для удаления этого параметра из фильтра;
— При наведении на ссылку можно показать меню с дополнительными действиями, например, ссылками для перехода на соседние страницы того же уровня (горизонтальная навигация).

In English. #breadcrumbs

Виталий Фридман написал о хлебных крошках.

— Навигация бывает 3 типов: которая помогает двигаться вперёд, назад и вбок;
— Выделение текущей страницы в меню упрощает движение назад и вбок, если человек не смог решить на ней свою задачу;
— Хлебные крошки (Breadcrumbs) показывают, где пользователь находится в иерархии сайта, и позволяют двигаться не только назад, но и вбок (шаг назад и шаг вперёд);
— Они нужны, если у сайта 3 и более уровней в структуре. Вместо хлебных крошек, состоящих из одной ссылки, лучше разместить название раздела рядом с заголовком страницы. Но чтобы было похоже на ссылку, как в The Economist;
— Из поисковых систем люди часто переходят сразу на внутренние страницы сайта. Хлебные крошки помогают понять, куда человек попал и как организован сайт;
— Ссылки в хлебных крошках часто разделяют стрелками, направляют их обычно вправо;
— Располагайте хлебные крошки под основной навигацией сайта;
— Иногда встречаются дополнительные «хлебные крошки» над хедером, позволяющие перемещаться между связанными сайтами;
— Все названия страниц более высокого уровня должны быть ссылками и визуально отличаться от указателя текущей страницы;
— Иногда его не отображают. Можно не дублировать название страницы, если хлебные крошки рядом с заголовком. Но если далеко, этот текст поможет пользователям ориентироваться;
— Не сокращайте текст ссылок, иначе будет сложнее понять структуру. Если хлебные крошки не влезают, лучше раскрывать часть ссылок по нажатию на многоточие;
— На мобильных сайтах иногда отображают по одной ссылке (родительской) за раз, но лучше показывать столько ссылок, сколько возможно. Можно показывать всё, но с горизонтальной прокруткой.

In English. #breadcrumbs