Злом візуальної системи: 11 оптичних ілюзій у графічному дизайні

Чи глибока кроляча нора?

Скільки хвилин вам потрібно, щоб зрозуміти в чому фішка?

Френсіс Бекон 1620 року розділив джерела людських помилок, що стоять на шляху пізнання, на чотири групи, які він назвав «примарами» або «ідолами» (лат. idola).

  • «Привиди роду» випливають з самої людської природи, вони не залежать ні від культури, ні від індивідуальності людини. «Розум людини уподібнюється нерівному дзеркалу, яке, домішуючи до природи речей свою природу, відображає речі в викривленому і спотвореному вигляді».
  • «Привиди печери» - це індивідуальні помилки сприйняття, як вроджені, так і придбані. «Адже у кожного, крім помилок, властивих роду людському, є своя особлива печера, яка послаблює і спотворює світло природи».
  • «Примари площі (ринку)» - наслідок суспільної природи людини, - спілкування і використання в спілкуванні мови. "Люди об'єднуються промовою. Слова ж встановлюються відповідно до розуміння натовпу. Тому погане і безглузде встановлення слів дивовижно спонукує розум ".
  • «Привиди театру» - це засвоювані людиною від інших людей помилкові уявлення про влаштування дійсності. «При цьому ми розуміємо тут не тільки загальні філософські вчення, а й численні початку та аксіоми наук, які отримали силу внаслідок переказу, віри і безтурботності». [Wikipedia]

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

1. Ілюзія Перерізу Трикутника

Вирівнювання трикутника на основі центроїду (баріцентру).

Іконки можуть бути оманливими, особливо зі складною геометрією і непарними пропорціями. Не всі значки в наборі симетричні, піксельно ідеальні або ж містять сумісні пропорції. Деякі іконки вимагають прямого втручання, а в першу чергу, ця страхітлива кнопка відтворення.

Приміщення трикутника всередині вигнутого або прямого резервуара може зробити елемент оптично недоречним. Причина цього - ефект, відомий як ілюзія перерізу трикутника. Центр мас трикутника розраховується на основі його мінімального обмежуючого прямокутника. Тому, якщо вам потрібно помістити точку рівно по середині по висоті рівностороннього трикутника, то оптично вона з'явиться набагато вище.

Який варіант центрований математично?

Існують дві теорії для цієї захоплюючої ілюзії:

  • Некоректне масштабування констант. Ілюзія містить перспективні сигнали, які збільшують сприймуваний розмір більш віддалених об'єктів, наприклад, рівносторонній трикутник може сприйматися як плоска картина дороги, що спостерігається в перспективі, з верхньою вершиною, що лежить на нескінченності і нижній основі, що сприймається в якості найближчої частини дороги.
  • Центр тяжкості. Якщо спостерігача попросять знайти точку в середині, все закінчиться тим, що він знайде центроїд, який має рівні площі вище і нижче його. Центроїд рівностороннього трикутника знаходиться значно нижче точки в середині, і є докази того, що спостерігачі роблять вибір, який є компромісним.

Щоб трикутник всередині контейнера був оптично центрований, необхідно знайти центроїд (баріцентр) трикутника, обчисливши точку перетину ліній, що з'єднують кожну вершину з середньою точкою протилежного боку. Ось формула, яку можна використовувати:

Формула для знаходження центроїду трикутника.

Центроїд може знаходитися на 1/3 відстані від кожної сторони до протилежної вершини. Цей метод також можна застосувати до багатьох інших форм.

2. Вертикально-горизонтальна ілюзія

Вертикально-горизонтальна ілюзія.

Квадрати є фундаментальними будівельними блоками будь-якої системи проектування. Їх можна побачити в картах матеріального дизайну, постах на Facebook, картинках у Pinterest і спільноті Dribble.

Після переміщення квадрата в ескіз, іноді варто подивитися двічі, щоб побачити, чи кожна зі сторін має рівні пропорції. Якщо ви подивитеся досить уважно, то побачите, що вертикальні сторони здаються довшими, ніж горизонтальні. Наче квадрат насправді прямокутник! Але, насправді, це ідеальний квадрат 1:1. Це і називається вертикально-горизонтальною ілюзією.

Зображення поста на Facebook - це квадрат 1:1.

Дійсно захоплююче те, що сприйняття цієї ілюзії залежить від культури і статі. Люди, які живуть у розвинених містах, як правило, виявляють більшу сприйнятливість, ніж люди, що живуть у сільських районах. Це пояснюється тим, що жителі сільських районів, як правило, звикли жити в круглих будинках.

3. Смуги Маха

Смуги Маха.

Розміщення відтінків одного кольору поруч один з одним було поширеним трендом в епоху плоского дизайну. Подивившись уважно, ви, можливо, помітили помилкову тінь, що з'являється між гранями кожної контрастної тіні. Ця ілюзія відома як «Смуги Маха». Жодна тінь не була додана в зображення, так просто сприймають наші очі.

Тіні з'являються між гранями кожного ряду.

Технічне пояснення виникнення цього ефекту пов'язане з побічним гальмуванням, що означає, що більш темна область помилково здається ще більш темною, а більш світла - ще більш світлою.

Хоча цей ефект досить непомітний у світі графічного дизайну, довести його вплив можливо - він може стати реальною перешкодою для стоматологів. Рентгенівські промені створюють зображення в відтінках сірого, які використовуються для аналізу аномальних відхилень інтенсивності. Смуги Маха можуть забезпечити помилково-позитивний діагноз, якщо його правильно не виявити.

4. Ілюзія Герінга

Ілюзія Герінга.

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

Прокрутіть вгору і вниз, щоб відчути ефект вібрації.

