5.10 Дизайн визуализации данных

Обзор и мотивация

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

Эта глава об этом мастерстве: выборе правильной диаграммы, честном кодировании данных, использовании цвета и компоновки так, чтобы глаз падал куда нужно, и сохранении всего этого доступным. Она находится в части 5, потому что диаграмма это интерфейс и наследует всё от остальной части. Она опирается на основы пользовательского опыта (UX) из главы 5.1, заимствует токены и компоненты из дизайн-систем главы 5.2, должна выполнять обязанности доступности из главы 5.3 и говорит простым целеустремлённым голосом дизайна контента из главы 5.4. Она намеренно держится вне сантехники. Конвейеры данных, хранилища и инструменты отчётности аналитики и бизнес-аналитики (глава 7.3) другой предмет, как и более широкая наука о решениях и культура данных главы 7.5. Здесь вы учитесь делать картинку хорошей, откуда бы ни брались данные.

Для больших команд ставки это координация и доверие. Когда каждый отряд оформляет свои диаграммы, компания в итоге имеет пятьдесят диалектов «выручки во времени» с разными осями, цветами и округлением, а руководители учатся не доверять всем им. В корпоративной среде вводящая в заблуждение панель направляет реальный бюджет не туда. В государстве публичная диаграмма акт коммуникации с гражданами и вопрос коммуникации с заинтересованными сторонами из главы 10.16: усечённая ось на графике общественного здоровья может запаниковать или ложно успокоить миллионы, а доступность юридическая обязанность, а не предпочтение. Хороший дизайн визуализации то, как данные зарабатывают право на веру.

Ключевые принципы

Начинайте с вопроса читателя, затем выбирайте диаграмму, отвечающую на него.
Подбирайте визуальное кодирование под тип данных: положение для точного сравнения, оттенок для категорий.
Максимизируйте долю чернил, несущих данные; удаляйте украшения, не несущие ничего.
Используйте преаттентивные атрибуты намеренно, чтобы глаз сначала падал на точку.
Выбирайте палитры по роли данных (последовательная, расходящаяся, категориальная) и держите их безопасными для дальтоников.
Никогда не полагайтесь только на цвет; предоставляйте текст, структуру и запасной вариант в виде таблицы.
Говорите правду о масштабе: никаких усечённых осей, вводящих в заблуждение площадей, неоправданных двойных осей.
Аннотируйте озарение; не заставляйте читателя его искать.

Рекомендации

Начинайте с вопроса, затем выбирайте диаграмму

Каждая хорошая диаграмма начинается с вопроса, а не набора данных. Прежде чем тянуться к типу диаграммы, назовите вопрос читателя одним предложением, затем сопоставьте с задачей. Сравнение («что больше?») хочет столбчатую диаграмму, где длины лежат на общей базовой линии, а глаз ранжирует их без усилий. Тренд во времени («куда это идёт?») хочет линейную диаграмму, потому что соединённая линия читается как непрерывное изменение. Распределение («как это распределено?») хочет гистограмму или «ящик с усами», показывающие форму, центр и выбросы. Часть-к-целому («какова доля каждой части?») обычно лучше обслуживается составным столбцом, чем кругом, потому что люди сравнивают длины гораздо точнее углов; оставляйте круговую диаграмму для двух-трёх секторов, где деление и есть вся история. Связь («движутся ли эти два вместе?») хочет диаграмму рассеяния, единственную диаграмму, выявляющую корреляцию и кластеры с первого взгляда.

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

Подбирайте визуальное кодирование под данные

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

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

Стремитесь к графическому совершенству: максимизируйте чернила данных

