Как оформлять таблицы в онлайн-изданиях

Семь правил работы с данными от Ильи Бирмана

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

В Setka Editor появились таблицы: добавляйте в 2 клика, оформляйте и адаптируйте их под мобильные.


Илья Бирман

Продуктовый и информационный дизайнер

Работает арт-директором в Бюро Горбунова, преподает в школе дизайнеров Бюро.


01.

Определите, нужна ли таблица

Как оформлять таблицу и нужна ли она в принципе, зависит от того, как читатели будут работать с данными дальше. Если данных мало, возможно, их стоит описать в тексте, и так они будут понятнее: «Средняя посещаемость медиа в декабре — 300 тыс. человек, в январе — 250 тыс., то есть на 17% меньше». Числа в таблице сами по себе ни о чем не говорят: читатель пытается разобраться с ними, сверяясь с шапкой и примечаниями. В тексте с помощью средств языка мы можем описать взаимосвязи между числами.

В некоторых случаях таблица может быть устоявшимся форматом. Например, не нужно описывать прогноз погоды фразами: «по данным гидрометеоцентра» и «столбик термометра опустится до». Для всех показателей — температуры, ветра, облачности — придумали понятные иконки.

Источник данных: Рамблер.Погода

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

02.

Не растягивайте таблицу в ширину

Иногда дизайнеры стремятся занять таблицей основную колонку: то, что она занимает только половину полосы с текстом, кажется неаккуратным. У таблицы есть естественная для нее ширина, которая определяется данными внутри. Если увеличить ширину сверх необходимого, между столбцами появятся промежутки. Это приведет к тому, что взгляду будет труднее следить по строке и понадобятся «костыли». В этой ситуации у таблицы появляются чересполосица, рамки, линеечки — визуальный мусор, создающий мельтешение.

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

03.

Проверьте, как таблица выглядит без решетки

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

ИзданиеПереходыНовостьПереход/ НовостьДоля, %        
Russian.RT1878571448541910,72
РИА Новости97801315194655,58
Life76081649521584,34
Lenta.ru70332344201634,01
РЕН ТВ48359834961382,76
Московский комсомолец41879438981072,39
РБК36713934021082,09
ТВ Звезда35764330571172,04
Коммерсант3133788452371,79
Kazanfirst31293610772911,79
Вести3106073606861,77

Источник данных: MediaMetrics, топ российских СМИ в декабре 2018

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

04.

Выравнивание по умолчанию — слева сверху

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

фильмгодрейтингголоса
Побег из Шоушенка19949.190486 392
Зеленая миля19999.134455 424
Форрест Гамп19949.013445 155
Список Шиндлера19938.884247 112
1+120118.834473 986
Леон19948.776373 377
Начало20108.773510 053
Король Лев19948.757317 539
Бойцовский клуб19998.713434 788
Иван Васильевич меняет профессию19738.708337 081

Источник данных: Кинопоиск

Если вы регулярно работаете с таблицами, у вас под рукой должен быть «Справочник издателя и автора» А. Мильчина и Л. Чельцовой. В нем собраны советы о том, как перестраивать таблицы и повышать удобство их чтения, как правильно делать заголовки и примечания, а также другие правила оформления.

05.

Осторожно используйте цветную заливку

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

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

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

В объемной таблице с индексами заливка помогает следить по строке. Источник

06.

Все важное для понимания данных — перед таблицей

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

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

Основные страны-производители соли

с 2012 по 2017 (в тыс. тонн)

страна201220132014201520162017
Китай68 00058 00070 00068 00070 00070 000
США43 00042 00048 00054 30040 30037 200
Индия26 00019 00017 00016 00016 00017 000

Источник: Statista

07.

Придумайте понятные правила для мобильных экранов

При адаптации объемных таблиц к мобильным экранам чаще всего приходится их перестраивать или разбивать на несколько. Для наглядности можно привести пример с почтовыми приложениями. Пятнадцать лет назад (а сегодня — в классическом режиме в Mac OS) почта выглядела так:

Классический вид почты: длинные строки с письмами и отдельные колонки с отправителями, темами, датами

Современный вид: каждое письмо занимает уже несколько строк

Затем появился iPhone, и Apple пришлось перепридумать таблицу, сделав ее меньше по ширине. Теперь одно письмо занимает несколько строчек, а не одну. Дизайнеры перенесли отправителя и тему из колонок в строки.

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