Фильтры — отличный инструмент для сужения больших объемов контента и получения наиболее релевантных результатов. Но как убедиться, что они полезны, а не путают пользователя?

Эта статья — обзор результатов исследования и их последующего обсуждения в команде дизайнеров Zomato. Она в значительной степени основана на исследованиях юзабилити электронной коммерции Baymard и на статье Тьерри Мэйера о паттернах фильтрации и сортировки.

Лучшие практики фильтрации

Предоставьте фильтры по категориям

Универсальные фильтры сужают результаты по общим характеристикам, таким как цена, цвет или популярность. Однако мы должны также добавить фильтры, которые различаются в зависимости от категории. При покупке одежды это может быть «Обтягивающие» или «Завышенная талия» под категорией «Брюки», а при просмотре ресторанов, «Счастливые часы» или «Хорошо для танцев» под категорией «Ночная жизнь».

Есть одно эмпирическое правило, чтобы выявить специфические для конкретной категории параметры: стоит включить все, что упоминается в описании продукта.

Myntra предлагает очень детализированные фильтры для каждой категории. Это особенно полезно, учитывая огромное количество товаров
Myntra предлагает очень детализированные фильтры для каждой категории. Это особенно полезно, учитывая огромное количество товаров
Еще одним преимуществом фильтров по конкретным категориям является то, что они просвещают людей, которые мало знают об отображаемом контенте.

Разрешите выбор нескольких элементов

Одной точки данных может быть недостаточно для принятия решения. Неважно знаем ли мы точно, что хотим (нас интересует ресторан, в котором есть столики на улице, разрешается вход с домашними животными и есть вегетарианские блюда), или мы знаем только то, чего не хотим (нас не интересует ресторан с громкой музыкой), имеет смысл разрешить выбор нескольких фильтров сразу. Это позволит пользователю быстро и комфортно сузить свой поиск.

Кроме того, возможность выбора нескольких вариантов лучше подходит для более медленных соединений. Пользователей раздражает, когда они выбирают два или более фильтров, а страница медленно перезагружается с каждым выбором.

Используйте реальные слова

Фильтры должны быть смоделированы на основе фактического поведения пользователей. Подумайте, как кто-нибудь спросит продавца о платье, или как группа друзей выбирает дом для отпуска. Язык, используемый для моделирования этих вариантов, должен быть языком, используемым в фильтре.

Например, когда вы пойдете в магазин одежды, вы вряд ли попросите платье «Fit & Flare», «Shift» или «Bodycon». Тем не менее, это фильтры в интернет-магазине Chumbak. Нам было бы проще просматривать всю одежду и мысленно отмечать, что подходит, а что нет (эта слишком короткая, а эта с длинными рукавами…). В этом случае доступно только 35 товаров, но, если будет больше результатов, то ими будет трудно оперировать.

интернет-магазин Chumbak

Отображайте применяемые фильтры

Обычно либо показывают применяемые фильтры в исходном положении, либо в отдельном разделе «Примененные фильтры». Исследования говорят нам, что лучше оба варианта сразу.

Когда пользователи хотят отменить выбор фильтра, они сначала будут искать там, где они выбирали его. Не найдя там фильтр, пользователи будут дезориентированы.

С другой стороны, сохранение выбранных фильтров в отдельном разделе дает пользователям быстрый способ проверки применяемых в настоящее время фильтров и простой способ одновременного удаления нескольких фильтров.

Kulture Shop удобно добавляет раздел «Currently shopping by», а также сохраняет фильтры в исходном положении в выпадающем меню.

Kulture Shop отображает фильтры в их изначальном положении, также, как и сверху страницы
Kulture Shop отображает фильтры в их изначальном положении, также, как и сверху страницы
Тем не менее, у Kulture Shop есть возможности для улучшения. Фильтры «Поиск по настроению / стилям / темам» — хороший вариант, но отдельные фильтры «Бунтарский» и «Сатирический» это уже чересчур. И, пожалуйста, не перезагружайте страницу всякий раз, когда я выбираю один фильтр! Это проблема при моем плохом интернет-соединении.

Убедитесь, что изменения фильтра — это отдельные события в браузере

Поскольку при использовании фильтров содержание страницы меняется, кажется, что это несколько «страниц», а не одна страница с разными фильтрами.

Поведение браузера должно соответствовать этому восприятию. Если пользователь хочет вернуться к предыдущему выбору фильтра, нажатие на стрелку «Назад» не должно выводить его на совершенно другую страницу.

Паттерны фильтрации и сортировки

Дизайн-решения для фильтров будут зависеть от контекста, от числа параметров, от типа пользователей.

Фильтрация или сортировка?

Теоретически это разные вещи: сортировка организует контент в соответствии с определенным параметром, фильтрация удаляет его из представления.

Однако, исследования показывают, что для пользователя результат примерно эквивалентен: оба варианта отображают наиболее релевантный контент в соответствии с их критериями. Во время сеансов пользователей Baymard сообщает, что некоторые люди используют слова «сортировка» и «фильтрация» взаимозаменяемо.

