The Mind's Eye — Взгляд на психологию визуализации данных

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

На протяжении тысячелетий люди использовали визуальные эффекты, чтобы рассказывать истории и иллюстрировать ответы на важные вопросы. Самым ранним примером визуализации данных, вероятно, является карта, созданная примерно 27 000 лет назад, и долгое время редко можно было увидеть визуализацию данных для чего-либо, кроме географии.

Устроен ли наш мозг уникальным образом, чтобы распознавать закономерности и связи? Сегодня мы живем в золотой век визуализации данных. Эффективная передача данных может оказаться сложной задачей, и хотя графики могут помочь нам понять сложные данные и даже увидеть их с новой точки зрения, когда дело доходит до правильной передачи сообщения аудитории или принятия бизнес-решений на основе данных, визуализация может быть ключевым способом. чтобы выполнить это. Но что стоит за мощью визуализации данных?

Исторический контекст дизайна визуализации данных

Визуализация данных имеет долгую историю и добилась значительных успехов между 17 и 19 веками. Идея графического представления количественных данных возникла в 18 веке, когда Рене Декарт изобрел двумерную систему координат для отображения значений математических операций. Эта система была усовершенствована, когда Уильям Плейфейр изобрел графические формы, какими мы их знаем сегодня. Ему приписывают изобретение линейных и столбчатых диаграмм, а затем круговой диаграммы и круговой диаграммы.

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

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

Какое отношение психология имеет к визуализации данных?

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

Джон Тьюки, влиятельный американский математик и статистик-теоретик, сказал: «Самая большая ценность изображения заключается в том, что оно заставляет нас замечать то, что мы никак не ожидали увидеть».

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

В приведенном ниже примере таблица позволяет нам увидеть точные цифры. Однако можем ли мы быстро получить самые высокие и самые низкие показатели по возобновляемым водным ресурсам? Не так просто, но те же данные становятся намного яснее и понятнее, если представить их визуально на гистограмме справа.

Доминирующее влияние зрительного восприятия по сравнению с другими органами чувств хорошо иллюстрирует пример датского физика Тора Норретрандерса. Он продемонстрировал силу визуальных эффектов, преобразовав возможности человеческих органов чувств в стандартную производительность компьютера. Sight выходит на первое место, поскольку имеет такую ​​же пропускную способность, как и компьютерная сеть. Его пропускная способность в 10 раз выше, чем у осязания, и в 100 раз сильнее, чем у слуха или обоняния. Маленький квадрат в правом нижнем углу — это то место, где мы когнитивно осознаем сенсорный опыт.

Предварительная обработка

Мало того, что визуальная обработка доминирует над сенсорной, количество данных и скорость, с которой мы их обрабатываем, намного выше, чем мы осознаем. Это явление известно как «превартивная обработка». Это подсознательно и быстро. Глазу требуется 200–500 миллисекунд, чтобы передать информацию, а мозгу — обработать свойство предварительного внимания зрительного стимула (это намного быстрее, чем мозг может обрабатывать данные из электронных таблиц).

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

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

Преимущества предварительной обработки:

• Быстрый/автоматический
• Эмоциональный
• Импульсы/Приводы
• Привычки
• Верования
• Стереотипный
• Подсознание

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

Визуальные переменные

Введенные Жаком Бертеном, визуальные переменные — это различия между элементами, воспринимаемыми человеческим глазом. Изучаемые в течение длительного времени, эти переменные позволяют понять, как человеческий мозг обрабатывает визуальную информацию и ориентируется в ней. Исходный набор «переменных сетчатки» состоял из семи переменных: положение, размер, форма, значение, цветовой оттенок, ориентация и текстура.

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

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

Позиция по общей шкале

Поскольку у нас общая система пространственной отсчета, положение — это самая простая функция для распознавания и оценки элементов в пространстве.

Примеры: гистограммы, точечные диаграммы.

Позиции вдоль невыровненных одинаковых масштабов

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

Пример: маленькие кратные (также известные как диаграммы Реллиса, решетки, сетки и панельные диаграммы)

Длина

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

Пример: гистограммы

Направление

Направление легко распознается человеческим глазом. Он может использовать линейные диаграммы и диаграммы трендов, например, для представления данных, которые меняются с течением времени.

