Как подбирать палитры для визуализации данных
Сегодня найти хорошую цветовую палитру достаточно легко, а вот подобрать правильные цвета для визуализации данных — непростая задача. К сожалению, далеко не все готовые палитры подходят для отображения сложных графиков и визуализации данных.
Medium опубликовал статью, в которой представлено решение этой проблемы.
Подобрать палитру для визуализации большого массива данных нелегко по нескольким причинам:
1. Многие палитры не подходят для людей, плохо различающих цвета
Многие палитры совершенно не продуманы с точки зрения доступности для людей с ограниченными возможностями. Палитра Flat UI Colors — одна из самых популярных в интернете, и понятно почему: она отлично выглядит. Но, как видно из названия, эта палитра создана для пользовательских интерфейсов (UI). Людям, не различающим цвета, сложно воспринимать визуализацию данных, если она выполнена при помощи такой палитры:
2. В палитрах недостаточно цветов
Еще одна проблема многих существующих палитр — это недостаточное количество цветов. При создании визуализаций и инфографики часто используется 6 цветов, а в некоторых случаях и 8–12. В большинстве палитр просто нет нужного количества цветов.
Вот несколько примеров с Color Hunt:
3. Сложно различать представленные цвета
Но, погодите-ка, есть палитры, которые выглядят как градиенты. В теории вы могли бы дополнить их любым количеством цветом, так ведь?
К сожалению, обычно они недостаточно яркие и, поэтому, очень быстро становятся неразличимыми, как вот эти с сайта Color Hunt:
Давайте возьмем первую палитру и адаптируем ее под серию из 10 типов данных:
Представьте, как сложно среднестатистическому пользователю правильно различить эти цвета в схеме или в графике и сопоставить цвет и легенду. Особенно сложно различимы четыре оттенка зеленого слева.
Как подбирать палитры для визуализации данных
1. Разнообразие в оттенках и в яркости
Нужно убедиться, что ваши палитры доступны для людей с ограниченными возможностями зрения. Для этого следите, чтобы яркость цветов значительно различалась. Различия в яркости видны всем.
Однако палитры цветов разной яркости может быть недостаточно
Чем более разнообразной будет цветовая палитра, тем проще пользователям понять информацию, представленную в визуальной форме. Те, кто может различать цвета, лучше поймут информацию, если она будет представлена в разнообразных оттенках; более того — им будет приятнее работать с такой визуализацией.
Чем шире разнообразие оттенков и уровней яркости, тем больше различных систем данных вы сможете визуализировать.
2. Придерживайтесь природных цветовых шаблонов
Дизайнеры знают один секрет, который не всегда очевиден ребятам с более активным левым полушарием: не все цвета равнозначны.
С чисто математической точки зрения, цветовой переход от светло-фиолетового до темно-желтого должен вызывать похожие ощущения, что и переход от светло-желтого до темно-фиолетового. Но посмотрите на рисунок ниже: первый переход воспринимается естественно, а второй — не очень.
Это происходит потому, что мы ориентируемся на градиенты, которые можем наблюдать в природе. Мы видим невероятный закат, в котором ярко-желтый переходит в темно-фиолетовый, но нигде на земле светло-фиолетовый не переходит в коричневато-желтый.
То же самое можно сказать про переход от светло-зеленого к фиолетово-синему, от светло-желтого к темно-зеленому, от коричневато-оранжевого к холодному серому и т.п.
Поскольку мы постоянно видим эти природные градиенты, они кажутся знакомыми и приятными и в виде палитры, и в контексте визуализации данных.
3. Используйте градиентные палитры, в которые входят разные оттенки
Не важно, нужно ли вам 2 цвета или 10: вы можете выбирать цвета из градиентов и создавать естественные на вид визуализации с достаточным разнообразием оттенков и уровней яркости.
Этот подход делает палитры доступными для людей с ограниченными возможностями и достаточно понятными и очевидными для остальных людей. Кроме того, этот подход поддерживает даже сложные массивы данных (вплоть до 12 информационных групп).
Изучаем правила цветовых сочетаний, используя цветовой круг