Почему вы всегда были не правы в отношении крошек

1. Что такое навигация по крошке?
2. Наша потребность в сухарях имеет эволюционную причину
3. Типы сухариков в веб-дизайне
4. Путь или история основанные сухари
5. Хлебные крошки на основе атрибутов
6. 5 преимуществ использования панировочных сухарей
7. Поощряет просмотр и уменьшает отказов
8. Улучшает поиск вашего сайта
9. Панировочные сухари обеспечивают преимущества SEO
10. Потому что нет веской причины не использовать их
11. Хлебные крошки помогают уменьшить беспокойство пользователя
12. 10 рекомендуемых практик использования панировочных сухарей
13. Когда не следует использовать панировочные сухари?
14. Проблема с навигацией по сухарям
15. Проблемы с историческими хлебными крошками
16. Проблемы с навигационными хлебными крошками
17. Панировочные сухари: вторичные по статусу, первичные по стоимости

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

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

Внезапно, вы знаете, где вы находитесь и где находится вход и выход со ссылкой на вашу позицию. Паника улетает! И мы идем, гав, гав!

В навигации по сайту, хлебные крошки делают нечто подобное.

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

Вот что вы узнаете в этом посте:

Что такое навигация по крошке?

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

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

Хлебные крошки - это не только элемент сайта. Microsoft представила хлебные крошки в Windows Vista, и с тех пор эта функция была включена в каждую редакцию Windows.

Сравнение между Windows XP (вверху) и Windows 7 (внизу). Обратите внимание на беспорядок в пути Windows XP, тогда как в Windows 7 отображаются хлебные крошки, которые позволяют пользователям визуализировать путь и, при необходимости, проследить его. Изображение предоставлено GeekGirl's

Наша потребность в сухарях имеет эволюционную причину

Питер Пиролли обнаружил интересные параллели между тем, как животные добывают пищу и как люди ищут полезную информацию , По своей сути, все мы живем по эвристическому правилу - не тратьте больше энергии на поиски пищи, чем то, что обеспечит еда. Подумайте, как мы ищем информацию в Интернете: мы что-то ищем, поисковая система предоставляет много результатов. Мы сканируем ссылки и, если мы не почувствуем подсказки (название SEO, мета и т. Д.), Что ссылка даст нам информацию, к которой мы стремимся, мы не нажмем. Это мало чем отличается от охоты животных на добычу в саванне; зверь будет заряжаться только тогда, когда след запаха достаточно силен, чтобы оправдать энергию, которая должна быть потрачена на преследование.

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

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

Типы сухариков в веб-дизайне

Панировочные сухари на основе местоположения или иерархии

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

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

Путь или история основанные сухари

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

Тем не менее, наиболее распространенным применением «хлебных крошек» на основе истории является использование ссылки «Вернуться к результатам».

Хлебные крошки на основе атрибутов

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

5 преимуществ использования панировочных сухарей

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

Поощряет просмотр и уменьшает отказов

Если пользователь попадает на страницу продукта, которая ему не интересна, он либо отскочит, либо вернется на страницу категории, чтобы начать сначала. Хлебные крошки побуждают пользователя начинать сначала, а не подпрыгивать. В исследовании, проведенном Халл, СС (2004) Выяснилось, что пользователи, получившие инструкцию использовать хлебные крошки, выполняли задачи намного быстрее, чем пользователи, которые не использовали хлебные крошки. Для пользователей, которые ежедневно пользуются Интернетом (даже в интрасетях, подобных организации), использование «сухариков» может значительно повысить производительность и сэкономить время.

Похожие сообщения : 14 способов уменьшить отказов и повысить заинтересованность на вашем сайте электронной коммерции

Улучшает поиск вашего сайта

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

Похожие сообщения : 15 основных элементов эффективной страницы электронной коммерции

Панировочные сухари обеспечивают преимущества SEO

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

Изображение предоставлено поисковой системой Land

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

Потому что нет веской причины не использовать их

Якоб Нильсен говорит, что он рекомендует крошки с 1995 года , Причины просты.

Панировочные сухари никогда не вызывают проблем при тестировании пользователя. Пользователи обращают внимание на панировочные сухари только в 30% случаев; когда они это делают, это помогает, и даже если они этого не делают, это не приносит никакого вреда.

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

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

Хлебные крошки помогают уменьшить беспокойство пользователя

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

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

10 рекомендуемых практик использования панировочных сухарей

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

Всегда показывайте весь путь : предоставьте пользователям контекст. Хороший путь крошки действует как мигалки, удерживая пользователя сосредоточенным на задаче.

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

Используйте «>» в ​​качестве разделителя между уровнями : он работает, потому что он всегда работал. «>» Быстро показывает связь между страницами более высокого уровня и страницами более низкого уровня. Якоб Нильсен был изначально рекомендуется использовать толстую кишку (:) в навигационной панели. После пользовательского тестирования он изменил свою рекомендацию на использование «>», потому что он легко представляет связь между страницами более высокого уровня и страницами более низкого уровня.

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

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

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

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

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

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

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

Изображение предоставлено юзабилити Geek

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

Когда не следует использовать панировочные сухари?

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

Если вы действительно смотрите под лесной пол, то крошки не все идеально.

Проблема с навигацией по сухарям

Даже прослужив более десяти лет, панировочные сухари все еще не считаются лучшей практикой. Есть много причин для этого:

1. Люди до сих пор не уверены, стоит ли это усилий: это не функциональность «сделай сам» или «сломай». Не спорь там.

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

Том Скотт, имеет написано о многих вопросах можно иметь с сухарями.

Проблемы с историческими хлебными крошками

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

Основанные на истории хлебные крошки просто дублируют функциональность кнопки «назад».

Нет пользы для SEO : поскольку хлебные крошки должны основываться на истории пользователей, поисковые системы никогда не увидят ее и не имеют никаких преимуществ для SEO

Бесполезно для всех : многие пользователи напрямую получают доступ к страницам глубоко внутри сайта через поисковые системы; для таких людей исторический след не приносит никакой пользы.

Составная ошибка : для людей, которые переходят на страницу методом проб и ошибок, бессмысленно иметь неоптимальную историю навигации в виде хлебных крошек.

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

Проблемы с навигационными хлебными крошками

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

Главная> Обстановка> Гостиная> Стулья> Одноместный> Бобовый мешок 'The Dude Abides'

или же

Главная> Обстановка> Гостиная> Стулья> Повседневные> Сумка 'The Dude Abides'

Что вы выберете для отображения?

Давайте сначала рассмотрим страницу продукта .

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

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

Вернуться к результатам | Главная> Обстановка> Гостиная> Мешки с фасолью> Мешок для фасоли 'The Dude Abides'

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

Теперь поговорим о странице категории .

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

Главная> Обстановка> Стулья | Одноместный *

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

Панировочные сухари: вторичные по статусу, первичные по стоимости

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

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

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

Похожие

Комментарии