#1. UX таблиц, с которыми работают. ч1 — Просмотр данных
Думал-думал, как написать вводную про важность таблиц, про то, что ни одна бизнесовая система без таблиц не обходится, про то, что речь не о табличном представлении контента, а о таблицах для управления данными. И такая «вода» получалась, что решил написать так:
работа с таблицами для управления данными должна быть удобной.
Я пишу именно «работа должна быть удобной», так как уже много статей есть на тему создания удобных таблиц. Самая наглядная и популярная — 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
Если вы нашли для себя что-то полезное в этой статье — похлопайте, это зарядит меня позитивом и бодростью для дальнейших повествований.
