ИНТЕРНЕТ-МАГАЗИН / НАВИГАЦИЯ
Фильтр нужен, чтобы сократить выбор по важным для покупателя признакам. Разберем, какие параметры показывать, как обрабатывать сочетания и что учесть на телефоне.
Краткий ответ. Хорошие фильтры соответствуют товарам категории, используют понятные значения и показывают результат выбора. Начните с характеристик, по которым действительно сравнивают товары, затем проверьте сочетания, отсутствие результатов и работу панели на мобильном.
Фильтр — это ответ на вопрос «чем эти товары отличаются для меня?». В смартфонах такими признаками могут быть цена, производитель, память и состояние; в обуви — размер, цвет и назначение. Параметр «объем памяти» не поможет покупателю кроссовок, а размер одежды бессмысленен в категории телевизоров.
Начните с разговоров с продавцами, поисковых запросов внутри магазина и характеристик, которыми люди пользуются при сравнении. Для каждой категории составьте короткий список обязательных признаков, а затем проверьте заполненность данных. Фильтр по материалу бесполезен, если материал указан только у части товаров.
Не обязательно выводить все признаки сразу: самые полезные можно показать первыми, остальные свернуть. Выбор зависит от ассортимента. Для десяти почти одинаковых товаров может хватить сортировки и пары параметров; для большого каталога потребуется более подробная навигация.
Система не поймет, что «черный», «чёрный» и «black» означают один цвет, если значения в каталоге хранятся разрозненно. До проектирования панели договоритесь об единицах измерения, допустимых значениях и правилах заполнения. Для диапазона цены нужны числа, а не строки вроде «от 5 тыс.».
Составьте таблицу: категория, характеристика, тип значения, источник данных и ответственный за обновление. Например: «ноутбуки — объем памяти — число в ГБ — учетная система». Проверьте, как поступать с отсутствующим значением: такие товары не должны случайно попадать в неподходящий результат.
Если данные приходят от нескольких поставщиков, настройте сопоставление значений. Иначе покупатель увидит несколько одинаковых цветов и не поймет, какой выбрать. Чистота исходных данных важнее количества переключателей в интерфейсе.
Объясним на условном примере. В категории футболок покупатель выбирает черный и синий цвета, а затем размер M. Обычно ожидается список футболок размера M любого из двух выбранных цветов. Но в некоторых категориях логика может отличаться — ее нужно проверить на самих товарах и явно обозначить.
После выбора покажите активные условия над результатами или рядом с панелью. Человек должен иметь возможность снять один фильтр и сбросить все условия. Если применяется диапазон, показывайте его границы и единицы измерения. Не меняйте выбор незаметно, когда посетитель возвращается из карточки товара.
Количество найденных товаров помогает понять результат. При сложном каталоге важно заранее решить, когда оно обновляется: после каждого изменения или после кнопки «Показать». Какой бы вариант вы ни выбрали, посетитель должен видеть, что происходит, особенно при задержке ответа.
Нулевой результат не должен выглядеть как ошибка сайта. Покажите выбранные условия и предложите снять отдельный параметр или сбросить все. Если система может честно предложить близкие товары, подпишите, какое условие изменено: например, «другие размеры этой модели».
Не подменяйте результат похожими товарами без объяснения. Человек, выбравший определенную модель и объем памяти, не должен принять за нее другую. Проверьте также ситуацию, когда товаров много, но часть характеристик не заполнена: причина пустой выдачи может находиться в данных, а не в самом ассортименте.
На небольшом экране панель часто открывается отдельным слоем. В ней нужны заголовок, закрытие, список выбранных условий, сброс и заметная кнопка применения с количеством результатов, если оно доступно. После закрытия человек должен оказаться в понятном месте каталога.
Проверьте длинный список значений, ввод цены, прокрутку и возврат к результатам одной рукой. Плавать поверх важной кнопки применению не должны ни чат, ни баннер. Нужен и доступ с клавиатуры: фокус должен перемещаться предсказуемо, а подписи элементов — оставаться понятными.
В редизайне kdmarket.ru одной из задач была согласованность каталога, карточек и адаптива. При проектировании фильтров этот же подход помогает не отрывать выбор параметров от списка товаров и мобильного сценария.
Каждое сочетание параметров может создавать отдельный URL. В большом каталоге таких адресов становится очень много. Заранее решите с SEO-специалистом, какие подборки имеют самостоятельный спрос и полезное содержание, а какие нужны только для работы фильтра.
Google отдельно объясняет, как управлять обходом URL фасетной навигации. Общая рекомендация — не тратить обход на ненужные сочетания и сохранять доступ к важным категориям и карточкам. Конкретное решение для robots.txt, canonical и адресов зависит от структуры магазина: закрывать все фильтры по одному шаблону без проверки рискованно.
После фильтра покупатель попадает на карточку товара. Полезно проверить оба этапа подряд: корректный список еще не помогает, если на карточке невозможно уточнить нужный вариант.
3UGENE / ОБСУДИМ ЗАДАЧУ
Разберем ваш ассортимент и подберем структуру категорий, фильтры и сценарии выбора под реальные товары.