Refining Data Tables
Автор: Luke Wroblewski
Источник: UXmatters

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

Таблицы занимаю второе место по частоте использования в web-приложениях после форм. При работе в сети пользователям часто требуется работать с элементами в списках (контакты, товары, письма, сообщения) – искать, добавлять, редактировать, удалять. И от дизайна таблиц напрямую зависит удобство работы с ними. Однако, в отличие от дизайна форм, к удобной в использовании таблице можно прийти по нескольким путям.

В этой статье основное внимание будет уделено удобству поиска в больших таблицах.

Видимые фильтры

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

На первом рисунке показаны фильтры, используемые на Shopping.com. Список доступных фильтров всегда находится над таблицей с результатами поиска. Фильтры объединены в группы (например, цена, производитель, размер и т.д.). Пользователь одним действием выбирает параметр, по которым будут отфильтрованы данные, и соответствующие ограничения. Но место над результатами поиска слишком «ценное» и блок с фильтрами не может быть слишком большим. Поэтому в этом блоке отображается только часть фильтров (по нескольку из каждой группы), а остальные отрываются при нажатии на ссылку.

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

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

Открывающиеся фильтры

Фильтров может быть слишком много, чтобы одновременно отобразить все. Или функция фильтрации является вторичной (например, когда основная задача таблицы – это обзор данных, а не поиск конкретных значений). В таких случаях можно скрывать фильтры (параметры фильтрации, разумеется, сохраняются).

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

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

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

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

Добавлять необходимые параметры в список фильтров;
Добавлять поля в столбцы таблицы, по которым необходимо производить поиск;
Использовать иерархическую фильтрацию (элементы фильтра меняют содержимое в зависимости от выбора пользователя);

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

Сортировка

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

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

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