Фильтры – отличный инструмент для сужения больших объемов контента и получения наиболее релевантных результатов. Но как убедиться, что они полезны, а не путают пользователя?
Эта статья – обзор результатов исследования и их последующего обсуждения в команде дизайнеров Zomato. Она в значительной степени основана на исследованиях юзабилити электронной коммерции Baymard и на статье Тьерри Мэйера о паттернах фильтрации и сортировки.
Лучшие практики фильтрации
Предоставьте фильтры по категориям
Универсальные фильтры сужают результаты по общим характеристикам, таким как цена, цвет или популярность. Однако мы должны также добавить фильтры, которые различаются в зависимости от категории. При покупке одежды это может быть «Обтягивающие» или «Завышенная талия» под категорией «Брюки», а при просмотре ресторанов, «Счастливые часы» или «Хорошо для танцев» под категорией «Ночная жизнь». Есть одно эмпирическое правило, чтобы выявить специфические для конкретной категории параметры: стоит включить все, что упоминается в описании продукта. 
Разрешите выбор нескольких элементов
Одной точки данных может быть недостаточно для принятия решения. Неважно знаем ли мы точно, что хотим (нас интересует ресторан, в котором есть столики на улице, разрешается вход с домашними животными и есть вегетарианские блюда), или мы знаем только то, чего не хотим (нас не интересует ресторан с громкой музыкой), имеет смысл разрешить выбор нескольких фильтров сразу. Это позволит пользователю быстро и комфортно сузить свой поиск. Кроме того, возможность выбора нескольких вариантов лучше подходит для более медленных соединений. Пользователей раздражает, когда они выбирают два или более фильтров, а страница медленно перезагружается с каждым выбором.
Используйте реальные слова
Фильтры должны быть смоделированы на основе фактического поведения пользователей. Подумайте, как кто-нибудь спросит продавца о платье, или как группа друзей выбирает дом для отпуска. Язык, используемый для моделирования этих вариантов, должен быть языком, используемым в фильтре. Например, когда вы пойдете в магазин одежды, вы вряд ли попросите платье «Fit & Flare», «Shift» или «Bodycon». Тем не менее, это фильтры в интернет-магазине Chumbak. Нам было бы проще просматривать всю одежду и мысленно отмечать, что подходит, а что нет (эта слишком короткая, а эта с длинными рукавами...). В этом случае доступно только 35 товаров, но, если будет больше результатов, то ими будет трудно оперировать.
Отображайте применяемые фильтры
Обычно либо показывают применяемые фильтры в исходном положении, либо в отдельном разделе «Примененные фильтры». Исследования говорят нам, что лучше оба варианта сразу. Когда пользователи хотят отменить выбор фильтра, они сначала будут искать там, где они выбирали его. Не найдя там фильтр, пользователи будут дезориентированы. С другой стороны, сохранение выбранных фильтров в отдельном разделе дает пользователям быстрый способ проверки применяемых в настоящее время фильтров и простой способ одновременного удаления нескольких фильтров. Kulture Shop удобно добавляет раздел «Currently shopping by», а также сохраняет фильтры в исходном положении в выпадающем меню. 
Убедитесь, что изменения фильтра - это отдельные события в браузере
Поскольку при использовании фильтров содержание страницы меняется, кажется, что это несколько «страниц», а не одна страница с разными фильтрами. Поведение браузера должно соответствовать этому восприятию. Если пользователь хочет вернуться к предыдущему выбору фильтра, нажатие на стрелку «Назад» не должно выводить его на совершенно другую страницу.
Паттерны фильтрации и сортировки
Дизайн-решения для фильтров будут зависеть от контекста, от числа параметров, от типа пользователей.
Фильтрация или сортировка?
Теоретически это разные вещи: сортировка организует контент в соответствии с определенным параметром, фильтрация удаляет его из представления. Однако, исследования показывают, что для пользователя результат примерно эквивалентен: оба варианта отображают наиболее релевантный контент в соответствии с их критериями. Во время сеансов пользователей Baymard сообщает, что некоторые люди используют слова «сортировка» и «фильтрация» взаимозаменяемо. Сортировка имеет смысл с фильтрами одного и того же типа (например, «Цена»). Это позволяет пользователям просматривать весь диапазон (путем сортировки цены от низкой к высокой), а не выбирать конкретный диапазон цен (например, $0-20, $20-40...). Фильтрация – это как эхолот для фильтров, которые могут быть взаимоисключающими. Даже если мы сможем подобрать штаны по критерию «посадка по фигуре», то джегинсы в топе и мешковатые джинсы (были популярны в начале 2000-х) внизу списка, не особо помогут пользователю. Обычно используется комбинация обоих вариантов: боковая панель фильтрации в паре с инструментом сортировки сверху. Это подводит нас к следующему вопросу...
Боковые панели и панели инструментов (десктопная версия сайта)
Интерфейс фильтрации на боковой панели слева – это золотой стандарт десктопных версий веб-сайтов. Его легче просматривать, и он может вмещать большее количество фильтров, поскольку не ограничивается шириной страницы. 
Паттерны фильтрации для мобильных устройств
Тьерри Мэйер уже проделал большую работу, рассмотрев преимущества и варианты использования всех типов мобильных фильтров, поэтому я просто кратко их перечислю:
- Слайдовая фильтрация. Вид фильтра, который частично перекрывает результаты поиска. Полезно следить за тем, что фильтруется, но не рекомендуется использовать для длинных наборов фильтров.
- Полноэкранная фильтрация. Вид фильтров на весь экран удобен при отображении длинных наборов фильтров, поскольку обеспечивает более целенаправленный опыт и позволяют использовать больше пространства экрана.
- Фильтрация результатов поиска. Результаты зависят от ввода пользователя. Если запрос слишком широк, предлагается набор категорий, чтобы сузить результаты. С другой стороны, если запрос конкретный, немедленно предоставляются результаты поиска.
- Сортировка. Опять-таки, что выбрать сортировку или фильтрацию – это дизайнерское решение, которое должно соответствовать контексту. Мэйер также указывает, что ограниченное пространство мобильных устройств может играть в пользу сортировки.
- Разделяйте различные выборы. Решения верхнего уровня, которые должны выполняться всеми пользователями, должны быть отделены от фактической фильтрации.
Фильтры без фильтра
По мере того, как мы все больше узнавали о фильтрах, Aiswarya Kolisetty и я согласились с тем, что в некоторых случаях может оказаться целесообразным отображать соответствующие результаты, не прибегая к «традиционной» фильтрации.
Предварительный выбор во время обучения новых пользователей
Некоторые сервисы предлагают новым пользователям выбрать определенные варианты для фильтрации контента, который они будут видеть в будущем. Например, Medium позволяет пользователям выбирать интересные им темы. Лента новостей будет отражать этот выбор. Это разумный выбор, поскольку интересующие пользователей Medium темы вряд ли будут радикально меняться каждый раз, когда они открывают сайт.
Сначала отображайте наиболее используемые параметры
Можно избежать повторяющихся задач поиска, указав наиболее распространенные параметры поиска. Мы можем ввести любой пункт назначения в приложении Uber. Но сохраненные и наиболее часто используемые направления всегда под рукой, и удобно размещены в начале результатов поиска.
Предоставьте различные представления для мысленной фильтрации
Различные варианты интерфейса обладают разными возможностями. Вид карты помогает пользователям мысленно фильтровать контент по местоположению, тогда как вид списка позволяет пользователям просматривать другие характеристики. Например, возьмем Карты Google. Поиск кафе на карте имеет смысл, когда основное внимание уделяется географическому положению. Вид списка более уместен, когда решение зависит от других факторов (например, оценка, национальная кухня...).
Предсказывая будущее
AI и машинное обучение могут использоваться для уменьшения усилий, предвидя намерение пользователя.
Перевод статьи Laura Cunha
Найстарші коментарі (0)