UX таблиц

В этом посте разберём, что такое UX в табличных данных, на примере стандартного компонента Wordpress «Записи».

Источником вдохновения является серия статьей Михаила Грекова.

Работа с таблицами для управления данными должна быть удобной.

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

  1. просматривают данные,
  2. вносят данные,
  3. ищут данные,
  4. управляют данными,
  5. забирают данные.

Каждый пункт — это отдельный процесс, требующий внимания.

Просмотр данных

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

Конечно, может помочь опция «на весь экран» (или что-то подобное), но если всякий раз для комфортной работы с таблицей надо нажимать куда-то, то лучше сделать, чтобы комфортно было сразу.

Компоновка

Многие представляют данные в таблице только так: каждому свойству записи свой столбец. Но это правило не всегда верно. Обратите внимание на пример правее. Я объединил функции поиска и фильтра это позволило показать дополнительную строку в таблице при том же разрешении экрана. Кроме того, я изменил поле ввода даты на стандартный для HTML5 тег:

<input id="datetime" type="datetime-local">

И на последок я скомпоновал кнопки «обновить» и «отмену» друг с другом.

Правила компоновки

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

Индикация цветом

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

  1. Можно закрасить всю строку (например, показывая выбранную).
  2. А можно добавить цветной индикатор к строчке (например, состояние).

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

Иногда полезно отображать легенду цветов.

Записи — Цветные маркеры

Как выделить строку

Ошибочно полагать, что если строчка меняет свой вид при наведении на неё мышкой, то вопрос выделения закрыт. Это только необходимый минимум (и тот не работает в случае с тачскрином).

Достаточное же условие выделения: строчку можно выделить активной, и она такой остаётся, куда бы мышка не убежала. Например, клик по строчке переводит строчку в режим «активна».

Выделить строчку можно разными способами:

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

Прокрутка

Нет ничего страшного, если при большой таблице появляется горизонтальный скролл — это привычный для большинства пользователей опыт (посмотрите на Excel). Плохо, когда при добавлении столбцов в таблицу они становятся невероятно узкими, зато без скролла.

Горизонтальный скролл должен быть доступен на экране всегда. Не тогда, когда пользователь докрутит страницу до низа, а всегда.

Детали

Хорошая таблица должна дать…

  1. возможность управлять порядком столбцов;
  2. возможность управлять шириной столбцов;
  3. возможность фиксация столбца (в примере это иконка замка).

Любые системные свойства должны как убираться, так и добавляться. В моём примере эту функцию выполнят кнопка с шестерёнкой.

Как именно показывать полную информацию по записи: модально или отдельная страница?

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

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

Поиск

Поиск по ключевому слову или фразе

Учитывать морфологию, исправлять опечатки.

Искать везде, где только пользователь ожидает.

Предлагать итоги на лету.

Выделять искомый фрагмент.

Поиск по наиболее популярным параметрам

В примере выше, эту функцию выполнят ссылка «Добавить фильтр».

Управление

Для этого макета я выбрал паттерн управления «иконки + гамбургер меню», элементы управления появляются при наведении мышкой.

Такой подход к представлению действий экономит место (влезло ещё три строки по высоте) и минимизирует количество случайных удалений.

Сравнение