Решил поучаствовать в конкурсе Игоря Штанга «Перевёрстка таблицы симптомов коронавируса». Прежде в «Оди» вышла статья Игоря о наглядности в таблицах.

Задача

Переверстать таблицу симптомов коронавируса с официального сайта Роспотребнадзора.

В целом, это не самая плохая таблица, но с ней есть несколько проблем:

1. Строки расположены слишком плотно, из-за чего читать симптомы не очень удобно.
2. Слово «Ковид-19» забирает на себя слишком много внимания, хотя главное здесь — симптомы.
3. Черезполосица белого и голубого в строках ничего не означает.
4. Из-за смешивания выключки по центру в таком массивном заголовке и выключке по левому краю, вся таблица создаёт ощущение беспорядка и хаоса.

Процесс перевёрстки

Для начала построим примерную сетку на основе Гельветики, разберёмся с количеством текстовых стилей и размерами кеглей. На этом этапе работаем без цвета, просто располагаем информацию, смотрим, чтоб всё влезло.

Успокаиваем шапку таблицы: отдаём всю ширину заголовку, телефон Роспотребнадзора и ярлык с ковидом убираем в подвал.

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

Добавляю красную линию, чтобы отделить заголовки от информации. «Нет» заменяю на тире — таблица становится чуть легче за счёт этих пробелов. Стало уже чище, но теперь кажется, что информация, наоборот, сильно размазано по формату.

Ещё понимаю, что Гельветика — слишком «квадратный» шрифт для этой таблицы. Меняю его на Интер, бесплатный и хорошо сбалансированный гротеск. Он близок к Гельветике, но у него лучше кириллица и больше начертаний.

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

Красную разделительную линию делаю серой и менее активной. Симптопы, которые не встречаются совсем или встречаются редко, успокаиваю и ставлю прозрачность на 50%. Так человек сначала обратит внимание на более распространённые симптомы, а потом на те, что присущи болезни лишь иногда и редко.

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

Результат

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