Зрительное восприятие человека. Смысл в дизайне

Рекламное сообщение должно быть передано потребителю ясно и понятно, будь то буклет, журнал или сайт. Казалось бы, всё просто: посредством дизайна информация доводится до глаз потребителя. На самом же деле, всё сложнее.

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

Эта статья посвящена теории зрительного восприятия и памяти, и большая часть информации взята из книги «Visual Language for Designers» автора Connie Malamed.

Зрительные процессы

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

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

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

Восприятие информации человеком - это объединение восходящих и нисходящих процессов мозга.

Восходящий процесс обработки визуала

Его стимулируют внешние раздражители, т.е. то, что мы видим.

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

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

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

Нисходящий процесс обработки визуала

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

Человек склонен игнорировать всё, что не имеет смысла или не нужно в данный момент.

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

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

Память

Человек хранит информацию в различных разделах памяти. Сенсорная (краткосрочная) память записывает мимолётные впечатления последних милисекунд. Она позволяет вспомнить что-либо, «записанное» не позднее 1 минуты. Существует гипотеза, что кратковременная память опирается в большей степени на акустический (вербальный) код для хранения информации и в меньшей степени - на зрительный.

Оперативная память

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

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

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

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

возраст - возможности оперативной памяти увеличиваются к зрелому возрасту и уменьшаются к старости;

отвлекающие элементы - чем меньше человек отвлекается, тем быстрее скорость обработки оперативной памяти;

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

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

Долговременная память

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

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

Пример: 7-значный телефонный номер может быть запомнен в кратковременной памяти и забыт через несколько секунд. С другой стороны, человек может помнить его за счет повторения на протяжении длительного времени.

Кроме классификации памяти по времени, есть ещё классификация по организации запоминания:

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

Семантическая память - память о таких фактах, как таблица умножения или значение слов. Человек не сможет вспомнить, где и когда ему стало известно, что Токио - столица Японии, или от кого он узнал значение слова «пельмень», но тем не менее эти знания составляют часть его памяти. И эпизодическая, и семантическая память содержат знания, которые легко могут быть рассказаны.

Процедурная память - память о том, как что-то сделать, и приводит к определённым навыкам для выполнения текущих задач.

Глубина процессов

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

Схемы (контекст)

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

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

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

Психологические модели (модели мышления)

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

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

Уровень развития - классифицировать аудиторию по степени продвинутости и сделать дизайн в соответствии с этим.

Отвлекаемость - меньше отвлекающих элементов - больше фокусировка. Не создавайте дизайн, который сбивает с толку.

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

Мотивация - предпочтения Вашей аудитории помогут определить, как её мотивировать. Большая мотивация приводит к большему вниманию, и как следствие - к более глубокому пониманию рекламного сообщения.

Культура, традиции - это определённые цвета. Разные цвета интерпретируются по разному в различных культурах.

Итак,

прежде, чем браться за дизайн , нужно ответить на вопрос: «Что мы хотим сообщить?» Какая цель дизайна ? Только зная цели и задачи рекламного сообщения , можно стратегически разработать дизайн для наиболее подходящего психологического восприятия.

Если нужно

Добиться узнаваемости, оповестить - используйте в дизайне принцип доминанты, масштаб и контрастность.

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

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

