В большинстве интернет-магазинов инструмент фильтрации товаров традиционно выглядит как вертикальная колонка с левой стороны. Но определенную популярность получил и другой инструмент – горизонтально расположенный фильтр товаров.
В каком случае горизонтальное расположение фильтра товаров предпочтительнее, рассказывают эксперты из Baynard Institute.
12 из 50 самых крупных интернет-магазинов США (24%) перешли на использование горизонтального фильтра, как на картинке ниже.
Но насколько горизонтально расположенный фильтр товаров лучше, чем традиционный вертикальный?
Мы провели большое исследование различных интернет-магазинов в плане удобства пользовательского интерфейса («юзабилити»). Исследование показало, что горизонтальный фильтр товаров в каталоге лучше всего подходит определенным типам интернет-магазинов, и в таких случаях результаты могут значительно превосходить традиционный вертикальный фильтр.
Почему горизонтальный фильтр может работать лучше
В нашем исследовании мы обнаружили, что горизонтально расположенные средства фильтрации и сортировки товаров значительно уменьшают, хотя и не полностью, два главных типа проблем с традиционным вертикальным фильтром:
- Пользователи не пользуются/игнорируют фильтр товаров вообще – это наиболее частый сценарий
- Пользователи принимают средства сортировки товаров за фильтр товаров, думая, что это единственное доступное им средство управления видимости товаров в каталоге
Обе проблемы достаточно серьезны, поскольку они не дают пользователям сайта получить хорошо составленный список товаров, который соответствует их критериям покупки, и приводит к тому, что они вынуждены просматривать гораздо больший список товаров. В нашем исследовании это приводило к тому, что пользователи очень быстро уставали от поиска и могли легко уйти на сайт конкурента в надежде, что там им удастся найти нужный товар быстрее.
Ниже мы приводим 2 типичных примера из наших тестов.
«Я думал, что можно будет выбрать товары по производителю», — сказал один респондент при просмотре каталога товаров. В это время он открывает выпадающий список «отсортировать по…» — хотя на самом деле он хочет не отсортировать, а отфильтровать. А фильтр по производителю находится тут же, слева, но участник исследования его не замечает (см. скриншот ниже).
Другой пример: «Я ищу, как мне сузить этот список, есть ли какие-то критерии, по которым это можно сделать?» — говорит другой респондент после того, как он пришел к выводу, что ему доступны только 4 типа сортировки над списком товаров, полностью игнорируя фильтр слева (см. скриншот ниже).
Когда пользователи сайта изучают список товаров и решают изменить этот список, они, как правило, прокручивают его до самого верха. Вполне естественным для них является сфокусироваться на том месте сверху списка товаров, где список заканчивается. Это то место, куда «упирается» их взгляд, поскольку их внимание сосредоточено на списке. А в этом месте обычно располагаются средства сортировки. Кроме того, многие респонденты использовали слова «отсортировать», в то время как то действие, которое они хотели сделать называется «отфильтровать».
Все это приводит к тому, что пользователи видят средства сортировки над списком товара и полагают, что это единственный доступный им инструмент для управления списком.
Сайт IKEA использует горизонтально расположенные средства фильтрации и сортировки. Во время тестов такое решение показало себя очень эффективным. Респонденты, которые хотели отфильтровать список товаров, сразу же находили его, и что важно – не путали фильтр по товарам с сортировкой товаров (см. скриншот ниже).
Мы также использовали специальную технику для отслеживания взгляда респондентов во время просмотра интернет-магазинов. Мы выяснили, что горизонтальный фильтр имеет гораздо больше возможностей быть замеченным.
Посмотрите (ниже), как горизонтальный фильтр «получает» столько же внимания респондентов, сколько и топ-3 товаров.
Помимо указанных выше преимуществ горизонтального фильтра – им пользуются чаще и не путают со средствами сортировки — у него есть еще одно преимущество. Его использование вместо вертикального фильтра позволяет освободить больше места на экране для того, чтобы либо расположить больше товаров на экране, либо – увеличить изображения товаров в каталоге. Это очень важно для тех интернет-магазинов, где визуальная привлекательность товара играет большую роль.
Каким интернет-магазинам подходит горизонтальный фильтр
Поскольку ширина экрана фиксирована, то горизонтальный фильтр лучше всего подходит только тем интернет-магазинам, где полей для фильтрации товаров не так много. Например, в таких индустриях как «одежда» или «мебель/аксессуары для дома» фильтр может включать размер, цвет, материал, цену, бренд и стиль, что позволяет расположить такой фильтр в одну строку над списком товаров.
Если у интернет-магазина не из области одежды или мебели/аксессуаров для дома также мало полей в фильтре, то перед тем как переходить на использование горизонтального фильтра, нужно убедиться, что в фильтре представлены все поля, которые пользователям могут потребоваться.
Интернет-магазинам, в которых пользователи имеют тенденцию выбирать товары по спецификации, не стоит переходить на использование горизонтального фильтра. Это такие индустрии как «электроника», «товары для офиса», «инструменты», «спорт», «хобби», а также магазины, в которых продается множество разных товаров по типу универмага.
3 критически важных момента в горизонтальном фильтре
Хотя 24% сайтов, которые мы исследовали, содержат горизонтальный фильтр, мы также заметили, что только в половине случаев этот фильтр работает также эффективно или лучше, чем традиционный вертикальный фильтр.
Из-за ограниченности места, горизонтальные фильтры почти всегда организованы в виде выпадающих меню.
- Используйте вариант выпадающего меню, где пользователь может выбрать несколько значений.
Обязательно показывайте, какие варианты пользователем отмечены. Встроенный элемент HTML (тэг «select») не подходит для этого. Вам нужно создать собственный вариант выпадающего меню, внутри которого находятся «чекбоксы», с тем, чтобы пользователь мог выбрать несколько вариантов.
Типичный пример – «цвет». Пользователь хочет выбрать, скажем, «черный» или «синий», но стандартный HTML-элемент не даст ему это сделать – он будет вынужден сначала выбрать «черный» и посмотреть «черные» товары, а потом выбрать «синий». Это катастрофически снижает удобство интерфейса.
- Обновляйте список товаров сразу же, как только пользователь изменил фильтр
Наше исследование показало, что некоторые пользователи неуверенно себя чувствуют в том, как работает фильтр. В тех случаях, когда пользователь отмечает или снимает отметку против какого-то значения, а список товаров сразу же обновляется, чтобы отразить его действия – пользователь чувствует себя гораздо увереннее в пользовании фильтром.
Такое моментальное обновление списка товаров также экономит вам ценное свободное место, потому что вам не нужно будет куда-то вставлять кнопку «применить».
- Показывайте выбранные значения фильтра «за пределами» выпадающих меню
Когда пользователь выбирает несколько значений одного поля в фильтре, очень важно постоянно показывать пользователю, что он выбрал. Пользователь может забыть свой выбор в фильтре и из-за этого неправильно воспринимать то, что ему показывается в списке товаров. Например, он забыл, что выбрал «цвет: черный», и думает, что в интернет-магазине почему-то очень мало товаров, а все, что есть, почему-то черные.
Ниже приведен пример с сайта Nordstrom. Обратите внимание, как выбранные значения фильтра показываются «за пределами» выпадающего меню, что дает возможность пользователю всегда видеть, что он выбрал, и при необходимости удалить какое-то выбранное значение, нажав на небольшой крестик.
В заключение напомним основные тезисы:
- Для некоторых интернет-магазинов с ограниченным набором полей для фильтрации товаров, в частности – «одежда» и «мебель/декор для дома», горизонтально расположенный фильтр является предпочтительным выбором для интерфейса каталога товаров.
- Важно помнить об особенностях «юзабилити» горизонтального фильтра:
- Использовать тип выпадающего меню, который позволяет выбирать несколько значений в каждом поле
- Сразу же обновлять список товаров по мере выбора пользователем значений в фильтре
- Показывать выбранные значения в фильтре «за пределами» выпадающих меню
По материалам Baynard Institute
