Фильтры в таблицах
В Excel и подобных программах фильтры встроены в шапку таблицы. Такое расположение стало привычным для пользователей.
![](img/filters-01.png)
Этот способ фильтрации подходит для таблиц — то есть списков, где данные разделены по колонкам.
Описание работы
Фильтр можно собрать из разных контролов: чекбоксов, полей с датами, строки поиска. Разберем работу фильтра на примере набора чекбоксов.
Изначально фильтр не применен и чекбоксы в фильтре не проставлены. Когда пользователь выбирает один пункт, фильтр сразу включается — в таблице остаются только отмеченные варианты.
![](img/filters-02.png)
В таблицах Excel другой принцип: по умолчанию отмечены все галки. Чтобы отфильтровать по нескольким параметрам, придется сначала снять галку «Все», а потом выбрать нужное.
В наших сервисах более частый сценарий — отфильтровать список по 1–2 параметрам. Для этого описанный способ подходит лучше: чтобы получить желаемое, достаточно отметить нужные варианты.
После выбора фильтр не закрывается, и пользователь может продолжить отмечать пункты. Если фильтр применяется с задержкой, покажите лоадер поверх списка, но не перекрывайте лоадером фильтр.
![](img/filters-03.png)
Фильтр закрывается по клику в любом месте вокруг него.
Если фильтр сложно применять мгновенно, попробуйте поискать решение вместе с разработчиком. Например, если дело в нагрузке на сервис, можно отправлять запрос не после каждого клика, а с задержкой. Пока пользователь отмечает несколько пунктов, пауза будет незаметной, а сервис получит один запрос вместо нескольких.
![](img/filters-04.png)
Если при работе с таблицей чаще нужно «получить все варианты, кроме...», добавьте пункт «Все». Пользователь сможет поставить все галки, а потом убрать ненужные.
![](img/filters-05.png)
Отмеченный пункт «Все», не включает фильтр. В таком случае если закрыть фильтр и открыть снова — чекбоксы не будут отмечены.
Строка поиска в фильтре
Если список вариантов большой или постоянно меняется, добавьте строку поиска. Например, список из 5–10 организаций еще можно пролистать, но для большего количества удобнее использовать поиск.
При этом нехорошо показывать и скрывать поле поиска в зависимости от количества вариантов. Оно может часто меняться, когда пользователь редактирует справочник с этими значениями или добавляет и убирает строки из таблицы. Лучше, чтобы поле поиска было в таком фильтре всегда.
В открытом фильтре поле поиска сразу в фокусе.
![](img/filters-06.png)
Пересечение фильтров
Если пересечение фильтров пустое, покажите это сразу — заблокируйте пункт, который приведет к нулевому результату.
Например, для выбранных организаций нет требований, где квитанция отправлена. Тогда пункт «Отправлена» блокируем.
![](img/filters-07.png)
Составной фильтр
Фильтр можно составить из нескольких контролов.
У счетов-фактур уникальные номера, и поиск по номеру будет удобнее длинного списка чекбоксов — добавляем поле поиска. Те же счета-фактуры удобно фильтровать по периодам — добавим диапазон дат.
Составляйте фильтр, исходя из сценариев работы, не бойтесь комбинировать.
![](img/filters-08.png)
Результат применения фильтров и сброс
Покажите в интерфейсе, сколько элементов найдено, и дайте возможность сбросить фильтры. Поместите результат и кнопку сброса как можно ближе к данным. Хороший способ — поставить результат под шапку, но можно и в другие части таблицы.
![](img/filters-09.png)
Фильтры не сбрасываются, когда пользователь:
- переходит внутрь элементов списка и возвращается назад;
- обновляет страницу.
Фильтры сбросятся, если пользователь перейдет по навигации в другую часть системы или выйдет из сервиса.
Если пользователю необходимо сохранять примененные фильтры, добавьте такую возможность. Хороший способ — сохранять примененные фильтры в адресе. Тогда можно поделиться с коллегой ссылкой на отфильтрованный список.
Примененные фильтры показываем в виде чипсов, чтобы быстрее считать по каким критериям отфильтрован контент.
![](img/filters-09.1.png)
Если чипсов больше, чем на одну строку, они переносятся на новую
![](img/filters-09.2.png)
При наведении на крестик, его цвет меняется с #858585 Text на #222222.
![](img/filter-09.3.png)
Сортировка
Если в таблице присутствуют и фильтры, и сортировка, рекомендуем в обоих случаях показывать раскрывающийся список с вариантами. Так поведение по клику на заголовок будет единообразным. Кроме того, пользователь явно увидит, что означают иконки сортировки.
![](img/filters-10.png)
По клику на один из вариантов сортировка применяется, а раскрывающийся список закрывается. Иконка напротив заголовка колонки показывает направление сортировки.
![](img/filters-11.png)
Отдельный способ отменить сортировку не нужен, ее отменит сортировка по другой колонке.
Бывает, что строки изначально не отсортированы ни по одной колонке и этот порядок важен. Например, загруженные из 1С счета-фактуры. В таком случае добавьте третий пункт сортировки вроде «Порядок по умолчанию».
Если в таблице нет фильтров, и есть только сортировка, можно обойтись без раскрывающегося списка и фильтровать сразу по клику на заголовок:
![](img/filters-12.png)
Еще раз, в одной таблице нельзя комбинировать два способа. То есть если в таблице есть фильтр хотя бы у одной колонки, то у всех колонок по клику должен появляться раскрывающийся список.
Сортировка и фильтр
Одновременно к колонке можно применить и фильтр, и сортировку.
![](img/filters-13.png)
Чтобы ясно показать пользователю, по какому столбцу включен фильтр или сортировка отображаем иконку цвета продукта.
Если включен и фильтр и сортировка — показываем сразу 2 иконки. Причем последовательность всегда одна: фильтр → сортировка.
![](img/filters-13.1.png)
Дизайн и работа с клавиатурой
При наведении на ячейку в шапке, её фон подсвечивается в #F0F0F0, а текст в #222222
Иконка «стрелка вниз» подсказывает, что по колонке можно фильтровать или сортировать. По ховеру появляется серая плашка, а заголовок и иконка становятся темнее.
![](img/filters-14.png)
По клику появляется список вариантов. Серая плашка у заголовка остается, пока список раскрыт. Ховер и выделение не подсвечивают пункт меню под курсором, а влияют на вложенный элемент.
![](img/filters-15.png)
![](img/filters-16.png)
Пример
Есть список требований от налоговой. Новые требования всегда сверху — включена сортировка по дате.
![](img/filters-18.png)
Например, мы хотим посмотреть все требования о представлении пояснений
![](img/filters-19.png)
Видим, какой фильтр включен, результат поиска и можем сбросить фильтр.
![](img/filters-20.png)
При фильтрации список перестраивается, поэтому не страшно, что строка результата его сдвинет. Если при скроле шапка залипает, результаты не залипают вместе с ней.