Заметной вехой на пути разработки проблемы психологии восприятия стало исследование Рудольфа Арнхейма «Искусство и визуальное восприятие», имеющее подзаголовок «Психология созидающего глаза». Эта книга в основном выросла из прикладных исследований восприятия разнообразных изобразительных форм, проведенных в русле гештальтнсихологии, т.е. психологии, занимающейся изучением целостного восприятия. Основная посылка Арнхейма состоит в том, что восприятие не является механическим регистрированием сенсорных элементов, а выступает способностью проницательного и изобретательного схватывания действительности. Арнхейм стремился выявить, как конфигурируются и взаимодействуют в художественном восприятии объективные факторы, как они провоцируют те или иные способы понимания. Другая проблема, поставленная Арнхеймом, - каковы возможности субъективной активности нашего глаза, в чем проявляются его возможности постижения значимых моделей изобразительной структуры и созидания внутреннего эффекта. Способность глаза человека сразу оценить главные качества художественного целого основаны, по мнению исследователя, на определенных свойствах самого изображения. Он приводит пример: белый квадрат, внутри которого помещен темный диск. Если мы видим, что диск смещен от центра квадрата, то такой вид неуравновешенной композиции, или, как считает Арнхейм, «эксцентричного» диска, вызывает определенное чувство неудобства. Симметричное положение диска в центре квадрата рождает ощущение устойчивости, вслед за которым появляется нечто вроде чувства удовлетворения. Аналогичное наблюдение можно обнаружить и в музыке. Что такое диссонанс? Это неустойчивое созвучие, требующее разрешения, выхода, предполагающее некое дальнейшее развитие, ожидаемое действие. Консонансу, напротив, всегда соответствует ощущение устойчивости, утверждения, стабильности, разрешения.

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

Белюкин Дм. Вид с острова Ольхон вечером. 2009

История изобразительного и фотоискусства накопила огромное количество приемов, позволяющих, не меняя объема одного и того же рисунка, либо поместить его в глубину пространства картины, либо выдвинуть на передний план. Анализируя множество произведений, Арнхейм показывает, в частности, какими способами П. Сезанн в портрете своей жены (1890) добивается выразительного эффекта: фигура отдыхающей в кресле женщины полна энергии; она остается на месте, но в то же время как бы поднимается. Особое динамичное расположение головы в профиль заряжает портрет элементом активности. Главный вывод Арнхейма состоит в следующем: мы можем не отдавать себе отчета, сколь сложную работу совершает наш глаз, но он устроен так, что всегда схватывает центральные элементы формы , моментально дифференцируя их от частных в любом изображении. Случайные или частные композиционные образования всегда кристаллизуются вокруг таких частей картины, которые можно оценить как достаточно независимые и самостоятельные.

Разрабатывая теорию художественного воздействия произведений изобразительного искусства, Арнхейм опирается на ряд идей, которые были высказаны исследователями ранее. Так, Г. Вёльфлин в свое время пришел к выводу, что если картина отражается в зеркале, то не только меняется ее внешний вид, но и полностью трансформируется ее смысл. Он полагал, что это происходит вследствие обычной привычки чтения картины слева направо. При зеркальном перевертывании изображения восприятие его существенно меняется. Вёльфлин обратил внимание на определенные константы восприятия, в частности на оценку диагонали, идущей от левого нижнего угла в правый верхний, как восходящей , а диагонали, идущей от левого верхнего угла в правый нижний, как нисходящей. Один и тот же предмет выглядит тяжелым, если находится не в левой, а в правой части картины. Анализируя «Сикстинскую мадонну» Рафаэля, исследователь подтверждает это примером: если фигуру монаха, изменив положение слайда, переставить с левой стороны на правую, то она становится настолько тяжелой, что композиция целиком опрокидывается.

Допустим, нам нужен буклет про замки Германии. Информация для одной страницы буклета подготовлена в Ворде и выглядит так:

Элементы на странице можно можно сгруппировать иначе: заголовок, два подзаголовка, два блока текста, две картинки:

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

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

Создание страницы буклета

Вместо того, чтобы расположить на странице фотографии и тексты естественным образом, дизайнер решил соригинальничать:

Хм. Как-то обычно получилось.

Может так? Нет, не то, скучно.

О, придумал!

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

Попробуйте ответить на вопрос: какое из описаний соответствует левой верхней фотографии? Справа от него или снизу? «На верхней фотографии — Линдерхоф!» — скажет абсолютное большинство читателей. Их ответ будет обусловлен привычным для нас движением глаз, хотя он, по сути своей, ошибочен.

Показать или скрыть движение глаз.

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

Принципы визуального восприятия

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

Для начала применим принцип близости — объекты, расположенные ближе друг к другу, воспринимаются вместе. Сблизим фотографии с соответствующими описаниями и разведем в стороны левую и правую половины макета для усиления эффекта.

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

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

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

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

