0,0
рейтинг
7 февраля 2014 в 14:13

Дизайн → Какие «хлебные крошки» нужны интернет-магазинам (68% сайтов допускают ошибки)? перевод



От переводчика

Юзабилити интернет-магазина — это конструктор, состоящий из множества разных деталей. Одна из шестерёнок этого конструктора — это «хлебные крошки». О них и пойдёт речь в статье. Это мой перевод статьи: http://baymard.com/blog/ecommerce-breadcrumbs. Неточности или ошибки перевода (если Вы такие найдёте) прошу отправлять в личные сообщения — я оперативно внесу необходимые правки. Если статья будет интересна — обязательно переведу и другие материалы подобной тематики.

Введение


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

Сопоставляя различные показатели 40 крупнейших сайтов e-commerce, исследователи обнаружили, что 68% интернет-магазинов испытывают трудности с внедрением этого компонента: 45% сайтов располагают лишь одним вариантом «крошек», а у 23% сайтов «хлебные крошки» вообще отсутствуют.



Некоторые из 68% самых успешных интернет-магазинов, слабым местом которых являются «хлебные крошки»

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

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


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


Вариант «хлебных крошек», основанный на структуре сайта, позволяет пользователям легко переходить к категориям товаров, чтобы подробнее узнать о других товарах в категории. Участник исследований, не уверенный на 100% в выборе куртки, легко перешел к категории «Куртки и пальто» на странице товаров H&M, используя структурный вариант «крошек».

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


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

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

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



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


На сайте Best Buy участник исследования перешел на страницу с переходником для ноутбука Targus из списка «Лидеры продаж» среди аксессуаров. Однако, будучи не уверенным на все 100%, он захотел посмотреть другие адаптеры для ноутбука. К счастью, ему ничего не помешало: структурные «хлебные крошки» перенаправили его, непосредственно к категории «Зарядные устройства и адаптеры для ноутбуков».

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

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



Веб-сайты Sears и Macy’s решили противостояние «история vs. структура», внедрив оба варианта. Основанная на истории опция «Обратно к результатам», которая направляет пользователей обратно к предыдущему разделу со всеми сохраненными фильтрами, дополняет структурные «хлебные крошки».

Это хороший пример, казалось бы, обычного компонента сайта, который значительно влияет на удобство пользователя при просмотре каталога товаров. Объединение двух типов «хлебных крошек» позволяет пользователям менять стратегию просмотра товаров и без малейших затруднений перемещаться по страницам товаров.
Перевод: Jamie Appleseed
Вержиковский Дмитрий @verydima
карма
1,0
рейтинг 0,0
Пользователь
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Дизайн

