пишет Ярослав Бирзул

Хлебные крошки

Опубликована 24 декабря 2007 года в категории Практика \ 22 комментария

Нет, мы не будем цитировать Гензель и Гретель (они крошили хлебные крошки, чтобы найти путь домой). А поговорим сегодня о столь хорошем способе навигации как хлебные крошки, или как их еще называют — навигационные цепочки.

Веселая печенька

Что это такое?

«Хлебные крошки» (— англ. Breadcrumbs) — элемент навигации по сайту, представляющий собой путь по сайту от его «корня» до текущей страницы, на которой находится пользователь. Обычно представляет собой полосу в верхней части страницы примерно такого вида:

Главная страница ? Раздел ? Подраздел ? Текущая страница

Все элементы, кроме последнего, обычно являются внутренними гиперссылками.

Википедия, спасибо.

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

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

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

Зачем их использовать?

Собственно, причин тут — масса. Но основные стоит выделить.

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

Когда ты наглядно видишь где находишься в данный момент, и имеешь возможность сразу «откатится» на предыдущий этап — это замечательно. Лично у меня сразу возникает доверие к сервису.

Где их стоит использовать:

1. В блог-площадках, в которых вложенность достигает четырех пунктов, а иногда и поболе.

2. На форумах — успешно применяется, проверено временем. Все популярные форумные движки уже имеют их автоматически встроенными.

3. На крупных корпоративных сайтах.

4. На крупных 2.0 сервисах, с большой вложенностью.

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

6. Также идеально подходит для интернет-магазинов, при обозначении категорий и подкатегорий товара.

Где не стоит использовать:

На любых сайтах с вложенностью иерархии ссылок менее двух пунктов.

Что такое вложенность?

Поясню на примерах, дабы не нагружать вас совершенно не нужными тут терминами.

Вложенность в один пункт:

Раздел ? Текущая страница

Вложенность в два пункта:

Раздел ? Подраздел ? Текущая страница

Вложенность в три пункта:

Раздел ? Подраздел ? Под-подраздел ? Текущая страница

и т.д.

Корнем сайта является главная страница, а в случаях выше — это ссылка «Раздел». Текущая страница ссылкой быть не должна, ведь мы на ней уже находимся, не стоит плодить сущности.

Выводы

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

2. Использовать крошки стоит только, если вложенность иерархии начинается с двух пунктов и выше.

3. Корнем сайта является главная страница, либо страница от которой началась навигация.

4. Хлебные крошки нужно использовать именно в виде иерархии сайта, а не список страниц, по которым пользователь путешествовал (да, бывало и такое).

5. Текущую страницу лучше не делать ссылкой, ведь мы на ней уже находимся.

Примеры

хороший пример

Хороший пример — вложенность третьего уровня

Плохой пример

Плохой пример — вложенность первого уровня.


22 комментария в статье «Хлебные крошки»
dmpr0 написал этот ответ 24 декабря, 2007 в 4:09

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

Flantru написал этот ответ 24 декабря, 2007 в 4:26

Удобная штука, раньше юзал на сайте с большой вложенностью :) Порой встречаю такие менюшки навигации, но без ссылок! Вот это очень раздражает

powerfox написал этот ответ 24 декабря, 2007 в 4:40

«На любых сайтах с вложенностью иерархии ссылок менее двух пунктов», — я бы заменил на «менее трёх». Менее 2-х — только 1, а тогда нет смысла использовать крошки (как и для двух).

Ярослав Бирзул написал этот ответ 24 декабря, 2007 в 4:54

Одновложенная крошка это

Раздел ? Текущая страница

тут действительно не имеет смысла, я так и написал :)

Ярослав Бирзул написал этот ответ 24 декабря, 2007 в 4:55

Flantru, без ссылок просто нет смысла их использовать — теряется элегантность решения

Nicholass написал этот ответ 24 декабря, 2007 в 11:29

Они прекрасны на делишз, имхо,

«Хлебный крошки» должн копировать ЧПУ, вот тоже так думаю.

Лично на том сайте, которого нет уже в живых, но я его писал, там оно так и делало.

Ярослав Бирзул написал этот ответ 25 декабря, 2007 в 10:51

Nicholass, честно говоря я их там не нашел

Nicholass написал этот ответ 25 декабря, 2007 в 6:45

del.icio.us/for/Nicholass

вверху страницы

это к примеру

Ярослав Бирзул написал этот ответ 26 декабря, 2007 в 10:30

2 Nicholass, не особо логичная навигация, я, например, сразу и не заметил. Плюс вложенность небольшая. Или в отдельной закладке прописывается еще и путь к ней?

2 Студентка, вы о делишесе, или хлебных крошках? :)

Nicholass написал этот ответ 27 декабря, 2007 в 12:18

Путь прописывается, как-будто навигация в файлах и папках. Правда я не юзаю

s13 написал этот ответ 27 декабря, 2007 в 4:00

Хлебные крошки вообще не нужны, как и громадная вложенность — все должно быть в пределах трех кликов от главной

Ярослав Бирзул написал этот ответ 28 декабря, 2007 в 9:14

s13, это в идеале. А что прикажешь делать многовложенным форумам? :) Или энциклопедиям? Хлебные крошки наименьшее из зол.

har написал этот ответ 22 января, 2008 в 9:00

Вот я сейчас делаю как раз что-то типа каталога. Собираюсь сделать крошки, т.к. вложенность все-таки достигает 4, а кое где и 5 уровней. =)

Фотошопов написал этот ответ 24 февраля, 2008 в 10:04

Мне кажется, что сайт получается более функциональным, если использовать крошки.

Ярослав Бирзул написал этот ответ 24 февраля, 2008 в 10:08

Нет, не функциональным, просто несколько более удобным...

Филооф написал этот ответ 9 июня, 2008 в 10:52

Отличная статья. Очень помогла разобраться в сути вопроса

Ссылки. “101 способ получения ссылок” Link Building « UA ТЕРМОС написал этот ответ 21 декабря, 2008 в 2:40

[...] Ошибки реализации постраничной навигации на сайте Хлебные крошки Вкладки, табы, 2 ствола Реакция ссылки на наведение [...]

Денис написал этот ответ 21 января, 2009 в 3:27

Ну и одновложенная крошка хорошо, лучше, чем никакой. Что Вы так напали?

Ярослав Бирзул написал этот ответ 21 января, 2009 в 2:46

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

Моисеев Кирилл написал этот ответ 30 января, 2009 в 2:49

Дискуссия по поводу breadcrumbs весьма полезная. У меня, как человека пока что с небольшим опытом в сфере usability, возник вопрос: «В каком месте страницы лучшего всего расположить те самые крошки, чтобы они особо не отвлекали внимание юзера, но в тоже время позволяли ориентироваться на сайте?»

Ярослав Бирзул написал этот ответ 30 января, 2009 в 3:02

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

Ссылки. "101 способ получения ссылок" Link Building | Кирик Александр написал этот ответ 8 апреля, 2009 в 10:00

[...] Ошибки реализации постраничной навигации на сайте Хлебные крошки Вкладки, табы, 2 ствола Реакция ссылки на наведение [...]


Добавьте свой ответ:
Контактная информация:
  • Телефон: +38 (091) 314-60-04,
  • E-mail и Jabber: dezmaster@gmail.com,
  • Skype: dezmaster,
  • icq: 486914