При этом Линдерхоф будет выделен, что опять нарушает целостность.

По-прежнему опираясь на принцип связи , нарисуем стрелки-указатели.

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

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

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

Разделение объектов

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

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

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

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

В 1910 году психолог Макс Вертхаймер наблюдал за серией источников света на железной дороге, которые то тухли то гасли. Это было похоже на светодиоды у афишы кинотеатра (Для примера вспомните светодиодное табло на вокзалах с "бегающими надписями" - прим. переводчика) .

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

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

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

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

Ключевые идеи теории гештальта

вещь как целое отличается от суммы составляющих её частей.
- курт кофка

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

Проявление (целое идентифицируется быстрее составных частей)

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

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

Овеществление (наш разум заполняет пробелы)

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

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

Мультистабильность (Разум избегает неопределенности)

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

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

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

Неизменность (Мы хорошо распознаем сходства и различия)

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

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

Эти идеи можно будет увидеть в действии ниже.

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

Законы гештальта

Большинство принципов относительно легко понять. У них общая тема которая встречается в каждом принципе.

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

Закон простоты (хорошая фигура, закон выразительности)

Люди будут воспринимать и интерпретировать неоднозначные или сложные изображения в самой простой из возможных форм.

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

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

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

Замыкание

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

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

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

Замыкание можно рассматривать как клей для элементов, который держит их вместе. Речь идет о человеческой склонности искать и находить закономерности.

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

Симметрия и порядок

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

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

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

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

Рисунок / фон

"Элементы воспринимаются либо как рисунок (элемент в фокусе), или как фон (фон, на котором лежит рисунок)."

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

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

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

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

Форменная связь

Элементы, которые визуально соединены, воспринимаются как более связанные, чем элементы без соединения.

На изображении ниже линии соединяют две пары элементов. Эта заставляет нас считать, что соединенные элементы связаны друг с другом.

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

Общие области

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

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

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

Близость

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

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

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

Продолжение

“Элементы, расположенные на линии или кривой, воспринимаются более связанными, чем элементы не на линии или кривой”.

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

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

Общая участь (синхронность)

“Элементы, которые перемещаются в одинаковом направлении, воспринимаются как более связанные, чем элементы, которые неподвижны или перемещаются в разных направлениях”.

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

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

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

Параллелизм

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

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

Следует отметить, что для параллелизма, линии также могут быть кривымы или фигурами, хотя фигуры должны быть линии-образны.

Схожесть

Элементы, которые имеют схожие характеристики воспринимаются как более связанные, чем элементы, которые не имеют таких характеристик.

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

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

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

Фокусные точки

Элементы с интересным местом, акцентом или различием захватывают и удерживают внимание зрителя.

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

Принцип фокусных точек возникает из-за нашей потребности быстро идентифицировать неизвестное и предупредить нас о потенциальной опасности.

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

Прошлый опыт

Элементы имеют тенденцию быть воспринятыми согласно прошлому опыту наблюдателя.

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

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

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

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

Резюме

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

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

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

Об авторе и переводе

Данная статья - перевод статьи Steven Bradley . Стивен Брэдли - дизайнер и wordpress разработчик из Колорадо. Он ведет блог и является владельцем форума о малом бизнесе, где помогает людям научится управлять своим бизнесом лучше. Замечания по качеству перевода можно оставить в комментариях. Если есть примеры интересных статей, можно прислать ссылки на них в комментариях, и если они нам понравятся - обязательно опубликуем перевод.

В 1910 психолог Макс Ветгеймер (Max Wertheimer), наблюдавший за вспышками сигнальных огней на железнодорожном переезде, испытал внезапное озарение, впоследствии послужившее основой для разработки концепции гештальта (от немецкого Gestalt — целостная структура, образ, форма) и формулировки принципов визуального восприятия объектов.

