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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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