I am ready for a long road flight for work with a week- or months-long projects.
ФИЛЬТРАЦИЯ ЛИСТИНГА ТОВАРОВ
ЛУЧШИЕ ПРАКТИКИ UX/UI В E-COMMERCE
155
ГАЙДЛАЙНОВ
Почти всегда фильтры – неотъемлемая часть листинга товаров. Без них мы просто заблудились бы в большинстве интернет-магазинов. И от того, насколько хорошо они спроектированы, сильно зависят конверсия и customer satisfaction. Сегодня поговорим о фильтрах – как всегда, детально и со множеством примеров.
Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. Подпишитесь на выход новых статей в Telegram и делитесь этим постом с друзьями и коллегами.
Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. Подпишитесь на выход новых статей в Telegram и делитесь этим постом с друзьями и коллегами.
СТРУКТУРА СТАТЬИ
Для удобства статью я разбил на блоки. Так будет легче для восприятия. Каждый из блоков содержит в себе детальный чек-лист.
29 детальных чек-листов по e-commerce доступны в моем Telegram.
1. ОБЩИЕ РЕКОМЕНДАЦИИ
Фильтры применяются
Фильтрация листинга товаров позволяет клиенту легче находить то, что нужно. Это самый базовый момент. Не добавил бы его, если бы не нашел анти-пример:
Фильтры видны по умолчанию
Особенно если товаров в листинге много, не стоит прятать фильтры за незаметной кнопкой или ссылкой: они заслуживают отдельного блока в рамках страницы.
Расположены слева
В большинстве случаев фильтры располагаются слева от листинга товаров – и именно там их будет искать большинство клиентов.
Вверху страницы
Однако если фильтров немного, их можно расположить в верхней части страницы, фиксировать в шапке при прокрутке и отображать при приближении курсора.
Вверху страницы + slide bar
Из-за ограничения пространства в верхнюю часть страницы можно вынести ключевые фильтры, а весь список фильтров сделать доступным в формате slide bar'а.
Фиксация низа при скролле
Если листинг длиннее блока фильтров, при прокрутке страницы фиксируйте фильтры в состоянии максимальной прокрутки, чтобы к ним потом было легче вернуться.
Без фиксации верха при скролле
При этом фиксировать верхнюю границу фильтров при прокрутке не стоит. Иначе вы просто не сможете добраться до фильтров, не прокрутив листинг до конца.
Блок не занимает много места
Фильтры – важный, но не основной элемент листинга товаров. Поэтому не стоит делать его слишком большим – иначе он будет «съедать» полезное пространство у листинга.
Важные фильтры в начале
Расположите ключевые, наиболее популярные фильтры в начале блока, чтобы клиенту не приходилось их долго искать.
Фильтр vs. категория
Проектируя состав фильтров по листингу, убедитесь, что они не излишни и не дублируют выбранную клиентом категорию товаров.
Фильтры не дублируются
Особого смысла в дублировании фильтров нет: это лишь перегрузит интерфейс и создаст дополнительную когнитивную нагрузку на клиента.
Группировка фильтров
Особенно если фильтров много, хорошей практикой будет разбить их на группы по смыслу, чтобы облегчить для клиента поиск нужного фильтра.
Отступы между фильтрами
Добавьте между фильтрами отступы, достаточные для того, чтобы воспринимать каждый из них, как обособленный элемент интерфейса.
Свертывание фильтров
Если фильтров много, реализуйте функцию свертывания, чтобы клиент быстро мог ознакомиться с их составом и выбрать нужный.
Частичное свертывание
Чтобы область с фильтрами не занимала много места, часть второстепенных фильтров можно свернуть по умолчанию, в то время как ключевые оставить раскрытыми.
Кнопки свертывания привычны
Сделайте кнопки свертывания привычными, иначе клиент просто не поймет их функцию. Иконка шеврона хорошо для этого подойдет. А вот такое может вызвать вопросы:
Анимация свертывания
Анимируйте свертывание и разворачивание списков значений по фильтрам: это более приятно глазу, чем резкая прерывистая смена интерфейса.
2. ТИПЫ ФИЛЬТРОВ
Базовые фильтры
Убедитесь, что листинг можно отфильтровать по наиболее распространенным параметрам, таким как цена, бренд, рейтинг.
Категорийные фильтры
Для каждой категории товаров в листинге предусмотрите наличие специфичных фильтров, релевантных именно для нее.
Характеристики в карточках
Состав фильтров, как минимум, должен покрывать характеристики, которые отображаются в карточках товаров.
Тематические фильтры
Не ограничивайтесь только фильтрами по характеристикам, дополните их тематическими фильтрами: поводом, сезоном, стилем, образом жизни, диетой, типом характера и т.д.
Фильтры соответствия
В листингах аксессуаров и товаров-комплиментов не забудьте добавить фильтры, которые позволяли бы выбрать основной товар, под который они подходят.
Наличие товара
Отсутствующие товары можно размещать в листинге, если совместить их с оповещениями о поступлении. Но у клиента должна быть возможность быстро их отфильтровать.
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram
3. НАЗВАНИЯ ФИЛЬТРОВ
ОБЩИЕ МОМЕНТЫ
Выделяются
Выделяйте названия фильтров на фоне значений: это можно сделать за счет жирности, чуть более контрастного шрифта и чуть большего размера.
Понятны
Названия фильтров не должны вызывать вопросов и должны быть понятны для клиента. В противном случае их полезность будет ограничена.
Не обрезаются
Названия фильтров должны быть краткими и не должны обрезаться. Если заставлять клиента додумывать, что это за фильтр, есть риск, что он им вообще не воспользуется.
Содержат единицы измерения
Там, где это необходимо, снабдите фильтры единицами измерения, чтобы клиенту не приходилось гадать по этому поводу самому.
Нет функции – нет кликабельности
Если при клике по названию фильтра ничего не происходит, не нужно делать курсор при наведении кликабельным: это лишь введет клиента в заблуждение.
ПОЯСНЕНИЯ К ФИЛЬТРАМ
Используются
Если вы используете специфичные фильтры, которые могут вызвать вопросы, снабдите их пояснениями в формате контекстных подсказок.
Tooltip'ы унифицированы
Если вы используете пояснения к фильтрам, располагайте и отображайте символы подсказки единообразно.
Tooltip'ы не пикселят
Базовый момент: как и любые иконки, контекстные подсказки не должны пикселить. Загружайте их в векторной графике, чтобы свести риски к нулю.
Открытие по клику
Исключите риск непреднамеренного отображения подсказки при наведении на нее курсора по ошибке: открывайте ее по клику.
Текст подсказок краткий
Добавляя подсказку к фильтру, не думайте, что клиент будет готов читать «Войну и мир» в рамках контекстной подсказки. Сделайте их краткими. А вот такого лучше избегать:
Подсказки исчерпывающие
При этом не стоит ограничиваться текстом для галочки. Пояснения должны давать четкое представление о том, что это за параметр и на что он влияет.
Подсказки без прокрутки
Если контент не помещается в небольшую подсказку, не используйте в ней прокрутку. Лучше сошлитесь на более детальный контент (ссылку открывать в новой вкладке).
Выравнивание по левому краю
Центрированный текст в подсказках – да и много где еще – читается гораздо тяжелее, чем тот, что выровнен по левому краю. Вот так лучше не делать:
Задать вопрос
Если у клиента после прочтения описания фильтра остались вопросы, ему можно предложить задать их или дать ссылку на более детальный FAQ или гайд.
Пропадает без проблем
Сделайте так, чтобы подсказка пропадала при клике вне ее или скролле страницы. Эти действия – явные индикаторы того, что клиент дочитал и хочет ее закрыть.
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram
4. БЫСТРЫЕ ФИЛЬТРЫ
Используются
Разместите популярные подборки и категории в виде быстрых фильтров, доступных в один клик. Это привлечет внимание клиента к предложениям и сократит время на поиск.
Только ключевые фильтры
Быстрые фильтры привлекают много внимания. Поэтому воздержитесь от того, чтобы добавить в эту область что-то второстепенное.
Визуализация
Чтобы привлечь больше внимания и облегчить восприятие, снабдите быстрые фильтры релевантными пиктограммами или картинками.
Фиксация при скролле
Быстрые фильтры подкатегорий можно фиксировать в виде вкладок в шапке и сделать доступными при любом уровне скролла страницы, тем самым облегчая навигацию.
Целевой листинг не пустой
Контролируйте наличие товаров в подборках быстрых фильтров: если клиент активирует фильтр и столкнётся с пустым листингом, позитивной реакции это точно не вызовет.
Навигация по каталогу
Быстрые фильтры можно использовать для удобной навигации по каталогу – еще до того, как клиент перейдет к листингу товаров.
Фильтры на уровне каталога
Некоторые игроки дают клиенту возможность выбрать ингредиенты, к которым он чувствителен, и помечают товары листинга, которые их содержат. Молодцы.
5. ФИЛЬТРЫ СПИСКА ЗНАЧЕНИЙ
ЗНАЧЕНИЯ
Понятны
Значения фильтра не должны вызывать каких-либо вопросов. Значения не понятны – ими меньше пользуются – ниже шансы на то, что клиент найдет для себя что-то подходящее.
Соответствуют листингу
Если клиент уже перешел в листинг товаров в конкретной категории, не стоит в фильтрах предлагать ему товары из других категорий:
Соответствуют фильтру
Регулярно проверяйте, что у вас отображается в значениях по всем фильтрам. Если этот момент недооценивать, можно получить вот такие результаты:
Легко читаются
Базовый момент: сделайте так, чтобы значения в фильтре легко читались, и клиент не ломал глаза, пытаясь найти нужное.
Не дублируются
Регулярно контролируйте качество данных по товарам и своевременно зачищайте дублирующиеся значения. Вот с таким клиент сталкиваться в принципе не должен:
Не обрезаются
Значения должны быть видны полностью. Если нужно, переносите на новую строку. Но как будут пользоваться, например, вот этим, не понятно:
На одном языке
При локализации предложения не забывайте и про фильтры. Если значения не общепринятые, у части клиентов могут возникнуть с этим проблемы.
Единый регистр
Еще один базовый момент, но встречается у многих. Регистр не должен меняться от значения к значению, от фильтра к фильтру, если на это нет веских причин.
Без подчеркиваний
Воздержитесь от подчеркивания каждого из значений фильтра. То, что на них можно кликнуть, и так понятно. А подчеркивания только перегрузят интерфейс.
