Хлебные крошки
Нет, мы не будем цитировать Гензель и Гретель (они крошили хлебные крошки, чтобы найти путь домой). А поговорим сегодня о столь хорошем способе навигации как хлебные крошки, или как их еще называют — навигационные цепочки.
Что это такое?
«Хлебные крошки» (— англ. Breadcrumbs) — элемент навигации по сайту, представляющий собой путь по сайту от его «корня» до текущей страницы, на которой находится пользователь. Обычно представляет собой полосу в верхней части страницы примерно такого вида:
Главная страница ? Раздел ? Подраздел ? Текущая страница
Все элементы, кроме последнего, обычно являются внутренними гиперссылками.
Википедия, спасибо.
Я думаю сама идея этого способа дополнительной навигации понятна без лишних слов, но некоторые моменты всё таки нужно учитывать.
1. Я считаю, что не стоит использовать хлебные крошки, если вложенность навигации менее двух порядков, иначе этот способ из хорошего в мгновение ока превращается в очень плохой, ведь если вложенность одного порядка — тогда непонятна логика этого манипулятора.
2. Если использовать этот способ навигации, нельзя делать на него акцент — в большинстве случаев он всего-лишь дополнение к основной навигации, и не должен перетягивать внимание на себя, но в то же время быть заметным.
Зачем их использовать?
Собственно, причин тут — масса. Но основные стоит выделить.
По негласным правилам юзабилити — пользователь должен видеть где он в данный момент находится непосредственно в навигации. Т.е. мы обязаны показать пользователю как глубоко он залез в дебри архитектуры сервиса.
Когда ты наглядно видишь где находишься в данный момент, и имеешь возможность сразу «откатится» на предыдущий этап — это замечательно. Лично у меня сразу возникает доверие к сервису.
Где их стоит использовать:
1. В блог-площадках, в которых вложенность достигает четырех пунктов, а иногда и поболе.
2. На форумах — успешно применяется, проверено временем. Все популярные форумные движки уже имеют их автоматически встроенными.
3. На крупных корпоративных сайтах.
4. На крупных 2.0 сервисах, с большой вложенностью.
5. На информационных сайтах — часто, чтобы добраться до статьи, нужно отсеять много категорий, и хлебные крошки в этом определенно помогают.
6. Также идеально подходит для интернет-магазинов, при обозначении категорий и подкатегорий товара.
Где не стоит использовать:
На любых сайтах с вложенностью иерархии ссылок менее двух пунктов.
Что такое вложенность?
Поясню на примерах, дабы не нагружать вас совершенно не нужными тут терминами.
Вложенность в один пункт:
Раздел ? Текущая страница
Вложенность в два пункта:
Раздел ? Подраздел ? Текущая страница
Вложенность в три пункта:
Раздел ? Подраздел ? Под-подраздел ? Текущая страница
и т.д.
Корнем сайта является главная страница, а в случаях выше — это ссылка «Раздел». Текущая страница ссылкой быть не должна, ведь мы на ней уже находимся, не стоит плодить сущности.
Выводы
1. Использовать хлебные крошки стоит только в случае больших массивов информации, которая хорошо каталогизирована по многим разделам.
2. Использовать крошки стоит только, если вложенность иерархии начинается с двух пунктов и выше.
3. Корнем сайта является главная страница, либо страница от которой началась навигация.
4. Хлебные крошки нужно использовать именно в виде иерархии сайта, а не список страниц, по которым пользователь путешествовал (да, бывало и такое).
5. Текущую страницу лучше не делать ссылкой, ведь мы на ней уже находимся.
Примеры
Хороший пример — вложенность третьего уровня
Плохой пример — вложенность первого уровня.












Интересная заметка. «Хлебные крошки» порой облегчают жизнь, я всегда их использую для навигации на форумах.
Удобная штука, раньше юзал на сайте с большой вложенностью :) Порой встречаю такие менюшки навигации, но без ссылок! Вот это очень раздражает
«На любых сайтах с вложенностью иерархии ссылок менее двух пунктов», — я бы заменил на «менее трёх». Менее 2-х — только 1, а тогда нет смысла использовать крошки (как и для двух).
Одновложенная крошка это
Раздел ? Текущая страница
тут действительно не имеет смысла, я так и написал :)
Flantru, без ссылок просто нет смысла их использовать — теряется элегантность решения
Они прекрасны на делишз, имхо,
«Хлебный крошки» должн копировать ЧПУ, вот тоже так думаю.
Лично на том сайте, которого нет уже в живых, но я его писал, там оно так и делало.
Nicholass, честно говоря я их там не нашел
del.icio.us/for/Nicholass
вверху страницы
это к примеру
2 Nicholass, не особо логичная навигация, я, например, сразу и не заметил. Плюс вложенность небольшая. Или в отдельной закладке прописывается еще и путь к ней?
2 Студентка, вы о делишесе, или хлебных крошках? :)
Путь прописывается, как-будто навигация в файлах и папках. Правда я не юзаю
Хлебные крошки вообще не нужны, как и громадная вложенность — все должно быть в пределах трех кликов от главной
s13, это в идеале. А что прикажешь делать многовложенным форумам? :) Или энциклопедиям? Хлебные крошки наименьшее из зол.
Вот я сейчас делаю как раз что-то типа каталога. Собираюсь сделать крошки, т.к. вложенность все-таки достигает 4, а кое где и 5 уровней. =)
Мне кажется, что сайт получается более функциональным, если использовать крошки.
Нет, не функциональным, просто несколько более удобным...
Отличная статья. Очень помогла разобраться в сути вопроса
[...] Ошибки реализации постраничной навигации на сайте Хлебные крошки Вкладки, табы, 2 ствола Реакция ссылки на наведение [...]
Ну и одновложенная крошка хорошо, лучше, чем никакой. Что Вы так напали?
Денис, для этого нужно ответить на вопрос — а зачем показывать человеку одновложенную крошку? Например, на главной странице.
Дискуссия по поводу breadcrumbs весьма полезная. У меня, как человека пока что с небольшим опытом в сфере usability, возник вопрос: «В каком месте страницы лучшего всего расположить те самые крошки, чтобы они особо не отвлекали внимание юзера, но в тоже время позволяли ориентироваться на сайте?»
По моему опыту выходит, что крошки лучше всего располагать рядом с главным меню и логотипом.
[...] Ошибки реализации постраничной навигации на сайте Хлебные крошки Вкладки, табы, 2 ствола Реакция ссылки на наведение [...]