Хлебные крошки сайт: Что такое хлебные крошки, и как их внедрить на сайте – Блог Netpeak Software

Какие ещё функции выполняют хлебные крошки на сайте?

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

1. Показывает пользователю и поисковым роботам структуру веб-ресурса.
2. Указывает посетителю, в каком разделе он находится. Чем понятнее расположение страниц, тем выше вовлеченность и лояльность пользователей. Для онлайн-магазина это означает прирост трафика и продаж.
3. Эта навигация и своеобразная перелинковка, которая естественным образом улучшает поведенческие показатели: глубину просмотра, посещение страниц, время сеанса и другие.
4. Хлебные крошки на сайте с микроразметкой помогают оптимизировать внешний вид сниппета в поисковой выдаче. В итоге ваша запись выглядит аккуратно, удобочитаемо и привлекательно для потенциальных клиентов.

Преимущества навигации

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

• Оптимизация внутренней иерархии. С помощью дублирующей навигации все страницы связываются в единую структуру. Это помогает органически наращивать ссылочную массу без риска фильтров ПС.
• Хлебные крошки высоко ценятся поисковыми системами. Они дополняют функционал карты sitemaps и robots.txt.
• Естественным способом повышают кликабельность баннеров и рекламных ссылок из-за своей связи с URL в поисковой выдаче.
• Улучшают поведенческие метрики при оценке поисковыми системами. Таким образом, простые хлебные крошки на сайте становятся мощным преимуществом в SEO продвижении.
• Удобство. Покупатели в интернете мало чем отличаются от оффлайновых посетителей магазинов. Они также любят заботу и внимание к себе. Комфортная навигация – это «золотой» ключик к клиентам.

Какими бывают хлебные крошки и примеры использования

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

1. Хлебные крошки линейного типа показывают весь маршрут посетителя от главной до исходной страницы. Человек может в любой момент «перепрыгнуть» на нужный раздел, а не возвращаться поступательно назад. Однако многие порталы в сети имеют большую вложенность, а путь посетителя представляет собой длинную строку ссылок. Решение нашли быстро – укоротили цепочку, оставив только ключевые точки. Например, разделы товаров – категория – карточка продукта.
2. Второй вариант – хлебные крошки на сайте, основанные на истории перемещений пользователя по разделам. Это дубль браузерной функции «назад», только в виде ссылки в навигации. Выглядит это так: посетитель дошел до карточки товара, но его путь не отображается цепочкой. Взамен устанавливается кнопка «назад к главной» или «назад к каталогу». Такие ссылки неудобны и не информативны, так как не дают возможности изучить весь объем предложений.

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

Как сделать хлебные крошки на сайте: нюансы и особенности

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

1. Сделать микроразметку ресурса, чтобы цепочка навигации отражалась в сниппете при выдаче. Это повысит кликабельность ссылок.
2. Хлебные крошки расположите вверху страницы. Дополнительно выделите цепочку курсивом, цветом или увеличьте насыщенность (жирность).
3. Не ставьте навигацию на главной – это признак «плохого тона». Так вы дублируете ссылки, что плохо сказывается на ранжировании. Внимательно проверяйте, чтобы кликабельной в цепочке была предпоследняя ссылка, а не текущая. Это поможет избежать дублей.
4. Не усердствуйте с оптимизацией навигационной цепочки. Поисковики считают ключи, которые входят в этот элемент.
5. Проверьте, чтобы строка не была простым текстом, а отображалась ссылками.

Частые ошибки

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

Резюме

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

Что такое «хлебные крошки»? И для чего они нужны на сайте.

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

Почему «Хлебные крошки»

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

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

Где используются «хлебные крошки»

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

Все же, часто хлебные крошки используются на:

• Интернет-магазинах.
• Форумах.
• Сайтах со скудной навигацией (когда блок навигации не располагает всеми ссылками на разделы или находится в футере).
• Сайтах без карты.

Карта сайта часто заменяет breadcrumbs, если она правильно разработана (имеется в виду html-карта, а не файл sitemap.xml для поисковиков). Такая страница должна иметь ссылки на все главные разделы, что позволит пользователю с легкостью переходить по ним и искать нужную информацию.

На форумах и интернет-магазинах хлебные крошки – обязательный атрибут.

Преимущества использования «хлебных крошек»

1. Иерархия сайта

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

2. Польза в SEO

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

