UX Movement
October 26, 2022

Лучший дизайн фильтров для крупномасштабных приложений 🔐

Оптимизация расположения и взаимодействия фильтров

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

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

Композиция

Есть два распространенных варианта расположения фильтров: левая боковая панель или горизонтальная панель.

Левая боковая панель

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

* Примечание переводчика. Параметры фильтров — Категория товара, Бренд, Цена, Цвет, Стиль, Размер и т.д. Значения параметра — его характеристики, например, значения параметра «Цвет» — Красный, Синий, Жёлтый, Зелёный и т.д.

Читайте полный перевод на Boosty