Почему в визуализации должно быть мало цветов

Почему в визуализации должно быть мало цветов
#визуализация_данных#цвет#графики#предвнимательные_признаки

Видно, Бог ‒ художник, иначе зачем столько цветов.
Из фильма «Игры разума»
А наша жизнь то радуга, то зебра,
То черно-белая, то краски через край...
Цвета (С) Окулова Мария​

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

Об особенностях зрительного восприятия и признаках, привлекающих внимание

Согласно исследованиям когнитивных психологов, большая часть обработки информации в реальном времени происходит в мозге на автоматизированном (предвнимательном, досознательном) этапе. Процессы сознания развиваются медленнее и охватывают далеко не всю информацию, перерабатываемую мозгом. Британский психолог Энн Трисман предложила аттентивную теорию интеграции признаков, известную также как концепция двух фаз зрительного восприятия: предвнимательной и фокальной. В предвнимательной фазе обработка зрительных ощущений происходит одновременно (в отношении всех элементов визуального поля) и автоматически (без фокусировки внимания). В фокальной фазе обработка зрительных ощущений осуществляется с концентрацией внимания и последовательно (в каждый момент времени только в отношении одного элемента визуального поля). На предвнимательной стадии обработки стимулов элементарные предвнимательные признаки (preattentive attributes) или стимулы, такие как размер, ориентация, цвет обрабатываются автоматически и одновременно, без участия сознания. Иными словами, превнимательная обработка – это непосредственный когнитивный опыт обработки визуального мира ещё до того, как наш мозг осознает то, что мы видели. Это происходит за миллисекунды.

Видео «Предвнимание и внимание»

Психолог Игорь Уточкин об особенностях зрительного восприятия, фокальном внимании и теории интеграции признаков.
Видео по ссылке: https://postnauka.ru/video/53949
Почему наше зрительное восприятие настолько сильно ограничено? Как разделяются предвнимание и фокальное внимание? В чем заключается теория интеграции признаков, и как она объясняет феномены, связанные со зрительным поиском объектов в окружении?

Различные виды предвнимательных признаков (атрибутов, привлекающих внимание)

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

Цвет привлекает внимание

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

А как на самом деле видят пользователи такие графики с множеством цветов? Примерно вот так:

Цвет бросается в глаза, это захватывает. Но в то же время может затруднить понимание смысла визуализации. Чем больше цветов, тем больше сигналов, но и информационного шума тоже больше. Выделить то, что действительно важно, становится сложнее. В данном случае цвет не выполняет свою функцию – разделения сигнала и шума, а только усложняет восприятие и зрительный поиск у пользователей. Они задаются вопросами: что означают все эти цвета? Куда смотреть в первую очередь? Иными словами, используйте цвет стратегически. Не используйте цвет, чтобы сделать что-то красочное и запоминающееся радугой цветов, скорее используйте цвет экономно и разумно, чтобы привлечь внимание вашей аудитории туда, где и куда вы хотите.
Цвет может направлять внимание, то есть он предоставляет какую-то информацию об объектах в зрительном поле до того, как на них будет направлено внимание, причем эта информация используется для определения того, куда в первую очередь следует направить внимание. Именно этого мы добиваемся при создании визуализации данных – направление и управление вниманием нашей аудитории в процессе визуальной коммуникации.

Цвет сигнализирует, где искать/куда смотреть

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

Ответ: бирюзовый
А здесь?

Ответ: фиолетовый
В квадрате ниже цвет уже найти проще за счет группировки (объекты, имеющие одинаковый цвет воспринимаются как связанные или принадлежащие к одной группе):

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

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

Цветовой акцент – это то, что помогает сделать визуальный акцент на определенном срезе данных и выделить его из всей совокупности данных. Если для всей визуализации используется серый цвет, то выбирайте, например, синий для создания цветового акцента на необходимой категории данных (или нескольких категориях данных).
Пример визуализации с цветовым акцентом:

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

Он создает информационную иерархию. Мы воспринимаем информацию, обозначенную серым, как справочные данные или как второстепенную по отношению к представленной в цвете информации.

Серый цвет обеспечивает нам контекст, не отвлекая от основной идеи и не обращая на себя слишком много внимания.

Экономное (разумное) и стратегическое использование цветов

