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

1. 1
Создавайте хорошие таблицы
Бедные таблицы. Что и в какой момент пошло не так?
На протяжении ранней истории развития Интернета таблицы оставались основным видом визуализации,
но впоследствии были отодвинуты на второй план другими графическими форматами. Однако, несмотря
на то, что таблицы все реже появляются в онлайне, именно они продолжают консолидировать большую
часть информации, с которой мы взаимодействуем в повседневной жизни.
Пример того, что я считаю «основой основ» всех таблиц: Гармонизированный тариф США, таблица,
растянутая на 3 550 страниц и описывающая все товары, которые могут быть импортированы в США,
включая такие захватывающие позиции, как «мужское или мальчиковое пальто», «пальто для
автомобиля», «плащ», «накидку», «анорак (включая лыжную куртку)», «ветровку» и «прочее (включая
пуховики и жилеты без рукавов)».

2. 2
Интересно, что такое «пальто для автомобиля»?
Тихая ярость, традиционно вызываемая таблицами, безусловно, связана с их ужасным видом, ведь часто
они составлены из рук вон плохо. Дизайн таблицы – ее краеугольный камень. Грамотный дизайн упрощает
поиск и сравнение сложных данных, если же таблица оформлена некачественно, информация в ней
становится нечитаемой.
Так давайте сделаем все «по науке»?
Знайте свои цифры в лицо
Не все цифры «рождены» одинаковыми. Речь не о π и ∞, а о цифрах в разрядном и старом стилях, а также
о равных по высоте и пропорциональных цифрах. Ниже простая иллюстрация разницы цифр в старом стиле
и цифр, равных по высоте.

3. 3
Старый стиль vs. Равные по высоте
Цифры в старом стиле выглядят органично в текстовых предложениях, где они лучше подходят по размеру
и совпадают по высоте с маленькими буквами. А вот в таблице лучше будут смотреться выровненные по
высоте цифры – они выглядят более однородными и усиливают сетчатую структуру.
Разница между цифрами в пропорции и разрядными не так очевидна:
Пропорциональные vs. Разрядные
Пропорциональные цифры созданы так, чтобы соответствовать пропорциям и расстоянию между
символами конкретного шрифта (например, 1 будет иметь меньшую ширину, чем 0). А разрядные цифры,
напротив, одинаковы по размеру, что позволяет правильно выровнять разряды чисел в столбце.
Хотя разница может показаться незначительной в масштабе одной или двух строк, использование
разрядного формата позволяет легче просматривать большие таблицы и снижает вероятность
возникновения ошибок.
Техническое замечание для использования разрядных равных по высоте цифр
Для настройки формата цифр в таблице потребуется некоторое количество сил и времени, т.к. разрядная и
равная по высоте форма не являются стандартными по умолчанию. В продуктах Adobe с этой настройкой
поможет панель «opentype», а язык CSS дает синтаксис (пусть и слегка запутанный) для включения этой
функции. Более детальные инструкции по настройке легко найти в Интернете.

4. 4
Плохая новость: не все шрифты позволяют выровнять цифры и настроить разрядность, а те, что позволяют,
обычно стоят немалых денег. Хорошая новость: есть несколько исключений, одно из них - бесплатный
шрифт Work Sans с реальными разрядами и выравниванием.
Если вы не можете найти подходящий шрифт, который позволяет выравнивать цифры и разряды, хорошим
выходом станет моноширинный (или непропорциональный) шрифт, все знаки которого имеют одинаковую
ширину. Хотя такие шрифты внешне и напоминают программный код, они лучше подходят для
отображения цифр в таблицах. Кроме того, новый шрифт San Francisco, установленный по умолчанию в
Apple, идеально выравнивает цифры и задает разрядность, которая легко читается в мелком масштабе.
Выравнивание имеет значение
Три с половиной простых правила выравнивания в таблице:
1. Цифры выравнивают по правому краю
2. Текст выравнивают по левому краю
3. Заголовки столбцов выравнивают так же, как их содержимое
3½. Не выравнивайте содержимое по центру!
Список штатов США с количеством коренного населения — Wikipedia
Цифровая информация читается справа налево, т. к., сравнивая числа, мы обращаем внимание сначала на
единицы, потом на десятки, а потом на сотни. Так большинство людей изучает арифметику: начиная справа
и двигаясь налево. Именно поэтому цифровая информация в таблицах должна быть центрирована по
правому краю.
Текст (в европейских языках) читается слева направо. Обычно текстовая информация в таблице
сравнивается по алфавитному принципу: если два элемента начинаются с одной буквы, то порядок
определяется по второй букве в слове и так далее. Поэтому, если текст центрирован не по левому краю,
просмотр таблицы может стать очень утомительным.