Эдвард Тафти дал визуализации ясную этику дизайна, и её стоит усвоить. Его центральная мера отношение чернил данных (data-ink ratio): из всех чернил (или пикселей) на странице какая доля действительно кодирует данные? Всё остальное (тяжёлые линии сетки, рамки, тени, фоновые заливки, избыточные легенды, декоративная 3D) налог на внимание читателя. Тафти называет это декоративное «мусором диаграммы» (chartjunk), и указание резкое: сотрите. Осветлите линии сетки до шёпота, уберите рамку диаграммы, подписывайте данные прямо вместо принуждения к походу в легенду и позвольте данным стоять почти в одиночестве. Диаграмма закончена не тогда, когда нечего добавить, а когда нечего убрать без потери смысла.

Одна идея Тафти заслуживает особого упоминания для команд: малые кратные (small multiples). Вместо запихивания восьми рядов в одну запутанную линейную диаграмму нарисуйте восемь малых диаграмм в сетке, каждая с теми же осями и масштабом, по одной на ряд. Глаз просматривает сетку и мгновенно замечает выбивающуюся, потому что каждая панель напрямую сопоставима. Малые кратные превращают «слишком много линий, чтобы прочесть» в «страницу, которую можно просмотреть», и масштабируются гораздо лучше нагромождения большего цвета и большего числа записей легенды на одном перегруженном графике.

Используйте преаттентивные атрибуты и визуальную иерархию

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

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

Выбирайте цвет по роли и делайте его безопасным для дальтоников

Цвет канал, чаще всего используемый неверно, поэтому воспринимайте его как систему из трёх семейств. Последовательная палитра идёт от светлого к тёмному в одном оттенке и кодирует количество от малого к большому (плотность населения, выручка). Расходящаяся палитра имеет два оттенка, встречающихся в нейтральной средней точке, и кодирует отклонение от центра (аномалия температуры, прибыль и убыток вокруг нуля, согласие в опросе вокруг нейтрали). Категориальная палитра набор различных оттенков для подписи групп без порядка; держите её около семи цветов, потому что дальше читатель не может их различить. Выбор неверного семейства (категориальная радуга для количества, последовательная шкала для неупорядоченных категорий) борется с восприятием читателя.

Затем сделайте её доступной, потому что примерно у одного из двенадцати мужчин есть некоторая форма цветовой слепоты. Красный и зелёный классическая ловушка: диаграмма «красное плохо, зелёное хорошо» невидима при самой частой аномалии. Выбирайте палитры, безопасные для дальтоников (расходящиеся схемы от синего к оранжевому и хорошо проверенные категориальные наборы из инструментов вроде ColorBrewer безопасные отправные точки), и проверяйте, имитируя распространённые нарушения, до выпуска. Проверяйте и контраст, чтобы текст и метки соответствовали отношениям, требуемым стандартами доступности из главы 5.3. Цвет должен усиливать сообщение, которое выживает и без него.

Не полагайтесь только на цвет; предоставляйте альтернативы

Доступность в визуализации данных идёт дальше выбора палитры. Основное правило Руководства по доступности веб-содержимого (WCAG) в том, что цвет никогда не должен быть единственным способом передачи информации. Поэтому сочетайте цвет со вторым признаком: прямыми подписями, различными формами или маркерами на диаграмме рассеяния, разными стилями линий (сплошная, пунктирная) на линейной диаграмме или текстовой подписью на важном столбце. Читатель, не различающий ваши оттенки, всё равно должен получить полное сообщение из избыточного кодирования.

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

Знайте, исследуете ли вы, объясняете или мониторите

Диаграммы выполняют три разные работы, и их путаница порождает плохую работу. Исследовательская визуализация для вас, аналитика, ищущего в данных интересное; она может быть быстрой, плотной и некрасивой, потому что аудитория один эксперт, который будет итерировать. Объяснительная визуализация для аудитории, сообщающая конкретный вывод, который вы уже понимаете; она намеренна, аннотирована и сведена к единому сообщению и принадлежит повествованию главы 10.16. Панель это третье: постоянный воспринимаемый с первого взгляда дисплей для мониторинга известных метрик во времени, оптимизированный под «не случилось ли что-то прямо сейчас?», а не под разовый аргумент.

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

Никогда не вводите в заблуждение: честные масштабы, честные площади

