Когнитивная психология и пользовательский опыт: 7 гештальт-принципов визуального восприятия

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

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

Для еще одной иллюстрации процесса, посмотрите на GIF-файл ниже:

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

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

  • Как оптимизировать конверсию посредством гештальт-психологии?

Когнитивная психология и пользовательский опыт: 7 гештальт-принципов визуального восприятияИз-за чего дизайнерам принципиально важно учитывать гештальт-правила?

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

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

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

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

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

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

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

  • Эффект установки: Из-за чего первая мысль может оказаться нехорошей?

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

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

К примеру, на изображении выше мы мгновенно считываем белое яблоко на тёмном фоне.

«Эта детерминанта действует скоро и подсознательно как правило. Фигура-фон разрешает осознать, на что обратить внимание, а что возможно проигнорировать в композиции», Стивен Брэдли (Steven Bradley), веб-дизайнер.

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

Примеры

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

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

  • применение принципов и Визуальное восприятие гештальта в веб-дизайне

2. Сходство

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

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

Примеры

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

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

  • Правила дизайна: композиционное равновесие, асимметрия и симметрия

3. Близость

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

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

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

Примеры

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

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

  • Нейромаркетинг: Что такое СМИ-эффект и как он воздействует на продажи?

4. Неспециализированная область

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

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

Примеры

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

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

  • Эмоциональный дизайн как оптимизация продаж

5. Непрерывность

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

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

Примеры

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

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

А Credit Karma пользуется принципом для иллюстрации преимуществ собственных одолжений.

  • какое количество: 15 психотерапевтических приемов увеличения конверсии лендинга

6. Замыкание/закрытие

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

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

Примеры

Принцип обширно употребляется в дизайне логотипов разных компаний, включая IBM, NBC, Zendesk и Funding Circle.

  • Как чанкинг содействует усвоению контента?

7. Координационный центр

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

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

Примеры

Twilio применяет принцип для привлечения внимания к СТА-элементам.

Instacart сочетает принцип координационного центра с принципом фигуры-фона, обращая ваше внимание вначале на белый первый замысел, а после этого на зеленую кнопку «find stores».

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

Высоких вам конверсий!

По данным: usertesting.com

Случайные статьи:

Гештальт. Принципы восприятия


Подборка похожих статей:

riasevastopol