Фильтры на сайте: Чек-лист для повышения конверсии
Согласно исследованию, внедрение системы фильтрации товаров может сократить путь пользователя, повысить LTV и увеличить коэффициент конверсии интернет-магазина на 26%. Если вы хотите узнать как настроить фильтры на сайте интернет-магазина с точки зрения usability, эта статья вам в помощь. Вы получите практические советы, увидите наглядные примеры и узнаете что следует учитывать, чтобы сделать фильтрацию полезной и функциональной.
Что такое фильтры на сайте и чем они полезны для интернет-магазина?
Фильтры на сайте — это инструмент, который упрощает навигацию по интернет-магазину, помогает пользователю найти необходимый товар, улучшает поведенческие характеристики и способен улучшить видимость сайта в поиске. Правильно настроенный и спроектированный фильтр сокращает путь пользователя, повышает LTV, может увеличить средний чек и другие KPI проекта, которые в целом влияют на прибыль бизнеса.
Дизайн меню фильтров на сайте — какой выбрать?
Наиболее распространены два подхода к дизайну меню фильтров:
Можно комбинировать оба эти подхода для упрощения и ускорения поиска нужного товара.
Если речь идет о крупном интернет-магазине с широким ассортиментом товаров, значит будет много параметров для поиска, поэтому лучше использовать боковое меню. Такой вариант подходит интернет-магазинам электроники, детских товаров, тканей, и прочее.
Для интернет-магазинов в нише fashion больше подойдет верхнее меню фильтра, так как параметров для поиска будет намного меньше. Такое меню занимает меньше места и дает возможность добавить больше плиток с товарами на выдаче, что играет важную роль для принятия решения.
Очередность параметров фильтра должна соответствовать популярности использованию параметра: для бокового фильтра сверху вниз и для горизонтального — слева направо.
Если есть фильтр по бренду, то стоит выделить до 5 наиболее популярных брендов и только потом выдавать список в алфавитном порядке.
Добавьте поиск по бренду — это ускорит и облегчит задачу пользователю, так как ему не придется скроллить весь список, чтобы выбрать нужный бренд.
Чек-лист настройки и проектирования фильтров на сайте
1. Корректность работы фильтров
Важно, чтобы выдача соответствовала заданным параметрам фильтра. Протестируйте работу всех параметров, чтобы избежать вывода нерелевантных товаров и выдачи с нулевым результатом.
2. Акцентность фильтрации на сайте
Сделайте инструмент заметным, чтобы пользователю не пришлось искать его у вас на сайте. Например, на сайте Zara не сразу можно увидеть кнопку фильтра в верхнем правом углу.
Антипример кнопки для фильтрации на сайте Zara
В мобильной версии интернет-магазина также делайте фильтры более акцентными и заметными, чтобы повысить вероятность того, что пользователь воспользуется ими. Таким образом вы сузите выдачу до наиболее релевантной и сократите путь пользователя к покупке.
Пример кнопки фильтра в мобильной версии интернет-магазина Baku Electronics
3. Добавление новых параметров фильтра
При добавлении новых параметров выдача не должна перезагружаться, а ранее примененный фильтр исчезать. Важно, чтобы фокус пользователя оставался на том же месте и ему не приходилось искать нужный параметр заново.
Существует 2 способа реализации:
4. Панель быстрых фильтров
Добавьте панель с наиболее популярными и часто используемыми параметрами фильтрации определенной категории товаров, чтобы пользователь мог быстро перейти на нужную ему выдачу. Такие готовые страницы фильтрации на сайте — это дополнительный источник качественного целевого трафика и помощь в SEO продвижении интернет-магазина.
5. Быстрые ссылки на категории
Используйте быстрые ссылки над параметрами фильтра для отработки популярных запросов пользователей.
6. Фильтрация на сайте и сортировка товаров — не одно и то же
Не путайте сортировку и фильтрацию товара. Это абсолютно разные функции. Задача фильтров на сайте сузить выборку товаров на выдаче по определенному атрибуту, а сортировка просто меняет порядок товаров в выдаче по определенному признаку (по цене, по названию, по акции, по новизне, и т.д.). Разграничивайте эти инструменты, чтобы не путать пользователей.
7. Параметры фильтров для разных категорий
Параметры фильтра и их приоритезация должны быть релевантны категории товаров и меняться в зависимости от выбранной категории.
8. Отображение примененных параметров фильтра
Продемонстрируйте пользователю, какие именно параметры фильтра уже применены. Также дайте возможность сбросить все параметры сразу или отдельные настройки фильтра.
Не останавливайтесь на стандартных приемах. Например, интернет-магазин ювелирных изделий Zlato.ua предоставил пользователям возможность не только просматривать и удалять настройки фильтра в строке, но и менять отдельные параметры без удаления и повторного добавления этого параметра. Таким образом проявили заботу о клиенте, сделав сервис еще более клиентоориентированным.
9. Тематические фильтры на сайте
Не стоит ограничиваться только базовыми фильтрами, можно добавить тематические фильтры, которые будут полезны именно вашей целевой аудитории. Тут главное не перестараться и не перемудрить с названиями фильтров. Помните, главное облегчить поиски нужного товара и сузить круг поиска, а не запутать пользователя, как это было у H&M.
Анализируйте поисковые запросы ваших посетителей. Например, если пользователь хочет купить микрофон, то можно добавить фильтры: «микрофоны для iPhone», «микрофоны для пения», «микрофоны для конференций», «микрофоны для видеокамер» и т.д. Это ускорит процесс подбора товара для ваших пользователей.
Например, интернет-магазин Intertop предлагает своим пользователям подобрать целый look из нескольких элементов по заданным параметрам. При этом любой параметр можно изменить в ходе поиска.
10. Возможность сворачивать фильтры
Если речь идет о крупном интернет-магазине с большим ассортиментом и с большим количеством разнообразных фильтров, дайте возможность сворачивать и разворачивать параметры выборки. Так фильтры на сайте не будут выглядеть бесконечным и пугающим.
Итак, при проектировании и настройке фильтрации товаров стоит учитывать множество нюансов. Но при этом, если все сделать грамотно, то фильтры на сайте могут сделать сервис более клиентоориентированным и тем самым увеличить коэффициент конверсии интернет-магазина на 26%.
Наш чеклист для фильтров на сайтах
Довольно часто на сайтах е-коммерса нас просят реализовать фильтры. Хороший фильтр — довольно дорогая игрушка. Вообще, они не всегда уместны — пользователю проще посмотреть глазами на список, чем разбираться в логике разработчика фильтра. Конечно, если в этом списке не так много элементов. Скажем, не больше 200 в каждом разделе. Ниже в виде проверочного списка для наших QA, я зафиксировал некоторые требования, которые мы настойчиво внедряем на своих проектах с этого года. Стандартизация, ептэ.
Эти требования разумны. Часть из них трудно реализуема. Часть — очевидна. Часть — зависит от контекста. Но в целом они довольно универсальны. Если будут какие-то вопросы по конкретным пунктам — велкам в комментарии.
Важность: Extra High
[ ] Если фильтр не применен — адресная строка браузера содержит ЧПУ без дополнительных параметров.
[ ] При первом заходе на страницу категории в url-е не должны быть «вопросиков».
Нужно зайти на страницу каталога или категории и убедиться, что использован ЧПУ.
[ ] При переходе на товар из каталога — ссылка «назад» в браузере должна работать корректно и восстанавливать параметры.
Почему именно так: Если пользователь что-то выбрал в фильтре, получил выборку, зашел в один из товаров — то кнопка «назад» в браузере должна стать активной (был совершен переход «глубже»). Кроме этого, она должна привести пользователя не просто на страницу со сброшенным фильтром, а именно на страницу с выбранными пользователем параметрами — система не должна заставлять пользователя выбирать параметры каждый раз.
[ ] Для всех полей фильтра убедиться, что загружаются корректные данные из соответствующих справочников.
[ ] Для выпадающих списков и чекбоксов проверить полноту выдаваемой информации.
[ ] Для полей ввода проверить наличие автоподстановок (чузен).
[ ] Для списков и радиобаттонов проверить возможность отмены выбранного значения, после того, как какое-либо значение уже выбрано.
[ ] Проверить, что вывод данных из справочников — отсортирован.
[ ] При открытии ссылки с отфильтрованными данными — состояние фильтра восстанавливается.
[ ] Фильтр динамически изменяет URL при применении параметров фильтрации.
[ ] При открытии ссылки с отфильтрованными данными в отдельном окне в режиме инкогнито состояние фильтра и отфильтрованные данные восстанавливаются, не вызывая редиректов, мигания фильтра или лишних переходов.
[ ] Изменение каждого поля из фильтра сохраняется и восстанавливается в ссылке.
Почему именно так: Пользователь должен иметь возможность отфильтровать каталог и отправить ссылку на полученную выборку другому пользователю. Другой пользователь при переходе по полученной ссылке должен попадать на отфильтрованную страницу.
[ ] Все поля в фильтре корректно влияют на фильтруемый список.
[ ] Проверить фильтрацию раздельно по каждому полю.
[ ] Проверить фильтрацию по комбинации полей.
Это важно: Часто при разработке множественного фильтра перед разработчиками встает дилемма: использовать логический оператор «и» или оператор «или». Применительно к каталогу это значит: при выбранном параметре «зеленый цвет» и «размер XL» будут показаны только зеленые футболки размера XL или же все зеленые футболки и все с размером XL? Как правило, такие вопросы решаются индивидуально с руководителем проекта.
[ ] Кнопка сброса фильтра корректно работает.
[ ] Сбрасываются как параметры фильтрации, так и URL.
[ ] Перестраивается список товаров.
Важность: High
[ ] Предусмотрена пейджинация для поисковых машин.
Почему именно так: Товары в каталоге могут подгружаться «бесконечно», с помощью JavaScript. Поисковая машина «не видит» все, что находится внутри JavaScript, однако необходимо, чтобы все товары были проиндексированы. Решение: если у вас пейджинация по прокрутке (или подгрузка по AJAX, по клику на кнопку «Далее») — предусмотрите статическую ссылку, по которой поисковик сможет проиндексировать каталог, как это сделано в примере.
[ ] Robots.txt обеспечивает защиту от дублирования контента при индексации.
[ ] Страницы каталога без фильтра должны быть открыты для индексации (включая индексацию постраничной навигации).
[ ] Страницы с примененным фильтром должны быть закрыты от индексации.
Почему именно так: Когда к каталогу применяется фильтр — перестраивается страница и меняется адрес. Однако контент остается прежним. Поисковая машина воспринимает страницу отфильтрованной выдачи как отдельную самостоятельную страницу, притом как «плохую», с дублирующимся контентом. Решение: в файле robots.txt разрешить индексацию только страниц категорий и страниц с пейджинацией. Остальные (например, отфильтрованные по цвету, размеру и другим подобным параметрам) — запретить индексировать.
[ ] Фильтр не создает излишних SQL-запросов.
[ ] Работает быстро, нет необоснованных выборок.
[ ] Списки, чек-листы, деревья и прочие поля должны содержать только те элементы, по которым могут быть найдены позиции.
[ ] Если фильтрация по какому-либо полю или критерию вернет 0 позиций — необходимо убирать ее из фильтра или делать неактивной (в зависимости от дизайна).
Это важно: Подобные операции существенно загружают сервер.
[ ] Зависимые поля обновляются синхронно.
[ ] При изменении одного из зависимых полей — остальные обновляют свои данные (обновляют списки данных, меняют активность значений и проч.).
Почему именно так: Такая механика избавляет пользователя от «нулевых» выдач, сокращает количество шагов к поиску нужных товаров. Недоступные зависимые поля можно скрывать, либо делать недоступными.
[ ] Предусмотрен прелоадер на обновление выборки.
[ ] Предусмотрен прелодер на обновление параметров фильтра.
Замечание: На некоторых сайтах (тот же Sapato) предусмотрен один общий прелоадер для обновления выборки и параметров фильтра. Такое вполне приемлемо, хотя нам кажется, что это не самое изящное решение.
[ ] Предусмотрен и корректно работает предварительный расчёт количества найденных позиций.
Почему именно так: В зависимости от дизайна — может быть предусмотрен как на кнопке фильтрации, так и рядом с каждым значением полей фильтра (указывается, сколько будет найдено элементов, если используется фильтр по требуемому критерию).
Важность: Normal
[ ] Фильтр с подгрузкой каталога по ajax корректно восстанавливает позицию в списке.
Почему именно так: Если пользователь подгрузил несколько страниц по пейджинации, это должно менять url таким образом, чтобы при переходе по нему он сразу бы попадал на нужную страницу пейджинга. Подгружать либо сразу в html, либо ajax-ом, как договоритесь с руководителем проекта.
[ ] Фильтр излишне не забивает кеширующую систему.
[ ] Для фильтров с большим объемом характеристик и большим каталогов проверить обоснованность кеширования результатов.
[ ] Наличие теггированного кеша.
[ ] Частоту сброса.
Почему именно так: Допустим, пользователь выбрал параметры: цвет «красный», размер «XL», материал «хлопок», модель «Slim», цена: 1500 руб. (цену можно было указать вручную, с клавиатуры). Вероятность повтора именно таких условий в другой выборке мала, соответственно, не стоит кешировать такую выборку. В то же время, выдача по таким параметрам может содержать элементы, которые могут требовать дополнительной выборки. Их кешировать можно.
[ ] Задано поле для сортировки по умолчанию.
[ ] Предусмотрено на дизайн-макете.
[ ] Выбранные параметры сортировки — очевидны.
[ ] Очевидно, по какому полю и в каком направлении применена сортировка сейчас.
[ ] Очевидно, как поменять поле и направление сортировки.
Это важно: Иконка рядом с полем сортировки («стрелка вверх» или «стрелка вниз») должна отражать текущее состояние сортировки.
[ ] Кнопка применения фильтра всегда находится в зоне видимости.
Почему именно так: Как правило, кнопка применения фильтра должна всегда присутствовать на экране с фильтром (пользователь должен ее видеть).
[ ] Хлебные крошки при просмотре товара позволяют вернуться к правильно отфильтрованному списку.
Это важно: Когда пользователь попадает на страницу товара — для удобства навигации часто используют хлебные крошки. При этом, если пользователь пришел на товар из фильтра, крайне желательно по хлебным крошкам вернуть его на результаты с примененным фильтром.
Хранить параметры фильтра в ссылках хлебных крошек нельзя, чтобы обеспечить отсутствие страниц-дублей для поисковых систем. Ссылки по хлебным крошкам должны так же корректно отрабатывать, если пользователь перешел на карточку товара по прямой ссылке (в этом случае фильтр применяться не должен).
Возможное (но не единственное решение и не самое оптимальное) решение — вместо хлебных крошек использовать ссылку «Вернуться к каталогу». В адресе ссылки должен быть указан раздел каталога, к которому осуществляется возврат и дополнительный параметр, сигнализирующий о том, что, если пользователь использовал фильтр, то нужно восстановить его состояние (e.g. http://
Для того, чтобы восстановить состояние фильтра — фильтры предварительно сохраняется в сессию, раздельно для каждой категории.
[ ] При изменении параметров фильтра рядом с полем появляется кнопка «Показать».
Почему именно так: Если предусмотрено дизайном — при изменении параметров фильтра рядом с соответствующим полем сразу же появляется кнопка «Показать» с указанием количества элементов, которые будут найдены. Это позволяет пользователю сориентироваться в том, насколько ему подходят выбранные параметры фильтра до того, как они будут применены.
Важность: Low
[ ] Хлебные крошки при просмотре товара формируются с учетом параметров фильтрации.
Замечание: Спорное, но интересное решение.
[ ] Выбираемые в фильтре параметры появляются в виде перечня с возможностью сброса любого из выбранных параметров.
Почему именно так: Если предусмотрено дизайном — выбранные параметры фильтра попадают на специальную панель. У каждого параметра на панели предусмотрен крестик для отмены фильтрации по этому параметру. В некоторых случаях это удобно для пользователя, но отталкиваться всегда нужно от конкретного случая.
А тут видео с холивара про фильтры. С обсуждениями ждем в комментах.
18 решений для фильтрации и сортировки товаров в интернет-магазине, которые упростят выбор и повысят конверсию
Приветствую. Меня зовут Максим Жуков, я из KISLOROD. Специализируемся на разработке и развитии e-commerce проектов.
Мы уже писали о том, как прокачать поиск на сайте и правильно работать с листингами товаров, чтобы помочь пользователям и увеличить конверсию. Сегодня расскажем о реализации удобного функционала фильтрации и сортировки товаров.
Чтобы не пропустить следующую статью из серии, подпишитесь на телеграм-канал, в котором мы делимся опытом точечного увеличения конверсий в клиентских проектах, исследованиями, гипотезами и наблюдениями.
Выбирая и сравнивая товары, пользователь чаще всего опирается на информацию в категориях со списком товаров — листингах. Функционал фильтрации на страницах листинга призван упрощать выбор, но содержание и логика работы фильтров не всегда отвечают ожиданиям пользователей, что может негативно сказаться на конверсии.
Фильтрация товаров — возможность сузить ассортимент до выборки с характеристиками, наиболее релевантными индивидуальным потребностям пользователя. Такими характеристиками может быть цена, размер, бренд или другой важный для пользователя параметр. Фильтры помогают быстрее найти нужный товар и в какой-то мере заменяют продавца-консультанта. Обычно располагаются в сайдбаре.
Если фильтры исключают определенные продукты из выборки, то сортировка товаров упорядочивает выдачу по заданному критерию — например, по возрастанию цены, рейтингам пользователей или популярности. Располагается над списком товаров.
Фильтры и сортировка упрощают поиск нужных товаров и помогают избежать мук выбора. Взаимодействие пользователей с этими инструментами увеличивает среднюю продолжительность сессии и глубину просмотра страниц.
После фильтрации пользователь переходит на сформированную под его запросы страницу — товары на ней наиболее релевантны потребностям, поэтому коэффициент отказа минимальный, а конверсия максимальная. После сортировки пользователь остается на той же странице — только теперь товары располагаются в соответствии с его приоритетами, что помогает сделать заказ быстрее.
Проблемы с фильтрацией товаров обычно связаны с отсутствием важных для пользователей параметров фильтрации, непродуманной логикой и интерфейсами. Разберём решения, которые помогут улучшить функционал фильтрации товаров в интернет-магазине.
Лучше сразу сузить поле вариантов, чем получить список товаров с огромным количеством товаров из нерелевантных категорий. С этой целью список категорий располагают на видном месте — например, вверху блока с фильтром, как на скриншоте выше. Или над выдачей, как в примере ниже.
Бывает, что в определённых нишах пользователь хочет искать товары в нескольких категориях сразу. Дайте ему такую возможность, чтобы не приходилось выполнять фильтрацию в каждой категории поочередно и запоминать или выписывать информацию о товарах из разных категорий.
Поиск в нескольких категориях на shop-krastsvetmet.ru
Хотя существуют параметры фильтрации, универсальные для всех категорий (цена, рейтинг и так далее), пользователей больше интересует фильтрация по уникальным параметрам фильтрации в нужной категории. Если для телевизора важен размер диагонали, а для гидрокостюма — толщина неопрена, то дайте пользователям возможность отсортировать товары по этим параметрам. Отображая информацию об этих параметрах фильтрации, вы напомните или покажете пользователям, что параметры важны и побудите фильтровать по ним.
Если характеристика товара настолько важна, что выводится в превью, значит должна быть возможность отфильтровать весь список товаров по этой характеристике. Пользователи ищут параметры фильтра по важным для них свойствам, а если не находят — разочаровываются. Особенно эта проблема актуальна для мобильных устройств, где не всегда можно быстро понять, что необходимой характеристики товара в фильтре не существует.
Например, в превью карточки мобильного телефона на ozon.ru выведены такие параметры: число SIM-карт, поддержка карты памяти, особенности, назначение слотов.
По всем этим параметрам доступны фильтры:
Определите и предложите тематические параметры фильтрации в зависимости от специфики интернет-магазина и контекста использования товара. Примеры тематических фильтров — по стилю (повседневный, праздничный, романтический), времени года, условиям использования, параметрам выбора.
В офлайн-магазине продавец легко отработает тематический запрос вроде весенней куртки или праздничной рубашки. В интернет-магазине реализовать просмотр товаров по теме не так просто — придется вручную помечать товары или группы товаров.
Без тематических фильтров испытуемые в исследовании Baymard Institute тратили много времени на поиск. А также часто отказывались от поиска, так как нужный товар был спрятан в огромной выдаче и пользователи думали, что его нет на сайте.
В нашем исследовании покупки матрасов в онлайне испытуемые не нашли на сайте производителя параметр фильтрации с возможностью выбора матраса для пар с большой разницей в весе. В результате многие из респондентов не справились с заданием. Эту проблему можно было решить, добавив тематический параметр «для пар с большой разницей в весе».
Выбор некоторых товаров определяется совместимостью с другими товарами, которыми пользователь уже владеет. Пример таких товаров — запчасти, расходные материалы, аксессуары. Если совместимый товар не подходит к исходному, то не важно, насколько хороши отзывы о нем и привлекательна цена. Для таких товаров параметр совместимости выходит на первый план — нужно предоставить пользователю возможность получить список товаров, совместимых с имеющимся.
Испытуемым в исследовании Baymard Institute было чрезвычайно трудно найти нужный совместимый товар — только 35% справлялись с задачей. Практически на всех сайтах был фильтр по брендам, но его не хватало для определения совместимости — не все блоки питания одного бренда подходят ко всем ноутбукам того же производителя. Не всегда один производитель выпускает и продукты, и аксессуары к ним.
В некоторых нишах реализовать такой фильтр просто необходимо — например, в сегменте электроники и бытовой техники. Выбрать специализированный объектив под фотоаппарат намного сложнее, чем сумку под него же. Особенно когда всё, что может предложить фильтр — определить совместимость на основе специализированных характеристик товара из баз поставщиков и производителей. Можно дать возможность указать название и номер исходной модели, а можно размер, емкость или мощность.
Фильтр совместимости снижает риск выбрать несовместимый товар, а значит и показатель возврата товаров.
Фильтры должны быть простыми, с очевидным нахождением тех или иных параметров фильтрации в определенных категориях.
На сайте одного из производителей матрасов фильтрация жесткости не очевидна. Отображаются параметры — высокая, средняя, низкая и разная жесткость сторон. Последняя по умолчанию неактивна. Испытуемые не понимали, что можно сделать ее активной — для этого нужно выбрать два параметра. Они считали, что на сайте просто нет матрасов с разной жесткостью сторон.
Часть фильтров на этом же сайте реализована в виде ползунков, передвинув которые можно поменять, например, диапазон стоимости. Но как показывает опыт, пользователям это не всегда удобно — проще ввести вручную нужный диапазон в соответствующие поля.
Несмотря на то, что в фильтре есть такая возможность, мы не раз убеждались: для пользователей она не очевидна. Причина — чрезмерная стилизация полей для ввода значений.
На сайте anatomiyasna.ru дизайн полей для ввода значений более очевидный — испытуемые понимали, что могут вводить значения самостоятельно.
Названия свойств фильтра также должны быть предсказуемыми, понятными, не включать в себя жаргон и сленг.
Важное правило: дизайн должен улучшать опыт покупки, а не делать его хуже.
В некоторых категориях удобно фильтровать товары по определённым комбинациям параметров фильтра или, проще говоря, тегировать. Вывод таких параметров по отдельности в боковой панели фильтрации создает риск, что пользователи либо пропустят их, либо не поймут важность фильтрации товаров по конкретном списку параметров.
Упростите покупателям жизнь — выводите важные параметры над списком товаров. Например, выделив специальный блок над фильтром, как на citilink.ru:
Еще 3 важных момента:
Длинные списки из параметров фильтрации на два-три экрана шокируют пользователей — их стоит обрезать. Это лучшее решение, поскольку список выглядит компактно, но при этом пользователь по-прежнему видит все фильтры.
Как правильно обрезать списки:
Иногда списки не обрезают, а предоставляют значениям фильтрации собственную область прокрутки, которую можно скроллить независимо от остальной части страницы.
Но вы должны знать, что это решение может вызвать следующие проблемы:
Захват прокрутки. Иногда при желании прокрутить список фильтрации прокручивается страница и наоборот. Это раздражает пользователей.
Если все-таки реализуете это решение, по той причине, что у вас предполагается огромный список параметров в том или ином типе фильтрации, добавьте возможность быстрого поиска параметра в списке путем введения его названия в специальное поле, как на скриншоте выше.
Значения фильтров часто исключают друг друга — к примеру, в фильтре «Цвет» пользователь может выбрать только один параметр. При выборе второго параметра первый исключается. Хотя возможно, пользователю было бы удобнее искать товары сразу нескольких расцветок.
В исследованиях Baymard Institute 45% испытуемых пытались выбрать несколько параметров фильтрации и разочаровывались, если это не удавалось.
Фильтрация по запросу — это когда страница обновляется не мгновенно, после выбора одного параметра, а когда пользователь нажал кнопку «Применить», выбрав один или несколько параметров, как на скриншотах выше.
Мгновенная фильтрация раздражает пользователей, особенно если сайт обладает низкой производительностью и пользователю приходится терпеть не только постоянное обновление списка товаров, но и большую паузу между обновлениями.
Фильтрация по запросу — идеальное решение для сложных каталогов с большим ассортиментов товаров. Она оправдана и при медленном интернете — пользователь ждет результат только один раз, при этом выбрав сразу несколько параметров.
Единственный недостаток — высокая вероятность получить нулевой результат при выборе большого количества параметров. Как этого избежать расскажем ниже.
Решение поможет избежать следующих проблем, с которыми может столкнуться пользователь без выведения фильтров:
пользователь может забыть, по каким параметрам фильтровал товары в категории.
Желательно отображать не только количество выбранных параметров фильтрации, но и сам тип фильтра вместе с примененными параметрами. Примененные параметры фильтрации можно разместить над списком товаров, над боковой панелью фильтрации и под горизонтальной панелью фильтрации.
Для пользователей удобнее, когда примененные фильтры отмечены и в боковой панели, и выведены в верхней части листинга.
Так пользователю будет понятно, на основании чего сделана выборка. Ему не придётся выискивать проставленные галочки в фильтре, чтобы удалить их. Достаточно будет удалить их над выдачей. К примеру, если среди прочих свойств телевизоров пользователь выбрал телевизор определенного бренда и не нашел подходящие товары, он может сразу удалить бренд из списка параметров и получить выборку со всеми брендами.
Возможность сброса выбранных параметров фильтрации должна быть всегда. Лучше не располагать кнопку сброса фильтров рядом с кнопкой запуска фильтрации, чтобы пользователи меньше ошибались. Оптимально расположить ее над списком товаров, как на скриншоте выше.
Если нет возможности сбросить все значения фильтрации, пользователи прибегают к кнопке возврата на предыдущую страницу в браузере. И часто разочаровываются, ведь работа сайта не соответствует их ожиданиям — они думают, что останутся на той же странице, вернувшись в тот момент, когда они ещё не успели отфильтровать. А по факту загружается новый контент.
В нишах, где важно выбирать товар по определенным параметрам, но потенциальные покупатели не разбираются в этих параметрах, нужно объяснить их особенности. Например, для пары с большой разницей в весе нужно выбирать матрас с независимым пружинным блоком, но многие пользователи об этом не знают. На сайте matras.ru подсказки есть практически у всех характеристик. Нажав на знак вопроса рядом с характеристикой, получаем подсказку:
Если фильтрация товаров согласно выбранным параметрам занимает много времени, это раздражает пользователя — с высокой вероятность он не станет ждать и покупка не состоится. Сайты, которые долго обрабатывают запросы и соответственно обладают низкой производительностью, не любят и пользователи, и поисковые машины.
Перед блоком отфильтрованных товаров или возле него стоит выводить общее количество найденных позиций, чтобы пользователь оценил, нужно ли ему сузить или расширить параметры фильтрации.
Если пользователь после тщательного выбора критериев в фильтре видит вместо результатов «ничего не найдено», он разочаровывается. Зачастую вместо того, чтобы поработать с фильтрами еще, несостоявшиеся покупатели покидают сайт.
Решение — исключить параметр, ведущий к нулевой выдаче из списка доступных характеристик товара или отобразить его неактивным еще на этапе выбора. Возможно, этот параметр не имеет решающего значения для пользователя и он найдет подходящий товар в выдаче.
При выборе операционной системы iOS на ozon.ru несовместимые с системой параметры перестают отображаться — остаются только подходящие линейки и модели, которые попадут в отфильтрованный список товаров.
Пользователи чаще всего пользуются сортировкой по цене. Реализовать такую возможность нужно обязательно — причем как в формате «от дешевых товаров к дорогим», так и наоборот.
Сортировка по рейтингам — второй по популярности вид сортировки по данным Baymard Institute. Правда в большинстве случаев сортировка проводится по средней оценке и не учитывает количество оценок, что раздражает пользователей.
На рейтинги чаще всего обращают внимание, когда не уверены в выборе и хотят довериться опыту большого количества людей. Поэтому важно учитывать в сортировке и число проголосовавших. Количество оценок должно отображаться в сочетании со средним рейтингом.
Помогает покупателям, которые интересуются трендовыми вещами или, как в предыдущем случае, не разбираются в тематике и хотят увидеть, что заказывают другие. Популярность определяется количеством заказов.
Некоторые пользователи хотят увидеть в первую очередь новинки. Особенно это касается ниш, связанных с одеждой.
Еще один популярный способ сортировки — к нему прибегают те, кто хочет купить товар как можно выгоднее.
Наличие товара. Если часть товаров доступна только под заказ, дайте возможность отсортировать товары, которые можно купить сразу.
Это сортировка по любым параметрам, которые относятся только к конкретным категориям. Например, сортировка чемоданов по вместимости, жестких дисков по объему памяти или столов по длине, ширине, высоте — как в ИКЕА.
Такая сортировка — идеальное решение для пользователей, которые не хотят жестко отсекать значения с помощью фильтрации, но почему-то практически не предлагаемое интернет-магазинами.
Определить, какие параметры фильтра нужно реализовать в сортировке по категориям несложно: возьмите 3-5 самых важных параметров в каждой категории и превратите их в параметры сортировки.
Пара нюансов сортировки товаров:
Чтобы решить, какую сортировку реализовать по умолчанию, можно опросить клиентов или посмотреть в Google Analytics, как сортирует товары большинство пользователей.
Расположение фильтра в сайдбаре — привычное решение, но горизонтальный фильтр может работать лучше. Пользователи часто игнорируют боковой фильтр из-за баннерной слепоты и принимают сортировку за единственно возможный инструмент работы с сужением выборки товаров. Это приводит к тому, что посетители уходят с сайта с пустыми руками.
Горизонтальная панель может объединять инструменты фильтрации и сортировки — это хорошо сказывается и на обнаружении инструментов, и на удобстве использования, так как пользователю проще сосредотачивать внимание в одном месте. К тому же отсутствие фильтра в сайдбаре визуально расширяет список товаров и освобождает место для еще одной колонки в сетке листинга.
Размещая инструменты фильтрации и сортировки горизонтально в один ряд, можно реализовать визуальное отличие, как на lamoda.ru:
При всем удобстве, горизонтальные фильтры имеют недостатки:
Поэтому горизонтальная фильтрация и сортировка подходит для ниш, не требующих использования большого количества фильтров — например, одежды, предметов интерьера. Для магазинов, продающих электронику или спорттовары, вариант вряд ли подойдет.
При использовании горизонтального расположения фильтра на сайте:
Грамотная реализация фильтрации — один из способов улучшить UX всего сайта, ведь хороший фильтр поможет пользователям найти товар и совершить покупку.
Теперь вы знаете, как должна работать фильтрация и сортировка товаров. О не менее важных элементах электронного мерчендайзинга можно почитать в статьях:
В следующий раз поговорим об элементах навигации интернет-магазина, улучшающих UX. Чтобы не пропустить статью, подписывайтесь на этот блог или наш телеграм-канал.
Ставьте лайк (+1), если было полезно.
спасибо за материал! последнее время как раз озадачен вопросом фильтрации и сортировки. приятно лишний раз утвердиться во мнении, что собственные наблюдения верны.
в имеющемся магазине на момент запуска казалось, что банальных параметров достаточно. но потом сильно вырос ассортимент, и фильтров стало не хватать. а переделывать то, что и так работает, всегда морально сложная задача. плюс, как главный пользователь своего сайта, находишь алгоритм, при котором выводится почти так, как хотелось. если тут нажать так, а тут выставить так, то выводит чуть лишнего, и что-то потерялось, но в принципе нормально )) да и есть же поиск! понятно, что у покупателей другое мнение.
сейчас на другом проекте пытаюсь продумать наперёд. сомневался, не слишком ли я перегибаю с количеством параметров и вариантов вывода. но, судя по всему, нет.
единственный «конструктив по контенту» касаемо горизонтального фильтра. кроме приведенной в пример ламоды, ни у кого его и не припомню. от горизонтальных меню принято было уходить по тем же причинам, что сильно ограничиваешь себя сразу такими решениями. вдруг потом разрастется в ширину или выпадающий список, что еще хуже. такой вариант, мне кажется, подходит для обновления уже имеющегося магазина с устоявшимся ассортиментом и понятными требованиями к фильтрации. но для нового лично я буду закладывать привычный сайдбар.
Согласен, на первый взгляд сайты с горизонтальными фильтрами и не припомнишь, но дело не в том, что их мало, а в том, что они реализуются в основном на специализированных магазинах, где нет большого количества фильтров.
Если у вас есть определенные сомнения насчет горизонтального расположения, то возьмите на вооружение этот пример реализации: www.stoolgroup.ru
Таким образом вы покажете больше товаров на странице, все фильтры доступны по одному нажатию и не отвлекают от процесса покупки. Плюс такое решение хорошо адаптируется для мобильных устройств.
всегда забываю про четвертое измерение )) отличное решение, мне нравится!