Что касается формирования самого сниппета, то поисковики делают это «по-своему». Так в Яндексе навигационная цепочка сниппета может сформироваться и независимо от наличия «крошек» на сайте. То есть, для её построения поисковик может взять внутреннюю ссылку с анкором из контекста статьи. Помимо этого, в справочнике поисковика говорится, что желательно совпадение Title страницы с анкорами ссылок, которые ведут на неё. Тайтл и анкоры желательно делать максимально короткими. Отметим, что навигационные цепочки формируются Яндексом для крупных сайтов с заполненными разделами/подразделами. Если в одной категории ресурса всего 1-2 страницы, «хлебные крошки» вряд ли появятся в выдаче.

В отличие от Яндекса, Google предлагает использовать микроразметку для отображения цепочки в сниппете. Для этой цели применяют разметку schema.org или data-vocabulary.

3. Релевантность материала

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

Нюансы

1. «Хлебные крошки» обычно отображаются в виде горизонтальной полосы, располагающейся в верхней части странички. Хотя вертикальные варианты также иногда встречаются, но гораздо реже.
2. Желательно чтобы эта навигационная цепочка органично вписывалась в общий дизайн веб-ресурса, что будет формировать общее положительное мнение пользователей.Следовательно, можно сделать вывод о том, что наличие ее имеет некоторое влияние на поведенческие факторы сайта, которые, в свою очередь, учитываются поисковыми системами при ранжировании результатов выдачи.
3. А еще навигационная цепочка «хлебные крошки» имеет один нюанс, касающийся ее функционирования.  Он связан с понятием «циклические ссылки» – те, которые приводят пользователя на ту же страничку, на которой он находится в момент нажатия на ссылку. 

Так вот, каждый элемент подобной цепочки должен быть ссылкой на определенный уровень вложенности. И только самая последняя «крошка» должна быть неактивной.Иначе она станет классическим примером циклической ссылки, которых на Вашем веб-ресурсе быть не должно.

Хлебные крошки (breadcrumbs) — Zeta Web. База знаний

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

За создание на сайте хлебных крошек отвечают несколько контролов:

Для отображения хлебных крошек необходимо добавить контрол на страницу и выбрать необходимые параметры контрола:

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

Хлебные крошки статических страниц

За формирование хлебных крошек у статических страниц отвечает структура в карте сайта, которая доступна через Панель управления сайтом — Наполнение сайта — Меню

В данном разделе задается иерархия страниц, а также есть возможность для каждой страницы указать следующие параметры. На вкладке «Основные»:

• Название для отображения на сайте

• Родитель (для отображения навигационной цепочки)

• Адрес — ссылка в хлебных крошках

• Порядок сортировки — позволяет настроить произвольный порядок отображения в дереве (по умолчанию одинаковый у всех и сортируется по алфавиту)

• Картинка — при использовании картинок в хлебных крошках

На вкладке «Участие в картах»:

• Скрывать из карты страницы — если мы не хотим отображать данный элемент на странице сайта в хлебных крошках.

• Скрывать из карты сайта — если мы не хотим, чтобы ссылка на эту страницу генерировалась контролом карта сайта.

На вкладке «Доступ ролей» мы можем указать каким ролям будет доступен для отображения данный элемент хлебных крошек на сайте:

Пример отображения в типовом дизайне:

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

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

Для всех контролов, кроме Laximo и Поиск. Автокаталог, используется общий контрол SEO. Хлебные крошки.

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

После перехода в любой раздел страница создается и хлебные крошки создаются контролом.

В типовом дизайне хлебные крошки добавлены в переменную breadcrumbs и на страницы добавлена данная переменная (за исключение страниц с оригинальными каталогами Laximo и модуля «Подбор по авто»).

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

Основной каталог для домена задается в настройках домена Панель управления сайтом — Настройки — Домены

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

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

Хлебные крошки (меню-крошка) в SEO

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

bread1.png

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

Типы «хлебных крошек»

Меню-крошка играет важную роль и влияет на конверсию, но большинство владельцев сайтов допускают ошибку, не используя либо неправильно используя этот инструмент. Рекомендуется размещать на веб-ресурсе два типа «крошек»:

·         структурное меню;

·         меню, основанное на истории просмотров.

При этом «хлебные крошки» не заменяют собой главное меню, а дополняют его.

Изучение коммерческих ресурсов показало, что 45 % используют только один вариант «крошек», а 23 % интернет-магазинов вообще не применяют этот инструмент.

«Хлебные крошки» по структуре сайта

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

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

bread2.jpg