Выделение цветом наиболее эффективно для визуального поиска, когда задействовано всего несколько цветов. Чем меньше цветов, тем быстрее их можно найти. Почему так происходит? Когда на графике много цветов, то они теряют свойства привлекающего признака на предвнимательной стадии обработки зрительной информации.
Полезным приёмом является увеличение насыщенности цвета интересующей области и уменьшение насыщенности для всего остального. Ключ в том, чтобы понять тип данных, которые мы визуализируем и как цвет может кодировать эти данные и может улучшить понимание графика вашей аудиторией. Каждый раз сомневайтесь при добавлении нового цвета в вашу палитру цветов для графика: зачем мне необходимо показать различия цветом? Можно ли объединить категории данных в одну группу, обозначаемую одним цветом? Эксперты считают, что мы не можем различать более восьми цветов одновременно. Это связано с объемом нашей кратковременной памяти (5–7 цветов будет достаточно).

Пример палитры цветов The Economist


Используется всего 5–6 цветов для разных типов графиков из этой общей палитры
А если необходимо визуализировать количественные данные? Степень интенсивности конкретного цвета может легко ассоциироваться с количественными значениями – чем она выше, тем больше значение, и наоборот. Нам совершенно не обязательно для каждого количественного значения подбирать цвет, когда разнообразие цветов (все цвета радуги) скорее будет отвлекать, чем помогать. Используйте цветовой круг Иттена для побора цветов, которые хорошо сочетаются друг с другом. Полезный мнемонический приём для легкого запоминания основного правила работы с кругом: «Все цвета друзья своих соседей и любителей их противоположностей» (Марк Шагал, художник, один из ярких представителей художественного авангарда XX века).

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

Диаграмма рассеяния, показывающая, какие цвета для фона используются крупными медиа и организациями
Как только вы станете более уверены в выборе цветов для визуализаций, то использование разных цветов (кроме белого) для фона может показаться привлекательной идеей. Фон для графика – это элемент визуального стиля и «проводник» бренда, повышающий его узнаваемость. Например, легко узнаются графики, которые публикует The Economist или фоновый цвет графиков Financial Times:
вариант 1 https://www.datawrapper.de/_/afgI0/
вариант 2 https://www.datawrapper.de/_/yzuYH/
В зависимости от фона будут по-разному восприниматься цвета на графиках и визуализация целиком. Фон чаще всего очень яркий и ненасыщенный, чтобы можно было подобрать контрастные цвета для элементов графиков. У многих что-то теплое и светлое (пастельные желтый или оранжевый). Желательно, чтобы фон был ненасыщенным и либо очень ярким (белый, светло-серый, светло-желтый), либо очень тёмным (черный, тёмно-серый). Для большинства графиков я использую светло-светло-серый (#fefefe, в модели цвета RGB #fefefe составляет 99.61% красного, 99.61% зеленого и 99.61%), который выглядит как белый, но не такой яркий. Источник: https://blog.datawrapper.de/background-color-of-data-visualizations/
Количество используемых цветов определяется необходимостью быть последовательным. В некоторых случаях последовательное использование цветов является обязательным для снижения когнитивной нагрузки на вашу аудиторию. Они тратят время на запоминание того, что означает отдельный цвет на графике и ожидают, что этот же цвет будет использоваться в этом же значении далее. Посмотрите ниже пример непоследовательного применения цветов, где одни и те же цвета кодируют совершенно разные категории данных.

Пример непоследовательного применения цветов

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

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


Цвет настроения синий



Круговая диаграмма, которая показывает эмоциональное восприятие цвета в разных культурах.

Удивительно, насколько по-разному мы воспринимаем мир. К примеру, в Азии и Восточной Европе счастье – красного цвета. Американцы видят его белым, индусы ассоциируют с зеленым, а в Северной Америке – с желтым цветом. На графике представлены 84 эмоции (ассоциации). Источник: https://informationisbeautiful.net/visualizations/colours-in-cultures/


Итак, есть несколько важных аспектов применения цвета для визуализации данных, которые необходимо учитывать:
1. использовать цвет умеренно,
2. последовательно,
3. учитывать возможные проблемы восприятия цветов и эмоционального воздействия цвета,
4. учитывать цвета фона для визуализации.

Мой телеграм-канал: https://t.me/People_Analytics
People analytics is a data-driven approach to managing people at work || Канал про HR-аналитику: оценка персонала, психометрика, использование R для анализа и визуализации HR-данных.

Редакция журнала пишет в требованиях к статьям, что нужно использовать только чёрно-белые рисунки, и проблема снимается.

Увы, не совсем так, ибо там есть свои "подводные камни". Если бы проблема выбора цветов решалась переделкой в ч/б формат...

Даже специальные челленджи в датавиз-компьюнити разных проводятся:
см. например https://community.storytellingwithdata.com/challenges/jun-2020-its-all-there-in-black-and-white

Отдельная история - это встроенные цветовые палитры в Excel! Спасибо за разбор, интересно)

Это да! Самый настоящий "троянский конь" от создателя софта, чтобы плодить ужасные визуализации