Анализ “хлебных крошек” на российских сайтах.
Что это такое и как их используют.
“Хлебные крошки” (“breadcrumbs”) — это элемент интерфейса в навигации сайта/программы, который показывает путь от главного элемента до того, на котором находится пользователь. Помогает пользователю помнить, на какой странице он находится, и вернуться на предыдущие, не заблудившись в разделах сайта.
Такие подсказки не нужны одностраничным сайтам или сайтам, где нет вложенности разделов. Но они необходимы на сложных, многоуровневых сайтах, например, в интернет-магазинах, в которых разделов просто завались.
Пример “хлебных крошек”, с которым мы часто взаимодействуем — файловая система в компьютерах.
Вы видите весь путь, по которому прошли, пока не попали в нужную папку.
Я сделала небольшой анализ, как используют “хлебные крошки”на российских сайтах.
Утконос
В десктопной и мобильной версиях мы видим “хлебные крошки”, в которых указывается полный путь от главной страницы до текущей. Элементы разделены стрелками вправо. Можно нажать на категорию, чтобы в нее провалиться. Текущая страница с товаром некликабельна, потому что это и не нужно.
Утконос. Десктопная версия
В мобильной версии весь путь “хлебных крошек” выстроен в одну строку, без переносов, поэтому есть горизонтальный скролл.
Утконос. Мобильная версия
Перекресток
В десктопной версии сайта мы видим “хлебные крошки”, они ведут нас от главной страницы до страницы товара. В качестве разделителя тоже использованы стрелки вправо.
Перекресток. Десктопная версия
В мобильной версии “хлебные крошки” не используются, появляется кнопка Назад, которая ведет себя как браузерная кнопка Назад (возвращает на предыдущую страницу), но не на уровень выше, как ожидается.
Перекресток. Мобильная версия
Вкусвилл
В десктопной версии представлены “хлебные крошки”, разделитель — косая черта.
Вкусвилл. Десктопная версия
В мобильной версии “крошки” пропадают, когда мы заходим на страницу товара.
При этом на страницах категорий “хлебные крошки” появляются.
Вкусвилл. Мобильная версия
lamoda
В десктопной версии представлены “хлебные крошки”, и, как у Вкусвилла, в качестве разделителя — косая черта. Но в “хлебные крошки”не попала страница товара, на которой мы находимся.
lamoda. Десктопная версия
В мобильной версии нет “хлебных крошек”, вместо них используется кнопка, которая возвращает в категорию этого товара и сообщает как она называется.
lamoda. Мобильная версия
Сима-ленд
Используется выпадающее меню в “хлебных крошках”, т.е. мы можем переключаться между категориями/подкатегориями, находясь в интерфейсе “крошек”.
Сима-ленд. Десктопная версия
В мобильной версии используются обычные “хлебные крошки”, текущая страница в них не включена.
Сима-ленд. Мобильная версия
Booking.com
В десктопной версии есть “хлебные крошки” и в качестве разделителя использованы стрелки вправо. Под некоторыми категориями есть выпадающее меню, которое уводит на другой продукт.
booking.com. Десктопная версия
Например, если вместо Отелей мы выбираем Туризм, то с сохранением дат, попадаем на страницу, на которой есть информация о лучших районах нашего направления и предложением найти в них жилье.
В мобильной версии “хлебных крошек” нет, только стрелка назад. Сайт выглядит как мобильное приложение.
booking.com. Мобильная версия
Газпром
В десктопной и мобильной версиях сайта текущая страница как будто не включена в цепочку “хлебных крошек”, а представлена сразу в виде заголовка.
Газпром. Десктопная версия
И по большому счету, мобильная версия сайта мало чем отличается от десктопной.
Газпром. Мобильная версия
Камаз
На сайте Камаза приходит осознание, насколько давно используются “хлебные крошки”. У этого сайта даже нет мобильной версии, а вот “хлебные крошки” — есть.
Nielsen Norman Group рекомендовали использовать “хлебные крошки” еще в 1995 году.
Камаз. Десктопная версия
Альфа-Банк
У этого сайта очень сложная и непонятная структура, “хлебные крошки” то появляются, то исчезают.
Например, на скриншоте ниже “хлебные крошки” указывают, что Ипотека — это подкатегория Кредитов, но в навигационном меню выше видно, что Ипотека и Кредиты находятся на одном уровне.
Альфа-Банк. Десктопная версия.
Другой пример: Средний и крупный бизнес (1 уровень) > Размещение средств (2 уровень)> Процентные ставки (3 уровень). И вместо “хлебных крошек” видим только ссылку на первый уровень.
Альфа-Банк. Десктопная версия.
В целом на сайте Альфа-банка на десктопной и мобильной версиях “хлебные крошки” используются от случая к случаю, иногда их просто нет, и чаще всего совершенно непонятно в какой категории или подкатегории находишься.
Джефф Джимерсон, главный креативный директор компании Madison Ave. Collective, в своей статье “We’ve All Been Doing Breadcrumbs Wrong” (ноябрь, 2019 год) предлагает свой вариант использования “хлебных крошек”. Выглядит он вот так:
Десктопная версия. Картинки из статьи Джеффа Джимерсона
Вот в чем заключается его подход:
- для декстопной версии сайта используйте стрелки влево, таким образом показываете, что можно вернуться назад
- при использовании стрелок влево — не нужно включать текущую страницу в цепочку “хлебных крошек”
- в идеале, разделяйте “хлебные крошки” тремя или четырьмя символами, чтобы каждая стрелка и текстовая ссылка рассматривались как одно целое
Update: в 2020 году на этом сайте уже используются самые обычные “хлебные крошки”.
Linn-Benton Community College. Десктопная версия.
Вывод
Для e-commerce использование “хлебных крошек” оправдано, так как обычно у них сложная структура каталога из-за разнообразия категорий, подкатегорий товаров, и пользователю действительно нужно в них ориентироваться.
У крупных банков беда со структурой сайтов и это отражается в “хлебных крошках” или их отсутствии. Есть причина, почему эта проблема для них не так критична, так как пользователи не пользуются навигацией по сайту и попадают на нужную им страницу по своему запросу из поисковика.
У корпоративных сайтов со структурой все в порядке: строго и линейно.
Повторю, что “хлебные крошки” — это элемент навигации по вашему сайту. Поэтому когда они используются нелогично — то появляются, то исчезают на разных страницах — ваш пользователь теряется, начинает блуждать, думать не о том: зачем он пришел к вам, а как поскорее уйти, и в конечном итоге уходит.