Быстрейший способ разрушить доверие диаграмма, лгущая, выглядя правдивой. Самая частая ложь усечённая ось: начало оси y столбчатой диаграммы с 90 вместо 0 превращает 2-процентную разницу в обрыв, потому что длина столбца больше не отображается на значение. Столбцы должны начинаться с нуля всегда; линейные диаграммы, кодирующие изменение, а не величину, могут использовать ненулевую базу, если вы ясно её подписали. Вторая ловушка двойная ось: две шкалы y на одной диаграмме позволяют выдумать любую корреляцию сдвигом шкал, а читатели редко замечают. Предпочитайте две выровненные диаграммы или индексированный вид. Третья вводящая в заблуждение площадь: когда вы масштабируете значок или пузырь и по ширине, и по высоте, представляя значение, площадь растёт как квадрат и дико преувеличивает разницу; масштабируйте по площади, а не по длине стороны.

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

Аннотируйте озарение и добавляйте интерактивность сдержанно

Диаграмма, заставляющая читателя искать суть, сделана наполовину. Аннотируйте её: заголовок, формулирующий вывод («Регистрации удвоились после мартовского запуска»), а не тему («Регистрации во времени»), выноска на ключевом событии, опорная линия для цели или среднего. Аннотация то место, где дизайн из главы 5.4 встречает картинку; слова несут аргумент, а метки дают доказательство.

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

Компромиссы: плюсы и минусы

Решение	Плюсы	Минусы
Строить визуализацию в своём продукте	Полный контроль дизайна, доступности, взаимодействия	Стоит инженерного времени; вы владеете производительностью и сопровождением
Использовать диаграммы BI-инструмента	Быстро, дёшево, подключено к хранилищу	Обезличенный вид; ограниченный контроль доступности и аннотаций
Интерактивные диаграммы	Отвечают на уточняющие вопросы; исследование на месте	Медленнее, труднее сделать доступными, отказывают на печати и касании
Статические диаграммы	Быстро, доступно, готово к печати, однозначно	Не может ответить на следующий вопрос читателя
Панель	Воспринимаемый с первого взгляда мониторинг многих известных метрик	Плохо для разового аргумента; соблазняет расползанием метрик
Объяснительная диаграмма	Доносит одно сообщение с силой	Неверна для мониторинга или открытого исследования
Богатый цвет и эффекты	Бросается в глаза; ощущается отполированным	Мусор диаграммы; вредит отношению чернил данных и доступности

Повторяющееся напряжение между выразительностью и честностью и ясностью. Каждая функция, делающая диаграмму богаче (вторая ось, цветовой градиент, 3D-перспектива, анимация), также добавляет способ ввести в заблуждение или похоронить суть. Разрешайте это по умолчанию в сторону меньшего: простейшая диаграмма, отвечающая на вопрос, в наименьшем числе цветов, с масштабом, говорящим правду. Добавляйте выразительность, только когда её требует конкретный вопрос читателя, и платите цену доступности и производительности сознательно. Другой постоянный компромисс построить или купить. BI-инструмент выводит диаграмму на экран за минуты и верный выбор для внутреннего мониторинга; визуализации, встроенной в клиентский продукт, обычно нужны контроль дизайна, доступности и производительности, который даёт только специально построенный компонент.

Вопросы для обсуждения с командой

