Фильтров может быть двадцать. А нужного среди них нет.
Или нужный есть, но спрятан где-то внизу огромного списка. Или его нельзя применить вместе с другим. Или пользователь выбрал несколько параметров, перешёл дальше и уже не понимает, почему перед ним осталось именно 17 товаров.
В общем, фильтр как будто есть. А пользоваться им нормально нельзя.
Мы решили разобраться, какие параметры действительно нужны большинству интернет-магазинов и где заканчиваются универсальные правила и начинается специфика конкретного каталога.
Начнём с пяти
Есть хорошее исследование Baymard, посвящённое фильтрации в интернет-магазинах. В нём пользователям давали реальные задачи поиска товаров и смотрели, какие фильтры они используют.
В исследовании 2020 года пять типов фильтров встречались особенно часто:
- цена;
- рейтинг покупателей;
- цвет;
- размер;
- бренд.
На первый взгляд список даже кажется слишком очевидным. Ну а какие ещё фильтры нужны магазину одежды или электроники?
Но самое интересное начинается, когда пытаешься применить этот список к реальному проекту.
1. Цена
С ценой всё просто. Человек почти никогда не ищет товар в вакууме.
Фильтр по цене отсутствует, как следствие, пользователи, имеющие ограниченный бюджет, не смогут сузить результаты поиска
Обычно в голове уже есть какой-то диапазон: «до 5 тысяч», «не дороже 50», «что-нибудь нормальное, но не за миллион».
В исследовании Baymard 80% пользователей мобильных сайтов пытались отфильтровать товары по цене. При этом в выборке 2020 года у 12% сайтов, где такой фильтр был уместен, его вообще не было.
И это тот случай, когда отсутствие функции довольно быстро становится заметно.
Допустим, в каталоге 600 холодильников. Пользователю нужен вариант до 70 000 рублей. Если фильтра по цене нет, остаётся либо листать каталог, либо уходить на другой сайт, где эту задачу решили за него.
Как и в большинстве сайтов, пользователи могут отфильтровать товары по цене.
Причём мы бы не советовали ограничиваться несколькими готовыми диапазонами вроде «до 10 000», «10 000–30 000» и «от 30 000».
Иногда человеку нужен собственный диапазон. Поэтому возможность задать минимальную и максимальную цену обычно полезнее, чем набор случайно выбранных значений.
А вот со слайдером есть нюанс.
На макете он выглядит красиво. В реальном интерфейсе пользоваться им бывает не так удобно, особенно на мобильном. Если пользователь должен пальцем попасть в значение «47 500», чтобы отфильтровать каталог, мы бы лучше дали ему возможность просто ввести число.
2. Рейтинг покупателей
С рейтингом ситуация немного интереснее.
Если в карточках товаров мы показываем звёзды, логично предположить, что пользователь захочет ими воспользоваться.
Но во многих магазинах рейтинг существует отдельно от фильтрации: четыре звезды в карточке есть, а найти все товары с рейтингом от четырёх звёзд нельзя.
В исследовании Baymard 53% сайтов не давали возможности фильтровать каталог по среднему пользовательскому рейтингу, хотя на 97% сайтов из той же выборки рейтинг отображался на странице товара.
Получается немного странная ситуация.
Мы сами показываем пользователю информацию, которая может помочь принять решение, но не даём использовать её для сокращения списка.
Особенно хорошо это работает в категориях, где покупатель не очень разбирается в товаре.
Например, человек впервые выбирает беспроводные наушники. Он может не знать, чем один кодек отличается от другого, не разбираться в производителях и вообще не понимать, какие характеристики важны.
Зато он вполне может сказать: «Покажите мне варианты с хорошими отзывами».
И это нормальный пользовательский сценарий.
3. Цвет
С цветом обычно вспоминают про одежду.
Но на самом деле фильтр встречается далеко не только там.
Мебель, посуда, бытовая техника, товары для дома — везде цвет может быть частью выбора.
Причём здесь есть простой психологический момент: если человеку нужен белый холодильник, серый холодильник для него не становится «почти подходящим». Он просто не подходит.
То же самое с креслом, кухонным фасадом или парой кроссовок.
Поэтому фильтр по цвету имеет смысл там, где цвет действительно влияет на решение о покупке. В исследовании Baymard 2020 года 10% сайтов, для которых такой фильтр был релевантен, его не предоставляли.
Но делать фильтр «Цвет» только потому, что он есть в каком-то универсальном чек-листе, тоже не нужно.
Если мы продаём, например, кабель, цвет оболочки может быть настолько незначимым параметром, что отдельный фильтр только займёт место.
И вот здесь начинается важная часть всей истории с фильтрами: фильтр нужен не потому, что он существует в исследовании, а потому, что он помогает выбрать конкретный товар.
4. Размер
Размер — один из самых понятных фильтров.
Если человек ищет кроссовки 43 размера, кроссовки 38-го ему вряд ли станут значительно интереснее только потому, что они хорошо выглядят.
В одежде это очевидно. Но размер — далеко не всегда означает S, M, L или 43.
Для холодильника это может быть ширина и высота.
Для стола — габариты.
Для телевизора — диагональ.
Для кабеля — длина.
Для шин — размерность.
То есть в реальном проекте мы часто вообще не называем этот фильтр «Размером». Мы просто даём пользователю возможность отсеять всё, что физически ему не подходит.
В исследовании Baymard 15% сайтов, где фильтр размера был релевантен, его не предоставляли.
И здесь отсутствие фильтра особенно болезненно: если товар не подходит по размеру, никакие другие характеристики уже не спасают.
5. Бренд
С брендом всё зависит от самого магазина.
Если у нас монобрендовый магазин, отдельный фильтр «Бренд» действительно выглядит довольно бессмысленно.
А вот если в каталоге несколько десятков производителей, ситуация меняется.
У человека может быть любимый бренд. Или, наоборот, есть марки, которые он принципиально не рассматривает.
Иногда бренд — это вообще единственный ориентир, который у покупателя есть.
Представим, что человек хочет купить наушники и знает только одно: «Я беру JBL, остальное даже смотреть не хочу».
Зачем заставлять его просматривать весь каталог?
В исследовании Baymard 27% сайтов из выборки, где фильтр по бренду был релевантен, его не предоставляли.
При этом для монобрендового магазина такой фильтр действительно может быть лишним. Там гораздо полезнее может оказаться фильтр по линейке, серии или другому признаку внутри бренда.
И тут возникает проблема с универсальными фильтрами
Пять фильтров — хорошая отправная точка.
Но если взять их и буквально поставить на каждый интернет-магазин, получится довольно странный продукт.
Например, магазин автозапчастей.
Цена — да. Бренд — да. Рейтинг — возможно. А дальше пользователю гораздо важнее совместимость: марка автомобиля, модель, год выпуска, двигатель, тип детали.
Или строительный магазин.
Цвет и бренд могут быть полезны, но человеку ещё нужны размеры, материал, назначение, характеристики и, возможно, способ монтажа.
В магазине бытовой техники важными станут мощность, габариты, тип устройства, объём, способ установки.
В одежде — размер, цвет, пол, сезон, материал, посадка.
Поэтому после базовых фильтров начинается самое интересное: нужно разобраться, как именно покупатель выбирает товар в этой категории.
Фильтр должен соответствовать вопросу покупателя
Мы обычно стараемся смотреть на это не со стороны базы данных.
В базе у товара может быть 40 характеристик. Это ещё не значит, что на странице каталога нужны 40 фильтров.
Если характеристика не помогает сузить выбор, она просто создаёт шум.
Хороший вопрос здесь звучит примерно так:
«Что человек должен знать о товаре, чтобы понять, подходит он ему или нет?»
Ответ на него и даёт большую часть нужных фильтров.
Для холодильника — габариты.
Для ноутбука — диагональ, объём памяти, процессор, цена.
Для краски — назначение, тип поверхности, объём, цвет.
Для автозапчасти — совместимость.
И вот этот последний пример особенно показателен. Можно сделать очень красивый фильтр по брендам и цене, но если человек не сможет выбрать свой автомобиль, каталог останется практически бесполезным.
Фильтрация и сортировка — не одно и то же
Эти две функции часто стоят рядом, поэтому их легко перепутать.
Но задачи у них разные.
Фильтрация отвечает примерно на вопрос: «Что мне подходит?»
Сортировка — на вопрос: «В каком порядке мне это посмотреть?»
Допустим, в каталоге 500 товаров.
Мы можем отсортировать их по цене и поставить самые дешёвые наверх. Но всё равно останется 500 товаров.
Фильтр «до 10 000 рублей» может оставить 80.
А комбинация «до 10 000 рублей + бренд + размер» — уже 12.
И вот с двенадцатью товарами человек работает совсем иначе, чем с пятью сотнями.
Поэтому сортировка не заменяет фильтрацию. Они просто решают разные задачи.
А что происходит, когда пользователь выбирает несколько значений?
Здесь есть маленькая техническая деталь, которая очень быстро превращается в UX-проблему.
Допустим, человек ищет чёрные или синие джинсы.
Он выбирает «чёрный» и «синий».
Логично получить товары любого из этих двух цветов.
То есть внутри одного типа фильтра обычно нужна логика OR:
чёрный ИЛИ синий.
А между разными типами фильтров — AND:
чёрный И размер 42 И цена до 10 000 рублей.
На бумаге это выглядит очевидно.
А теперь представьте интерфейс, в котором можно выбрать только один цвет. Выбрали чёрный, передумали, сняли его, выбрали синий. Потом опять захотели посмотреть оба варианта.
Получается не фильтр, а маленький квест.
Поэтому возможность выбрать несколько значений одного типа — вроде бы небольшая функция, но для каталога она очень важна.
Выбранные фильтры тоже нужно показывать
Есть ещё одна вещь, которую легко забыть.
Пользователь выбрал четыре фильтра. Потом прокрутил каталог вниз.
Через минуту он уже видит 18 товаров и не совсем понимает, почему именно их.
Что было выбрано? Цена? Бренд? Цвет? Размер?
Если выбранные параметры остаются где-то далеко в боковой панели, приходится возвращаться наверх и вспоминать, что именно было включено.
Поэтому применённые фильтры лучше показывать отдельно — например, над списком товаров.
Тогда пользователь видит примерно такую картину:
Чёрный × Размер 42 × Nike × до 10 000 ₽ ×
И сразу может убрать один параметр, не сбрасывая всё остальное.
На мобильных это особенно важно, потому что фильтры часто открываются в отдельной панели, и после её закрытия пользователь вообще не должен гадать, какие условия сейчас действуют.
Не надо показывать все фильтры сразу
Это ещё одна ловушка.
Когда разработчик получает от клиента список из 30 характеристик, возникает желание вывести их все.
Ведь они же есть.
Проблема в том, что пользователь не обязан знать всю структуру товарной базы.
Если перед ним появляется длинная колонка из тридцати параметров, интерфейс начинает выглядеть как форма из административной панели.
Лучше выделить то, что используется чаще всего, а остальные параметры убрать внутрь раскрывающихся групп.
Но здесь тоже не стоит принимать решение только по принципу «давайте оставим пять самых популярных».
В одной категории важнее цена и бренд. В другой — совместимость и размеры. В третьей человек вообще начинает выбор с наличия и срока доставки.
Поэтому порядок фильтров лучше определять не по красоте макета, а по реальным сценариям пользователей и данным аналитики.
И всё-таки, какие пять фильтров поставить?
Если нужен короткий ответ, то вот он:
- Цена. Почти всегда один из первых вопросов покупателя.
- Рейтинг. Особенно полезен в категориях, где человеку сложно оценить товар заранее.
- Цвет. Нужен там, где внешний вид или цветовая вариация влияет на выбор.
- Размер. Причём под размером может скрываться что угодно: от размера одежды до габаритов техники.
- Бренд. Особенно важен для мультибрендовых каталогов.
Но это не готовое техническое задание.
Это скорее список, с которого имеет смысл начать разговор о каталоге.
Что мы бы проверили перед проектированием фильтров
Если к нам приходит интернет-магазин с большой товарной базой, мы бы не начинали работу с вопроса «какие фильтры поставим в левую колонку».
Сначала хочется понять немного другое:
- какие товары пользователь чаще всего ищет;
- какие характеристики влияют на решение о покупке;
- какие параметры реально заполнены в товарной базе;
- какие фильтры используются сейчас;
- на каких шагах пользователи отваливаются;
- какие комбинации фильтров встречаются чаще всего;
- что происходит, когда выбранные параметры дают ноль результатов.
Последний пункт вообще заслуживает отдельного разговора.
Потому что идеальный фильтр — это не тот, который позволяет выбрать всё подряд.
И не тот, у которого больше всего настроек.
Хороший фильтр — тот, после которого пользователь получает небольшой, понятный и действительно подходящий ему список товаров.
В итоге
Пять базовых фильтров из исследования Baymard — хороший ориентир. Но воспринимать их как универсальный закон для любого интернет-магазина не стоит.
Цена почти всегда имеет значение. Рейтинг часто помогает с выбором. Цвет, размер и бренд тоже регулярно оказываются важными.
А дальше начинается конкретный бизнес.
В магазине одежды одним из главных параметров будет размер. В электронике — характеристики. В автозапчастях — совместимость. В B2B-каталоге — вообще может оказаться набор параметров, который обычному интернет-магазину и не снился.
Поэтому мы бы начинали не с вопроса «какие фильтры принято делать», а с другого:
«По каким признакам ваш покупатель понимает, что один товар ему подходит, а другой — нет?»
Если ответить на этот вопрос, большая часть работы с фильтрами становится гораздо понятнее.
