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

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

Представляем вашему вниманию перевод большого материала от 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

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

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

Какие изображения повышают конверсию сайта: на основе тестов

Изображения повышают конверсию сайта. На эту тему написано много статей. В основном приводят примеры сайтов из США. Мы решили на своем опыте протестировать разные изображения. Чтобы понять, когда конверсия выше.

далее →

Как избежать 10 ошибок в работе с цветом на сайте

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

далее →

18 апреля / Комментарии

Правила оформления шапки интернет-магазина

Известно, что шапка является одной из главных составляющих интернет-магазина. Зачастую именно на нее посетитель обращает взгляд в первую очередь. В этой статье эксперты сервиса AskUsers поделятся приемами правильной компоновки шапки, расскажут как добиться того, чтобы посетитель обратил внимание на самую важную информацию, а не задавался вопросом “где тут вообще что?”.

далее →

17 апреля / Комментарии

Как психология цвета может увеличить конверсию вашего сайта

Пользователю хватает всего 90 секунд, чтоб сформировать в голове решающее мнение о продукте. Как достучаться до него за такой короткий промежуток времени? Понятно, что красочное описание чудодейственной функциональности продукта, удачный нейминг и прочие маркетинговые фишки эффективны, но как сыграть на эмоциях клиента? Цвет – вот что мотивирует (или демотивирует) пользователя – в 62-90% случаев цвет становится главным аргументом в пользу совершения покупки!

далее →

12 апреля / Комментарии

Что, как, зачем, куда: проверенные принципы компоновки элементов интернет-магазина

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

далее →

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