Фильтрация в интернет-магазине: горизонтальный бар против сайдбара

Смотрите в каталоге
Гипер Универсам

Представляем вашему вниманию перевод большого материала от Baymard Institute, в котором сравниваются два подхода к расположению инструментов сортировки и фильтрации в интернет-магазине: горизонтальный бар (полоса) над контентом и более традиционные фильтры в сайдбаре. Материал опирается на масштабное исследование, проведённое Baymard Institute.

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

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

Почему горизонтальный бар лучше сайдбара?

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

  • полное игнорирование фильтров (самый частый случай);
  • ошибочная интерпретация: пользователи принимают сортировку за инструменты фильтрации и полагают, что больше уточнить контент на странице никак нельзя.

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

Горизонтальный бар на Newegg.com.jpg

«Я думал, здесь будет возможность отсортировать результаты по производителю или что-нибудь в этом роде», отметил неудовлетворённый тестер, изучающий топ товаров на Newegg.com. Он обратился к пункту Sort by («Сортировать по»), ожидая увидеть там вариант «Производитель». На самом деле, тестер имел в виду фильтрацию по производителю.

Фильтрация в магазине Pixmania.com.jpg

Находясь на сайте Pixmania, тестер рассуждал: «Я хочу уменьшить объём выдачи до разумного количества товаров. Есть тут какие-нибудь инструменты?». Затем он пришёл к выводу, что единственный вариант фильтрации на сайте – 4 пункта, представленные непосредственно над контентом (Popularity, Price, Brand, Review).

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

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

Горизонтальный бар с фильтрами и сортировкой на IKEA.com.jpg

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

Тепловая карта Allposters.com.jpg

Это тепловая карта, показывающая зоны, вызвавшие интерес посетителей Allposters.com. В тестировании принимали участие 32 человека. Результаты подтверждают, что горизонтальный бар получает максимум внимания, почти столько же, сколько и три товара на верхней строке. Такой объём внимания к фильтрам нетипичен для сайтов, где они расположены в сайдбаре.

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

Каким интернет-магазинам подходит гибридный горизонтальный бар (фильтры + сортировка)?

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

Горизонтальный бар на Crate and Barrel.jpg

В магазине Crate & Barrel отлично реализован горизонтальный бар. Количество фильтров тут невелико.

Магазинам, рассматривающим возможность внедрения горизонтального бара, следует внимательно изучить адекватность нынешнего набора фильтров потребностям посетителей. Согласно результатам других исследований Baymard, этот набор оставляет желать лучшего в 60% интернет-магазинов (см. материал на Smashing Magazine). Сайты, продающие товары, которые имеют технические характеристики в каком-либо виде, почти всегда испытывают необходимость в большом количестве фильтров.

Что влияет на эффективность горизонтальных баров?

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

  1. Используйте кастомный выпадающий список для вывода вариантов фильтрации вместо стандартного тэга . Так вы сможете предоставить посетителям возможность поставить галки сразу в нескольких чекбоксах. Обновляйте список товаров в режиме реального времени, следуя за выбираемыми посетителем вариантами. Так вы дадите ему понять, как работает система фильтрации. В ходе тестирования такой подход показал хорошие результаты. Ещё одно преимущество мгновенного апдейта списка – отсутствие необходимости внедрять кнопку «Применить». Информируйте посетителя о том, какие варианты фильтрации были им выбраны. Сделайте отдельный блок за пределами выпадающего списка, в котором отображались бы чекбоксы с галочками. Пример информирования посетителя о выбранных фильтрах за пределами выпадающего списка вариантов (магазин Nordstrom). ИтогоГоризонтальный бар с фильтрами и сортировкой – решение, подходящее сайтам, товарная ниша которых не требует большого количества вариантов. Примеры – одежда и товары для дома. Юзабилити-исследование, проведённое Baymard Institute, показывает, что горизонтальный бар может работать эффективнее сортировки и фильтров в сайдбаре: его чаще замечают и используют, кроме того, посетители не путают инструменты. Горизонтальный бар также позволяет расширить контентное поле страницы, допуская использование более крупных миниатюр или добавление ещё одной колонки. Однако к реализации горизонтального бара следует подходить осторожно. Половина сайтов, на которых присутствует горизонтальный бар, не получают от него ожидаемого эффекта. Необходимо: использовать кастомные выпадающие списки, позволяющие выбрать несколько опций; обновлять список товаров в реальном времени, следуя за выбираемыми посетителем вариантами фильтрации/сортировки; выводить выбранные варианты фильтров/сортировки за пределами выпадающих списков.
Компании и сервисы: IKEA
Автор: Vyacheslav Vityuk

Подписаться на новости

Читайте также

1 февраля / Комментарии

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

Одежда – один из самых продаваемых товаров в интернете. Ранее мы публиковали резюме отчёта об исследовании, проведённом аналитическим агентством Nielsen, «Nielsen: какие товары россияне чаще всего покупают в интернете». Согласно результатам этого исследования, одежда не просто самый популярный товар, приобретаемый в интернете. Этот вид товаров на 14% опережает «ближайшего преследователя», потребительскую электронику. Очевидно, что у многих интернет-магазинов одежды дела идут неплохо. Могут ли они идти ещё лучше? Если они внедрят в свои товарные страницы одну маленькую деталь, ответ запросто может быть положительным.

далее →

13 декабря 2016 / Комментарии

Мобильная версия интернет-магазина: предпраздничная подготовка

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

далее →

25 октября 2016 / Комментарии

11 принципов веб-дизайна, которые повышают конверсию

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

далее →

26 сентября 2016 / Комментарии

Разбор юзабилити интернет-магазина Ulmart.ru и его преобразования за 2016 год

Изначально статья планировалась как одно целое, где я хотел рассмотреть возможные ошибки в юзабилити топа российских интернет-магазинов. Но после нескольких дней обзора, понял, что каждый сайт заслуживает отдельного разбора. Кроме того, мне захотелось не только осветить проблему, но и предложить своё видение ее решения. В связи с этим вся статья строится по схеме: Гипотеза о проблеме > Причина и Обоснование > Решение.
Поскольку статья начата еще в ноябре 2015 года, а закончена только сейчас, Ulmart успел исправить часть проблем,  обозначенных в статье. Об этом я дополнительно говорю в примечаниях . И сейчас мы можем отследить те преобразования, которые были сделаны.

далее →

6 сентября 2016 / Комментарии

Комфорт покупателей как залог успешного бизнеса. Основные ошибки в юзабилити интернет-магазинов

Четыре года назад была опубликована статья «22 ошибки в юзабилити интернет-магазинов, а также работающие варианты по их исправлению». Мы решили, что настала пора освежить данную информацию и задали разработчикам сайтов и CMS следующие вопросы: «Какие указанные в данном материале ошибки по-прежнему актуальны?», «С какими юзабилити-ошибками интернет-магазинов вам приходится встречаться чаще всего?», «Какие юзабилити-советы вы можете дать заказчикам?». И вот что мы узнали.

далее →

X
Нажмите «Нравится»,
чтобы читать Shopolog.ru в Facebook