Рассказ на данных: заголовок-вывод и один акцент

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

Числа сами не говорят

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

Посмотрите на схему: одни и те же пять чисел показаны тремя способами.

Шаг 1. Одна мысль

Начните с вопроса: «Что человек должен вынести из этой картинки?» Ответ должен быть одной фразой. Если их две, это две диаграммы.

Хороший заголовок диаграммы это вывод, а не подпись к осям.

• Слабо: «Срок решения вопроса по кварталам».
• Сильнее: «Срок решения вопроса сократился с полугода до двух недель».

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

Шаг 2. Подходящая форма

Не всякое число нужно рисовать. Короткое правило для сайта.

• Два числа. Напишите их крупно в тексте: «было 6 месяцев, стало 2 недели». Диаграмма лишняя.
• Сравнить несколько величин. Полосы: их длину читатель сравнивает быстрее всего.
• Изменение во времени. Линия или полосы по годам.
• Точные значения. Таблица.

Круговые диаграммы с множеством долек читаются хуже полос: сравнить углы труднее, чем длины.

Шаг 3. Убрать шум, выделить одно

Хорошая диаграмма похожа на хорошую фотографию: в ней мало лишнего. Что можно убрать: рамки, сетку, объём («3D»), легенду, если подписи можно поставить прямо у полос. Что оставить: числа и названия.

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

Шаг 4. Честность

Диаграмма убеждает быстрее текста, и этим легко злоупотребить. Несколько правил.

• Шкала полос начинается с нуля. Если «обрезать» начало шкалы, разница в три процента выглядит как пропасть. Так делают «обманные графики».
• Сравнивайте одно и то же. «Срок до» и «срок после» мерьте одним способом.
• Показывайте источник и дату. «Наши данные, 2025 год, 40 обращений».
• Не выбирайте удобные точки. Если вы показали лучший месяц и умолчали про остальные, читатель это поймёт потом.
• Малая выборка. На десяти случаях не пишите «в среднем». Пишите «в десяти случаях».

Шаг 5. Доступность

Часть читателей не увидит диаграмму: человек со слабым зрением, пользователь программы чтения с экрана, тот, у кого не загрузилась картинка. Для них нужна текстовая альтернатива: одна-две фразы с главным числом («Срок сократился с 180 дней до 14: в 13 раз»). Подробные таблицы и сложные диаграммы описывает консорциум W3C в руководстве по сложным изображениям (ссылка внизу).

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

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

Практика

Постройте диаграмму из полос про свой проект.

1. Числа. Возьмите сроки, цены или количество ваших услуг или товаров. Не придумывайте точные цифры, если не знаете их: для учебной страницы допустимы оценки, но подпишите это в источнике.
2. Строки. Подпишите каждую полосу названием своей услуги из брифа и впишите значение. Длину задайте в процентах от самого большого.
3. Заголовок. Это вывод с числом или сравнением.
4. Акцент. Один. Класс accent у одной полосы.
5. Источник и дата.
6. Альтернатива. Одна-две фразы с главным числом.

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