#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
Если вы нашли для себя что-то полезное в этой статье — похлопайте, это зарядит меня позитивом и бодростью для дальнейших повествований.
upd. Ссылки на другие части и чек-лист:
[## #2. UX таблиц, с которыми работают. ч2 - Добавление и поиск данных
Описал кейсы, накопленные за 12 лет работы с реальными пользователями.
[## #3. UX таблиц, с которыми работают. Ч3: управление данными и экспорт
Третья статья из цикла “UX таблиц, с которыми работают” — про создание таблиц, с которыми будет удобно и эффективно…
[## Инструмент: чек-лист создания таблиц, с которыми работают
В чек-листе 65 требований и ссылки на теоретическую базу.
[## UX форм, с которыми работают
Про здравый смысл при создании форм, с которыми пользователь сможет эффективно работать в течение рабочего дня.
designpub.ru](https://designpub.ru/ux-form-s-kotorimi-rabotaut-ed64e2e367b4?source=post_page-----5ea60df37f12---------------------------------------)