Как создать лучшие фильтры для таблиц

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

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

Это состояние неопределённости описывается законом Хика-Хаймана, который утверждает: «время, необходимое человеку для принятия решения, логарифмически увеличивается с ростом количества вариантов (источник)». Даже если ваша цель — не ускорить выбор, уменьшение визуального шума приносит другие преимущества, помимо скорости.

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

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

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

Фильтры в заголовках таблицы

Чтобы создать более удобный опыт фильтрации, нужно уменьшить сложность, вызванную выпадающими списками. Но если убрать их все, как тогда пользователи будут фильтровать данные? Ответ — в заголовках таблицы.

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

Фильтры в виде чипов внутри поля

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

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

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

Когда пользователь фокусируется на поле, появляется основное меню фильтрации с доступными категориями данных. Это могут быть как категории, отображённые в таблице, так и те, которые доступны только в детализированном представлении. Фильтры с низким приоритетом можно разместить в секции "Дополнительные фильтры" внизу, которая раскрывается по нажатию.

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

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

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

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

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

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

Улучшенный дизайн чипов

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

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

В новом дизайне кнопка «Х» стала более заметной благодаря тому, что иконка размещена на контрастной подложке. Благодаря этому пользователь с первого взгляда понимает, как удалить отдельный фильтр.

Текстовые метки стали более чёткими и контрастными: светлый текст на тёмном фоне улучшает читаемость. Размер чипа стал чуть меньше, а форма — полностью скруглённой, что придаёт более изящный и современный вид.

Где размещать сортировку

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

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

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

Заключение

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