Есть ли у наших диаграмм один визуальный язык или каждая команда изобретает свой? Когда каждый отряд выбирает собственные цвета, соглашения об осях, округление и типы диаграмм, организация накапливает диалекты, тихо подрывающие доверие: две панели, показывающие «активных пользователей» с разными шкалами и разными зелёными, учат руководителей, что на данные нельзя полагаться. Принесите три диаграммы одной метрики от трёх команд и положите рядом. Найденные разрывы (усечённая ось здесь, радуга категорий там, выручка в тысячах на одной и миллионах на другой) аргумент в пользу общей библиотеки компонентов диаграмм с согласованными палитрами, правилами осей по умолчанию и встроенной доступностью, управляемой как дизайн-система из главы 5.2. Цель в том, чтобы любая диаграмма в компании читалась правильно с первого взгляда, потому что грамматика общая.
Пережили бы наши важнейшие диаграммы читателя-дальтоника и программу чтения с экрана? Доступностью в визуализации данных легко пренебречь, потому что диаграммы по-прежнему хорошо выглядят для людей, их построивших, и это именно ловушка. Возьмите три диаграммы, которые ваше руководство видит чаще всего, и прогоните их через симулятор цветовой слепоты, затем попробуйте понять их с выключенным экраном, используя только альтернативный текст и любой запасной вариант в виде таблицы. Если красно-зелёная диаграмма статуса становится плоской, если альтернативный текст говорит «диаграмма» и ничего больше или если нет способа добраться до исходных чисел без мыши, вы нашли группу читателей, которых сейчас исключаете, а в государственной работе это юридическая экспозиция по стандартам главы 5.3. Решите, кто отвечает за исправление и принадлежит ли оно общему компоненту, чтобы решить это один раз.
Для каждой диаграммы, управляющей решением, можем ли мы указать вопрос, на который она отвечает, и подтвердить, что она не вводит в заблуждение? Многие диаграммы существуют потому, что кто-то однажды их сделал, а не потому, что они отвечают на живой вопрос, а некоторые из самых просматриваемых искажают масштаб, и никто этого не замечает. Пройдите по диаграммам на ваших главных панелях и по каждой назовите решение, которое она информирует, и проверьте её целостность: столбцы от нуля, нет неоправданной двойной оси, площади масштабированы честно, заголовок формулирует вывод, а не тему. Диаграммы, не отвечающие ни на какой текущий вопрос, кандидаты на удаление, а вводящие в заблуждение кандидаты на срочное исправление, потому что диаграмма, тихо преувеличивающая разницу, хуже отсутствия диаграммы. Это напрямую связано с культурой решений главы 7.5: команда, доверяющая своим диаграммам, принимает более быстрые, лучше обоснованные решения.
Когда команде нужна диаграмма, мы тянемся сначала к встроенным диаграммам BI-инструмента или к управляемой библиотеке компонентов и кто решает, к чему? Тяга к BI-инструменту реальна: он быстр, дёшев и уже подключён к хранилищу, поэтому большинство панелей мониторинга принадлежит там. Но его обезличенные умолчания то место, где подкрадываются диалекты и мусор диаграммы, а его средства доступности и аннотаций обычно слабы, что важнее всего для клиентских и публичных диаграмм, несущих вашу репутацию. Для большой организации опасность в том, что умолчание никогда не решается, поэтому каждая команда дрейфует к тому, что проще всего, и хозяйство дробится. Принесите опись того, где диаграммы реально строятся сегодня, несколько примеров рядом из BI-инструмента против специально построенного компонента и пробелы доступности в каждом. В корпоративной и государственной среде добавьте реальность закупок: вы нередко привязаны к одной BI-платформе на годы, поэтому знайте точно, какие диаграммы она может отрисовать честно и доступно, а каким нужен управляемый компонент, до контракта, а не после.
Кому разрешено публиковать диаграмму внешней или руководящей аудитории и какую рецензию она проходит сначала? Аналитика самообслуживания подлинное благо, но она означает, что вводящая в заблуждение диаграмма может достичь совета директоров или общества без второй пары глаз, а усечённую ось или неподписанный всплеск на публичном графике гораздо труднее отменить, чем предотвратить. Напряжение это скорость и автономия против целостности и доверия: закройте слишком жёстко, и люди обойдут вас, закройте слишком слабо, и вы выпустите диаграмму, запаникующую рынок или избирателей. Принесите текущий путь публикации ваших самых видимых диаграмм, примеры, достигшие внешней аудитории без рецензии, и свидетельства того, аннотированы ли метод и неопределённость на самой диаграмме. В государственной и регулируемой работе это остро: официальная статистика коммуникация с гражданами и вопрос доверия заинтересованных сторон из главы 10.16, поэтому назовите, кто подписывает, какой контрольный список целостности и доступности применяет и где лежит подотчётность, когда диаграмма вводит в заблуждение.
Где мы добавили интерактивность и рассказывает ли статический вид по умолчанию всю историю без мыши? Интерактивность соблазнительна и дорога: она прячет значения за наведением, ломается на касании и для пользователей клавиатуры и может довести бюджет отрисовки до ползания на больших наборах данных, как предупреждает глава 5.6. Конкурирующее соображение в том, что настоящий уточняющий вопрос (точное значение, углубление, отфильтрованный сегмент) иногда стоит цены, поэтому цель сдержанность, а не запрет. Принесите список интерактивных диаграмм, которые вы поставляете, результаты проверки каждой без мыши и на телефоне и числа производительности, когда данные вырастают до десятков тысяч точек. Для корпоративной и государственной аудитории угол доступности юридическая обязанность по стандартам главы 5.3, а диаграммы читают на киосках, распечатках и со вспомогательными технологиями, поэтому статическое аннотированное умолчание должно нести основное сообщение, а интерактивность может лишь добавлять глубину под ним.

