Ранг визуальных каналов: позиция против цвета

Не все способы закодировать число одинаково точны — позицию глаз читает лучше всего.

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

Эксперименты Кливленда и Макгилла

В 1984 году Уильям Кливленд и Роберт Макгилл провели опыты: людям показывали графики, где одни и те же величины закодированы разными каналами, и просили оценить отношения. Оказалось, что точность падает в предсказуемом порядке. Этот порядок — фундамент дизайна графиков: самой важной переменной отдавайте самый точный канал.

Почему «пирог» проигрывает столбцам

Круговая диаграмма кодирует доли углом и площадью сектора — каналами 4 и 5. Человек плохо сравнивает углы: отличить 27 % от 24 % на «пироге» почти невозможно. Те же доли на столбчатой диаграмме кодируются длиной (канал 3) на общей оси — и сразу видно, какой больше. Поэтому в науке «пирог» почти всегда заменяют столбцами или точечным графиком. Подробнее об этом — в разделе про выбор типа графика.

Проверим интуицию числами

Насколько труднее сравнивать площади, чем длины? Возьмём две величины, отличающиеся в 1,5 раза. Если кодировать их длиной — отношение длин 1,5. Если площадью круга ($S = \pi r^2$), то при тех же визуальных «размерах» отношение радиусов всего $\sqrt{1{,}5}$, и глаз недооценивает разницу.

import math

v1, v2 = 100, 150          # истинные значения, отношение 1.5
# длина (бар): радиус не нужен, отношение видно прямо
print("отношение по длине :", round(v2 / v1, 3))
# площадь (пузырь): сохраняем площадь пропорц. значению
r1 = math.sqrt(v1)
r2 = math.sqrt(v2)
print("отношение радиусов :", round(r2 / r1, 3))
print("глаз сравнивает радиусы, а данные в площади -> недооценка")

Вывод:

отношение по длине : 1.5
отношение радиусов : 1.225
глаз сравнивает радиусы, а данные в площади -> недооценка

Истинное отношение 1,5, но радиусы отличаются лишь в 1,22 раза — поэтому на пузырьковой диаграмме разница в полтора раза выглядит как четверть. Площадь — слабый канал.

Как работает под капотом

Зрительная система эволюционно заточена под оценку положения объектов в пространстве — отсюда максимальная точность позиционных каналов. Восприятие длины линейно и довольно точно. А вот площадь мы воспринимаем по степенному закону Стивенса с показателем меньше единицы: удвоение площади ощущается как рост примерно в 1,7 раза, а не в 2. Цвет же мозг использует для категоризации («это красное, то синее»), а не для измерения — поэтому им хорошо различать группы, но плохо показывать величину.

Закон Стивенса и почему это не вкусовщина

Иерархия каналов — не мнение дизайнеров, а следствие измеримых свойств восприятия. Психофизик Стэнли Стивенс установил, что воспринимаемая интенсивность стимула связана с физической степенным законом $\psi = k\,\phi^{a}$. Для длины показатель $a$ близок к единице (восприятие почти линейно и точно), для площади — около 0,7 (мы недооцениваем), для яркости — ещё меньше. Именно эти показатели и выстраивают каналы по точности: чем ближе показатель к 1, тем вернее глаз считывает величину.

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

Частые ошибки

• Кодировать важную величину площадью или цветом вместо позиции или длины.
• Масштабировать пузырьки по диаметру, а не по площади — двойное искажение.
• Круговая диаграмма с близкими долями — углы неразличимы.
• 3D-эффект на столбцах — добавляет паразитный канал объёма, мешающий чтению длины.

Итог

• Точность каналов убывает: позиция → длина → угол → площадь → цвет.
• Самой важной переменной — самый точный канал.
• Цвет различает группы, но не измеряет величину.
• Площадь воспринимается нелинейно и недооценивается.