Фильтры - отличный инструмент для упрощения восприятия больших объемов данных и получения наиболее подходящих результатов. Как мы можем убедиться, что они полезны, а не путают?
Это в значительной степени основано на исследованиях удобства использования интернет магазинов институтом Баймарда и на статье "шаблоны фильтрации и сортировки" Тьерри Мейера .
"Best practices" фильтрации
Фильтры по категориям
Универсальные фильтры сужают результаты поиска по общим характеристикам, таким как цена, цвет или популярность. Однако, мы также должны включать фильтры, которые подходят под определенную категорию. Например, «Телосложение» или «Высота талии» для штанов, или при просмотре кафе и ресторанов: «Для отдыха», «Можно потанцевать», «Ночная жизнь».
Одно эмпирическое правило, чтобы выявить специфические для конкретной категории параметры: все, что упоминается в описании продукта, стоит выделить.
Фильтры, специфичные для какой-то конкретной категории, обладают таким преимуществом, что они являются "точкой опоры" для людей, у которых недостаточно опыта или знаний для выбора из ассортимента товара.
Дайте людям множественный выбор
Решения могут принимаются основываясь только на одной характеристике продукта. Знаем ли мы точно, чего хотим (нас интересует ресторан, в котором есть столики на улице, и разрешается приходить с домашними животными, и есть вегетарианская кухня), или мы знаем только то, чего мы не хотим (нас не интересуют заведения с громкой музыкой), имеет смысл дать на выбор сразу несколько параметров. Это позволит пользователю быстро и комфортно найти то, что нужно именно ему.
Выбор нескольких вариантов также облегчает использование при медленном соединении. Ведь вы не хотите получить разочарованного клиента, который пытается выбрать два и более фильтров, только для того чтобы увидеть, как после каждого страница перезагружается.
Используйте настоящие слова
Фильтры должны быть смоделированы на основе фактического поведения пользователей. Подумайте, как кто-то спрашивает продавца в магазине о платье, или как группа друзей выбирает дом для отпуска. Язык, используемый для этих ситуаций, должен быть языком вашего фильтра.
Например, когда вы ходите по магазинам одежды, вряд ли попросите платье «Fit & Flare», «Shift» или «Bodycon». Тем не менее, это фильтры в интернет-магазине Chumbak. Нам было бы проще просматривать всю их одежду и мысленно отметить, что актуально, а что нет (это слишком короткое, это с длинными рукавами ...). В данном случае доступно лишь 9 элементов, но с большим количеством результатов это станет неуправляемым.
Не боитесь избыточности при отображении фильтров
Обычно на сайтах показываются список применяемых фильтров в позиции по умолчанию, либо в отдельном блоке «Примененные фильтры». Исследования показывают нам, что лучше использвать сразу оба.
Когда пользователи хотят убрать фильтр, они сначала будут искать где он находится в списке. Но не найдя его это вызывает серьезные неудобства.
Сохранение выбранных фильтров в отдельном разделе дает пользователям быстрый способ проверки применяемых в настоящее время фильтров и простой способ одновременного удаления нескольких фильтров.
Kulture Shop удобно добавляет раздел «В настоящее время по магазинам», а также сохраняет позицию в выпадающем меню фильтров.
Тем не менее, у Kulture Shop есть над чем поработать. Фильтры "Поиск по настроению/ Стилю / Тематике" - хороший вариант, но отдельные фильтры немного чересчур, например "Бунтарский" или "Язвительный". Пожалуйста, не издевайтесь над моим словарным запасом, каждый раз когда я ставлю только одну галочку! Я не могу посмотреть что в них, не загружая страницу дважды при моем медленном интернете.
Убедитесь что изменение фильтра это новое событие в браузере
Поскольку содержание страницы меняется, а при использовании фильтров воспринимается - как несколько «страниц», а не одна страница с разными фильтрами.
Поведение браузера должно этому соответствовать - если пользователь захочет вернуться к предыдущему выбору фильтра, клик на кнопку "назад" не должен выводить его на совершенно другую страницу.
Шаблоны фильтрации и сортировки
В UX всегда есть зависимость от того что - фильтры не являются исключающими. Проектные решения для фильтров будут зависеть от контекста, количества параметров и от типа пользователей.
Фильтрация или сортировка?
Теоретически, они отличаются: сортировка организует контент в соответствии параметрами, фильтрация же скрывает его вовсе.
Тем не менее, исследования показывают, что для пользователей результат примерно одинаковый: Для вывода наиболее релевантного контента в соответствии с их критериями. Во время сеансов пользователей Baymard даже сообщает, что некоторые люди используют «сортировку» и «фильтрацию» взаимозаменяемо.
Сортировка имеет смысл с фильтрами одного и того же типа (например, «Цена»). Это позволяет пользователям проходить весь диапазон (путем сортировки цены от низкого до высокого), а не заставляя их выбирать конкретные ограничение выбирая диапазон от 100 р. до 1000 р.
Фильтрация своего рода является эхолотом опций других фильтров, которые могут быть взаимоисключающими. Даже если мы сможем подобрать джинсы по фасону и увидев узкие в топе, и мешковатые из нулевых снизу. Это не будет особо полезно.
Обычно используется боковая панель фильтрации в паре с инструментом сортировки сверху. Что вызывает у нас следующие проблемы ...
Боковые панели и панели инструментов (Десктоп)
Фильтры на боковой панели слева - это золотой стандарт на веб-сайтах. Легче выбирать, и вмещает большее количество фильтров, поскольку он ограничен только шириной страницы.
Однако, у этого есть и свои проблемы. Баннерная слепота может привести к тому, что боковая панель будет игнорироваться, вообще, или приведет к использованию только сортировки в верхней части страницы и подумайте, что случиться если это единственные параметры фильтрации.
Скомбинируйте инструменты сортировки и фильтрации в горизонтальную панель инструментов сверху, чтобы сделать их более заметными.
Airbnb заметили, что существует всего несколько фильтров которые люди используют чаще всего и разместили их на горизонтальной панели. А все остальное спрятано в меню "More filters", которое раскрывается на весь экран.
Однако, этот вариант может не подходить для случаев, когда есть множество параметров для поиска без четкой иерархии, поскольку было бы довольно неудобно перемещаться по множествам выпадающих списков.
Шаблоны фильтров для мобильных
Тьерри Мейер уже проделал большую работу, рассматривая достоинства и варианты использования каждого типа фильтров на мобильных устройствах, поэтому я кратко перечислю их:
"Выезжающий" фильтр - просмотр фильтра, который частично перекрывает результаты поиска. Помогает следить за тем, что фильтруется, но не рекомендуется использовать слишком большие наборы фильтров.
Фильтр во весь экран - Полноэкранный вид фильтров удобен при отображении больших наборов фильтров, поскольку он обеспечивает возможность сфокусироваться и позволяет использовать экран эффективнее.
Фильтрация результатов поиска - результаты зависят от ввода пользователя. Если запрос слишком большой, предложите набор категорий, чтобы уменьшить выборку. Но с другой стороны, если запрос достаточно точный, лучше сразу отобразить результаты поиска.
Сортировка - Опять же, выбор сортировка или фильтрация - это чисто дизайнерское решение, которое должно быть продиктовано контекстом. Мейер также указывает, что ограниченное пространство на мобильных устройствах может сыграть в пользу сортировки.
Выбирайте разные варианты раздельно - Выбор, который должны совершить все пользователи. Должен быть отделен от основной фильтрации.
"Фильтрация фильтров"
В то время как мы больше узнавали об фильтрах, было замечено, что в некоторых случаях может оказаться целесообразным подобрать подходящие результаты, не прибегая к «традиционным» фильтрам.
Предварительный выбор
Некоторые сервисы, предлагают своим новым пользователям выбрать определенные варианты, которые будут фильтровать контент, который они будут видеть.
Например, позволяет выбрать пользователю темы, представляющие интерес для него лично, и новостная лента будет соответствовать его выбору. Это обоснованный выбор, поскольку интересующие пользователя темы, вряд ли будут меняться каждый раз когда он открывает сайт.
Отображение наиболее часто используемых параметров.
Можно избежать частого ввода поисковых запросов, указав наиболее распространенные.
Мы можем ввести любой пункт назначения в приложении Uber. Но сохраненные и наиболее часто используемые сразу помещаются в результаты поиска.
Графическое отображение для фильтрации "в уме"
Разные варианты UI, имеют разные преимущества. Вид карты помогает пользователям мысленно отфильтровать по местоположению, в то время как отображение списка, позволяет посмотреть и другие характеристики.
Например, Google карты. Поиск кафе на карте будет иметь смысл, когда основное внимание уделяется местоположению, а просмотр списка когда решение зависит от других факторов (Оценка, кухня и т.д.)
Предсказание следующего действия
Искусственный интеллект и машинное обучение могут использоваться для сокращения количества действий, предвидя намерения пользователя.
Так же машинное обучение позволяет вам видеть ленту Я.Дзена, по вашим предпочтениям
Перевод статьи:
https://uxdesign.cc/crafting-a-kickass-filtering-ux-beea1798d64b
Если вам нравится такой контент. Ставьте лайки и подписывайтесь на канал.