Взгляд по секторам

Стартап. Побеждает скорость, поэтому опирайтесь на диаграммы, уже имеющиеся в вашем BI-инструменте или лёгкой библиотеке диаграмм, а не стройте хозяйство компонентов визуализации, которым вы не можете укомплектовать. Одно дешёвое решение, окупающееся позже, выбрать единую палитру, безопасную для дальтоников, и привычку «столбцы от нуля» в первый день, чтобы не накопить дюжину диалектов одной метрики, прежде чем у вас будет десять клиентов. Предпочитайте статическую аннотированную диаграмму, формулирующую вывод, интерактивной, которую вы не успеете сделать доступной.

Малый бизнес. Без специалиста по данным и при ограниченном бюджете воспринимайте визуализацию как то, что вы получаете от уже оплачиваемых инструментов: электронной таблицы, аналитики SaaS, панели в вашей CRM. Выучите горстку правил целостности, которые важны (столбцы начинаются с нуля, нет радуги для количества, нет круга с девятью секторами), и применяйте готовую палитру, безопасную для дальтоников, а не заказывайте заказную. Покупайте диаграмму, а не стройте её, и приберегите внимание для правильного её чтения.

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

Государственный сектор. Каждая публичная диаграмма акт коммуникации и подлежит публичной подотчётности, поэтому честные масштабы и доступность WCAG обязанности, а не предпочтения. Предпишите столбцы от нуля, площадь, кодируемую площадью, палитры, безопасные для дальтоников, заголовки простым языком, формулирующие вывод, и загружаемую доступную таблицу рядом с каждой диаграммой. Аннотируйте метод и неопределённость на самой диаграмме, чтобы спорная цифра не могла быть сведена к вводящему в заблуждение заголовку, и убедитесь, что любой закупаемый вами BI-инструмент способен выполнять эти стандарты, поскольку обязательство ваше независимо от поставщика.

Примеры

Стартап. Аналитический стартап из десяти человек выпускает клиентскую панель использования. Первая версия использует тему BI-инструмента по умолчанию: радугу цветов категорий, линии сетки повсюду и круговую диаграмму с девятью секторами, которую никто не может прочесть. Пользователи жалуются, что числа кажутся недостойными доверия. Команда перестраивает её как встроенные компоненты с небольшой палитрой, безопасной для дальтоников, заменяет круг отсортированной столбчатой диаграммой, осветляет линии сетки и добавляет прямые подписи, так что легенда исчезает. Они задают заголовки, формулирующие выводы, и добавляют альтернативный текст и переключатель таблицы к каждой диаграмме. Вовлечённость в панель растёт, потому что клиенты наконец могут прочесть её с первого взгляда, а более чистый дизайн становится аргументом продаж на демонстрациях.

