Когнитивная психология для UX: 7 Гештальт-принципов визуального восприятия

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

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

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

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

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

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

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

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

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

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

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

Принцип 1 - фигура-фон

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

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

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

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

Примеры принципа фигура-фон

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

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

Принцип 2 - сходство

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

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

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

Примеры принципа сходства

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

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

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

Принцип 3 - близость

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

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

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

Примеры принципа близости

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

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

Принцип 4 - общая область

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

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

Примеры принципа общей области

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

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

Принцип 5 - непрерывность

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

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

Примеры принципа непрерывности

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

Sprig использует его для объяснения трехэтапного процесса использования своего приложения.

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

Принцип 6 - замыкание

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

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

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

Примеры принципа замыкания

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

Принцип 7 - точка фокусировки

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

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

Примеры принципа точки фокусировки

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

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

И напоследок

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