Фильтры в таблицах

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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