Гештальт-психологія — набір принципів сприйняття, які описують, як людський мозок організує та інтерпретує візуальну інформацію. У статті ми поговоримо про те: як з’явилася гештальт-психологія, чому гештальт — це більше, ніж просто спостереження та які основні принципи найчастіше зустрічаються та застосовуються в контексті UI/UX.
Можливо, ви, як і я, шукали в Інтернеті інформацію про принципи гештальту та виявили безліч розрізнених джерел, які не дають єдиної цілісної картини. Я вирішив проаналізувати їх і виділити ключові закони, на які ми як дизайнери можемо з упевненістю покладатися при створенні проєктів. Але почнімо з самого початку, з того, звідки взялися ці принципи й чому за своєю природою вони відносяться скоріше до науки, ніж до спостережень.
Історія принципів гештальту
Гештальт-психологія виникла в Німеччині на самому початку XX століття як відповідь на панівну на той час і, по суті, першу школу психології — структуралізм. Структуралізм розглядав свідомість як щось, що можна розкласти на окремі елементи — відчуття, образи та почуття — щоб зрозуміти, як влаштований розум і з яких найдрібніших частин він складається.
Засновник структуралізму Едвард Бредфорд Тітченер (1867-1927)
Гештальт-психологія, навпаки, розглядала сприйняття не як суму елементів, а як цілісний за своєю природою процес: наша свідомість виникає внаслідок організації цих елементів у значиме ціле.
У той час як структуралізм намагався проаналізувати структуру досвіду, гештальт-психологія зосередилася на патернах, які надають досвіду єдності та сенсу.
Принципи гештальту, які ми використовуємо у дизайні сьогодні, були вперше вивчені засновниками гештальт-психології Максом Вертгеймером, Вольфгангом Келером та Куртом Коффкою. Вони встановили, що людський мозок сприймає візуальні образи не як набір окремих елементів, а як єдине, структуроване ціле.
Звідси й виник термін «гештальт» — німецьке слово, що означає «форма» чи «структура».
Макс Вертгеймер (1880-1943)
Основна ідея полягала в тому, що розум автоматично організує сенсорну інформацію у значні форми, навіть коли частина даних відсутня чи спотворена. Завдяки висхідній популярності психології на початку розвитку маркетингу, ці принципи швидко стали основою для розуміння композиції, угруповання об’єктів та візуальної ієрархії — концепцій, які ми досі активно застосовуємо у дизайні інтерфейсів.
За останні сто років було написано незліченну кількість інтерпретацій та варіацій цих законів та принципів. Спочатку Макс Вертгеймер виділив лише 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 лінії, складені з кіл, сприймаються як дві окремі групи об’єктів. Частково це відбувається саме завдяки цьому принципу.
Інтерфейс: Меню часто містять досить великі елементи з безліччю підпунктів. В цьому випадку ми сприймаємо 3 групи елементів у списку, що випадає, як єдине ціле, оскільки вони розташовані паралельно один одному і перпендикулярно основної навігації. Таке компонування значно полегшує сканування. Це більш вдалий варіант, ніж відображення одного довгого списку або вирівнювання всіх елементів паралельно до основної навігації, як це часто буває у другорядних меню.
8. Загальна область
Елементи, які розташовані всередині одного візуального контейнера або області, сприймаються як одна група.
Абстрактний приклад: Попри те, що всі маленькі кола розташовані на рівній відстані один від одного, ми сприймаємо їх як дві окремі групи, оскільки вони знаходяться у різних контейнерах.
Інтерфейс: Кнопки всередині модального вікна сприймаються як частина однієї групи, тоді як CTA-кнопка в панелі навігації (навіть якщо вона має таку ж візуальну вагу і розташована на тому ж рівні) сприймається як така, що належить до іншої групи, просто тому, що вона знаходиться за межами загальної візуальної області.
9. Прегнантність (простота)
Мозок схильний сприймати візуальну інформацію у найпростішій, лаконічній, упорядкованій формі.
Абстрактний приклад: попри складну форму, створену за допомогою кількох кіл та ефекту скла, ми насамперед сприймаємо її як одне велике коло.
Інтерфейс: ми структуруємо контент у блоки, тому що це полегшує його сканування. Замість того щоб зосереджуватись на окремих літерах або зображеннях, користувач спочатку сприймає загальну структуру сторінки. Прикладом вище є макет сторінки стрімінгового сервісу, де ми інстинктивно розпізнаємо основні розділи: навігація, відео, рекомендації та опис.
10. Фокусна точка
Елемент, який контрастує з оточенням, першим привертає увагу.
Абстрактний приклад: біле коло виділяється на тлі всіх інших кіл і стає основною фокусною точкою.
Інтерфейс: у прикладі є два елементи, які контрастують з рештою інтерфейсу: кнопка (за кольором) та головне зображення (за формою).
Контраст в UI визначається не лише кольором; важливо пам’ятати, що колір сам по собі має три атрибути: відтінок, насиченість та яскравість, кожен з яких може по-різному впливати на сприйняття. Регулюючи будь-який з цих атрибутів, можна зміщувати фокусні точки.
Ми також можемо створити контраст за допомогою розміру та форми, як показано на прикладі головного зображення.
11. Фігура-фон
Ми сприймаємо будь-який об’єкт на фігуру, що виділяється на якомусь тлі.
Наш мозок постійно намагається інтерпретувати двовимірні зображення як тривимірні сцени. Майже всі сучасні джерела посилаються на оптичну ілюзію «Ваза Рубіна», оскільки дослідження Едгара Рубіна дуже вплинули на Макса Вертгеймера і Курта Коффку, які на той час працювали над аналогічними візуальними феноменами.
Абстрактний приклад: Однак у прикладі я вирішив використати простіші форми, щоб проілюструвати, як наше сприйняття схильне розташовувати об’єкти в просторі. У першому випадку два напівпрозорі кола перекривають один одного, і той з них, на якому ви фокусуєтеся, здається розташованим на передньому плані. Але коли одна із фігур стає непрозорою, сприйняття стабілізується, тому що ми можемо чітко визначити, який елемент знаходиться попереду, а який позаду.
Інтерфейс: елементи списку мають фон того ж кольору, що й сама сторінка, але виділяються завдяки тіням. Ми часто застосовуємо цей принцип при проєктуванні модальних вікон: фон затемняється, щоб візуально відокремити активний шар від решти інтерфейсу.
12. Зв’язок
Візуально пов’язані елементи сприймаються як частина однієї групи.
Абстрактний приклад: у прикладі вище ви відразу розумієте, що 8 із 16 кіл належать одній групі, тому що вони з’єднані лінією.
Інтерфейс: У дизайні ми часто застосовуємо цей принцип у степерах, формах або в інформаційних блоках, які ілюструють етапи процесу або покрокові інструкції.
Як це працює на практиці
Важливо, що це принципи найчастіше працюють у поєднанні один з одним. Навіть найпростіший елемент, такий як гіперпосилання, може бути прикладом мультимодального гештальту.
У цьому прикладі одночасно діють кілька принципів, які посилюють один одного:
- Зв’язок забезпечує структуру. Підкреслення створює візуальний зв’язок між літерами. Ми сприймаємо «оптична ілюзія» як єдине ціле, а «датським» та «психологом» — як два окремі елементи.
- Схожість свідчить про тип елемента. Колір гіперпосилання відрізняється від кольору решти тексту, сигналізуючи про його інтерактивність.
- Безперервність спрямовує погляд, навіть якщо поруч знаходяться важчі візуальні елементи. Наш погляд природно переміщається зліва направо, дозволяючи нам читати рядок за рядком.
- Стабільне співвідношення фігури-фону забезпечує чіткий контраст між текстом і тлом, роблячи контент видимим та читаним.
Ви, імовірно, також бачили класичний приклад управління увагою користувачів за допомогою друкарської ієрархії:
Навіть із мінімальним набором інструментів ми можемо звертати увагу користувача, застосовуючи основні закони гештальту, такі як близькість, безперервність, фокусні точки та простота.
Гештальт-психологія інтерпретації сприйняття
Ці три принципи ви знайдете лише у списку Interaction Design Foundation. І хоча вони можуть бути неймовірно цінними та актуальними для нас як дизайнерів, вони часто залишаються поза увагою, мабуть, тому що стосуються не того, як ми групуємо елементи, а того, як ми сприймаємо та інтерпретуємо візуальні композиції загалом.
Я також хотів би наголосити на тому, що ці принципи частково перетинаються з деякими з тих, які ми вже обговорили. З усім тим, між ними є важливі відмінності, хоча це, ймовірно, тема, що заслуговує на окрему статтю.
13. Поява
Спочатку бачимо загальну форму, і лише потім помічаємо деталі. Зображення сприймається цілком, а не як сума його елементів.
14. Мультістабільність
Те саме зображення може сприйматися по-різному. Наш мозок постійно перемикається між інтерпретаціями.
15. Незмінність
Ми розпізнаємо об’єкти, навіть коли їх форма, кут чи розмір змінюються. Ми часто стикаємося з цим принципом у типографіці: незалежно від того, який шрифт ми вибираємо, користувачі все одно можуть читати й розуміти символи, якщо тільки не йдеться про надмірно стилізовані або абстрактні шрифти.
Архаїчне коріння принципів гештальту
16. «Знайомість» / Попередній досвід
Мозок групує чи інтерпретує елементи, оскільки він пам’ятає контекст, у якому зустрічалися раніше.
Однак важливо відзначити, що навіть Макс Вертгеймер згадав цей принцип окремо, наголосивши, що це не основний закон організації, а радше другорядний фактор, який може впливати на сприйняття.
«У деяких випадках минулий досвід може впливати на сприйняття організації, але основні закони угруповання залишаються незалежними від досвіду». — Вертгеймер, 1923
Для нас, дизайнерів, «знайомість» не є законом сприйняття в його найпростішій інтерпретації, вона скоріше відповідає одному з евристичних принципів дизайну Якоба Нільсена. У складніших фреймворках вона стає частиною когнітивної психології, зв’язуючись з такими концепціями, як ментальна модель та аффорданс.
Гештальт-принципи як граматика візуального дизайну
Уявімо дизайн інтерфейсу як мову. Якщо колір визначає тон нашого повідомлення, то принципи гештальту визначають його структуру.
Дизайнер, який розуміє, як людський мозок групує та інтерпретує візуальні елементи, не просто робить речі «красивими», а й створює сенси. Гештальт — це те, що перетворює форми на ієрархію та логічну послідовність дій.
Ці принципи є теоретичними. Вони стали законами сприйняття, на які ми можемо впевнено покластися. Але ніхто не заважає вам зайнятися додатковим вивченням їх інтерпретацій та того, як ці принципи взаємодіють, перетинаються, а іноді навіть суперечать один одному.
Автор: Мусієнко Тимофій