Меню-крошка с историей просмотров

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

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

Плюсы использования

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

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

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

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

«Хлебные крошки» и SEO

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

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

bread3.jpg

Перелинковка

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

Как сделать «хлебные крошки»

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

• установка специального плагина, соответствующего CMS;
• внедрение дополнительного кода в файлы сайта.

Первый способ прост, удобен и подходит для тех владельцев веб-ресурсов, которые не знакомы с веб-программированием. Второй метод может быть реализован опытными веб-программистами. Обычно он используется в случаях, когда невозможно применение готовых решений. Например, если сайт работает не на стандартной, а на самописной системе управления контентом. В этом случае код добавляется сразу в несколько файлов (function.php, index.php, single.php и др.), а оформление создается с помощью файлов css.

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

Окончательное руководство по использованию хлебных крошек на веб-сайтах + примеры

Первоначально этот пост был опубликован на babich.biz, автор — Ник Бабич. Ник — разработчик программного обеспечения, увлеченный пользовательским интерфейсом.

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

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

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

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

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

• Где я? «Хлебные крошки» информируют посетителей об их местонахождении по отношению ко всей иерархии сайта.
• Куда мне пойти? «Хлебные крошки» улучшают поиск разделов и страниц сайта. Структуру сайта легче понять, когда она размещена в виде хлебных крошек, чем если она помещена в меню.
• Мне туда пойти? «Хлебные крошки» сообщают о ценности контента и поощряют просмотр (например, посетитель сайта электронной коммерции может попасть на страницу продукта, продукт может не подходить, но посетитель может захотеть просмотреть другие продукты из той же категории). Это, в свою очередь, снижает общий показатель отказов сайта.

Уменьшает количество действий

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

Занять минимум места

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

Ни у одного пользователя нет проблем из-за панировочных сухарей

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

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

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

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

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

Панировочные сухари могут быть на основе: местоположения, пути и атрибута.

Расположение на основе

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

В приведенном ниже примере (от BestBuy) каждая текстовая ссылка предназначена для страницы, которая на один уровень выше, чем правая.

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

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

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

Attribute Based

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

Например, в TM Lewin цепочки навигации показывают атрибуты элементов, отображаемых на определенной странице:

Иерархия или история?

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

Лучшие практики навигации по хлебным крошкам

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

Панировочные сухари как дополнительная навигация

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

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

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

Используйте разделители

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

Выберите размер и набивку

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

Не делайте это центральным элементом дизайна

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

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

Заключение

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

9 советов и примеров для облегчения навигации по сайту

В сказке «Гензель и Гретель» двое детей бросают в лесу панировочные сухари, чтобы найти дорогу домой.

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

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

Что такое навигация по хлебным крошкам?

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

Якоб Нильсен, соучредитель Nielsen Norman Group, рекомендует навигацию по хлебным крошкам с 1995 года и подчеркивает их достоинства: «Все, что делают хлебные крошки, — это упрощает пользователям перемещение по сайту, предполагая, что его содержание и общая структура имеет смысл. Этого достаточно для чего-то, что занимает только одну строку в дизайне «.

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

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

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

2. Не делайте навигацию слишком большой.

Навигация в виде хлебных крошек является второстепенным инструментом по сравнению с основной панелью навигации, поэтому она не должна быть слишком большой или заметной на странице. Например, на веб-сайте DHL их основная панель навигации большая и узнаваемая, с такими столбцами, как «Экспресс», «Посылки и электронная коммерция», «Логистика» и т. Д. Их навигационная цепочка — это меньший раздел ниже, который гласит: «DHL Global |> Логистика» |> Грузовые перевозки ».Вы же не хотите, чтобы пользователи ошибочно принимали вашу навигацию по хлебным крошкам за основную панель навигации.

3. Включите полный навигационный путь в свою навигационную цепочку.

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

4. Переход от высшего уровня к низшему.

Важно, чтобы ваша навигационная цепочка читалась слева направо, при этом ближайшая ссылка слева — это ваша домашняя страница, а ближайшая ссылка справа — текущая страница пользователя. Исследование, проведенное Nielsen Norman Group, показало, что пользователи проводят 80% своего времени, просматривая левую половину страницы, а 20% — правую, что является веским аргументом в пользу дизайна слева направо. Кроме того, ближайшая слева ссылка будет отображаться как начало цепочки, поэтому вы хотите, чтобы это была ваша страница самого высокого уровня.

5. Следите, чтобы заголовки хлебных крошек соответствовали заголовкам страниц.

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