Крупная организация. Международный банк имеет сотни внутренних панелей, построенных десятками команд, у каждой свои цвета и привычки по осям, и руководители регулярно не доверяют им, потому что одна и та же метрика выглядит по-разному в каждой презентации. Компания вводит управляемую библиотеку диаграмм поверх своей BI-платформы: согласованные последовательная, расходящаяся и категориальная палитры; твёрдое правило, что оси столбцов начинаются с нуля; стандартное форматирование чисел и встроенная в каждый компонент доступность. Проверка визуальной регрессии в конвейере поставки главы 8.1 блокирует диаграммы, нарушающие стандарты. Через год диаграмма любой команды читается правильно с первого взгляда, а руководство перестаёт спрашивать «какой версии этого числа мне верить?».

Государственный сектор. Национальное статистическое ведомство публикует публичные данные об экономике, здравоохранении и населении, а его диаграммы читают журналисты, политики и граждане, не могущие проверить лежащие в основе цифры. Ведомство воспринимает каждую диаграмму как коммуникацию с обществом и вопрос доверия заинтересованных сторон из главы 10.16. Оно предписывает честные масштабы (столбцы от нуля, нет вводящих в заблуждение двойных осей, площадь кодируется площадью), расходящиеся палитры, безопасные для дальтоников, для региональных сравнений, заголовки простым языком, формулирующие вывод, и загружаемую доступную таблицу рядом с каждой диаграммой для удовлетворения WCAG. Когда публикуется спорная цифра, аннотация объясняет метод и неопределённость на самой диаграмме, так что усечённая ось или неподписанный всплеск никогда не смогут стать вводящим в заблуждение заголовком, подрывающим общественное доверие.

Бизнес-обоснование: мотивы, ROI и TCO

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

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

Антипаттерны и ловушки

Усечённая ось столбцов: начало столбцов выше нуля, так что малая разница выглядит пропастью; самая частая ложь диаграмм.
Неоправданная двойная ось: две шкалы y на одной диаграмме, сдвигаемые, чтобы выдумать любую корреляцию, которую автор хочет показать.
Вводящая в заблуждение площадь: масштабирование значка или пузыря по длине стороны, так что площадь, а с ней воспринимаемое значение, растёт как квадрат.
Радуга для количества: кодирование упорядоченного количества неупорядоченными категориальными оттенками, так что глаз не может прочесть величину.
Круг со многими секторами: более трёх секторов, вынуждающих читателей сравнивать углы, которые они не могут оценить; используйте отсортированный столбец.
Мусор диаграммы: тяжёлые линии сетки, рамки, 3D и тени, снижающие отношение чернил данных и хоронящие сигнал.
Цвет как единственный признак: красно-зелёный статус без подписи или формы, невидимый дальтоникам и программам чтения с экрана.
Охота за легендой: принуждение к походу в далёкую легенду там, где хватило бы прямой подписи на линии или столбце.
Выделено всё: каждый ряд жирный и яркий, так что контраст рушится и ничто не выделяется.
Диаграмма там, где побеждает таблица: картинка для четырёх точных чисел, которые читатель должен прочесть точно.

Модель зрелости

