Лучшая практика и примеры навигации Breadcrumb

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

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

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

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

Типы крошки

Дорожка

Панировочные сухари указывают на шаги или путь, которые пользователь предпринял, чтобы попасть на текущую страницу веб-сайта. Кроме того, пользователи увидят ссылки на ранее посещенные страницы, чтобы перейти на текущую страницу. Из трех типов навигации с использованием хлебных крошек навигация с использованием путей по пути наименее популярна в Интернете. Причина в том, что навигация на основе путей обеспечивает схожую функциональность с “Вперед” а также “назад” кнопки в браузере. Для большинства веб-сайтов навигационная система навигации на основе местоположения и на основе атрибутов обеспечивает улучшенную функциональность.

Место нахождения

Основанные на местоположении хлебные крошки указывают пользователю, где текущая страница находится в иерархии веб-сайта. Этот тип навигации по крошке чаще всего встречается на веб-сайтах с более чем двумя уровнями глубины или содержания. При переходе дальше на сайт пользователям предоставляются ссылки на страницы или категории, которые действуют как “родитель” или уровень выше страницы, которую они просматривают. Например, пользователь может быть на “Говорить” страница, однако, “Что мы делаем” страница является родителем “Говорить” страница в то время как “Главная” страница является родителем “Что мы делаем” страница.

Clearleft Ltd

атрибут

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

Cars.com

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

Отличное удобство использования

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

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

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

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

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

Вполне возможно, что некоторые пользователи могут не понимать, как работает основная навигация сайта, а в некоторых случаях пользователи могут даже не знать, что они ищут. Предоставление пользователям хлебных крошек позволит им видеть общий прогресс и структуру веб-сайта, что позволяет им лучше ориентироваться на веб-сайте..
Более низкие показатели отказов

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

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

Breadcrumb Best Practices

Используйте хлебные крошки вверху страницы

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

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

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

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

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

Убедитесь, что пользователи могут различать разницу между уровнями крошки. Наиболее распространенным разделителем между уровнями является символ «больше чем» (>). Другие хорошие разделители включают прямые двойные угловые кавычки (»), косые черты (/) и стрелки (→). Если используется простой текстовый символ, используйте только один. (»Более привлекательный и эффективный, чем >>)
Выделить текущую страницу

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

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

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

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

Великолепные примеры панировочных сухарей

Vitra Direct

Trek Bikes

худо

SiteInspire

Миа и Мэгги

Intridea

Дизайн людьми

Roxy

Блик

SitePoint

цель

Walmart

1-800-Flowers

Лучшая покупка

amazon.com

Амбары и благородные

Конец земли

яблоко

Google

гнаться

AbsolutePunk.net

Littman Bros. Lighting

Guardian.co.uk

ОБЛАСТЬ 17

Wufoo

Девочки-скауты Среднего Теннесси

Коллектив Глазго

первенец

Bell Canada

Grooveshark

Devlounge

Об авторе - Шей Хоу профессиональный веб-дизайнер и пользовательский интерфейс, в настоящее время проживающий в Чикаго, штат Иллинойс. Он пишет о веб-дизайне в своем блоге по субботам и хотел бы услышать от вас в Twitter. Пожалуйста, не стесняйтесь сказать ему привет!