Сегодня поговорим о том, как можно улучшить фильтр в интернет-магазине.
Посмотрите на фильтр, с которым будем работать. Может, у вас уже возникнут идеи, как сделать его удобней :)
Список предложений
1. Фильтрацию по цене необходимо сделать первой – это наиболее часто используемый тип фильтрации. За ней должна идти марка (бренд), затем тип продукта, после – все остальные параметры.
2. При выборе какого-либо параметра для фильтрации желательно показывать количество подходящих вариантов.
Еще более удобный пример, там можно кликнуть прямо по всплывающему ярлычку.
3. Фильтрация без необходимости нажатия на кнопку «применить» (ajax-фильтр без перезагрузки страницы) также хорошая идея. Примеры работы можно посмотреть тут:
4. Очень часто (2-й по популярности тип фильтрации) пользователи выбирают товар по бренду (это заметно по большому количеству брендовых запросов в Метрике). Упростить пользователям поиск можно с помощью вывода фильтра брендов из основного фильтра на более заметное место.
5. Также, для широких товарных групп имеет смысл выносить фильтрацию по применению, как это сделано тут.
6. Фильтр нужно дополнительно выделять, чтобы он визуально был более заметен для пользователей. Это можно сделать с помощью цветовой подложки, либо с помощью блокового выделения, либо с помощью отделения контуров.
Наш фильтр (посмотрим на него повнимательнее) сильно сливается с контентом, что увеличивает скорость и удобство считывания информации на странице.
7. Само слово «Фильтр» перед фильтром можно убрать – всем и так понятно, что это фильтр. А меньшее количество лишней информации на странице способствует меньшему распылению внимания посетителя сайта.
8. Числовые значения лучше делать «бегунками», как у цены, – это позволяет пользователю задавать более точные и гибкие диапазоны необходимых ему параметров.
9. Общая логика фильтрации по «Акции» и «Лучшей цене» непонятна. «Лучшая цена» это разве не акция? «Акция» не подразумевает, что цена на товар лучшая? Возможно, имеет смысл ограничиться одним параметром для фильтрации − «Наличие скидки».
10. Блок фильтра для десктопной версии лучше сделать «плавающим» – то есть сделать так, чтобы при скроллинге товаров он всегда оставался в поле зрения пользователя, а не прокручивался вместе с контентом страницы. Пример реализации
Плавающим может быть не весь фильтр, а только кнопки его применения и очистки. Пример такого подхода
11. Категории фильтра лучше сделать сворачиваемыми, чтобы пользователь мог отображать для себя только те параметры фильтрации, которые его интересуют в данный момент:
При помощи таких поправок покупателям станет удобней взаимодействовать с магазином :)
Хотите сделать интернет-магазин еще удобней?
Приходите к нам, мы знаем, что улучшить.