Полезные и нужные таблицы в у

Думал-думал, как написать вводную про важность таблиц, про то, что ни одна бизнесовая система без таблиц не обходится, про то, что речь не о табличном представлении контента, а о таблицах для управления данными. И такая «вода» получалась, что решил написать так:

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

Я пишу именно «работа должна быть удобной», так как уже много статей есть на тему создания удобных таблиц. Самая наглядная и популярная — https://uxdesign.cc/design-better-data-tables-4ecc99d23356

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

Почему я позволяю себе писать об этом

Когда я сам читаю статьи, то часто задаюсь вопросом — почему я могу доверять этому автору, какой у него опыт по предмету, о котором пишет. Я не дизайнер, я продакт менеджер, а ранее проджект менеджер.

Свой профессиональный путь в ИТ я начал в январе 2007 года и бОльшая часть моего пути связана с системами автоматизации и учёта. С системами, в которых одна запись в таблице может содержать более 200 свойств. Я отвечал за автоматизацию деятельности торговых представителей и центра приёма заказов огромного колбасного завода, деятельности градостроительных органов, которые ведут учёт земельных участков, логистических центров, госорганов, … В общем, насмотрелся на таблицы и на ту боль, которую пользователи могут испытывать от работы с ними.

Как работают с таблицами

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

• просматривают данные,
• вносят данные,
• ищут данные,
• управляют данными,
• забирают данные.

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

Статья получилась достаточно большая, поэтому решил разбить её на несколько частей.

Часть 1: Работа — Просмотр данных

Почему круты Excel’еподобные таблицы?

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

Вообще, при внедрении рабочей системы (системы, с которой будут работать) надо помнить, что процесс работы с таблицами в системе будут сравнивать с процессом работы с таблицами в Excel.

Конечно, это не значит, что надо повторить Excel (да и кто повторит!?). Это значит, что надо не утерять те преимущества, которые есть у Excel, дополнив их преимуществами, ради которых система и была создана. Например, CRM система — это не только таблица с клиентами, это куча процессов и связности, которые никакой Excel не повторит, а если и повторит, то это будет монстр.

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

Больше места для таблицы

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

Таблице не отведена ключевая роль в рабочем пространстве.

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

Таблица — царица экрана.

Компоновка

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

Прикомпоновать можно не все данные:

• Данные должны быть полезны в контексте основной информации: например, телефон бесполезен без ФИО.
• Данные не нуждаются в подписи. Например, возле e-mail не надо ставить подпись (аналогично для должности, телефона)
• Разумное количество в рамках одной компоновки.

В этой таблице явно что-то можно прикомпоновать к ФИО.

Прикомпоновали должность и получили место под отпуск.

Постраничка для работы

Если пользователь просматривает информацию, то многим удобно иметь большИе информационные порции. А когда тебе дают 10 или 20 записей на страницу, то часто это как издевательство. Дайте возможность выбрать 50, 100, а то и 500 записей.

Попробуйте поставить для таблицы 50 строк по умолчанию — попросит ли кто-то из пользователей сделать обратно 20? Сомневаюсь.

Не вечный скролл и не ещёкалка

Отмечу, что в случае с таблицами для работы вечный скролл и ещёкалка не подходят. Ещёкалка — это кнопка «Показать ещё», а вечный скролл — таблица сама подгружается пока не достигнет финала.

Например, пользователь сделал поиск клиентов, которым давно не звонили маркетологи. С найденным списком он планирует планомерно работать — обзванивать. До обеда он обзвонил страницу 1, после обеда — 2, а завтра планирует прозвонить странице 3 и 4. Когда это страницы, то всё просто: перешёл на нужную и действуй. Когда это вечный скролл или ещёкалка — всякий раз крутить надо к месту, где ты закончил. Нет простых маркеров.

Другой пример: «Маша, ты две страницы с конца обнови, а я с начала. За день справимся.» (это очень частый кейс). С постраничкой удобнее работать коллективно.