5. 5
Заголовки обычно выравниваются по аналогии с информацией, которую они озаглавливают. Такой подход
поддерживает «вертикаль» таблицы, подчеркивает логику и последовательность изложения.
Выравнивание по центру делает строчки таблицы «рваными», в результате ее сложнее просматривать, и
приходится перегружать ее дополнительными графическими элементами и разделителями.
Одинаковое количество цифр = лучшее выравнивание
Простой способ правильно выровнять таблицу – сохранить одинаковое количество значимых цифр в числах
каждой колонки (проще говоря, количество знаков после запятой). Значимые цифры – отдельная большая
тема для обсуждения, поэтому здесь я буду краток: чем меньше значимых цифр в числах вашей таблицы,
тем легче ее читать.
Краткие и четкие подписи
Понятные подписи данных критически важны с точки зрения читаемости таблицы. Эта сопровождающая
информация делает данные доступными для более широкой аудитории и разнообразного круга задач.
Река Миссисипи, прогноз стадий наводнения – NOAA
Название
Может прозвучать банально, но понятное и лаконичное название таблицы важно не меньше, чем другие,
более сложные аспекты ее создания . С хорошим информативным названием таблица становится более
«мобильной»: ее легче использовать в разнообразных контекстах, в том числе ссылаться на нее во
внешних источниках.
Единицы измерения

6. 6
Чаще всего в современных таблицах подписи единиц измерения повторяются из строчки в строчку.
Рекомендую ограничиться обозначением единицы измерения только в первой строке каждой колонки.
Заголовки
Делайте заголовки как можно короче. Дизайн таблицы должен быть сфокусирован на самих данных, а
длинные заголовки «съедают» слишком много визуального пространства.
Как можно меньше чернил
Оформляя графические элементы таблицы, задайтесь целью снизить видимость границ таблицы без
потери ее структурной целостности. Один из возможных подходов - использовать как можно меньше
виртуальных «чернил», то есть не использовать дополнительные элементы стиля и оформления без
крайней надобности.
Статистика достижений лиги 2016 - BaseballReference
Сетка
Если вы правильно выровняли данные в таблице, то сетка, по сути, теряет свою значимость. Основное
преимущество, которое она оставляет – возможность сократить расстояние между элементами без потери
читаемости массива данных. Если вы оставляете сетку, лучше сделать ее максимально светлой, чтобы она
не мешала быстрому просмотру таблицы.
Горизонтальные линии в таблице самые полезные, они позволяют сократить место по вертикали в
длинных таблицах, ускоряя просмотр и упрощая сравнение значений и временных трендов.
Одно абсолютно бездоказательное мнение об оформлении сетки, которого я придерживаюсь: заливка
зеброй это плохо, очень плохо. Верите вы или нет, мое дело - предупредить.
Заливка
Заливка может быть полезной для обозначения разницы между типами данных, например, когда мы
переключаемся с чисел на их суммы или средние значения. Однако подчеркнуть значения, предоставить

7. 7
дополнительный контекст для их интерпретации или обозначить отличия в значениях за прошлый период
можно и без заливки, используя вместо нее графические элементы ✻, † (один из моих любимых) или ▵.
Кроме того, таблицы, на мой взгляд, должны быть монохромными. Использование цветов для организации
содержания или добавления смыслов увеличивает вероятность неправильного толкования или ошибки, а
также добавляет хлопот людям с ослабленным зрением.
В заключение
Таблицы могут казаться нам скучным «реликтом», но их место в любом информативном документе сложно
переоценить, и они заслуживают каждой минуты, которую мы вкладываем в работу над их дизайном.
Делая более точные, понятные и простые в использовании таблицы, вы заметно облегчите задачу анализа
и понимания больших объемов информации для своей аудитории.
Оригинал - https://medium.com/mission-log/design-better-data-tables-430a30a00d8c