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

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

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

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

Навигация по цепочкам

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

Где я?

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

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

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

Преимущества

Сокращает действия

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

Требуется минимальное пространство

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

Каждый пользователь знает, как работать с хлебными крошками

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

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

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

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

Когда следует избегать их использования

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

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

Виды панировочных сухарей

Есть три типа хлебных крошек, о которых вы должны знать: Location, Path и Attribute.

1 на основе местоположения

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

2 пути на основе

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

3 На основе атрибутов

Веб-сайты электронной коммерции больше всего выигрывают от хлебных крошек на основе атрибутов. Они помогают в перечислении категорий в соответствии с конкретной страницей или продуктом. Такой тип хлебных крошек чрезвычайно полезен для поощрения пользователей к пониманию взаимосвязи продуктов друг с другом. Например, если веб-сайт продает джинсы, они будут использовать «хлебные крошки» на основе атрибутов, чтобы помочь покупателям перейти от джинсов Regular fit, Slim fit или Skinny.

Рекомендации по навигации по хлебным крошкам

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

Избегайте повторяющихся элементов

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

SEO-совместимость

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

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

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

Бессмысленно связывать текущую страницу в навигационной цепочке

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

Добавить разделители

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

Вы можете использовать знак › для обозначения иерархии, поскольку он обычно используется в форматах категорий, таких как Одежда › Рубашки › Рубашки с воротником и т. д. Другие символы включают стрелки (→), кавычки под прямым углом (») и косые черты (⁄).

Введите размер и отступ хлебных крошек

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

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

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

Какого типа следует избегать?

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

Последние мысли

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