Цвета вместо слов

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

• можно красить знаковую ячейку (например, Дату заказа красить Статусом)
• а можно добавлять цветной индикатор к строчкам (цветной круг, например) и не выводить эту характеристику в отдельный столбец.

Однозначные цветовые индикаторы помогут ускорить восприятие статусной информации.

Можно красить и всю строчку, но при такой покраске таблица выглядит и действует как «вырви глаз».

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

Красить всю строку полезно для индикации отклонений.

Если цветов больше 5-ти, то воспринимать корректно покраску уже сложно — не всегда сразу вспомнишь, что значит тот или иной цвет. Особенно сложно запомнить редкие цветовые индикаторы (которыми редко маркируют).

При наличии цветовых индикаторов полезно отображать легенду цветов.

Запоминать вид

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

Вообще, полезно настройки вида хранить вечно, чтобы:

• после отпуска пользователь залогинился в систему и продолжил работать с тем видом, который он ранее настроил.
• чтобы пользователь мог на домашнем ноутбуке войти в систему и доделать что-то с тем видом, который он ранее настроил.

Связность информации

Объёмность — это то, что качественно отличает таблицы в бизнесовой системе от плоских Excel-таблиц. Не часто делают Excel-таблицы, которые ссылаются на другие таблицы — чаще это одна большая таблица.

В бизнесовых же системах связывание разных данных — обычная история. Например, мы добавляем заказ:

• клиента мы выбираем из таблицы клиентов,
• товары — из товаров,
• склад — из складов,
• адрес — из Федеральной информационной адресной системы (ФИАС) или «тыкаем» на карте,
• и т.д.

Полезно, когда при показе таблицы данные из связанных таблиц представлены в виде ссылки, которая открывает связанную запись.Например, в столбце «Заказчик» выводится в виде ссылки наименование организации, на которую оформлен заказ. Клик, и в новой вкладке открылась информация по этой организации.

Связанные сущности полезно представить ссылкой.

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

Активная строка

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

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

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

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

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

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

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

Если фон мешает — можно контуром.

Горизонтальный (простите) скролл

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

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

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

Просмотренные строки

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

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

Системные свойства

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

• ID,
• дата создания,
• автор,
• дата последнего изменения.

Некоторые таблицы настолько любят системные свойства, что их нельзя убрать: когда управляешь столбцами, которые надо/не надо показывать, то системных свойств там нет. И наоборот, в некоторых таблицах системных свойств нет и добавить нельзя.

Надо, чтобы системные свойства можно было показывать/скрывать так же, как и остальные.

Просмотр записи

Строка в таблице часто является прелюдией к просмотру полной информации по записи.

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

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

• можно открыть несколько записей одновременно;
• можно дать ссылку на страницу с записью.

На моей практике в 99% случаев рабочих таблиц модальный режим просмотра уступал просмотру записи в отдельной странице. Даже если сделать так, что ссылку на запись можно скопировать и в модальном окне, то такое окно грузится дольше, так как оно дочернее по отношению к таблице. Можно сделать и мультимодальность, но когда у каждой записи полно характеристик, то толку от мультимодальности будет мало.

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

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

Переход к просмотру записи — удобно сделать это по двойному клику, а по «ctrl+ двойной клик» открывать в отдельной вкладке.

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

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

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

И классические опции

Без деталей, так как уже классика и много по этой теме написано (см. ссылку в начале статьи):

• Выбор столбцов и управление их порядком.
• Управление шириной столбцов.
• Фиксация строки с заголовками.
• Фиксация первого/выбранного столбца при горизонтальном скролле.
• Зебра (хотя мнения расходятся).

……….

На этом часть, посвящённая просмотру таблиц, заканчивается. В следующих частях: внесение данных, поиск, управление и экспорт.

Можно также почитать заметки про продуктоводство, UX и саморазвитие в моём telegram-канале: https://t.me/proudobstvo