Добрый день. Я занимаюсь web-разработкой и почти всем, что с этим связано.

Когда использовать хлебные крошки?

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

Вы здесь

Пользователям сайтов тоже необходимо знать, насколько глубоко они забрели, чтобы понять, куда двигаться дальше. Отличным помощником в этом деле являются так называемые хлебные крошки (breadcrumb). Это своеобразная карта с меткой «Вы здесь» на сайте.

3 уровня или больше

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

Сайт с всего лишь двумя уровнями не нуждается в хлебных крошках, так как потеряться на таком сайте практически невозможно (ведь уровень выше — это уже главная страница).

Но когда на сайте 3 уровня и больше, вероятность заблудиться выше. А для того, чтобы вернуться обратно, придётся долго кликать на кнопку «Назад», если это вообще возможно.

Ссылка на главную страницу

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

breadcrumb-homepage

Вид ссылки на главную страницу может быть любой: название сайта, «Главная» или иконка с домиком.

Используйте стрелки вместо слешей

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

breadcrumb-cues

Не делайте ссылку на страницу,  где находится пользователь

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

Указывайте, где находится пользователь

Элемент, указывающий на текущую страницу, должен отличаться от остальных. Например, можно сделать текст жирным или отличным от ссылок цветом.

breadcrumb-textlabel

Комментарии