№1 по увеличению конверсии в России

Хлебные крошки и конверсия:
Как хлебные крошки улучшают навигацию сайта

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

Зачем нужны хлебные крошки на сайте:

  • Показывают пользователям текущее местоположение;
  • Обеспечивают доступ в 1 клик к верхним уровням сайта;
При этом:
  • Занимают мало места на сайте;
  • Просты в реализации;
  • Никогда не вызывают проблем у пользователей.

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

Как оформить хлебные крошки:

  • Путь начинается с главной страницы (название бренда);
  • Разделяются уровни знаками: ">" (больше чем) или "/" (косая черта, слеш) или "" (стрелка направо) чтобы прослеживалось направление движения;
  • Раздел меню > Подраздел (1 уровень) > Подраздел (2 уровень) … > Карточка товара;
  • Не стоит разделять уровни следующими символами: " | " (вертикальная черта), " " (горизонтальная черта, дефис/тире),":" (двоеточие), ";" (точка с запятой), "..." (многоточие) они могут вызвать путаницу;
  • Последний уровень выделяется жирным шрифтом и цветом;
  • Каждый уровень (кроме последнего) является кликабельны и ведет в соответствующий раздел сайта;
  • Так как пользователь всегда находится на последнем уровне, то делать его кликабельным не нужно.

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

Ошибки при оформлении хлебных крошек

Хлебные крошки, конверсия
Маркетплейс Beru.ru
На сайте маркетплейса от Сбербанка и Яндекса - Beru.ru хлебные крошки оформлены с ошибками:

  • Путь начинается не с главной страницы из-за этого не сразу понятно что означает данная строка;
  • Уровни разделены знаком: "" (дефис) из-за этого не прослеживается направление движения направо;
  • Не указан последний уровень (не выделена текущая страница) из-за этого непонятно где сейчас находится пользователь и не понятен путь до текущей страницы.

В результате оформления хлебных крошек с ошибками, они не выполняют свою функцию и не помогают в навигации по сайту Beru.ru, хотя могли бы.
В данной статье рассмотрена лишь 1 точка роста конверсии. Если вы хотите увеличить конверсию вашего сайта по 524 параметрам, узнайте подробности в разделе Аудит сайта
Автор Эдуард Файзуллин. Опубликовано 22 февраля 2017 года.
Подробнее про рост конверсии в книге: "Конверсия на стероидах"
    Конверсия на стероидах, Эдуард Файзуллин
    • Навигация на сайте;
    • Главная страница сайта;
    • Сервисные функции;
    • Каталог товаров;
    • Страница товара;
    • Корзина;
    • Оформление заказа;
    • Цена и оплата;
    • Технические параметры.
    200 точек роста, 130 страниц, детально рассмотрены:
      Скачать книгу бесплатно
      Пожалуйста, оставьте свой e-mail и мы пришлём вам ссылку для скачивания книги
      + 1 раз в неделю мы рассылаем свежие статьи про увеличение конверсии сайтов
      Отписаться можно в любое время, в 1 клик
      Оставляя свой e-mail, вы принимаете условия обработки персональных данных
      Другие статьи по теме
      Больше статей о повышении конверсии в разделе Статьи