Отечественному мозгу характерно искать во всем окружающем логику, закономерность и структуру. К примеру, что вы видите, глядя на изображение ниже?
Практически всем людей первым в глаза кидается тёмный треугольник. Но в действительности тут имеется лишь четыре законченных формы — это три белых «пакмэна» на фоне тёмной фигуры. Мы видим треугольник, по причине того, что отечественный мозг, считывая неоднозначную визуальную данные, организует ее в что-то, имеющее для нас суть — привычное, симметричное, аккуратное и т. д. В случае если убрать данный процесс, мы будем принимать элементы, не считывая связей между ними, и не заметим «леса за деревьями».
Для еще одной иллюстрации процесса, посмотрите на GIF-файл ниже:
Вы точно видите бегущую собаку. Быть может, кроме того определили ее породу 🙂 Но в действительности, это не более чем последовательность движущихся точек. Эти несложные примеры замечательно демонстрируют изюминке отечественного мозга, что все время пробует структурировать окружающий мир.
Данный феномен известен как гештальт-принцип зрительного восприятия, растолковывающий процесс, через что отечественный мозг «по умолчанию» формирует твёрдую структуру из всей поступающей информации. Но из-за чего это принципиально важно для маркетологов и веб-дизайнеров?
- Как оптимизировать конверсию посредством гештальт-психологии?
Из-за чего дизайнерам принципиально важно учитывать гештальт-правила?
Выдающиеся дизайнеры замечательно поймут огромную роль психологии зрительного восприятия. Что происходит, в то время, когда глаз человека считывает ваш макет? Как реагирует ум читателя на сообщение, которое вы пробуете распространить?
Легко задумайтесь о том, что испытывают люди, в первый раз заметив ваш проект. Чтобы понять правила создания выдающегося интерфейса пользователя, стоит изучить психологию людской восприятия.
Фундаментальный закон, регулирующий гештальт правила, содержится в следующем: мы, в большинстве случаев, ожидаем от отечественного опыта, что он будет простым и узнаваемым. Это инструмент, разрешающий формулировать суть в сложном и хаотичном мире. Четкое познание работы данных правил окажет помощь вам в трех направлениях:
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
Случайные статьи:
Гештальт. Принципы восприятия
Подборка похожих статей:
-
Когнитивная психология и юзабилити: принцип ограниченного внимания
Обращать внимание на все, что нас окружает — физически нереально. У нас имеется доступ к сотням телевизионных каналов, тысячам фильмов и шоу на…
-
Когнитивная психология: теория дуального процесса мышления
В первой половине 90-ых годов XIX века философ, основатель и психолог функционализма Уильям Джеймс (William James) высказал предположение, что нам…
-
Визуальное восприятие и применение принципов гештальта в веб-дизайне
В 1910 психолог Макс Ветгеймер (Max Wertheimer), замечавший за вспышками сигнальных огней на ЖД переезде, испытал неожиданное озарение, потом послужившее…
-
Когнитивная психология и ux: как избежать эффекта ложного консенсуса?
Все мы видим мир через призму собственного восприятия. Эти ограничения основаны на отечественном опыте, культуре, контексте, окружении либо менталитете….