Цепочка рассуждений психолога была примерно следующей: на самом деле световой сигнал не перемещается влево-вправо — это просто последовательно включаются и выключаются 2 отдельные лампы. Еще более наклонность человеческого мозга «дорисовывать» наблюдаемый объект до завершенной, «полной» структуры заметна при взгляде на «бегущие огоньки», создаваемые электрическим лампами, по периметру окружающими вывески и козырьки крыш кинотеатров.

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

Ключевые идеи, лежащие в основе теории гештальта

«Целое есть нечто иное, нежели сумма его частей», — Курт Коффка (Kurt Koffka, немецко-американский психолог, один из основателей гештальт-психологии).

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

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

Есть 4 ключевые идеи, формирующих принципы гештальта:

Появление/проявление (Emergence) — целое распознается прежде, чем его составляющие.

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

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

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

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

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

Множественная стабильность (Multi-stability, мультистабильность) — свойство, позволяющее переключаться между стабильными альтернативными интерпретациями при неоднозначном опыте восприятия объекта (неоднозначном перцептивном опыте).

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

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

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

Инвариантность (Invariance) — свойство восприятия, позволяющее узнавать объекты независимо от их вращения, перемещения, масштабирования, изменения условий освещения и т. д.

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

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

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

Принципы гештальта

Большинство из этих принципов относительно легки для понимания, тем более, что их объединяет общая тема, «красной нитью» проходящая через многие из них:

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

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

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

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

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

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

«При взгляде на сложно расположенные элементы мы стремимся увидеть в них простую узнаваемую форму».

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

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

На левом изображении выше вы увидите белый треугольник, хотя изображение на самом деле состоит из трех черных «Пэкменообразных» форм (Pac-Man-like shapes). На рисунке справа вы в комбинации нескольких случайных фигур увидите панду. Так получается потому, что увидеть треугольник и панду проще, чем пытаться понять, что же означает каждая отдельная часть рисунка.

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

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

Симметрия и порядок (Symmetry and Order)

«Люди склонны воспринимать объекты как симметричные формы, образованные вокруг условных центров».

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

На иллюстрации выше вы видите три пары открывающих и закрывающих скобок. Принцип близости (The principle of proximity), о котором речь пойдет чуть позже, позволяет нам предположить, что мы должны увидеть что-то еще. Явная незавершенность изображения — кажется, что с обоих сторон не хватает еще по одной скобке — свидетельствует о том, что в восприятии человека симметрия имеет приоритет над близостью .

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

Фигура и фон (Figure and Ground)

«Элемент воспринимается либо как фигура/объект (элемент в фокусе внимания), либо как фон (поверхность, на которой расположена фигура/объект)».

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

Соотношение «фигура и фон» может быть устойчивым или неустойчивым в зависимости от того, насколько легко определить, что есть фигура, а что — фон. Классический пример неустойчивого соотношения представлен на левом рисунке выше. Вы либо видите вазу, либо два лица в зависимости от того, воспринимаете ли черный цвет как цвет объекта, а белый как цвет фона, или же наоборот.

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

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

В увеличении стабильности нам могут помочь два взаимосвязанных принципа восприятия:

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

Равномерная связность (Uniform Connectedness)

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

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

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

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

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

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

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

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

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

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

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

Продолжение (Continuation)

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

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

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

Общее предназначение/синхронность (Common Fate/Synchrony)

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

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

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

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

Параллелизм (Parallelism)

«Элементы, параллельные друг другу, считаются более взаимосвязанными, чем элементы не параллельные».

Этот принцип похож на вышеописанное общее предназначение. Линии часто применяются как символ указания на какое-либо направление или перемещение куда-то.

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

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

Сходство (Similarity)

«Элементы, имеющие сходные общие характеристики, воспринимаются как взаимосвязанные — в отличие от элементов, не обладающих данными характеристиками».

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

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

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

Точки фокусировки (Focal Points)

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

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

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

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

Прошлый опыт (Past Experiences)

«Элементы, как правило, воспринимаются в соответствии с прошлым опытом пользователя».

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

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

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

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

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

Вместо заключения

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

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

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