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

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

Что должно получиться

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

Начните с характерной задачи и реальных данных каталога. Для списка товаров это могут быть тип, размер и наличие; для документов — тема и дата. Не добавляйте характеристики только потому, что поле существует в базе. Фильтр должен помогать отличить подходящий элемент от неподходящего.

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

Из чего это складывается

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

Как это сделать по шагам

1. Выберите задачи посетителя. Сформулируйте, по каким признакам он отбирает элементы. Проверьте, что эти сведения есть у материалов каталога и заполнены достаточно последовательно.
2. Соберите понятные группы. Назовите характеристики языком посетителя. Решите, где допустимо одно значение, где несколько, а где нужен диапазон.
3. Определите правило применения. Выберите обновление после каждого изменения либо отдельное подтверждение набора. Опишите поведение открытия, закрытия и возврата.
4. Подготовьте мобильную панель. Проверьте длинную группу, прокрутку, доступ к действию применения и возможность закрыть панель без непонятной потери выбора.
5. Покажите выбранные условия. Дайте способ понять действующие ограничения на экране результата. Удаление одного условия и общий сброс должны иметь разные понятные последствия.
6. Подготовьте разные исходы. Проверьте ожидание, ошибку связи и отсутствие подходящих элементов. Сохраните выбранные значения там, где они нужны для исправления ситуации.
7. Проверьте полный маршрут. Выберите условия, откройте карточку, вернитесь и измените один параметр. Сверьте набор, сортировку и место в списке.
8. Проверьте управление и внедрение. Пройдите панель клавиатурой и на телефоне. После разработки повторите сценарии с реальными данными и задержкой обновления.

Как выбрать характеристики и элементы управления

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

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

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

Когда применять выбранное

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

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

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

Как разместить длинную панель на телефоне

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

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

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

Диапазоны и недоступные значения

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

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

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

Как показать выбор и сброс

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

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

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

Пустой результат, ожидание и ошибка

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

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

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

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

Возврат из карточки и повторное открытие

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

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

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

Частые ошибки

• Скопировать все поля базы. Наличие характеристики ещё не доказывает, что посетителю нужен отдельный фильтр.
• Скрыть действующий выбор. Человек не понимает, почему видит мало элементов и что нужно убрать.
• Смешать ошибку с пустым результатом. Нужны разные объяснения и действия для продолжения.
• Сбрасывать всё при закрытии. Правило применения и отмены должно быть понятным и последовательным.
• Проверять только саму панель. Оцените маршрут через список, карточку, возврат и повторное изменение условий.

Как проверить

• Группы и подписи объясняют назначение условий.
• Правило одного или нескольких значений понятно.
• Отличаются действующие и неподтверждённые изменения.
• Все условия и действия достижимы в низком окне и с клавиатуры.
• Выбранное можно проверить, удалить по отдельности и сбросить согласованным способом.
• Ожидание, ошибка и пустой результат имеют разные состояния.
• Возврат из карточки и восстановление выбора проверены с реальными данными.

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

Вопросы и ответы

Нужно показывать все характеристики сразу?

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

Всегда нужна отдельная кнопка применения?

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

Что делать с выбором при закрытии панели?

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

Почему нельзя скрывать выбранное недоступное значение?

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

Можно оставить только ползунок диапазона?

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

Как отличить отсутствие совпадений от сбоя?

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

Достаточно сохранить фильтры в браузере?

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