Це дуже крутий ефект, хоча Муар не є оптичною ілюзією як такою, він являє собою інтерференційну фігуру. Приклад логотипу Sonos використовує поєднання шаблонів Муар, ілюзію Герінга та ілюзорні рухи. Ця сенсорна техніка досить популярна в мистецтві «Оп-арт».

5. Сітка Германа

Сітка Германа.

Ілюзія сітки Германа досить популярна, і її можна побачити в макетах, які містять сітку квадратів, розміщених на високому контрастному тлі. Якщо ви подивитеся прямо на будь-який квадрат, то побачите примарну кульку на перетині сусідніх квадратів. Але якщо будете дивитися на сам перетин - кулька зникне.

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

6. Контрастна Ілюзія

Контрастна ілюзія.

Розміщення двох об'єктів одного кольору на різних контрастних фонах може призвести до того, що вони будуть здаватися різних кольорів. Цей феномен відомий як контрастна ілюзія. Вважається, що Контраст - це король, але не всі сприймають його однаково.

Колір тексту абсолютно однаковий на обох сторонах, проте таким не здається.

На жаль, немає усталеної теорії про те, чому ця ілюзія відбувається, але зате багато досліджень спекулюють, чому ж. Одна з причин - побічне гальмування, яке відповідальне за Сітку Германа і Смуги Маха.

7. Ілюзія Манкера-Вайта

Ілюзія Манкера-Вайта.

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

Причина ілюзії Манкера-Вайта... як ви вже здогадалися... побічне гальмування.

8. Ілюзія Акварелі

Ілюзія Акварелі.

Бували випадки, коли я додавав кордон до об'єкта, а потім задавався питанням: «Коли я також змінив колір фону?». Якщо придивитися, то можна помітити, що бліда області набуває набагато більш світлий відтінок з-за кольору кордону. Сильно здивуєтеся, якщо я скажу, що та світла область насправді біла?

Це візуальне явище, відоме як ілюзія акварелі, залежить від поєднання яскравості і колірного контрасту контурних ліній.

Біла область всередині кнопки, здається, забирає в себе невеликий відтінок залежно від кольору кордону.

9. Ілюзія Джастроу

Ілюзія Джастроу.

Ця ілюзія виникає під час роботи з криволінійними об'єктами. Здається, що ці два елементи відрізняються за розміром, але при найближчому розгляді, вони, насправді, одного розміру.

Ця ілюзія проявляється в процесі створення, тому що деякі ідентично вигнуті грані можуть виглядати менше, ніж інші.

Як це можливо? Що ж, це відомо, як ілюзія Джастроу, і немає ніякого кінцевого пояснення, чому ми сприймаємо сегменти по-різному. Одне з пояснень полягає в тому, що наш мозок не бачить різниці в розмірах великого і маленького радіусу. Іншими словами, через короткий бік довга здається довгою, і навпаки.

10. Ілюзія Корнсвіта

Ілюзія Корнсвіта.

Крім ілюзії контрасту та ілюзії Полос Маха, ілюзія Корнсвіта використовує градієнт з центральною лінією, щоб створити враження, що з одного боку зображення насправді темніше, ніж з іншого. Але насправді, вони однакові! Ви можете виявити, що, коли секції розміщуються паралельно, обидві сторони насправді ідентичні.

Кожен ромб має один і ж градієнт, але здається, що вони стають темнішими (зверху вниз).

Ця ілюзія справляє схожий ефект на дві вищезгаданих ілюзії, але насправді відрізняється двома важливими аспектами:

  • У прикладі смуг Маха, показаному раніше, ефект видно тільки на ділянках, близьких до кордону кожної тіні. Однак ілюзія Корнсвіт впливає на сприйняття всієї площі.
  • При ілюзії Корнсвіт, світла частина межі виглядає світліше, а темна частина грані здається темнішою. Це протилежність звичайного контрастного ефекту.

11. Ілюзія Мюллера-Лайєра

Промах для оптимального візуального сприйняття.

Типографи зрозуміють, що для створення шрифту необхідно більше покладатися на дизайнерську інтуїцію, а не на логічне мислення. Математичне позиціонування кожного символу на основі його метричної висоти зробить все слово непропорційним з точки зору візуального сприйняття. Звичайна практика включає в себе процес, званий перевищенням (overshooting). Простіше кажучи, перевищення - це процес зміни розміру окремих символів для досягнення оптичного балансу.

Без перевищення буква «e» в LinkedIn і буква «z» в Amazon оптично не збалансовані.

Подивившись на відомі логотипи вище, можна помітити, що деякі знаки знаходяться не в межах базової лінії і висоти-X. Типографи повинні вручну оптично налаштувати кожен символ для кращого результату.

Але навіщо нам потрібні перевищення в друкарні?

Причина, через яку потрібне перевищення, пов'язана з однією з найпопулярніших оптичних ілюзій у світі - ілюзією Мюллера-Лайєра. Цей візуальний феномен свідчить, що розміщення шеврона на кожному кінці сегмента лінії може призвести до того, що один сегмент виявиться коротшим або довшим залежно від напрямку шеврона. Ця класична ілюзія доводить хибність людського сприйняття.

Ви стикалися з якимись іншими оптичними ілюзіями, які ставили вас у глухий кут?

Якщо ви хочете дізнатися більше про візуальне сприйняття або вдосконалити свої навички в ролі дизайнера, я б порекомендував гештальт-психологію.

Варті уваги:

  • Трикутник Каніза
  • Ілюзія Еббінгауса
  • Ілюзія Еренштейна
  • Поширення неона
  • Ілюзія Тіні
  • Ілюзорний Рух 1
  • Ілюзорний Рух 2

Переклад: Аля Бланкмер

COM_SPPAGEBUILDER_NO_ITEMS_FOUND