Краснодар

+7 952  830 72 85

Москва

+7 495 134 25 57

Краснодар

+7 952  830 72 85

Москва

+7 495 134 25 57

Шаблоны сортировки и фильтрации

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

Onscreen Sort

Если есть несколько вариантов сортировки, этот шаблон обеспечит самое простое решение. Размещение переключателя зависит от других элементов интерфейса. Ясно показывайте пользователю, какая команда выбрана в настоящий момент. Если метки не умещаются на панели кнопок-переключателей, примените шаблон Sort Order Selector.

Onscreen Sort

Sort Order Selector

Шаблон — хорошая альтернатива предыдущему. Для выборки используются различные элементы управления, но, когда вы будете решать, какой предпочтительнее, принимайте во внимание основные принципы дизайна для конкретной ОС. Чтобы сделать заголовки более бросающимися в глаза, укрупните их. Нейтральное решение – поле с раскрывающимся списком.

Sort Order Selector

Sort Form

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

Soft Form

Шаблоны фильтрации

Большие объемы данных требуют уточнения. Фильтрация — упорядочивание по выбираемым пользователями критериями.

Screen Filter

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

Screen filter

Filter Drawer

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

Filter drawer

Filter Dialog

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

Filter dialog

Filter Form

При работе с большим объемом данных большую выгоду можно извлечь из продвинутых вариантов уточнения или фильтрации. В форме с фильтрами применяются элементы управления, настроенные под пользователя. Построители выражений или предикативные редакторы — продвинутые способы фильтрации. Их часто можно встретить в инструментарии для генерации отчетов. Создать приложение с условной фильтрацией сложно из-за особого форм-фактора. Когда используете Filter Form, придерживайтесь оптимальных методик проектирования.