Nestle также хорошо отличает ссылки от несвязанных с разными цветами — ссылки синие, а несвязанные остаются серыми.

6. Проявите творческий подход к дизайну.

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

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

7. Держите его в чистоте и не загромождайте.

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

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

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

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

Bed Bath & Beyond использует навигацию на основе атрибутов, чтобы показать пользователям, к какой категории относится их страница продукта, поэтому пользователи могут вернуться к «Кухня» или «Маленькая бытовая техника», чтобы просмотреть похожие товары.Этот тип навигации наиболее эффективен для клиентов Bed Bath & Beyond. Создавая навигацию с помощью хлебных крошек, подумайте, что наиболее полезно для посетителей вашего сайта.

9. Знайте свою аудиторию.

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

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

Что такое хлебные крошки и как оно упрощает навигацию? (Примеры)

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

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

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

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

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

Вот что вы узнаете из этого сообщения:

• Что такое навигация по хлебным крошкам?
• Наша эволюционная потребность в навигации по хлебным крошкам
• Типы панировочных сухарей для веб-сайтов
• 5 преимуществ панировочных сухарей
• 10 лучших практик использования панировочных сухарей
• Проблема с навигацией по хлебным крошкам
• Последнее слово о сухарях

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Связанное сообщение : 15 основных элементов эффективного продукта электронной коммерции Страница

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Том Скотт, написал о многих проблемах ^[8] , которые могут возникнуть с панировочными сухарями.

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

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

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

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

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

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

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

Дом> Меблировка> Гостиная> Стулья> Одноместные> Сумка-мешок «The Dude Abides»

или

Дом> Меблировка> Гостиная> Стулья> Повседневные> Сумка-мешок «The Dude Abides»

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

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

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

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

Вернуться к результатам | На главную> Мебель> Гостиная> Бин-мешки> Бин-сумка «The Dude Abides»

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

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

Начало> Меблировка> Стулья | Одноместный *

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

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

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

Часто задаваемые вопросы о панировочных сухарях

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

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

Продолжить чтение

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

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

Breadcrumbs (без Panko) — это ссылка на следящие ссылки, которые позволяют пользователям узнать, где они находятся в пределах веб-сайта. Вы, вероятно, видели их на крупных веб-сайтах и ​​сайтах электронной коммерции с множеством категорий, например «Амазонки» и «Лучшие покупки в мире».Вы, вероятно, даже использовали их один или два раза раньше, не зная, как они называются. Что ж, теперь, когда вы знаете, как они называются, это имеет смысл, верно? Если вы знакомы с историей Гензеля и Гретель, то вы знаете, что панировочные сухари использовались, чтобы проложить себе дорогу домой. Та же идея здесь, когда дело доходит до веб-сайтов — умно, да?

Панировочные сухари также бывают разных сортов:

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

Теперь, когда вы знаете, что такое панировочные сухари, для чего они используются и в каком разнообразии их можно использовать, нужны ли они нам в 2018 году?

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

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

• Они удобны: Они позволяют пользователям точно знать, где они находятся в навигационной структуре вашего веб-сайта.
• Они улучшают взаимодействие с пользователем: Это соответствует предыдущему пункту. Знание того, где вы находитесь на веб-сайте, а также возможность перехода на предыдущую страницу или категорию только упрощают работу пользователя.
• Они тонкие: Как упоминалось ранее, они не занимают много места на вашей веб-странице. Это определенно положительный момент, особенно когда вы пытаетесь заставить пользователей совершить конверсию в критически важных областях.
• На самом деле они не вызывают проблем: Согласно Nielsen Norman Group, хлебные крошки никогда не поймут неправильно.Конечно, они могут оставаться незамеченными пользователями, но у пользователей никогда не возникает проблем с их использованием.

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

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