Уровень 1, Начальный: Диаграммы делаются стихийно в том инструменте, что под рукой. Цвета, оси и форматы различаются по автору, усечённые оси и радуга категорий обычны, доступность не рассматривается, а читатели не доверяют результатам.
Уровень 2, Развитие: Некоторые команды принимают базовые практики, но они непоследовательны по организации. Столбцы начинаются с нуля местами, очевидный мусор диаграмм отговаривается на рецензии, а фирменная палитра существует у нескольких команд, но другая команда дальше по коридору всё ещё выпускает круг с девятью секторами и красно-зелёную диаграмму статуса.
Уровень 3, Стандартизация: Общая библиотека компонентов диаграмм кодирует согласованные последовательную, расходящуюся и категориальную палитры, честные правила осей, стандартное форматирование и доступность (безопасно для дальтоников, альтернативный текст, запасная таблица). Стандарты документированы и принуждаются по организации, а объяснительное, исследовательское и панельное использование различаются дизайном.
Уровень 4, Управление: Качество визуализации измеряется и контролируется относительно базовых значений. Проверки доступности и целостности диаграмм работают в конвейере поставки и сообщают доли прохождения; доля диаграмм со столбцами от нуля, соответствующим контрасту цветом и запасной таблицей отслеживается как метрика; понимание тестируется с настоящими читателями относительно базового значения; а число расходящихся диалектов каждой ключевой метрики наблюдается по мере сходимости к одному. Диаграммы, нарушающие стандарты, ловятся до выпуска, а числа, а не мнение, определяют, где библиотеке нужна работа.
Уровень 5, Оркестрация: Визуализация непрерывно улучшается и интегрирована по организации. Стандарты адаптируются по мере изменения требований доступности и потребностей читателей, палитры, компоненты и соглашения уточняются по измеренным свидетельствам, аннотация и повествование норма, а практика вплетена в аналитику и культуру решений, так что диаграмма любой команды читается правильно с первого взгляда, а визуальный язык эволюционирует по мере обучения организации.

Идеи для обсуждения

Какая диаграмма на вашей главной панели выглядела бы иначе, если бы её ось начиналась с нуля, и меняет ли это историю?
Выберите вашу важнейшую диаграмму: переживает ли её сообщение оттенки серого, а если нет, какой избыточный признак это исправил бы?
Где вы используете интерактивную диаграмму, когда статическая аннотированная рассказала бы всю историю быстрее?
Формулируют ли заголовки ваших диаграмм выводы или темы и кто заметил бы, если бы заголовочное число тихо поменялось на обратное?
Какая из ваших диаграмм не отвечает ни на какое текущее решение и что потребовалось бы, чтобы удалить её, чтобы никто не заметил?
Когда команде следует строить визуализацию в продукте против использования BI-инструмента и есть ли у вас письменное правило выбора?

Главные выводы

Начинайте с вопроса читателя, затем выбирайте диаграмму: столбцы для сравнения, линии для тренда, рассеяние для связи, гистограмма для распределения, отсортированные столбцы вместо кругов для части-к-целому.
Подбирайте кодирование под данные: тратьте положение и длину на самое важное количество и используйте оттенок для категорий, никогда для величины.
Стремитесь к графическому совершенству: максимизируйте отношение чернил данных, удаляйте мусор диаграмм, используйте малые кратные и направляйте глаз преаттентивным контрастом и ясной иерархией.
Воспринимайте цвет как систему (последовательная, расходящаяся, категориальная), держите его безопасным для дальтоников и никогда не полагайтесь только на цвет; предоставляйте подписи, альтернативный текст и запасную таблицу.
Говорите правду о масштабе (столбцы от нуля, честные площади, нет неоправданных двойных осей), аннотируйте озарение и добавляйте интерактивность, только когда её требует настоящий уточняющий вопрос.

Источники и дополнительное чтение

Edward R. Tufte, The Visual Display of Quantitative Information
Edward R. Tufte, Envisioning Information
Stephen Few, Show Me the Numbers: Designing Tables and Graphs to Enlighten
Stephen Few, Information Dashboard Design: Displaying Data for At-a-Glance Monitoring
Cole Nussbaumer Knaflic, Storytelling with Data: A Data Visualisation Guide for Business Professionals
Alberto Cairo, The Truthful Art: Data, Charts, and Maps for Communication
Alberto Cairo, How Charts Lie: Getting Smarter about Visual Information
William S. Cleveland, The Elements of Graphing Data
Jacques Bertin, Semiology of Graphics: Diagrams, Networks, Maps
Tamara Munzner, Visualisation Analysis and Design
Cynthia A. Brewer, ColorBrewer: Colour Advice for Cartography (colorbrewer2.org)
World Wide Web Consortium (W3C), Web Content Accessibility Guidelines (WCAG) 2.2