В 1910 психолог Макс Ветгеймер (Max Wertheimer), замечавший за вспышками сигнальных огней на ЖД переезде, испытал неожиданное озарение, потом послужившее базой для разработки концепции гештальта (от германского Gestalt — целостная структура, образ, форма) и формулировки правил визуального восприятия объектов.
Цепочка рассуждений психолога была приблизительно следующей: в действительности световой сигнал не перемещается влево-вправо — это легко последовательно включаются и выключаются 2 отдельные лампы. Еще более наклонность людской мозга «дорисовывать» замечаемый объект до завершенной, «полной» структуры заметна при взоре на «бегущие огоньки», создаваемые электрическим лампами, по периметру окружающими вывески и козырьки крыш кинотеатров.
Для наблюдателя все выглядит так, словно бы отдельный огонек перемещается по некоей траектории, иногда меняя направление перемещения, не смотря на то, что на деле происходит последовательное включение-выключение отдельных ламп. Это мозг человека объединяет отдельные объекты в некоторый целостный образ, категориально отличающийся от суммы собственных частей — как неподвижные лампочки как следует отличаются от «бегущего огонька», принимаемого наблюдателем данной электрической иллюминации.
Потом мы разглядим кое-какие ключевые принципы гештальта и их использование на практике в веб-дизайне.
- Как применять правила дизайна для повышения конверсии
Главные идеи, лежащие в базе теории гештальта
«Целое имеется что-то иное, нежели сумма его частей», — Курт Коффка (Kurt Koffka, немецко-американский психолог, один из основателей гештальт-психологии).
Вышеприведенная цитата имеется малейшее изложение теории гештальта. В примере с неожиданной предположением Вертгеймера целостная структура (гештальт, принимаемый образ) — «бегущий огонек» — в принципе не получается при несложном сложении составляющих ее элементов (отдельных электрических ламп).
Иначе говоря люди визуально принимают группу объектов как что-то целое, перед тем как выявят отдельные объекты, составляющие группу. Мы видим целое как что-то большее, чем сумма его частей, а также в то время, когда подробности неспециализированной картины являются всецело отдельными объектами, мы при взоре на них сгруппируем их в законченную пространственно-наглядную форму (еще одно определение гештальта).
Имеется 4 главные идеи, формирующих правила гештальта:
Появление/проявление (Emergence) — целое распознается прежде, чем его составляющие.
Появление — это процесс формирования сложного целостного образа из несложных визуальных паттернов. При попытке идентифицировать объект мы прежде всего определяем его контур, его очертания. После этого мы в отыскивании совпадения сопоставляем выделенный контур со паттернами восприятия (объектами и знакомыми формами), уже хранящимися в отечественной визуальной памяти.
Лишь по окончании того как контур замечаемого целого совпадет с существующим в памяти стереотипом, мы начнем идентифицировать части, составляющие упомянутое целое.
При разработке дизайна целевой страницы имейте ввиду, что визитёры сперва будут распознавать элементы лендинга в их самом неспециализированном виде. Простой, прекрасно выделяемый взором объект стремительнее вовлечет пользователя в конверсионное воздействие, чем сложный объект, складывающийся из множества небольших подробностей и с тяжело определяемым контуром.
Воплощение/обобществление (Reification, «конкретизация») — нюанс восприятия, в котором объект воспринимается как содержащий больше пространственно-наглядной информации, чем в действительности присутствует в сенсорном стимуле от замечаемого объекта.
Чтобы замечаемый объект максимально совпал с хранящимися в визуальной памяти стереотипами восприятия, мозг человека генерирует дополнительную данные, разрешающую заполнить «пробелы», в следствии которых происходит несовпадение контура объекта и имеющегося паттерна восприятия. В противном случае говоря, мы выбираем практически полное совпадение принимаемого образа и «дорисовываем» его до существующего визуального стереотипа.
Обобществление разрешает дизайнеру не завершать контур объекта чтобы пользователь заметил фактически объект. Достаточно покинуть столько частей контура, дабы зритель имел возможность сопоставить его с имеющимися шаблонами восприятия.
Множественная стабильность (Multi-stability, мультистабильность) — свойство, разрешающее переключаться между стабильными другими интерпретациями при неоднозначном опыте восприятия объекта (неоднозначном перцептивном опыте).
Несложнее говоря, кое-какие объекты смогут быть трактованы сознанием более чем одним методом. На этом свойстве визуального восприятия базируется множество пространственных иллюзий. Ниже приведен пример, с которым вы, вероятнее, уже привычны: на данной картине возможно заметить или два лица в профиль, или вазу (см. левую иллюстрацию в разделе «фон и Фигура»).
Вы не имеете возможность пребывать в один момент в двух стабильных состояниях восприятия объекта, видя сходу вазу и лица. Вместо этого вы станете скоро перемещаться вперед-назад между двумя устойчивыми альтернативами смыслового толкования изображения, причем одна из них будет главным вариантом восприятия объекта, и чем продолжительнее вы станете придерживаться данной интерпретации, то тем тяжелее вам будет заметить «другую действительность», имеющуюся на той же картине.
С позиций использования на практике упомянутого результата в дизайне: если вы захотите поменять чье-то восприятие некоего объекта, то не пробуйте поменять все сходу. Отыщите метод дать зрителю другую точку зрения, и это машинально приведет к упрочнению новой интерпретации визуального объекта при ослаблении его начального восприятия.
Инвариантность (Invariance) — свойство восприятия, разрешающее выяснять объекты независимо от их вращения, перемещения, масштабирования, трансформации условий освещения и т. д.
Потому, что мы значительно чаще наблюдаем на объекты внешнего мира с отличающихся визуальных возможностей, то мы выработали свойство распознавать эти объекты независимо от точки зрения на них.
Представим себе картину, что вы имели возможность бы выяснять привычного человека строго при взоре на него анфас — повернувшись в профиль он представал перед вами безотносительным незнакомцем. Но мы все еще можем выяснять друзей и близких — не обращая внимания на все возможное разнообразие траекторий отечественных взоров на привычных нам людей. 🙂
Вы имеете возможность заметить воплощение этих идей в нижеприведенных правилах. Главная концепция излагаемого материала сводится к тому, что правила гештальта обрисовывают ядро и механизмы восприятия визуального языка, с которыми и трудятся дизайнеры.
- Эмоциональный дизайн как оптимизация продаж
Правила гештальта
Большая часть из этих правил довольно легки для понимания, тем более, что их объединяет неспециализированная тема, «красной нитью» проходящая через многие из них:
«При других равных условиях связанные между собой элементы при восприятии группируются в единицы высшего порядка», — Стивен Палмер (Stephen Palmer), американский психолог.
Закон содержательности (Law Pragnanz, закон простоты, «хорошая фигура»)
«Люди будут принимать и трактовать неоднозначные и сложные изображения как несложную из вероятных форм либо комбинацию из несложных форм».
Это — основной принцип гештальта. Люди предпочитают иметь дело с несложными, понятными и упорядоченными вещами, каковые на уровне инстинкта воспринимаются более надёжными, чем объекты сложные и непонятные.
Простые вещи не требуют от человека напряженных умственных упрочнений и не угрожают ему неприятными сюрпризами. Вот из-за чего при восприятии сложных форм мы, в большинстве случаев, «реорганизуем» их до комплекта несложных компонентов либо до несложной целой формы.
На иллюстрации выше вы, вероятнее, заметите левое изображение как комбинацию несложных форм — круга, треугольника и квадрата, — как это продемонстрировано на картине справа, чем как сложную и неоднозначную для интерпретации целую форму.
В этом случае нам несложнее заметить три разных объекта, нежели один сложный. Время от времени же несложнее воспринять один объект, дополнив его посредством замкнутости.
Замкнутость (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)
«Точки фокусировки — элементы, талантливые за счет отличия от вторых захватывать и удерживать внимание визитёра лендинга/сайта».
Данный принцип предполагает, что внимание визитёра будет сфокусировано на элементе, чем-либо отличающихся от вторых. На рисунке ниже точка фокусировки выделена формой, цветом и отбрасываемой «тенью» (псевдообъемом).
Принцип точек фокусировки внимания базируется на отечественной способности скоро идентифицировать малоизвестные объекты как потенциальные источники опасности.
Правила точек и сходства фокусировки связаны в том смысле, что такжене должна быть похожа ни на один второй элемент посадочной страницы, дабы привлечь интерес визитёра. На лендингах/сайта в точках фокусировки в большинстве случаев размещают критически серьёзные для конверсии элементы, к примеру, CTA.
Прошедший опыт (Past Experiences)
«Элементы, в большинстве случаев, воспринимаются в соответствии с прошлым опытом пользователя».
Прошедший опыт есть, пожалуй, самым не сильный гештальт-принципом. При сравнении с любым из ранееперечисленных правил любой из них будет господствовать над принципом прошлого опыта.
Прошедший опыт есть неповторимым для каждого человека, так что тяжело сделать похожие на правду догадки о том, как будет воспринят новый визуальный элемент произвольно забранным пользователем.
Однако существуют некоторый универсальный опыт, с определенными оговорками свойственный каждому человеку: заметив светофор, мы будем ожидать, что красный свет будет обозначать необходимость остановиться, а зеленый «даст» идти. Так трудится принцип прошлого опыта.
Многие из отечественных интерпретаций визуальных стимулов определяются культурными установками, главенствующими в обществе (отыщем в памяти о «психологии цветов»). В некоторых государствах невинности цвет — и белый цвет чистоты, а тёмный — смерти и зла. В других регионах мира интерпретации этих двух цветов смогут быть кардинально противоположными.
Да и по большому счету, понятие «общепринятый опыт» само по себе весьма условное — не все люди в течение судьбы смогут пережить сходные события для приобретения похожего прошлого опыта.
- Психология цвета, либо Из-за чего не бывает электродрелей с фиолетовыми рукоятками?
Вместо заключения
И для маркетологов, и для веб-дизайнеров необходимо понимать правила гештальта, по причине того, что они составляют базу графического отображения оффера, они обрисовывают, как люди принимают визуальные объекты, к каковым относится и целевая страница на мониторе пользователя.
В правилах, изложенных выше, разобраться относительно легко: для понимания большинства из них достаточно иллюстраций и определений. Значительно тяжелее осознать, как как раз правила гештальта на практике воздействуют на готовность визитёра к конверсии и на наиболее значимые бизнес-метрики.
В будущем мы детально разглядим влияние гештальта на дизайн: мы заметим, как симметрия оказывает помощь нам сбалансировать визуальный и текстовый контент лендинга и как совместное использование точек фокусировки и принципов сходства внимания разрешает создать визуальную иерархию на лендинге.
Высоких вам конверсий!
По данным smashingmagazine.com, image source pool-gestaltprinciples
Случайные статьи:
- Автор «марсианина» энди вейр: как писалась книга и что осталось за кадром при экранизации
- Как улучшить качество сна и личную эффективность?
[Начинающим] Композиция, Цвет, Ритм, Акценты, Типографика, Photoshop
Подборка похожих статей:
-
5 Принципов гештальт-психологии для создания запоминающихся изображений
Гештальт-психология — это теория визуального восприятия, созданная германскими психологами в начале двадцатого века. Она была призвана растолковать, как…
-
5 Психологических исследований по восприятию визуальной информации
Вы когда-нибудь вспоминали о том, как мы видим предметы? Как выхватываем их из всего визуального многообразия внешней среды посредством сенсорных…
-
Все, что вам нужно знать о визуальном восприятии и дизайне сайтов
Визуальный маркетинг царствует на рынке сейчас, а визуальный контент — к примеру, инфографика, — неординарно популярен. Все дело в том, что для человека…
-
15 Золотых принципов визуальной иерархии на лендинге
Визуальная иерархия есть одной из наиболее значимых составляющих действенного веб-дизайна. При создании лендинга крайне важно выяснить место…