• Знайте глубину своего веб-сайта: Панировочные сухари лучше всего применять на практике для веб-сайтов с 3 и более уровнями.
• Все хлебные крошки ведут домой: Важно всегда устанавливать первый уровень навигационной цепочки на вашу домашнюю страницу, поскольку ваша домашняя страница обычно является центром для категорий, контактов и страниц с информацией о вашем сайте.
• Сохранить хлебные крошки для мобильных устройств: Чтобы обеспечить непрерывность работы на всех устройствах, лучше всего сохранить хлебные крошки и для мобильных макетов. Для более длинных маршрутов показ по крайней мере на один шаг назад от текущей страницы является надежным обходным путем, чтобы показать пользователям, где они находятся на сайте, без необходимости расширять список хлебных крошек, чтобы занять много места на мобильном устройстве.
• Рассмотрите меньший текст между концевыми крошками: Пространство между домом и последними панировочными сухарями жизненно важно для обеспечения лаконичного и понятного следа хлебных крошек. Подумайте о настройке своего сайта так, чтобы названия категорий были короткими, понятными и понятными, чтобы пользователи не запутались, а ваши хлебные крошки не слишком затягивались.
• Рассмотрите альтернативное размещение: Обдумывая размещение ваших хлебных крошек, если типичное размещение вверху страницы становится слишком навязчивым для пользователей, подумайте о том, чтобы разместить их где-нибудь в другом месте.Apple отлично справляется с этой задачей, размещая свои хлебные крошки в нижнем колонтитуле, чтобы поддерживать хорошую практику SEO и UX, но также размещая их там, где они не будут слишком отвлекать.

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

Примеры панировочных сухарей для вдохновения в дизайне

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

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

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

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

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

Панировочные сухари: что это такое и чем они полезны?

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

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

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

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

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

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

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

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

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

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

На каждом ли веб-сайте есть выгода от использования хлебных крошек?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Хотя пользователь может попасть на веб-сайт прямо на страницу «Возможности, подводные камни нового вычета 199A», он может не полностью понимать, как это относится к компании.В этом примере с цепочкой ссылка «налоговые службы» проясняет это сомнение.

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

Этот пример хлебных крошек ближе к нашим предыдущим примерам электронной коммерции. HP использует эту схему как способ передать общую информационную архитектуру веб-сайта с помощью хлебных крошек на основе атрибутов.

Нам нравится, что в атрибутах пользователи могут не только находить, где они находятся, но и сразу же переходить и находить другие элементы, которые они могут захотеть рассмотреть. Компания HP грамотно организовала ссылки, поскольку кто-то, глядя на ноутбук HP Pavilion, обнаружит, что «ноутбуки», «HP Pavilion» и «HP Pavilion Touch» идут последними.

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

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

Этот пример хлебных крошек взят из одного из самых известных учебных заведений в мире. У Гарварда очень интересный веб-сайт из-за огромного количества баров.

Как вы можете видеть ниже, у нас есть 5 разных полос! Мы знаем, что на сайте много контента для этих страниц, но, черт возьми, эта информационная архитектура, должно быть, не давала команде дизайнеров спать по ночам.Это определенно того стоило, поскольку в результате получается контент, который четко разделен на категории, а пользователи имеют возможность быстро находить все, что им нужно.

Однако пример хлебной крошки не работает сам по себе.

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

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

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

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

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

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

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

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

Apple — своеобразный пример хлебных крошек. В то время как у большинства платформ в этом списке хлебные крошки расположены рядом с основными ссылками, Apple идет противоположным путем. Их панировочные сухари находятся внизу, прямо над нижним колонтитулом.

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

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

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

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

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

Что такое навигация по хлебным крошкам? | BigCommerce

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

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

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

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

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

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

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

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

1.Навигация на основе истории.

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

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

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

2. Навигация на основе иерархии.

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

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

3. Навигация на основе атрибутов.

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

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

Каковы преимущества навигации по хлебным крошкам?

1. Повысьте свой рейтинг в Google.

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

2. Упростите задачу для пользователей.

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

Статистика показывает, что:

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

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

Подводя итоги

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

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

Хлебные крошки Примеры веб-дизайна и передовые методы

Вдохновение • Примеры веб-сайтов Андриан Валеану • 14 июня 2013 г. • 6 минут ПРОЧИТАТЬ

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

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

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

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

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

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

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

Конструктор электронных писем

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

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

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

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

Примеры дизайна панировочных сухарей

Панировочные сухари

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

Заказать

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

Панировочные сухари

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

Панировочные сухари / Ошибка

Breadcrumbs / Error by Jason Mayo — это оптимизированная панель навигации без пропусков и впечатляющих функций. Он гармонично сочетается с композицией, становясь важной деталью пользовательского интерфейса.Однако положение спасает рельефный эффект. Он придает каждому блоку и заголовку более четкий и четкий вид. Фиолетовый, который является частью основной цветовой палитры, применяется для выделения фактической страницы.

Основы дизайна

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

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

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

JomSocial Шаблон

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

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

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

Управление галереей изображений

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

Редизайн Gamerscouch.com

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

Заключение

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