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

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

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

Описание работы

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

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

В таблицах Excel другой принцип: по умолчанию отмечены все галки. Чтобы отфильтровать по нескольким параметрам, придется сначала снять галку «Все», а потом выбрать нужное.

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

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

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

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

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

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

Строка поиска в фильтре

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

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

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

Пересечение фильтров

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

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

Составной фильтр

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

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

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

Результат применения фильтров и сброс

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

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

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

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

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

Сортировка

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

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

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

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

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

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

Сортировка и фильтр

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

Дизайн и работа с клавиатурой

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

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

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

Пример

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

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

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

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