Сортировка имеет смысл с фильтрами одного и того же типа (например, «Цена»). Это позволяет пользователям просматривать весь диапазон (путем сортировки цены от низкой к высокой), а не выбирать конкретный диапазон цен (например, $ 0−20, $ 20−40…).

Фильтрация — это как эхолот для фильтров, которые могут быть взаимоисключающими. Даже если мы сможем подобрать штаны по критерию «посадка по фигуре», то джегинсы в топе и мешковатые джинсы (были популярны в начале 2000-х) внизу списка, не особо помогут пользователю.

Обычно используется комбинация обоих вариантов: боковая панель фильтрации в паре с инструментом сортировки сверху. Это подводит нас к следующему вопросу…

Боковые панели и панели инструментов (десктопная версия сайта)

Интерфейс фильтрации на боковой панели слева — это золотой стандарт десктопных версий веб-сайтов. Его легче просматривать, и он может вмещать большее количество фильтров, поскольку не ограничивается шириной страницы.

Facebook использует хорошую старомодную боковую панель на странице результатов поиска
Facebook использует хорошую старомодную боковую панель на странице результатов поиска
Однако, у него есть свои проблемы. Баннерная слепота может привести к тому, что боковая панель будет совершенно игнорироваться или пользователи заметят только параметры сортировки в верхней части и подумают, что это единственные параметры фильтрации.

Объединение инструментов сортировки и фильтрации в горизонтальной панели инструментов наверху может дать им большую наглядность.

Airbnb определил несколько фильтров, которые люди, используют чаще всего и удобно отображает их на горизонтальной панели инструментов. Все остальное спрятано в меню «Больше», которое раскрывается на весь экран.

airbnb

Однако этот вариант может не подходить для случаев, когда имеется множество параметров поиска без четкой иерархии, поскольку довольно неудобно перемещаться по множеству выпадающих списков.

Паттерны фильтрации для мобильных устройств

Тьерри Мэйер уже проделал большую работу, рассмотрев преимущества и варианты использования всех типов мобильных фильтров, поэтому я просто кратко их перечислю:

  • Слайдовая фильтрация. Вид фильтра, который частично перекрывает результаты поиска. Полезно следить за тем, что фильтруется, но не рекомендуется использовать для длинных наборов фильтров.
  • Полноэкранная фильтрация. Вид фильтров на весь экран удобен при отображении длинных наборов фильтров, поскольку обеспечивает более целенаправленный опыт и позволяют использовать больше пространства экрана.
  • Фильтрация результатов поиска. Результаты зависят от ввода пользователя. Если запрос слишком широк, предлагается набор категорий, чтобы сузить результаты. С другой стороны, если запрос конкретный, немедленно предоставляются результаты поиска.
  • Сортировка. Опять-таки, что выбрать сортировку или фильтрацию — это дизайнерское решение, которое должно соответствовать контексту. Мэйер также указывает, что ограниченное пространство мобильных устройств может играть в пользу сортировки.
  • Разделяйте различные выборы. Решения верхнего уровня, которые должны выполняться всеми пользователями, должны быть отделены от фактической фильтрации.

Фильтры без фильтра

По мере того, как мы все больше узнавали о фильтрах, Aiswarya Kolisetty и я согласились с тем, что в некоторых случаях может оказаться целесообразным отображать соответствующие результаты, не прибегая к «традиционной» фильтрации.

Предварительный выбор во время обучения новых пользователей

Некоторые сервисы предлагают новым пользователям выбрать определенные варианты для фильтрации контента, который они будут видеть в будущем.

Например, Medium позволяет пользователям выбирать интересные им темы. Лента новостей будет отражать этот выбор. Это разумный выбор, поскольку интересующие пользователей Medium темы вряд ли будут радикально меняться каждый раз, когда они открывают сайт.

Medium ntvfnbrb

Сначала отображайте наиболее используемые параметры

Можно избежать повторяющихся задач поиска, указав наиболее распространенные параметры поиска.

Мы можем ввести любой пункт назначения в приложении Uber. Но сохраненные и наиболее часто используемые направления всегда под рукой, и удобно размещены в начале результатов поиска.

uber

Предоставьте различные представления для мысленной фильтрации

Различные варианты интерфейса обладают разными возможностями. Вид карты помогает пользователям мысленно фильтровать контент по местоположению, тогда как вид списка позволяет пользователям просматривать другие характеристики.

Например, возьмем Карты Google. Поиск кафе на карте имеет смысл, когда основное внимание уделяется географическому положению. Вид списка более уместен, когда решение зависит от других факторов (например, оценка, национальная кухня…).

Карты Google

Предсказывая будущее

AI и машинное обучение могут использоваться для уменьшения усилий, предвидя намерение пользователя.

AI и машинное обучение могут использоваться для уменьшения усилий, предвидя намерение пользователя.