Упрощаем фильтр товаров в каталоге
![BigFilter BigFilter](/upload/medialibrary/ed1/y29mqnvojwdiljv70a11d524y4mim9j5/long_filter_2x_2.gif)
Типичный фильтр – километровый список свойств. В вебвизоре можно наблюдать ситуацию, когда покупатель сначала пытается воспользоваться фильтром: скролит страницу вверх–вниз в поиске нужных свойств, а после возвращается к каталогу и просматривает всё подряд. Видимо, людям легче просмотреть список товаров вручную, чем разобраться с длинной и сложной формой.
По нашим наблюдениям, при работе с фильтром основные сложности у покупателей возникают с длиной панели:
- Список свойств не помещается в экран. Сложно удержать памяти, где какое свойство находится, что включено, а что ещё нет.
- Из-за разворачивающихся списков положение пункта всё время меняется. Приходится многократно скролить страницу вверх–вниз в поисках нужного свойства.
- Сложно добраться до кнопки включения и отключения фильтра.
- При клике на фильтр разворачивается список его вариантов, опуская другие группы фильтра ещё ниже. Если развернуть все группы, высота панели может увеличиться в десятки раз.
Теперь давайте о том, как это исправить.
Прячем параметры в модальное окно
![FilterSize](/upload/medialibrary/799/x2xn8o3ha1r8rxmosbszggvxs72d3ydh/filter_mathematic_2x_1.png)
Чтобы фильтр стал компактнее (а в идеале вмещался в экран) спрячем длинный список с галочками в модальное окно:
![Epraktika-1](/upload/medialibrary/a25/sosrrgqj79fq2l3kii73tmxus3ajqzop/epraktika_filter_weight_before_2x.png)
Теперь на панели слева остались только названия свойств. А все параметры открываются в окне. Список стал не такой длинный и найти нужное свойство теперь проще.
Есть проблема. Чтобы найти товар нужного размера (душевую кабину в данном случае), приходилось открывать по очереди сначала «Длину», нажимать на кнопку, потом тоже самое повторять с параметрами «Ширина» и «Глубина». Шесть действий ради одного поиска.
Объединяем свойства
![epraktika-filter-weight-after@2x-2.png](/upload/medialibrary/4e9/gsy8azcpodhzu4lrznn0lwmxjnpckx06/epraktika_filter_weight_after_2x_2.png)
Объединим свойства «Длина», «Ширина» и «Высота» в одно окно «Размеры». Теперь покупателю достаточно открыть одно окно для поиска товара нужных габаритов. И панель свойств стала ещё меньше.
Заметьте, что после объединения разных свойств в одну группу функциональность фильтра остаётся прежней, но работать с каталогом стало намного проще.
Здравый смысл
![trial-filter](/upload/medialibrary/0a8/pkrxetvfed08w03vm09gu10yzvsbxuxz/trial_filter_bysicle2_2x_1.png)
Часто интернет-магазины добавляют в фильтр как можно больше свойств. Хочется угодить даже самому дотошному покупателю. Но покупатель не разбирается в товаре так же хорошо как вы. Бо́льшей части покупателей достаточно основных параметров.
«ТриалСпорт» увлекся функциональностью фильтра и забыл о здравом смысле. Покупателю предлагают выбрать покрышки по размеру скидки и году коллекции. Единственное по настоящему значимое свойство «Диаметр» теряется в списке.
Выводы
Покупателю сложно найти нужное свойство в длинном списке. Поэтому непопулярные свойства убирайте, нужные объединяйте в группы, а параметры прячьте в модальные окна.
партнёр
Битрикса
на рынке
в течение
30 минут
человек
в штате
Золотой
партнёр
Битрикса
9 лет
на рынке
Реагируем
в течение
30 минут