Психология восприятия и дизайн. Гештальт-принципы в web-дизайне.

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

Психология восприятия и дизайн.

Гештальт-принципы в web-дизайне.

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

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

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

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

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

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

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

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

 

Основополагающие идеи гештальта

  1. Появление или проявление

Целое ВСЕГДА распознается раньше, чем его составляющие части.

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

Вот пример, подобраны два изображения Хитмена

Стили подачи разные, техники исполнения – тоже. Однако даже те, кто не знаком с Агентом 47, различат, что в первом, что во втором случае образ сурового мужчины с оружием и в красном галстуке. Да именно так, сперва мужской образ, а потом – детали, яркие, выразительные, которые бросаются в глаза, но все же второстепенные детали: галстук и пистолет.  Такие детали, как проработанные черты лица или текстура одежды – для восприятия образа уже и не очень важны.

 

  1. Воплощение и обобществление (конкретизация)

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

Например, в фотографиях в стиле flat lay.

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

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

Примером этого могут послужить зарисовки тату или прототипы сайтов.

  1. Множественная стабильность (мультистабильность)

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

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

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

 

  1. Инвариантность

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

 

 

 

Законы (принципы) гештальта.

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

 

  1. Содержательность

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

Простой геометрический пример:

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

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

 

  1. Замкнутость

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

Макет страницы сайта. Декоративный элемент в воспринимается нами как квадрат, а не как ломаная линия.

Это иллюстрация Дарьи Жуковой в редизайне журнала «Серебро». В первую очередь мы видим все же портрет (лицо мужчины) нежели причудливо расположенный текст. Здесь воплощены по меньшей мере 3 принципа: мы упрощаем изображение до узнаваемой формы (содержательность), мы замыкаем контур для получения цельного образа (замкунтость), и одновременно с этим наше внимание может быть переключено с восприятия лица на восприятие текста (принцип фигура-фон).

 

  1. Симметрия

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

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

Принцип симметрии в оформлении страницы сайта группы охранных предприятий «БАРС»

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

Сознательно вводя отсутствие симметрии в композицию можно добиться необходимого возбужденного состояния ума у зрителя.

Пример оформления главного экрана. Асимметрию применял еще фотограф, при создании образа человека, испытавшего на себе действие токаJ. Эта картинка воспринимается как небезопасная, тревожащая.

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

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

 

  1. Фигура / фон

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

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

Пример с сайта Awwwards

 

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

Кулинарный сайт. Maplefromquebec.ca

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

Сайт консалтинговой группы

https://implementconsultinggroup.com/

 

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

 

  1. Равномерная связанность

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

Две инфографики. Объекты объединенные линиями воспринимаются как смысловая единица.

 

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

Объединить объекты можно за счет общих областей.

Сайт сантехники «Водяной». Форма заказать звонок.

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

Всплывающее окно регистрации на Awwwards. Кнопки регистрации объединены одним полем.

 

  1. Близость

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

Пример с официального сайта Apple

  1. Общая судьба

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

 

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

  1. Сходство

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

  1. Точки фокусировки

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

 

  1. Прошлый опыт

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

 

Заключение

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

Об авторе

Алёна Оленева

Начинающий дизайнер. В команде "Динамики роста" с лета 2018 года. Интересно всё, что относится к дизайну: с удовольствием разработаю дизайн-макет сайта, визитки, каталога или создам эксклюзивную иллюстрацию.

Ещё по теме

Запрос на оценку проекта

Отправьте нам Ваш запрос, и мы ответим в течение 2 рабочих часов (с 10:00 до 20:00, Мск+4)

Заполняя данную форму, я даю согласие на обработку персональных данных и соглашаюсь c политикой конфиденциальности *