Комментарии (36)

  • 0
    Простите, но я все таки не понял, что такое «Хлебные крошки»?
    • +10
      Элемент навигации по веб-сайту, представляющий собой путь по сайту от его «корня» до текущей страницы, на которой находится пользователь. (wikipedia)
      • 0
        спасибо
    • 0
      Навигационная цепочка (Навигационное меню, «Хлебные крошки», англ. Breadcrumbs) — элемент навигации по веб-сайту, представляющий собой путь по сайту от его «корня» до текущей страницы, на которой находится пользователь. © Wiki
    • +7
      Возможно, нелишним так же будет упомянуть, что это название — культурная отсылка к сказке «Гензель и Гретель», где главные герои рассыпали хлебные крошки, чтобы найти дорогу домой, когда родители их в лес унесли. У нас более известна такая хитрость из сказки «Мальчик-с-пальчик».
      • +4
        Нелишним будет также упомянуть, что хлебные крошки чуть не погубили главных героев, потому что были склёваны лесными птицами, и дорогу по ним найти не удалось.
        • +2
          Благо по веб-страничка голодные пичуги не летают =) Преимущество виртуального мира!
          • +1
            Это-то ладно, но какая ирония!
  • 0
    У большинства магазинов отношение товаров и категорий — многие ко многим, и что тогда человеку показывать в хлебных крошках на странице товара? Это мне видится основной причиной их отсутствия на сайтах.
    • +1
      Путь, по которому он пришел на эту страницу? Или есть еще один подход — ввести свойство продукта «основная (главная) категория».
      • 0
        Подход с историей пути по которому он пришел на эту страницу — неверный, по двум причинам:
        1) он мог прийти на страницу сразу из поиска
        2) для SEO плохо, т.к. по одному URL будет разный контент (разные ссылки).
    • 0
      Думаю, что при правильной структуризации категорий товаров и самих товаров отношения «многие ко многим» можно избежать. И такая структуризация будет правильной с точки зрения SEO. Один товар доступен по одному url.
      А если речь о категориях вроде «promo», то правильным будет вывод в рекламном блоке ссылок на товары в своих «родных» категориях.
      • –1
        Что значит главная категория? Зашел пользователь на сайт, перешел в категорию1, оттуда зашел на страницу товара, который отнесен к категории1 и категории2, но главной прописана категория2. Хочет он вернуться, а там вдруг категория2 прописана, которая его не интересует вовсе. Частично помогла бы кнопка «Назад», но я до сих пор считаю наиболее приемлемым выдавать все категории, к которым относится товар, и сам жду от каталогов того же.

        А SEO — совсем другой вопрос, дублировать и необязательно.
        • 0
          А как вам такой вариант — если нет истории переходов по сайту — то показываем путь до главной категории. Если есть — то показываем историю (вероятно, после обработки (т.к. история может быть большая и запутанная), например — вычисляем по ней путь от продукта до корня).
          К слову, если один продукт отнесен в двум категориям, никак между собой не связанным ( «которая его не интересует вовсе» ), то это косяк не системы, а владельца магазина.
          • +1
            Пример несколько искусственный, уж извините. Выбор фильма по жанру. Некий фильм относится к жанрам «Боевик» и «Фентези». Или «Мелодрама» и «Комедия». Чей косяк? Владельца площадки? Или, может быть, режиссеров? Ленивые ублюдки, не могут определиться с жанром, снимают все подряд.

            И как все же определять главную категорию?

            Да, разумно давать в хлебных крошках тот раздел, из которого пользователь пришел. Но пришел он из гугла или еще откуда-то, и как быть? Не всегда возможно правильно и однозначно определить содержание этого элемента сайта. Выход, конечно, найти можно всегда, вопрос в том, с какой стороны его искать.
            • +2
              Группировка по жанрам, имхо, не должна происходить через категории. Возможно через тэги, или через спец. свойство продукта (с соотв. фильтрами в отображении списка продуктов).
              Категории, вообще, предназначены для четкой и однозначной классификации типа продукта.
              Пример —

              «Фрукты» / «Яблоки» / <список продуктов>
              «Фрукты» / «Бананы» / <список продуктов>

              Использование дополнительных категорий, имхо, возможно в некоторых случаях, вроде «Распродажа», «Новые поступления», «Урожай 2014» и т.д.
              • –1
                Какой вариант категоризации фильмов предложите?

                «Фрукты» / «Яблоки» / <список продуктов>
                «Фрукты» / «Бананы» / <список продуктов>
                А вот продаю я фруктовую смесь. Из яблок и бананов. Они, знаете ли, отлежавшись рядом приобретают неповторимый вкус и аромат, которого нельзя добиться, продавая их по отдельности. И вроде там яблоки. А вроде и бананы.
                • +1
                  «Фрукты» / «Фруктовые миксы» / <список>

                  Условие, что в конкретном продукте присутствуют «бананы» задаётся тегами. тогда по клику на теге можно получить список всех продуктов, где присутствуют бананы, если они очень интересуют покупателя.
                  • 0
                    Теги, дублирующие категории, но одновременно и не дублирующие? А зачем? Очень интуитивный интерфейс получается. Я все же склонен считать, что все от задачи зависит. Один пример можно кое-как притянуть к определенному решению, но не все.
                    • +1
                      Нет, это не дублирующие категории, а дополнительные свойства. Для фильтрации каталога. Например, такими тегами можно выбрать все кислые фрукты и ягоды, хотя они будут находиться фактически в разных категориях.
                      В хлебных крошка на конкретный товар всегда будет путь только для категории товара, а в тегах — его дополнительные свойства.
                      При этом не нарушиться строгая структура, но добавиться возможность проще находить разные товары с необходимыми свойствами.
                      Применить можно к любым товарам. К тем же мобильным девайсам, например. Основные категории: Планшеты, Смартфоны, Телефоны, Фаблеты. Далее в каждой категории разбиение по брендам. Ниже идут уже сами списки моделей девайсов. Но у каждого могут присутствовать дополнительные признаки: «Экран до 4 дюймов», «Экран до 7 дюймов», «2-ядерный процессор», «2 Гб RAM» и т.д.
                      Клик по тегу-свойству даст список товаров аналогичных по этому признаку, причём туда могут попасть товары из других категорий.
                      • 0
                        Не все товары можно отнести к одной категории, и не все мультикатегории можно свалить в теги. Хабы на хабре — те же категории. И их несколько даже в этой статье. Как и тегов. Но теги — это одно, а хабы — другое.
                • 0
                  > Какой вариант категоризации фильмов предложите?

                  Для фильмов — имхо, категории вообще не нужны, достаточно системы тэгов и фильтров.
                  Покупатель видит список тэгов, отмечает нужные («Боевик», «Фентези», «2014 год»), и получает свой список (который можно уточнять далее, отмечая другие тэги, существующие в выданной выборке).
                  • 0
                    В таком случае система тегов — и есть каталог с мультикатегориями. Называть можно вещи по-разному. Но суть их важнее. А с хлебными крошками что? Выкидываем?
                    • 0
                      Вот в том то и суть, что тут не будет категорий (т.е. однозначной «дорожки» до корня магазина), а будет «Сброс фильтров», «Возврат к результатам поиска» и т.д.
                      • 0
                        И я снова задам этот вопрос. А с гуглом и прочими прямыми переходами что делать?

                        PS: продолжаем холивар или все же сойдемся на том, чтобы не придумывать абсолютно универсальных интерфейсов и исходить из ситуации? Кажется, мы почти пришли к этому, и больше идти некуда.
                        • +1
                          > И я снова задам этот вопрос. А с гуглом и прочими прямыми переходами что делать?

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

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

                          Да какой холивар. Мы тут уже много лет магазины делаем, всякое перепробовали, и четкого и однозначного «нужно делать только вот так» — нет. Настройки/кастомизации всегда делаются по месту и по специфике магазина.
    • 0
      Ebay выводит все маршруты, например
      • +1
        Интересно, а если поместить продукт в 10 категорий — он всю эту портянку вывалит?
    • 0
      См. Яндекс.Маркет. Хотя Категории справа конечно назвать хлебными крошками в привычном виде сложно.
  • +1
    А если я пришел на страницу товара из гугла, например? Меня обратно в гугл выкидывать? И стоит ли вообще относить кнопку «назад» к хлебным крошкам?

    Относительно более стандартных хлебных крошек: как быть, если товары к категориям относятся не один-ко-многим, а многие-ко-многим?

    PS: нет, в следующий раз я уж точно буду обновлять страницу перед отправкой комментария...
  • –1
    Интересная статья, правда мне пришлось понимать, что же такое «хлебные крошки» по мере прочтения статьи. Может стоит добавить в начале «Ведения» определение, что же такое «хлебные крошки»?
    • +1
      Статья относится к интернет-коммерции и интерфейсам веб-приложений. Для веб-разработчиков «хлебные крошки» элементарное понятие не требующее особых объяснений.
  • 0
    Можно было бы еще дать ссылку на описание Bredcrumbs от Google — support.google.com/webmasters/answer/185417 и можно еще сказать, что breadcrumbs, могут быть и не одни на странице. Если товар находится не в одной категории, а в нескольких, например.

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