Фильтры каталога на узком экране проектируют так, чтобы покупатель быстро находил нужные товары и видел, какие условия уже выбраны. Для этого фильтры обычно открывают в отдельной панели, группируют по смыслу, показывают число результатов и дают простой способ применить или сбросить настройки. До разработки проверьте сценарий на реальных категориях и размерах экрана.
Короткий ориентир по теме
- Сначала определите, какие параметры действительно помогают выбрать товар в конкретной категории.
- На мобильном экране открывайте фильтры по запросу пользователя, а не занимайте ими постоянное место над каталогом.
- Показывайте выбранные значения, число результатов и понятные действия: применить, сбросить, закрыть.
- Проверяйте сценарий на узком экране, с длинными названиями и большим количеством вариантов.
- Не переносите интерфейс настольной версии на телефон без пересмотра группировки и поведения элементов.
Где метод работает лучше всего
Такой подход подходит каталогам с несколькими значимыми параметрами выбора: например, размером, ценой, брендом или наличием. Он особенно полезен, когда фильтры помогают сузить выдачу, но на маленьком экране не помещаются рядом с товарами.
Не усложняйте интерфейс фильтрами, если в категории мало товаров или покупателю достаточно поиска и сортировки. Сначала проверьте, какие параметры реально нужны для выбора: необязательные фильтры увеличивают путь до результата.
Подготовка и входные условия
Перед проектированием соберите информацию о каталоге и пользовательском сценарии:
- список категорий и доступных для них характеристик товаров;
- порядок важности параметров и допустимые значения;
- правила подсчёта количества подходящих товаров;
- состояния фильтров: начальное, выбранное, пустая выдача, загрузка и ошибка;
- макеты или доступ к текущей версии каталога для проверки на устройстве.
Если проект только планируется, заранее согласуйте границы работ: запрос "дизайн мобильного приложения заказать" не всегда означает, что в него входит каталог интернет-магазина. При обсуждении "разработка мобильного приложения заказать" уточните, входят ли в задачу логика фильтрации, связь с данными каталога и тестирование.
План действий по шагам
-
Определите сценарий выбора.
Сформулируйте, что пользователь ищет и какие параметры помогут ему сузить каталог. Для разных категорий набор и порядок фильтров могут различаться. -
Отберите необходимые параметры.
Оставьте характеристики, которые влияют на выбор товара. Сгруппируйте близкие параметры и предусмотрите понятные названия для групп. -
Выберите модель открытия.
Для узкого экрана обычно подходит отдельная панель фильтров, открываемая по кнопке. Сделайте заметными переход в каталог и закрытие панели, чтобы пользователь понимал, как вернуться. -
Спроектируйте выбор значений.
Используйте подходящий контрол: например, список вариантов, диапазон или переключатель. Подпишите единицы измерения и не полагайтесь только на цвет для обозначения выбранного состояния. -
Определите поведение применения.
Решите, обновляется ли выдача после каждого изменения или после нажатия кнопки. Если применение отложенное, укажите количество найденных товаров и назовите действие конкретно, например "Показать товары". -
Добавьте управление выбранными условиями.
Покажите активные фильтры и предусмотрите удаление отдельного условия и сброс всех настроек. После сброса пользователь должен ясно видеть, что выдача вернулась к исходной. -
Проверьте макет на реальном устройстве.
Пройдите сценарий одной рукой и проверьте прокрутку панели, доступность кнопок и сохранение выбора при возврате к каталогу. Для проекта, где нужны "создание интернет-магазина под ключ", "UX UI дизайн заказать" или "разработка сайта под ключ", отдельно согласуйте, кто отвечает за поведение фильтров и их связь с каталогом.
Быстрый режим
- Выберите самые полезные фильтры для одной приоритетной категории.
- Разместите их в отдельной панели с понятными группами и значениями.
- Добавьте показ числа результатов, применение и сброс условий.
- Проверьте выбор, возврат в каталог и пустую выдачу на узком экране.
Контроль результата
- Пользователь понимает, где открыть фильтры и как закрыть панель.
- Названия групп и значений понятны без дополнительных пояснений.
- Выбранные значения визуально отличаются от невыбранных.
- Кнопка применения ясно сообщает, что произойдёт после нажатия.
- Можно удалить отдельное условие и сбросить все фильтры.
- После применения пользователь видит актуальную выдачу или понятное сообщение об отсутствии результатов.
- Длинные списки и подписи не перекрывают важные действия.
- Выбранные условия не теряются при предусмотренном сценарием возврате к каталогу.
Где чаще ошибаются
- Показывают все возможные характеристики, не проверив их полезность для выбора.
- Используют одинаковые фильтры и порядок для категорий с разными товарами.
- Не объясняют, применяются ли настройки сразу или после нажатия кнопки.
- Скрывают активные условия, из-за чего пользователю трудно понять состав выдачи.
- Делают сброс незаметным или неочевидным по результату.
- Не продумывают пустую выдачу и способ вернуться к подходящим товарам.
- Проверяют только короткие названия и небольшое число вариантов.
- Переносят настольную компоновку на мобильный экран, не проверяя прокрутку и доступность действий.
Варианты при других ограничениях
- Очень узкий экран: открывайте фильтры на отдельном экране, а не в тесной боковой панели.
- Мало фильтров: покажите основные параметры над каталогом, если они не вытесняют список товаров.
- Много категорий: задайте отдельный набор фильтров для каждой категории и не выводите неприменимые параметры.
- Сложная логика каталога: сначала согласуйте правила данных и обновления выдачи, затем детализируйте интерфейс.
Вопросы, которые возникают на практике
Лучше открывать фильтры отдельным экраном или поверх каталога?
Выбор зависит от ширины экрана и сложности фильтров. Для узкого экрана отдельная полноэкранная панель часто упрощает прокрутку и управление; важно сохранить ясный путь обратно к результатам.
Нужно ли применять фильтры сразу после каждого выбора?
Это зависит от скорости обновления и логики каталога. Если выдача обновляется только после подтверждения, обозначьте действие и покажите, сколько товаров будет найдено.
Нужно ли показывать количество товаров рядом с фильтром?
Показывайте его, если количество помогает оценить пользу выбора и данные обновляются корректно. Не выводите вводящие в заблуждение значения.
Как поступить, если выбранные фильтры не дали результатов?
Сообщите, что подходящих товаров нет, и предложите изменить или сбросить условия. Не оставляйте пользователя на пустом экране без следующего понятного действия.
Стоит ли сохранять фильтры при возврате в каталог?
Если пользователь ожидает продолжить просмотр той же выдачи, сохранение выбранных условий помогает не повторять действия. Уточните это поведение в сценарии и проверьте его в макете или прототипе.
Как проверить удобство фильтров до разработки?
Соберите кликабельный прототип и попросите пользователей выполнить конкретную задачу на узком экране. Наблюдайте, понимают ли они названия, применение условий и возврат к результатам.
Автор: Дмитрий Кузнецов