- О юзабилити простыми словами - http://www.birzool.com -
Хлебные крошки
Posted By Ярослав Бирзул On 24 декабря, 2007 @ 3:48 In Практика | 22 Comments
Нет, мы не будем цитировать Гензель и Гретель [1] (они крошили хлебные крошки, чтобы найти путь домой). А поговорим сегодня о столь хорошем способе навигации как хлебные крошки, или как их еще называют — навигационные цепочки.
Что это такое?
«Хлебные крошки» (— англ. Breadcrumbs) — элемент навигации по сайту, представляющий собой путь по сайту от его «корня» до текущей страницы, на которой находится пользователь. Обычно представляет собой полосу в верхней части страницы примерно такого вида:
Главная страница ? Раздел ? Подраздел ? Текущая страница
Все элементы, кроме последнего, обычно являются внутренними гиперссылками.
Википедия [3], спасибо.
Я думаю сама идея этого способа дополнительной навигации понятна без лишних слов, но некоторые моменты всё таки нужно учитывать.
1. Я считаю, что не стоит использовать хлебные крошки, если вложенность навигации менее двух порядков, иначе этот способ из хорошего в мгновение ока превращается в очень плохой, ведь если вложенность одного порядка — тогда непонятна логика этого манипулятора.
2. Если использовать этот способ навигации, нельзя делать на него акцент — в большинстве случаев он всего-лишь дополнение к основной навигации, и не должен перетягивать внимание на себя, но в то же время быть заметным.
Зачем их использовать?
Собственно, причин тут — масса. Но основные стоит выделить.
По негласным правилам юзабилити — пользователь должен видеть где он в данный момент находится непосредственно в навигации. Т.е. мы обязаны показать пользователю как глубоко он залез в дебри архитектуры сервиса.
Когда ты наглядно видишь где находишься в данный момент, и имеешь возможность сразу «откатится» на предыдущий этап — это замечательно. Лично у меня сразу возникает доверие к сервису.
Где их стоит использовать:
1. В блог-площадках, в которых вложенность достигает четырех пунктов, а иногда и поболе.
2. На форумах — успешно применяется, проверено временем. Все популярные форумные движки уже имеют их автоматически встроенными.
3. На крупных корпоративных сайтах.
4. На крупных 2.0 сервисах, с большой вложенностью.
5. На информационных сайтах — часто, чтобы добраться до статьи, нужно отсеять много категорий, и хлебные крошки в этом определенно помогают.
6. Также идеально подходит для интернет-магазинов, при обозначении категорий и подкатегорий товара.
Где не стоит использовать:
На любых сайтах с вложенностью иерархии ссылок менее двух пунктов.
Что такое вложенность?
Поясню на примерах, дабы не нагружать вас совершенно не нужными тут терминами.
Вложенность в один пункт:
Раздел ? Текущая страница
Вложенность в два пункта:
Раздел ? Подраздел ? Текущая страница
Вложенность в три пункта:
Раздел ? Подраздел ? Под-подраздел ? Текущая страница
и т.д.
Корнем сайта является главная страница, а в случаях выше — это ссылка «Раздел». Текущая страница ссылкой быть не должна, ведь мы на ней уже находимся, не стоит плодить сущности.
Выводы
1. Использовать хлебные крошки стоит только в случае больших массивов информации, которая хорошо каталогизирована по многим разделам.
2. Использовать крошки стоит только, если вложенность иерархии начинается с двух пунктов и выше.
3. Корнем сайта является главная страница, либо страница от которой началась навигация.
4. Хлебные крошки нужно использовать именно в виде иерархии сайта, а не список страниц, по которым пользователь путешествовал (да, бывало и такое).
5. Текущую страницу лучше не делать ссылкой, ведь мы на ней уже находимся.
Примеры
Хороший пример — вложенность третьего уровня
Плохой пример — вложенность первого уровня.
Article printed from О юзабилити простыми словами: http://www.birzool.com
URL to article: http://www.birzool.com/breadcrumbs/
URLs in this post:
[1] Гензель и Гретель: http://www.skazka.com.ru/article/grimm/0000029grimm.html
[2] Image: http://www.birzool.com/breadcrumbs/
[3] Википедия: http://ru.wikipedia.org/wiki/%D0%9D%D0%B0%D0%B2%D0%B8%D0%B3%D0%B0%D1%86%D0%B8%D0%BE%D0%BD%D0%BD%D0%B0%D1%8F%20%D1%86%D0%B5%D0%BF%D0%BE%D1%87%D0%BA%D0%B0
Click here to print.
© 2007-2008. Блог Ярослава Бирзул о юзабилити веб интерфейсов.