Дизайн фильтров: выбор условий, применение и результаты

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

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

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

Начните с двух вопросов: по каким признакам человек выбирает и как поймёт, что ограничение уже действует. Затем определите, когда обновляется список — сразу после выбора или после отдельного подтверждения.

Как спроектировать понятные фильтры

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

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

Для каждого условия определите название, допустимые значения, способ выбора и способ отмены. Фильтр «Цена до» должен явно отличаться от сортировки «Сначала дешевле»: первый исключает часть товаров, вторая только переставляет их.

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

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

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

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

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

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

Подбирайте фильтры под категорию

Показывайте свойства, имеющие смысл для выбранной категории. У обуви это размер и назначение, у ноутбуков — объём памяти и диагональ. Если человек меняет категорию, не переносите несовместимое условие молча: уберите его с понятным пояснением или предложите выбрать подходящее значение.

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

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

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

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

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

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

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

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

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

Объясните счётчики и зависимые значения

Число рядом с условием должно иметь определённый смысл. Например, «Размер 39 — 12» может обозначать товары этого размера с учётом уже выбранного бренда. Это не обязательно число всех товаров после добавления размера 39 к размеру 38: одна модель может иметь оба размера, поэтому складывать счётчики без учёта пересечений нельзя.

Решите, что происходит со значениями, которые перестали давать совпадения. Их можно оставить недоступными с числом 0 или скрыть, если это не разрушает понимание списка. Уже применённое условие должно оставаться видимым, даже если его сочетание с другим ограничением даёт пустой результат: иначе человек не поймёт, что нужно отменить.

У длинной группы брендов полезен поиск внутри этой группы. Назовите его «Найти бренд», чтобы не спутать с поиском по всему каталогу. Выбранные бренды не должны исчезать из списка применённых условий при вводе другого запроса.

Не путайте загрузку, пустой результат и сбой

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

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

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

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

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

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

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

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

Страница сведений о заказах — Каглар Джебечи

Поиск расположен над таблицей и связан с набором записей. Такой вход удобно использовать для известного номера заказа. Для выбора множества заказов по статусу или периоду нужны отдельные условия: текстовый запрос не объясняет все возможные способы отбора.

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

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

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

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

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

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

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

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

Вывод

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

Спроектируйте фильтры и результаты в Pixso