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

Соответствующая теория была разработана в 1910-20-е годы немецкими психологами Максом Вертгеймером, Вольфгангом Келером и Куртом Коффкой. С того времени она нашла применение в самых разных дисциплинах — от психотерапии до кибернетики и дизайна.

6 принципов гештальта описывают, как мы интерпретируем визуальные отношения между объектами. Автор OrangeCrush

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

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

Концепции восприятия

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

Эмерджентность (возникновение) — мы сначала различаем форму целиком, и лишь потом детали. Изображение с Wikimedia Commons

Реификация —  мы видим формы, которых не существует. Изображение с Wikimedia Commons

Инвариантность (неизменность) — мы распознаем одну и ту же форму, несмотря на искажения. Изображение с Wikimedia Commons

Мультистабильность — мы одновременно видим все возможные интерпретации двойственного изображения. Изображение с Wikimedia Commons

Концепция фигуры-фона — мы разделяем объекты переднего и заднего плана, даже если изображение не кажется трехмерным. Изображение с Wikimedia Commons

Прошлый опыт — мы можем увидеть на этом рисунке стол для пикника, хотя на нем изображен лишь абстрактный треугольник. Изображение с Wikimedia Commons

• Эмерджентность: Сначала мы воспринимаем форму объекта в целом и лишь потом его отдельные части.
• Реификация: Наши глаза автоматически заполняют пробелы и создают формы даже при отсутствии деталей. Например, использование в дизайне негативного пространства заключается в создании форм из “воздуха” (пробелов между элементами), как например, скрытая стрелка в логотипе FedEx.
• Инвариантность: Люди распознают похожие формы, даже если они различаются по цвету, размеру, весу или расположению в пространстве.
• Мультистабильность: Если существует более одной возможной интерпретации двойственной формы, глаз будет воспринимать все значения одновременно. Другими словами, глаз всегда пытается устранить неопределенность, и в случае, когда есть несколько вариантов, он будет переключаться между ними. Это часто можно встретить в оптических иллюзиях, таких как ваза Рубина.
• Концепция фигуры-фона: Глаз располагает объекты в трехмерном пространстве, разделяя фон и передний план. Это правило соблюдается, даже если элемент на переднем плане является полностью плоским: глаз будет воспринимать все, что располагается вокруг этого объекта, как фон.
• Прошлый опыт: Субъективный личный или культурный опыт влияет на то, как будет интерпретирована форма.

6 принципов гештальта в дизайне

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

Принцип простоты

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

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

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

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

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

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

Принцип близости

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

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

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

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

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

Принцип сходства

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

Хорошим примером является разделение на группы предметов одежды в зависимости от их формы: футболки, рубашки, жилеты, брюки и т.д., даже если они висят в шкафу вперемешку.

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

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

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

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

Принцип общей судьбы

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

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

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

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

Принцип непрерывности

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

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

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

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

Например, логотип компании Kasella можно воспринимать как несколько расходящихся стрелок разных цветов, однако закон непрерывности позволяет нам увидеть в этой форме букву “K”, несмотря на разрыв в центре.

Принцип завершения

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

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

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

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

Используйте рассмотренные принципы гештальта на практике

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

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