Чому один додаток ми відкриваємо на автоматі, а інший — відштовхує з першого кліку? Вся річ у нюансах UX-дизайну. Влучні кольори, зручні кнопки, підказки — все це буквально приносить задоволення нашому мозку. Хаотичність та агресивна геометрія, навпаки, роблять йому боляче.
Саме тому важливо залучати нейродані під час створення дизайну: це допоможе зробити його не тільки цікавим або трендовим, але й таким, що підкорить користувача з першого погляду. Разом із лекторами курсу UX/UI Design Мар'яною Бучкович та Алексом Кімом розбираємось, як догодити мозку кольорами та формами.
Як мозок сприймає кольори
Уявімо, що мозок — це великий опенспейс, де працюють різні відділи. В одному з них (зоровій корі) є співробітниця V4, і головна її задача — обробляти те, що бачить людина. Аналіз кольору, яскравості й текстури — справа всього її життя. Саме завдяки старанності V4 ми впізнаємо червоне яблуко як у сутінках, так і на світанку. І якби вона забила на свою роботу, наш світ був би цілковито позбавлений фарб, як нуарне кіно.
І хоча чорно-біла естетика добре виконує функцію художнього прийому, в таких умовах мозок швидко знудився б. Річ у тім, що кожен колір викликає в нього різні почуття, або (мовою науки) унікальні патерни мозкової активності. Отже, кольори — як паролі до мозку. Підбереш правильний — отримаєш зацікавленість користувача.
Вплив форми на сприйняття та емоції
Якщо відтінки — це більше про емоції, то форми — про довіру та поведінку. Мозку більше до душі щось красиве, плавне і зрозуміле.
■ Округлі форми — більш «дружні»
Гострі кути інтуїтивно сприймаються мозком як щось небезпечне. Таке, що може вколоти: шпильки, стріли, голки й далі за списком. А от заокруглені форми, навпаки, видаються більш м'якими та позитивними: як хмаринки або сонце.
Саме тому такі кнопки отримують на 17–55% більше кліків порівняно зі своїми гострими опонентами. Користувачі описують їх як «дружні» та безпечніші.
■ Естетика vs юзабіліті
Тут діє Aesthetic–usability effect: якщо інтерфейс красивий, він автоматично видається зручнішим за візуально слабшого конкурента. Навіть якщо функції однаковісінькі. Тож зовнішні переваги часто закривають нам очі на дрібні недоліки.
■ Візуальна ієрархія та форма
Все просто: хочеш звернути на щось увагу — зроби його особливим. У поміч — форма та контраст. Тут працюють закони гештальту, або ж ефект фон Ресторффа: серед схожих об'єктів запам'ятовується той, що виділяється. Тому непересічна кнопка або іконка мають пріоритет у сприйнятті.
Green Flags: що любить мозок
Розуміючи ці механізми, можемо виділити елементи, які мозок сприймає позитивно:
Red Flags: що дратує мозок
Водночас існують елементи, які викликають негативну реакцію:
Винятки з правил: коли «червоні прапорці» не червоні
Проте не варто сприймати все це як догму. В реальній роботі на вибір форм і кольорів впливають багато інших чинників. Серед них:
■ Айдентика бренду. Якщо логотип або візуальна мова компанії базуються на гострих формах, вони природно перекочують і в UI. Це не обов'язково погано — головне, щоби послідовно.
■ Категорія продукту. У сферах, де важливі строгість і структурність (наприклад, юридичні сервіси чи B2B-платформи), прямі кути й геометрія можуть сприйматись як серйозність і надійність.
■ Креативні винятки. Якщо сайт задуманий як експериментальний артпроєкт або має інші «якорі» для утримання уваги, правила можна сміливо ламати. Хороший приклад — wodniack.dev, де гострі лінії та візуальний хаос працюють як задум, а не як red flag.
Колір: що врахувати в інтерфейсі
У більшості випадків UX/UI-дизайнер працює з палітрою, що дісталася йому разом з айдентикою і TOV. Залишається адаптувати відтінки під інтерфейс за допомогою темніших та світліших градацій для UI. Це допомагає тримати цілісність бренду й водночас робити інтерфейс зручним.
Але колір у діджиталі — це ще й питання юзабіліті та доступності. Контраст, heatmap і навіть юридичні вимоги напряму впливають на вибір відтінків.
Практичні поради щодо кольору
1. Щоби перевірити контрастність, збережи макет у чорно-білому режимі — якщо кнопка губиться, треба докрутити.
2. Обережно з чорним #000000: у тексті він ок, але в елементах інтерфейсу виглядає занадто різко. І завжди додавай темну/світлу тему — користувачі часто працюють у різних умовах освітлення. Базовий приклад — застосунки для читання.
3. Не забувай про правовий бік: з червня 2025 року European Accessibility Act поширюється і на бізнес. Тож вебдоступність — це не тільки етика, але й закон.
Де тестувати UX/UI-дизайн на доступність
Attention Insight — за допомогою ШІ показує, куди людина найімовірніше дивитиметься на зображенні або вебсторінці.
Contrast Checker (WebAIM) — перевіряє, чи достатній контраст між кольорами тексту й фону.
Color Contrast Analyzer — дозволяє перевіряти кольори прямо з екрана.
Polypane — дає змогу одночасно бачити сайт у різних розмірах екрана й одразу перевіряти доступність, швидкодію та зручність дизайну.
Stark (Figma-плагін) — перевіряє доступність, контраст, симулює дальтонізм.
Інструменти, що допомагають догодити мозку
1. Форми: принципи гештальту — контраст, ізоляція, незвична форма, — щоб вести користувача за руку.
2. Eye-tracking: інтегруйте в прототипи або готові UI для оптимізації розташування та передбачення поведінки.
3. Тест-версії: кілька варіантів кнопок (форма/колір) → аналіз кліків та поглядів → обираємо найефективніше.
Сила деталей в UX/UI: практичні кейси
Команда дизайнерів, до якої входила лекторка Мар'яна Бучкович, проводила коридорне тестування застосунку з кнопками швидких дій. Палітра була достатньо широкою, вона містила чорний, графітовий, зелений та жовтий кольори. Потенційних користувачів запитали: «Який колір кнопки вам подобається найбільше?»
■ Графітовий одразу став фаворитом як серед дизайнерів, так і серед респондентів.
■ Чорний сприймався як різкий та «зобов'язальний», навіть подекуди асоціювався із сумом і трауром. Також він нагадував багатьом monobank, хоча в самому застосунку mono кнопки були рожеві.
■ Зелений викликав асоціації з фінансовими сервісами.
■ Жовтий отримав найменше голосів — виглядав «легким» і ненадійним.
Важливо не покладатися лише на відповіді користувачів, а спостерігати за їхньою поведінкою та враховувати контекст. Навіть невеликі зміни в кольорі, формі або розмірі кнопок реально впливають на UX.
Кейси зі світової практики:
Extra Space Storage протестували кольори кнопок: переміг помаранчевий. Він виглядає як сигнал «натисни мене зараз», тоді як жовтий — занадто легкий, а синій — холодний. Ця невелика зміна підняла кількість бронювань на +7,8%, що для великого бізнесу означає мільйони доларів.
CloudMetrics Pro використали помаранчеву кнопку Start Your Trial на темно-синьому фоні, що принесло +60% кліків порівняно з сірою, а загальний конверсійний показник виріс до 18,2% замість середніх 10,4%. Яскравий колір знову спрацював як сигнал до дії.
Demio просто зробили CTA-кнопку на thank you сторінці більшою і темнішою — і конверсія виросла з 1,59% до 2,53%. Чудовий приклад того, як дизайн кнопки може реально впливати на дії користувачів.
Сучасний дизайн — це не лише про естетику. Нейродані та відстеження руху очей допомагають створювати інтерфейси, які працюють на рівні підсвідомості. Правильна ж адаптація брендових кольорів робить продукт зручним та зрозумілим для користувачів.
Усі танці з бубном того варті: Google протестував 41 відтінок синього для посилань — і завдяки цьому збільшив свої доходи на мільйони доларів. Правильно обраний колір кнопки може стати відправною точкою бізнесу, і в цьому сила якісного UX/UI-дизайну.