Пример: диаграммы трендов

Угол

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

Пример: круговые диаграммы

Площадь

Относительную величину площадей сложнее сравнивать с длиной линий. Второе направление требует больше усилий для обработки и интерпретации.

Пример: пузырьковые диаграммы

Объем

Объем относится к использованию 3D-объектов в двухмерных пространствах, что значительно усложняет их оценку. Однако исследования показывают, что 3D-объекты можно воспринимать точнее при сравнении двух форм одинаковой размерности.

Пример: трехмерные гистограммы

Насыщенность цвета

Насыщенность цвета относится к интенсивности одного оттенка. Увеличение интенсивности цвета можно интуитивно воспринимать как возрастающее значение числа. Однако точно оценить результаты сложно.

Пример: тепловые карты

Понимание ранжирования визуальных переменных необходимо для создания привлекательных визуализаций данных. Однако это не означает, что дизайнеры должны ограничиваться гистограммами и точечными диаграммами. Кливленд и Макгилл отмечают: «Упорядочивание не приводит к точному предписанию для отображения данных, а скорее представляет собой структуру, в которой можно работать».

Цвет

По словам Уильяма Кливленда, насыщенность цвета и оттенки наименее точны, когда речь идет о восприятии моделей и поведения. Тем не менее, цвет может быть мощным инструментом для дизайнеров визуализации данных, чтобы передать смысл и ясность при отображении данных. Однако крайне важно, чтобы дизайнеры понимали, как работает цвет, что он делает, а что нет.

Цвет в контексте

Наше восприятие цвета зависит от контекста, цвета и его контраста с окружающими предметами.

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

В своей статье «Практические правила использования цвета в диаграммах » Стивен Фью выводит некоторые практические правила из этих наблюдений:

1. Если вы хотите, чтобы разные объекты одного цвета в таблице или на диаграмме выглядели одинаково, убедитесь, что фон — цвет, который их окружает, — однороден.
2. Если вы хотите, чтобы объекты в таблице или на графике были хорошо видны, используйте фоновый цвет, достаточно контрастирующий с объектом.

Цвет рассказывает историю

Цвет — это не просто украшение. Лучше всего, когда используется осмысленно и стратегически. Цвет должен помочь рассказать историю и передать цель представленного набора данных. Как говорится, «меньше значит больше».

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

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

Определение цветовых палитр

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

• ЦветБрюэр. Палитры делятся на три типа:
  • Категориальный (используется для разделения элементов на отдельные группы)
  • Последовательный (используется для кодирования количественных различий)
  • Расходящиеся
• Палитра Виз. Viz Palette позаботится о доступности, дизайне для дальтоников и восприятии равномерно распределенных оттенков. Он включает в себя «цветовой отчет», в котором определяются оттенки, которые могут выглядеть одинаково в различных ситуациях.

Применение гештальт-принципов к визуализации данных

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

Сходство

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

В отличие от диаграммы слева с полосами разного цвета, справа они одинакового синего цвета. Учитывая, что есть только одна переменная (Затраты/Доходы), это имеет смысл. Наличие столбцов одного цвета облегчает понимание данных и устраняет дополнительную когнитивную нагрузку, вызванную использованием разных цветов слева.

Близость

Близость более эффективна, чем сходство, потому что человеческий глаз воспринимает элементы как связанные, основываясь на том, насколько они близки друг к другу.

На приведенной ниже диаграмме цель состоит в том, чтобы сравнить продажи по странам за три квартала. Хотя легко сравнивать продажи каждой страны в течение квартала из-за их близости, было бы сложно анализировать продажи по странам.

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

Корпус

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

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

Заключение

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

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

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

Поделитесь с нами вашими мыслями! Пожалуйста, оставьте свои мысли, комментарии и отзывы ниже.

• • •

Дальнейшее чтение в блоге Toptal Design:

• Полный обзор лучших инструментов визуализации данных
• Визуализация данных — лучшие практики и основы
• Лучшие примеры визуализации данных и дизайны информационных панелей
• Дизайн приборной панели — рекомендации и рекомендации
• COVID-19: идеальный вариант использования дизайн-мышления