Дизайн таблиц. Приемы оформления контента для упрощения прочтения данных и ускорения работы

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

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

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

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

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

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

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

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

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

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

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