В 1910 психолог Макс Ветгеймер (Max Wertheimer), наблюдавший за вспышками сигнальных огней на железнодорожном переезде, испытал внезапное озарение, впоследствии послужившее основой для разработки концепции гештальта (от немецкого Gestalt — целостная структура, образ, форма) и формулировки принципов визуального восприятия объектов.
Цепочка рассуждений психолога была примерно следующей: на самом деле световой сигнал не перемещается влево-вправо — это просто последовательно включаются и выключаются 2 отдельные лампы. Еще более наклонность человеческого мозга «дорисовывать» наблюдаемый объект до завершенной, «полной» структуры заметна при взгляде на «бегущие огоньки», создаваемые электрическим лампами, по периметру окружающими вывески и козырьки крыш кинотеатров.
Для наблюдателя все выглядит так, будто отдельный огонек перемещается по некоей траектории, периодически меняя направление движения, хотя на деле происходит последовательное включение-выключение отдельных ламп. Это мозг человека объединяет отдельные объекты в некий целостный образ, категориальноотличающийся от суммы своих частей — как неподвижные лампочки качественноотличаются от «бегущего огонька», воспринимаемого наблюдателем этой электрической иллюминации.
Далее мы рассмотрим некоторые основные принципы гештальта и их практическое применение в веб-дизайне.
Ключевые идеи, лежащие в основе теории гештальта
«Целое есть нечто иное, нежели сумма его частей», — Курт Коффка (Kurt Koffka, немецко-американский психолог, один из основателей гештальт-психологии).
Приведенная выше цитата есть кратчайшее изложение теории гештальта. В примере с внезапной догадкой Вертгеймера целостная структура (гештальт, воспринимаемый образ) — «бегущий огонек» — в принципе не получается при простом сложении составляющих ее элементов (отдельных электрических ламп).
Другими словами, люди визуально воспринимают группу объектов как нечто целое, прежде чем распознают отдельные объекты, составляющие группу. Мы видим целое как что-то большее, чем сумма его частей, и даже когда детали общей картины являются полностью отдельными объектами, мы при взгляде на них сгруппируем их в законченную пространственно-наглядную форму (еще одно определение гештальта).
Есть 4 ключевые идеи, формирующих принципы гештальта:
Появление/проявление (Emergence) — целое распознается прежде, чем его составляющие.
Появление — это процесс формирования сложного целостного образа из простых визуальных паттернов. При попытке идентифицировать объект мы в первую очередь определяем его контур, его очертания. Затем мы в поисках совпадения сравниваем выделенный контур со паттернами восприятия (знакомыми формами и объектами), уже хранящимися в нашей визуальной памяти. Только после того как контур наблюдаемого целого совпадет с существующим в памяти стереотипом, мы начнем идентифицировать части, составляющие упомянутое целое.
При разработке дизайна целевой страницы имейте ввиду, что посетители сначала будут распознавать элементы лендинга в их самом общем виде. Простой, хорошо выделяемый взглядом объект быстрее вовлечет пользователя в конверсионное действие, чем сложный объект, состоящий из множества мелких деталей и с трудно определяемым контуром.
Воплощение/обобществление (Reification, «конкретизация») — аспект восприятия, в котором объект воспринимается как содержащий больше пространственно-наглядной информации, чем на самом деле присутствует в сенсорном стимуле от наблюдаемого объекта.
Для того чтобы наблюдаемый объект максимально совпал с хранящимися в визуальной памяти стереотипами восприятия, мозг человека генерирует дополнительную информацию, позволяющую заполнить «пробелы», из-за которых происходит несовпадение контура объекта и имеющегося паттерна восприятия. Иначе говоря, мы выбираем почти полное совпадение воспринимаемого образа и «дорисовываем» его до существующего визуального стереотипа.
Обобществлениепозволяет дизайнеру не завершать контур объекта для того, чтобы пользователь увидел собственно объект. Достаточно оставить столько частей контура, чтобы зритель мог сопоставить его с имеющимися шаблонами восприятия.
Множественная стабильность (Multi-stability, мультистабильность) — свойство, позволяющее переключаться между стабильными альтернативными интерпретациями при неоднозначном опыте восприятия объекта (неоднозначном перцептивном опыте).
Проще говоря, некоторые объекты могут быть интерпретированы сознанием более чем одним способом. На этом свойстве визуального восприятия базируется множество пространственных иллюзий. Ниже приведен пример, с которым вы, скорее всего, уже знакомы: на этой картинке можно увидеть либо два лица в профиль, либо вазу (см. левую иллюстрацию в разделе «Фигура и фон»).
Вы не можете находиться одновременно в двух стабильных состояниях восприятия объекта, видя сразу вазу и лица. Вместо этого вы будете быстро перемещаться вперед-назад между двумя устойчивыми альтернативами смыслового толкования изображения, причем одна из них будет доминирующим вариантом восприятия объекта, и чем дольше вы будете придерживаться этой интерпретации, то тем труднее вам будет увидеть «альтернативную реальность», имеющуюся на той же картинке.
С точки зрения практического применения упомянутого эффекта в дизайне: если вы захотите изменить чье-то восприятие некоего объекта, то не пытайтесь изменить все сразу. Найдите способ предоставить зрителю альтернативную точку зрения, и это автоматически приведет к укреплению новой интерпретации визуального объекта при ослаблении его первоначального восприятия.
Инвариантность (Invariance) — свойство восприятия, позволяющее узнавать объекты независимо от их вращения, перемещения, масштабирования, изменения условий освещения и т. д.
Поскольку мы чаще всего смотрим на объекты внешнего мира с отличающихся визуальных перспектив, то мы выработали способность распознавать эти объекты независимо от точки зрения на них.
Представим себе картину, что вы могли бы узнавать знакомого человека строго при взгляде на него анфас — повернувшись в профиль он представал перед вами абсолютным незнакомцем. Однако мы все еще можем узнавать близких и друзей — несмотря на все возможное разнообразие траекторий наших взглядов на знакомых нам людей. :)
Вы можете увидеть воплощение этих идей в приведенных ниже принципах. Основная концепция излагаемого материала сводится к тому, что принципы гештальта описывают механизмы восприятияи ядро визуального языка, с которыми и работают дизайнеры.
Принципы гештальта
Большинство из этих принципов относительно легки для понимания, тем более, что их объединяет общая тема, «красной нитью» проходящая через многие из них:
«При прочих равных условиях связанные между собой элементы при восприятии группируются в единицы высшего порядка», — Стивен Палмер (Stephen Palmer), американский психолог.
Закон содержательности (Law Prägnanz, закон простоты, «хорошая фигура»)
«Люди будут воспринимать и интерпретировать неоднозначные и сложные изображения как простейшую из возможных форм или комбинацию из простейших форм».
Это — фундаментальный принцип гештальта. Люди предпочитают иметь дело с простыми, понятными и упорядоченными вещами, которые на уровне инстинкта воспринимаются более безопасными, чем объекты сложные и непонятные.
Простые вещи не требуют от человека напряженных умственных усилий и не грозят ему неприятными сюрпризами. Вот почему при восприятии сложных форм мы, как правило, «реорганизуем» их до набора простых компонентов или до простой целой формы.
На иллюстрации выше вы, скорее всего, увидите левое изображение как комбинацию простейших форм — круга, квадрата и треугольника, — как это показано на картинке справа, чем как сложную и неоднозначную для интерпретации целую форму.
В данном случае нам проще увидеть три различных объекта, нежели один сложный. Иногда же проще воспринять один объект, дополнив его с помощью замкнутости.
Замкнутость (Closure, завершение)
«При взгляде на сложно расположенные элементы мы стремимся увидеть в них простую узнаваемую форму».
Как и предыдущий закон содержательности, принцип замкнутость базируется на стремлении человека к упрощению воспринимаемых образов. Нозамкнутостьявляется противоположностью содержательности, позволяющей — как на примере выше — упрощать визуальное восприятие через представление одного объекта как комбинации трех.
При завершениимы объединяем части, чтобы увидеть простое целое. Наш мозг дополняет недостающую информацию, чтобы сформировать законченную фигуру.
На левом изображении выше вы увидите белый треугольник, хотя изображение на самом деле состоит из трех черных «Пэкменообразных» форм (Pac-Man-like shapes). На рисунке справа вы в комбинации нескольких случайных фигур увидите панду. Так получается потому, что увидеть треугольник и панду проще, чем пытаться понять, что же означает каждая отдельная часть рисунка.
Замкнутость упрощенно можно рассматривать как «клей», соединяющий элементы воедино, хотя речь здесь идет о более глобальном понятии — о склонности человека искать и находить завершенные структуры.
Ключ к использованию принципа замкнутости— предоставить пользователю достаточно информации, чтобы он мог «дорисовать» в своем восприятии недостающие элементы. Если информации мало, то элементы будут рассматриваться как отдельные объекты, а не части целого; если ее слишком много, то нет никакой необходимости в том, чтобы в процессе восприятия произошло завершение.
Симметрия и порядок (Symmetry and Order)
«Люди склонны воспринимать объекты как симметричные формы, образованные вокруг условных центров».
Симметрия дает людям ощущение надежности и порядка, которые мы склонны искать в силу извечного человеческого стремления — преобразовывать хаос в порядок. Этот принцип приводит нас к понятию баланса в композиции картины, рисунка или веб-страницы, хотя композиция может и не быть идеально симметричной, чтобы находиться в равновесии.
На иллюстрации выше вы видите три пары открывающих и закрывающих скобок. Принцип близости (The principle of proximity), о котором речь пойдет чуть позже, позволяет нам предположить, что мы должны увидеть что-то еще. Явная незавершенность изображения — кажется, что с обоих сторон не хватает еще по одной скобке — свидетельствует о том, что в восприятии человека симметрияимеет приоритет над близостью.
Так как наши глаза быстро обнаруживают симметрию и порядок,то эти принципы могут быть использованы для эффективного распространения срочной информации.
Фигура и фон (Figure and Ground)
«Элемент воспринимается либо как фигура/объект (элемент в фокусе внимания), либо как фон (поверхность, на которой расположена фигура/объект)».
Принцип «фигура и фон» относится к взаимоотношению «позитивных» (значимых, обладающих контекстом) элементов любой композиции и «негативного» фона (не обладающего контекстом). Восприятие любого изображения начинается с того, что глаз отделяет фигуры (объекты) от фона.
Соотношение «фигура и фон» может быть устойчивым или неустойчивым в зависимости от того, насколько легко определить, что есть фигура, а что — фон. Классический пример неустойчивого соотношения представлен на левом рисунке выше. Вы либо видите вазу, либо два лица в зависимости от того, воспринимаете ли черный цвет как цвет объекта, а белый как цвет фона, или же наоборот.
То, что вы с легкостью перемещаетесь от одного восприятия изображения к другому, наглядно демонстрирует нестабильность взаимоотношения фигуры и фона.
Чем более стабильно соотношение «фигура и фон», тем проще мы можем сфокусировать внимание нашей целевой аудитории именно на том, что мы хотим им показать (кнопка призыва к действию, главный заголовок лендинга и другие конвертирующие элементы).
В увеличении стабильности нам могут помочь два взаимосвязанных принципа восприятия:
- Площадь— из двух перекрывающихся объектов как фигура (независимо от цвета) воспринимается тот, чья площадь меньше.
- Выпуклость— не вогнутые, а выпуклые формы обычно воспринимаются как фигуры.
Равномерная связность (Uniform Connectedness)
«Элементы, соединенные визуально, воспринимаются как более тесно связанные, чем элементы, не имеющие такого соединения».
На рисунке ниже линии соединяют две пару элементов, что создает восприятие того, что связанные элементы находятся в некоем отношении.
Из всех принципов оформления объектов как взаимосвязанных равномерная связность— сильнейший. На изображении мы видим 2 квадрата и 2 круга, образующих тесно взаимосвязанные пары «круг-квадрат», потому что они соединены визуально.
Обратите внимание, что линии могут и не касаться соединяемых объектов для того, чтобы последние воспринимались как взаимосвязанные.
Общие области (Common Regions)
«Элементы воспринимаются как часть группы, если они находятся в одной и той же замкнутой области».
Другой способ показать связь между элементами — расположить их особым образом. Все, что находится внутри замкнутой области, воспринимается как связанное между собой. Все, выходящее за ее пределы, рассматривается как набор отдельных объектов.
Круги на иллюстрации ниже одинаковы, однако же мы видим две различные группы, причем объекты в каждой группе воспринимаются как связанные между собой.
Типичный способ показать общую область— нарисовать прямоугольник вокруг элементов, связанных друг с другом. Это способ будет работать и для элементов, размещенных на участках фона, отличающихся по цвету.
Близость (Proximity)
«Объекты, расположенные ближе друг к другу, воспринимаются как взаимосвязанные в отличие от тех, что расположены дальше друг от друга».
Принцип близостиподобен принципу общих областей,но использует пространство как упомянутая нами ранее замкнутость.
Если элементы расположены близко друг к другу, то они рассматриваются как часть группы, а не в качестве отдельных элементов. Это особенно верно, когда элементы в группе расположены ближе друг к другу, чем к любым элементам вовне.
Объекты не должны быть схожи по каким-либо признакам (предположим, цвет, размер, форма), чтобы их можно было расположить в пространстве поблизости друг от друга и они воспринимались как взаимосвязанные.
Продолжение (Continuation)
«Элементы, расположенные на линии или кривой, воспринимаются как более тесно связанные, чем элементы, не находящиеся на линии или кривой».
Это инстинкт — придерживаться определенного направления. Стоит вам взглянуть или пойди в выбранном направлении, вы будете совершать это действие, пока не увидите что-то значительное, или же вы не определите, что там нет ничего интересного, на что стоит посмотреть.
Другая интерпретация этого принципа такова: мы будем продолжать наше восприятие форм за их конечными точками. На рисунке выше мы видим пересекающиеся прямую и кривую линии вместо двух отрезков и двух сегментов кривой, встречающихся в одной точке.
Общее предназначение/синхронность (Common Fate/Synchrony)
«Элементы, движущиеся в одном направлении, воспринимаются как более связанные, чем элементы неподвижные или же движущиеся в разных направлениях».
Независимо от того, как далеко друг от друга размещены элементы или от того, насколько они непохожи, если они выглядят как движущиеся или изменяющиеся синхронно, то они будут восприниматься как связанные друг с другом.
Для осуществления принципа общей участи элементы даже не нуждаются в движении. Более важно, что они выглядяткак имеющие общее предназначение. Предположим, что 4 человека неподвижно стоят рядом, но двое из них наблюдают за чем-то, синхронноповернув головы вправо. Эти двое и будут рассматриваться как имеющие общее предназначение.
На иллюстрации выше стрелки указывают на общее предназначениеэлементов. Собственно движение или изменение даже не является необходимыми — сильнее всего на общее предназначение/синхронность указывают стрелки или направления взглядов, только подразумевающие движение как таковое.
Параллелизм (Parallelism)
«Элементы, параллельные друг другу, считаются более взаимосвязанными, чем элементы не параллельные».
Этот принцип похож на вышеописанное общее предназначение. Линии часто применяются как символ указания на какое-либо направление или перемещение куда-то.
Параллельные линии воспринимаются как указание на одно и тоже направление или движение в одинаковом направлении, что интерпретируется при визуальном восприятии как взаимосвязь этих линий.
Следует отметить, что принцип параллелизма применим и для кривых или форм, хотя для последних — с оговорками: на них должны быть расположены несколько параллельных линий.
Сходство (Similarity)
«Элементы, имеющие сходные общие характеристики, воспринимаются как взаимосвязанные — в отличие от элементов, не обладающих данными характеристиками».
Любое количество характеристик объектов может быть сходным: цвет, форма, размер, текстуры и т. д. Когда пользователь видит эти сходные характеристики, он воспринимает элементы как взаимосвязанные в силу их общих характеристик.
На рисунке ниже красные круги рассматриваются как связанные с другими красными кругами из-за сходства цвета. То же утверждение справедливо и для черных кругов. Красные и черные круги воспринимаются как непохожие друг на друга, хотя по форме все они — круги.
Очевидное применение принципа сходства в веб-дизайне — цвет ссылок. Как правило, ссылки в содержимом страницы оформляются одинаково, чаще всего синим цветом и подчеркиванием. Это помогает посетителю, определившему опытным путем что перед ним ссылка, аналогичным способом использовать все слова/фразы, выделенные сходными характеристиками: цветом и подчеркиванием.
Точки фокусировки (Focal Points)
«Точки фокусировки — элементы, способные за счет отличия от других захватывать и удерживать внимание посетителя лендинга/сайта».
Этот принцип предполагает, что внимание посетителя будет сфокусировано на элементе, чем-либо отличающихся от других. На рисунке ниже точка фокусировки выделена формой, цветом и отбрасываемой «тенью» (псевдообъемом).
Принцип точек фокусировки вниманиябазируется на нашей способности быстро идентифицировать неизвестные объекты как потенциальные источники опасности.
Принципы сходстваи точек фокусировкисвязаны в том смысле, что Focal Point не должна быть похожа ни на один другой элемент посадочной страницы, чтобы привлечь внимание посетителя. На лендингах/сайта в точках фокусировки обычно размещают критически важные для конверсии элементы, например, CTA.
Прошлый опыт (Past Experiences)
«Элементы, как правило, воспринимаются в соответствии с прошлым опытом пользователя».
Прошлый опытявляется, пожалуй, самым слабым гештальт-принципом. При сравнении с любым из ранее перечисленных принципов каждый из них будет доминировать над принципом прошлого опыта.
Прошлый опыт является уникальным для каждого человека, так что трудно сделать правдоподобные предположения о том, как будет воспринят новый визуальный элемент произвольно взятым пользователем.
Тем не менее существуют некий универсальный опыт, с определенными оговорками присущий каждому человеку: увидев светофор, мы будем ожидать, что красный свет будет обозначать необходимость остановиться, а зеленый «разрешит» идти. Так работает принцип прошлого опыта.
Многие из наших интерпретаций визуальных стимулов определяются культурными установками, главенствующими в обществе (вспомним о «психологии цветов»). В некоторых странах белый цвет — цвет чистоты и невинности, а черный — зла и смерти. В других регионах мира интерпретации этих двух цветов могут быть кардинально противоположными.
Да и вообще, понятие «общепринятый опыт» само по себе очень условное — не все люди в течение жизни могут пережить сходные события для приобретения похожего прошлого опыта.
Вместо заключения
И для маркетологов, и для веб-дизайнеров важно понимать принципы гештальта, потому что они составляют основу графического отображения оффера, они описывают, как люди воспринимают визуальные объекты, к каковым относится и целевая страница на мониторе пользователя.
В принципах, изложенных выше, разобраться сравнительно легко: для понимания большинства из них достаточно определений и иллюстраций. Гораздо труднее понять, как именно принципы гештальта на практике влияют на готовность посетителя к конверсии и на важнейшие бизнес-метрики.
В дальнейшем мы подробно рассмотрим влияние гештальта на дизайн: мы увидим, как симметрия помогает нам сбалансировать визуальный и текстовый контент лендинга и как совместное применение принципов сходства и точек фокусировки внимания позволяет создать визуальную иерархию на лендинге.
Высоких вам конверсий!
По материалам smashingmagazine.com, image source pool-gestaltprinciples