Законы Гештальта в создании диаграмм

Визуализируйте данные с учетом теории восприятия

The following two tabs change content below.
    Ирина Касаева

    Ирина Касаева

    24, июня 2014

    Гештальт-психология изучает законы, в соответствии с которыми мы воспринимаем формы и целостные структуры.

     Эти законы можно применить в дизайне:
    - в построении визуальной иерархии
    - в создании симметрию
    - улучшить гиперссылки
    - в обучении

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

    Закон прегнантности ( Prägnanz)
    Это основной закон группировки в гештальт-психологии. Прегнантность — немецкое слово, означающее «содержательность». Быть содержательным означает быть кратким и полным смысла/вещества.

    Закон Prägnanz утверждает, что человеческий мозг любит простоту и стремится обрабатывать простые модели — модели, которые упорядочены и организованны.

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

    2
    Вывод: необходимо организовать данные логически и систематически при каждом удобном случае.

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

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

     3
    Вывод: выстраивайте элементы в линию, чтобы облегчить сравнение различных элементов в группах.

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

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

     4

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

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

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

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

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

    Гештальт — закон близости
    Объекты, которые расположены рядом друг с другом, воспринимаются как группы. Мы можем легко находить сходство в таких группах. При этом, объекты, которые находятся далеко друг от друга, воспринимаются как несвязанные между собой.

     Как это применимо в диаграммах? Чтобы сравнить объем продаж каждого региона в течение квартала сгруппируем данные следующим образом:

     7

    Если же теперь нам нужно сравнить объемы продаж по кварталам для каждого из регионов, диаграмма примет вид:

     8
    Вывод: группируйте данные в соответствии с приоритетом в информации.

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

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

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

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

    Создав достаточный контраст между формой и основанием, можно упростить возможность разграничения типов объектов. Дополнительную когнитивную нагрузку в графике слева создает низкий контраст между фигурой и фоном. Увеличение контраста (как на диаграмме справа), улучшает читаемость.

     10
    Вывод: должен быть достаточный контраст между фигурой и фоном.

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

    На диаграмме слева данные по продуктам А и Б задают группировку. А на графике справа, продукт C воспринимается как отличный и не связанный с А и Б.

    11
    Вывод: используйте направление и/или движение, чтобы установить или отрицать взаимосвязи.

    Источник

    Похожие новости: