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

Что такое пользовательский интерфейс фильтрации

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

В редакторе UI-дизайна удобно сравнить панель условий, список результатов и состояние без совпадений рядом: так проще заметить, где выбранное условие перестаёт быть понятным.

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

Как создать идеальный пользовательский интерфейс фильтрации

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

Принципы разработки пользовательского интерфейса фильтра

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

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

Удобство для пользователя

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

Учитывайте язык/поведение людей

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

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

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

Установите фильтры по категориям.

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

Совместимость с несколькими вариантами выбора

Разрешайте несколько значений там, где они отвечают одной задаче. Для каталога обуви выбор размеров 38 и 39 обычно означает «38 ИЛИ 39», а добавленный бренд ограничивает обе группы: «выбранный размер И выбранный бренд». Названия групп и видимые отметки должны отражать эту логику.

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

Учитывайте поведение браузера

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

Согласуйте восстановление условий при обновлении страницы и возврате из карточки товара. Выбранные значения, число результатов и список должны описывать одно состояние. Это задача хранения и восстановления состояния приложения; наличие браузерного кэша само по себе её не решает.

Черновые и применённые условия: пример каталога обуви

Пусть в каталоге уже применён размер 38. Пользователь открывает мобильную панель и отмечает ещё размер 39 и бренд Northline. Пока он не нажал «Показать результаты», список за панелью относится к прежнему набору условий. Кнопка «Отмена» должна вернуть панель к размеру 38, а не незаметно применить новые значения.

Если сервер ещё не вернул точное число, пишите «Показать результаты», а не выдуманный счётчик. В прототипе отдельно проверьте выбор нескольких значений, отмену изменений и возврат из карточки. Эти переходы важнее декоративного вида чекбоксов.

Создавайте интерфейсы фильтрации в Pixso

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

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

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

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

Панель мониторинга/Страница сведений о заказе от Каглар Джебечи

В этом фильтре строка поиска имеет ярко выраженный вид и описательный заполнитель, который учит пользователя, как ею пользоваться. Отлично!

Поиск по списку товаров от Салах Эллиман

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

Страница заказа от usrnk1

На этой странице заказа есть раскрывающийся список с 5 критериями фильтрации. У каждого фильтра есть несколько вариантов для обеспечения конкретности при поиске. Страница заказа с большим объемом данных помогает сузить область поиска и улучшает качество обслуживания.

Компонент фильтрации + изучение таблиц от Мики Кэрролла

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

Himalayas. app от Джордана Хьюза

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

Вывод

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