Дизайн — це не лише пікселі та візерунки. Це також темп і почуття. Деякі продукти виглядають кінематографічно, оскільки вони ведуть нас через невизначеність, полегшення, впевненість і спокій, не смикаючи нас. Це Emotion in Flow. Інші підривають власні моменти жартом у невідповідному місці, несподіванкою або різким переходом. Це емоції в конфлікті. Це не лише ідеї UX. Їх можна побачити всюди в розважальних закладах. І найчіткіший спосіб відчути різницю — порівняти те, як аніме справляється з емоційними змінами, і те, як спотикаються фільми Marvel і DC. Ми використаємо два конкретні приклади, один із Dan da Dan (аніме-серіал на Netflix) і один із фільму Джеймса Ганна про Супермена, щоб визначити дві концепції, а потім переведемо їх у практичні шаблони дизайну продукту, які можна застосувати одразу. Примітка. Ми зосередимося на цифрових продуктах, зокрема на програмах, SaaS і Інтернеті. Emotion In Flow (аніме: Dan da Dan) У Dan da Dan тональний діапазон дикий, жахливий, комічний, ніжний, але він тече. Приклад: в одній арці герої перебувають у химерному комедійному квесті, пов’язаному з «золотими статевими органами» одного з головних героїв (так, справді), а в іншій ми занурені в карколомну історію матері, чию дитину викрали. На папері ця зміна має бути автокатастрофою. На екрані він послідовний і емоційно розбірливий. Чому це працює на екрані?
Безперервність ставок. Навіть коли трапляється кляп, цілі персонажів і небезпека залишаються незмінними. Гумор знімає напругу після міні-розв’язки; це не заперечує загрозу. Чіткі ознаки настрою. Музика, обрамлення, темп і реакції персонажів передають наступні відчуття. Ви готові до зміни, тож їдете на ньому, а не вас смикають. Один емоційний якір. Стосунки залишаються Полярною зіркою, тому суть сцени не втрачається, коли змінюється тон.
Як це перекладається на UX? Хороші продукти роблять те саме: готуються, переходять, вирішують, тож користувачі залишаються зануреними, коли змінюється емоційний тон.
Конфлікт емоцій (Marvel/DC: Супермен Джеймса Ганна) Лоїс і Кларк ведуть щиру, інтимну розмову, повільний, людський момент, а на задньому плані розігрується кляп, що біжить (монстра, якого вдарили величезною бейсбольною битою). Прикол привертає увагу саме тоді, коли сцена просить вас відчути щось справжнє. Результатом є тональне зіткнення, яке пронизує емоцію замість того, щоб вивільняти її. Чому це не відбувається на екрані?
Збільшене когнітивне навантаження. Те, що тут відбувається, прямо відповідає теорії когнітивного навантаження. Коли сцена (або інтерфейс) просить користувачів обробити два конкуруючих емоційних сигналу одночасно, це вводить стороннє когнітивне навантаження, розумові зусилля, які не мають нічого спільного із завданням чи моментом. Замість того, щоб зосередитися на емоційному ритмі, увага розподіляється між сигналами, які не вирішують один одного. У продуктах це те, що відбувається, коли гумор, рекламні акції чи несподівані зміни в інтерфейсі користувача втручаються у важливі моменти: користувачі змушені інтерпретувати тон і наміри, коли вони намагаються діяти, що сповільнює розуміння та підвищує стрес. Конкуруючі ритми одночасно. Жарт накладається на кульмінацію серйозного ритму; аудиторія звертає увагу на перемикач, а не на почуття. Жодного тонального переходу. Немає переходу, який створює інтимність до того, як з’явиться гумор, тому момент здається підрізаним, а не вирішеним.
Як це перекладається на UX? У продуктах це проблема «конфетті перед підтвердженням», зухвала помилка в грошовому потоці або рекламний модал, який з’являється прямо посередині критичного завдання. Це також підвищує когнітивне навантаження: користувачі повинні обробляти гумор, намагаючись вирішити проблему, що сповільнює їхню роботу та підвищує стрес.
Швидкі визначення Емоції у FlowEmotional змінюються, відчуваючи себе заслуженими, телеграфованими та синхронізованими, щоб вони вирішували попередні ритми. Тримає занурення. Емоція під час конфлікту. Стрімкий перемикач (або жорстка різьба), який пробиває живий емоційний ритм. Перерви на занурення.
Тепер, коли ми це назвали: як це пов’язано з UX? Як емоції формують запам'ятовуваність продукту Люди не пам’ятають середнього досвіду; вони пам'ятають вершини і кінцівку. Якщо пік вашого потоку – це розчарування або кінець безладний, це те, що залишається. Тож створюйте емоційну криву навмисно. Емоції живуть у трьох шарах (з Емоційного дизайну Дона Нормана), і ваш продукт має їх узгодити:
Вісцеральний (кишковий тракт): сигнали першого враження: візуальні зображення, рух, тактильні відчуття, звук. Приклади: стабільний скелетний завантажувач заспокоює більше, ніж нервовийблешня; ніжний дзвінок успіху/тактильний натискання дозволяє виграшу приземлитися без крику; послідовне послаблення/напрямок повідомляє оку, що змінилося. Поведінковий (виконання): Чи можу я легко виконати своє завдання? Тертя тут означає стрес. Приклади: три чіткі етапи оплати з передбачуваним прогресом; стани помилок, які пояснюють, що сталося та як відновити; вбудована перевірка замість вибухів кінця форми. Рефлексивний (значення): історія, яку я розповідаю собі після: «Чи це було того варте? Чи я вірю цьому?» Приклади: охайний підсумковий екран («Готово. Ви отримаєте X до п’ятниці.») завершує; короткий підсумок («Ви заощадили 18 євро цього року») викликає гордість без феєрверку.
Мікровзаємодії - це емоційний клей. Кожен із них має тригер (я натискаю «Оплатити»), правила (що робить система), зворотний зв’язок (прогрес і чіткий результат) і цикли або режими (що станеться, якщо користувач спробує ще раз). Зробіть це правильно, і ваші переходи поєднають почуття. Зрозумійте їх неправильно, і вони порушують потік.
Емоційний біт-лист чітко відображає рівень досвіду Нормана:
Невизначеність живе на внутрішніх і ранніх рівнях поведінки, де користувачі покладаються на сенсорні сигнали (рух, чіткість, зворотний зв’язок), щоб зрозуміти, що відбувається. Ясність міцно присутня на рівні поведінки, моменті, коли намір системи та наступна дія користувача збігаються. Передбачення — це суміш поведінкового (користувач робить щось цілеспрямовано) і рефлексивного (користувач уже передбачає результат і уявляє, що буде далі). Досягнення — це рефлексивний пік, коли користувач оцінює успіх, довіру та те, чи «відчув себе правильним» досвід. Calm/Closure насамперед рефлексує, допомагаючи користувачам усвідомити значення взаємодії та вирішити, чи продукт заслуговує довіри та чи варто до нього повернутися.
У реальних продуктах ця послідовність не зникає, коли щось йде не так. Помилки, затримка та погіршені стани не є винятками з емоційної дуги — вони є її частиною. Поглядаючи через призму оповіді, ці моменти є перешкодами на шляху героя. Добре продуманий стан відновлення визнає невдачу, пояснює, що сталося, і направляє наступний крок, не створюючи нового емоційного шуму. Коли невдача розглядається як удар, а не розрив, емоційний потік може бути збережений навіть під час стресу. Приклади UX: емоція в потоці проти емоції в конфлікті Емоція в потоці Оплата виконана правильно (стиль Stripe/Apple Pay): короткі кроки, чіткий прогрес і чіткий стан успішності (галочка з додатковим м’яким тактильним відображенням). Пік (успіх) досягає, а кінець дає закриття (отримання або наступний крок).
Статус посадки (програми для виклику поїздки, наприклад, Uber, Free Now або Bolt): прогресивні оновлення підтримують орієнтацію та зменшують занепокоєння («Водій прибуває», «2 хв.», «Прибув»). Невизначеність перетворюється на ясність, ніжний рух готує кожен перехід.
Емоція в конфлікті Примітка. Ми не називаємо тут конкретні продукти — ми поважаємо роботу, що стоїть за ними. Натомість ми показуємо закономірності, які викликають емоційні конфлікти, і як саме їх виправити.
Жарти в серйозні моменти. Зухвале копіювання помилок для грошей/здоров'я/безпеки. Користувачі відчувають стрес; гумор підсилює роздратування. Святкування перед вирішенням. Конфетті, феєрверки або гучні звуки перед підтвердженням. Вечірка перериває кульмінацію. Важкі скачки в стані. Сюрпризні моди/реклами в середині завдання, захоплення на весь екран без підготовки. Відчувається як раптовий перерив під час емоційного ритму.
Що ви можете зробити, щоб забезпечити потік емоцій Ось сторінка Notion із повним шаблоном, який можна скопіювати:
Емоційний тактний шаблон.
1. Спочатку напишіть емоційний аркуш Для кожного основного потоку (навчання, оплата, відновлення) нанесіть на карту почуття за крок: невизначеність → ясність → очікування → досягнення → спокій. Додайте копію, рух і мікровзаємодії до кожного такту. (Хто куди переносить емоцію?) 2. Вирівняйте тон із ризиком завдання Створіть матрицю тонів (рівень ризику × стан). Під час помилок із високим ризиком будьте спокійними, відвертими та орієнтованими на вирішення. Збережіть грайливість для контекстів із низьким рівнем ризику. Фрагменти шаблону:
Помилка високого ризику: «Нам не вдалося підтвердити ваш ідентифікатор. Спробуйте ще раз або зверніться до служби підтримки». Порожній стан із низьким рівнем ризику: "Тут ще нічого немає. Хочете почати зі зразка?"
Саме тут багато зрілих продуктів тихо дрейфують у емоційний конфлікт. З часом команди додають радість за звичкою, а не за наміром. Корисна самоперевірка полягає в тому, щоб запитати: якби ми прибрали всі грайливі чи святкові елементи з цього кроку, чи буде потік все ще виглядати гуманним — читі елементи, що маскують тертя? Хороший емоційний дизайн прояснює досвід; чудовий емоційний дизайн не потребує прикрас, щоб компенсувати плутанину. 3. Пік і кінець дизайну навмисно Створіть одну чітку вершину (момент успіху) і один чистий кінець (підтвердження і те, що буде далі). Виміряйте пригадування та задоволення в обох точках. 4. Використовуйте мікровзаємодії як мости, а не як прожектори
Підготуйтеся: невеликі послідовні підказки щодо руху перед великою зміною стану. Підтвердьте: Успіх отримує тонку позицію з трохи повільнішим розслабленням і додатковим легким тактильним відчуттям. Відновлення: неодноразова невдача витончено змінює тон з оптимістичного на підтримуючий і направляє наступний крок.
5. Тест на емоційну спадкоємність Під час сеансів юзабіліті не просто запитуйте: «Це було легко?» Замість цього ви можете запитати: «Яке відчуття тут змінилося?» Якщо ви чуєте «збентежений → розважений → збентежений», у вас конфлікт, а не потік. Ітерація переходів, а не лише екранів. Як уникнути емоцій під час конфлікту: короткий контрольний список Червоні прапорці → виправлення:
Жарти в серйозні моменти → замініть на спокійну, пряму мову та чіткий шлях відновлення. Святкування до вирішення → перемістити святкування після підтвердження; пом’якшити його для завдань із високим ризиком. Перехід у важкий стан → переходи з попереднім оголошенням; підтримувати послідовність кадрування; використовуйте осмислений рух, щоб зберегти безперервність. Міжкомандний тональний дрейф → централізуйте вказівки щодо голосу та тону з прикладами для рівня ризику та стану.
Бувають моменти, коли переривання емоційного потоку є навмисним і необхідним. Попередження безпеки, юридичні підтвердження та критичні для безпеки сповіщення часто виграють від різких тональних змін. У цих випадках порушення сигналізує про важливість і вимагає уваги. Проблема полягає не в самому емоційному конфлікті; це випадковий конфлікт. Коли дизайнери свідомо вибирають порушення, користувачі розуміють ставки замість того, щоб відчувати хлистовий удар. Висновок Великі переживання – це спрямовані переживання. Dan da Dan показує, як рухатися через почуття, не втрачаючи нас: це готує, переходить і вирішує. Сцена Супермена показує протилежне: кляп стикається з щирим биттям серця. Робіть перше. Зіставте свої емоційні ритми, вирівняйте тон із ризиком завдання та дозвольте мікровзаємодіям поєднати почуття, щоб користувачі запам’ятали правильний пік і правильний кінець, а не удар посередині.
