Чому красивий інтерфейс не знімає напругу користувача

💡 Усі статті, обговорення, новини про Mobile — в одному місці. Приєднуйтесь до Mobile спільноти!

Мене звати Ніна Войтович, я Product Designer в Involve.software. Працюю з цифровими продуктами у сферах фінтеху, investment platforms, health та civic tech сервісів, collaborative AI systems та automation platforms. Це стаття про те, що я побачила в таких продуктах, і що змінило мій підхід до дизайну. Буде корисною junior UI/UX дизайнерам, які проєктують продукти з відповідальними сценаріями.

Чому красивий інтерфейс не знімає напругу користувача

Одного разу на ревью я розбирала екран підтвердження платежу. Все виглядало добре: охайно, приємні кольори, анімована кнопка. Але після натискання «Підтвердити» нічого не відбувалось, не було жодного підтвердження — просто головний екран.

Хоча продукт виглядав емоційно, людина виходила зі сценарію з питанням, а чи пройшов платіж?

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

Ілюстрація — це не емоція

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

Частенько ілюстрація додає настрою, але не дає ясності. А без ясності залишатиметься напруга, і рішення даватимуться важче. Те саме стосується й анімації — вона має сенс, лише коли пояснює, що відбувається. Наприклад, плавний перехід між екранами допомагає відчути логіку навігації, мікроанімація підтвердження дає швидкий зворотний зв’язок. Але у важливих моментах зайві рухи більше створюють шум, ніж допомагають.

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

Три запитання, які я ставлю перед кожним екраном

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

1. У якому стані користувач заходить у сценарій?

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

Тут немає єдиного рецепту. У фінтеху або сервісі з високою ціною помилки стриманість часто спрацьовує краще. Але в health-застосунку, де людині важливо відчувати підтримку, ілюстрації або м’які анімації можуть знижувати тривожність. Все залежить від контексту й того, що людина несе з собою в цей момент.

2. У якому стані користувач приймає рішення?

Чи бачить він, що відбувається зараз і що станеться далі? Чи відчуває контроль? На цьому кроці гумор або надто милий тон можуть заважати ясності або створювати відчуття несерйозності. У менш критичних сценаріях м’який тон може зменшити тривогу. Але стиль комунікації не повинен суперечити серйозності дії.

3. У якому стані користувач виходить зі сценарію?

З відчуттям завершеності чи із сумнівом, що щось пішло не так? Якщо після дії залишається невпевненість, користувач повертається назад, перевіряє ще раз, шукає підтвердження. Якщо виходить зі спокоєм, продукт отримує довіру, яка накопичується з кожної взаємодії.

Три моменти одного флоу: користувач перевіряє дані і може нервувати — чи все правильно? Бачить, що відбувається і відчуває контроль. Виходить з підтвердженням і спокоєм.

Три продукти, три різних підходи

Зазвичай контекст визначає все. Наведу приклад із трьох продуктів з різними підходами до емоційного дизайну. Всі з них правильні.

Фінтех-застосунок. Я працювала над екраном обробки платежу. До редизайну користувач бачив лише текст «Обробка...» на темному екрані без жодного уявлення, що відбувається і скільки чекати. Система працювала, але людина цього не відчувала. Після редизайну з’явився кільцевий індикатор з покроковими статусами: два виконані кроки позначені галочкою, третій ще в процесі. Нічого функціонально не змінилося, але змінився стан користувача. Замість тривоги «а чи пройшло» він отримав відчуття контролю і передбачуваності.

Зліва — процес іде, але користувач цього не відчуває. Справа — два кроки пройдено, один залишився.

Health-застосунок. Після першого раунду юзер-тестувань я отримала фідбек, який мене здивував. Користувачі казали: «хотілося б якогось маскота-хелсі помічника, щоб нагадування були більш персоналізованими» і «можливо додати трохи акцентів, щоб зробити апку веселішою, хоча розумію, що це медичний застосунок і яскраві акценти можуть бути зайвими».

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

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

Зліва — функціональний, але холодний екран. Справа — той самий екран з маскотом і підтримуючою фразою.

Civic tech застосунок. Схожа ситуація була з картою укриттів. Людина відкриває її під час повітряної тривоги та не розглядає інтерфейс, вона шукає конкретну адресу якнайшвидше. Я додала пошукове поле — здавалося б, очевидне рішення. Замовник сприйняв це інакше: головний запит був максимально розгорнути мапу, без великого хедера. Поле на весь екран одразу відпало. Я нервувала, бо така комунікація завжди складна, і буває важко пояснити, чому це потрібно користувачу. Замовники часто мають чітке бачення того, як має виглядати продукт, але не завжди — того, як ним користуються в реальних умовах.

Зрештою пошук згорнули в іконку лупи. Я не була в захваті, оскільки хотілося зберегти поле видимим одразу. Але іноді компроміс — це єдиний спосіб зберегти функцію взагалі. Головне, що користувач під час тривоги може знайти укриття за адресою, а не тільки скролити по карті. Я видихнула.

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

Зліва — поле пошуку займає окремий рядок, хедер великий, мапи менше. Справа — пошук згорнутий в іконку на карті, мапи більше, всі фільтри видні.

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

Коли емоційний дизайн шкодить

Якщо не враховувати контекст на початку роботи, можна непомітно нашкодити.

Наприклад, анімація у критичному моменті, де користувач чекає швидкої відповіді, сприймається як перешкода. Тоді замість відчуття підтримки з’являється роздратування. Гумор у повідомленні про помилку з грошима виглядає як знецінення проблеми. Бо у цьому випадку людина шукає не жарт, а чітке пояснення того, що сталося, і як це виправити.

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

Як зрозуміти, що рішення працює

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

Але дизайнер не завжди може об’єктивно оцінити власне рішення. Те, що виглядає вдалим у макеті, на практиці може викликати сумнів або нерозуміння. Я не раз стикалася з тим, що була впевнена в рішенні, і помилялася. Користувачі відчували зовсім інше, ніж я очікувала.

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

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

Підсумок

Емоційний дизайн — це про те, в якому стані користувач приймає рішення. Я не раз ловила себе на бажанні зробити екран красивішим, але щоразу поверталася до питання, чи допоможе це людині прямо зараз?

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