Табличные фильтры

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

Этот способ фильтрации подходит для таблиц — то есть списков, где данные разделены по колонкам.

Фильтр можно собрать из разных контролов: чекбоксов, полей с датами, строки поиска. Разберём работу фильтра на примере набора чекбоксов.

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

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

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

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

Не рекомендуется делать применение фильтра по кнопке

Если при работе с таблицей чаще нужно «получить все варианты, кроме...», добавьте пункт «Все». Пользователь сможет поставить все галки, а потом убрать ненужные.

Отмеченный пункт «Все» не включает фильтр. Если закрыть фильтр и открыть снова — чекбоксы не будут отмечены.

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

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

В открытом фильтре поле поиска сразу в фокусе.

Если пересечение фильтров пустое, покажите это сразу — заблокируйте пункт, который приведёт к нулевому результату.

Например, для выбранных организаций нет требований, где квитанция отправлена. Тогда пункт «Отправлена» блокируем.

Фильтр можно составить из нескольких контролов.

У счетов-фактур уникальные номера, и поиск по номеру будет удобнее длинного списка чекбоксов — добавляем поле поиска. Те же счета-фактуры удобно фильтровать по периодам — добавим диапазон дат.

Составляйте фильтр, исходя из сценариев работы, не бойтесь комбинировать.

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

Фильтры не сбрасываются, когда пользователь:

• переходит внутрь элементов списка и возвращается назад;
• обновляет страницу.

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

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

Применённые фильтры показываем в виде чипсов, чтобы быстрее считать, по каким критериям отфильтрован контент.

Если чипсов больше, чем на одну строку, они переносятся на новую.

При наведении на крестик его цвет меняется с #757575 на #222222.

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

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

Отдельный способ отменить сортировку не нужен, её отменит сортировка по другой колонке.

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

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

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

Одновременно к колонке можно применить и фильтр, и сортировку.

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

Если включён и фильтр, и сортировка — показываем сразу 2 иконки. Причём последовательность всегда одна: фильтр → сортировка.

При наведении на ячейку в шапке её фон подсвечивается в #F0F0F0, а текст в #222222.

Если фильтр применён, то текст в шапке остаётся #222222.

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

По клику появляется список вариантов. Серая плашка у заголовка остаётся, пока список раскрыт. Ховер и выделение не подсвечивают пункт меню под курсором, а влияют на вложенный элемент.

Есть список требований от налоговой. Новые требования всегда сверху — включена сортировка по дате.

Например, мы хотим посмотреть все требования о представлении пояснений.

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

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