Гештальт-психология в дизайне 🧠

• как появилась гештальт-психология,
• почему гештальт — это больше, чем просто наблюдение,
• какие основные принципы наиболее часто встречаются и применяются в контексте UI/UX.

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

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

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

История принципов гештальта

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

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

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

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

Отсюда и появился термин «гештальт» — немецкое слово, означающее «форма» или «структура».

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

За последние сто лет было написано бесчисленное количество интерпретаций и вариаций этих законов и принципов. Изначально Макс Вертгеймер выделил только 9 из них — в то время он называл их не «принципами», а «факторами», которые определяют, как люди воспринимают группы объектов. Лишь позднее эти факторы были переформулированы и стали известны как принципы гештальта.

Почему гештальт — это больше, чем просто наблюдение

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

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

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

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

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

***

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

• «Что такое принципы гештальта?» от Interaction Design Foundation (12 принципов) — отличный и, пожалуй, самый полный список, который я встречал, с наглядными примерами — не только абстрактными, но и из реальных интерфейсов. Здесь принципы представлены в более академическом формате, и напрямую связаны с дизайн-мышлением и практическим применением.

• «Что такое принципы гештальта?» от Figma (11 принципов) предлагает краткое, но точное определение принципов, уделяя особое внимание визуальной составляющей и не углубляясь в то, как они применяются в контексте UX.

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

Я заметил, что количество принципов гештальта варьируется в разных источниках от 6 до 12. Изучив их все, я выделил 16 принципов и сгруппировал их в 3 отдельные категории. Важно отметить, что это не все существующие принципы гештальта, а лишь те, которые наиболее часто встречаются и применяются в контексте UI/UX.

Основные гештальт-принципы группировки

Эти принципы в той или иной форме встречаются во всех четырех источниках — с незначительными расхождениями в интерпретации.

1. Близость

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

Абстрактный пример: 4 круга образуют группу, поскольку они расположены на одинаковом расстоянии близко друг к другу, в то время как 3 других круга обособлены и визуально не принадлежат ни к одной группе.

Интерфейс: 2 кнопки в модальном окне воспринимаются как одна группа, а третья кнопка визуально отделена от них. 

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

2. Сходство

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

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

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

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

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

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

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

4. Непрерывность (или продолжение)

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

Абстрактный пример: мы видим здесь не 10 отдельных кругов, мы видим плавную изогнутую линию, образованную этими кругами.

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

5. Завершенность (замкнутость)

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

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

Интерфейс: Этот принцип позволяет нам создавать элементы с пунктирной обводкой, например, зоны для перетаскивания файлов (drop zone) или контурные кнопки, которые пользователи по-прежнему распознают как целостные интерактивные области.

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

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

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

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

7. Параллелизм

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

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

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

8. Общая область

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

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

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

9. Прегнантность (простота)

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

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

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

10. Фокусная точка

Элемент, контрастирующий с окружением, первым привлекает внимание.

Абстрактный пример: белый круг выделяется на фоне всех остальных кругов и становится основной фокусной точкой.

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

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

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

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

Мы воспринимаем любой объект на фигуру, выделяющуюся на каком-то фоне.

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

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

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

12. Связность

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

Абстрактный пример: в примере выше вы сразу понимаете, что 8 из 16 кругов принадлежат одной группе, потому что они соединены линией.

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

Как это работает на практике

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

В этом примере одновременно действуют несколько принципов, усиливающих друг друга:

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

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

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

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

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

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

Гештальт-психология интерпретации восприятия

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

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

13. Появление

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

14. Мультистабильность

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

15. Неизменность

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

Архаичные корни принципов гештальта

16. «Знакомость» / Прошлый опыт

Мозг группирует или интерпретирует элементы, потому что он помнит контекст, в котором они встречались ранее.

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

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

— Вертгеймер, 1923

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

Гештальт-принципы как грамматика визуального дизайна

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

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

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

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