Створення дизайну, який приваблює на емоційному рівні

Генрі Форд, засновник компанії Ford Motor Company, колись сказав:

Якщо автомобіль ефективний і надійний, чому б комусь хотілося б іншого кольору, правда? Модель автомобіля Ford Model T, яка випускалась у 1908–1927 роках, була доступна виключно в чорному кольорі протягом тривалого часу. Для компанії це був величезний успіх, але із часом вона почала втрачати свою частку на ринку на користь General Motors та Chrysler. Їхні автомобілі були свіжішими, з інноваційними дизайнами та широким асортиментом моделей. Тож коли було представлено нову Ford Model A в 1927 році, Ford все ж відмовився від свого принципу і пропонував уже чотири різних кольори, щоб триматися на рівні конкурентів.

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

У своїй книзі під назвою «Емоційний дизайн» Дональд Норман описує концепцію, згідно з якою ми сприймаємо речі, які нас оточують, на трьох рівнях:

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

Поведінковий (Behavioral) — тут ми аналізуємо, які функції виконує об’єкт, наскільки він ефективний, і наскільки легко його використовувати.

Рефлексивний (Reflective) — після використання об’єкта протягом певного часу ми починаємо роздумувати про його призначення, ідею, яку він виражає, і про те, як він змінює наше сприйняття себе.

Три рівні сприйняття дизайну за теорією Дональда Нормана

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

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

На противагу, успішна стратегія може виглядати таким чином:

1. Приверніть увагу людей протягом перших кількох секунд — це інстинктивний рівень.
2. Дозвольте їм дослідити ваш вебсайт і зрозуміти, що він справді добре працює — це поведінковий рівень.
3. Вони будуть схильні повернутися, щоб знову ним скористатися, бо ви допомогли їм розв’язати їхню проблему, або навіть покращили їхнє життя — це рефлексивний рівень.

Тепер поговорімо про певні інструменти, які викликають специфічні емоції в наших користувачів.

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

Форми можуть виражати напругу (як тут), порядок, грайливість тощо

Під час роботи в MIT Media Lab Массачусетського технологічного інституту, Філіппа Мазерсіл створила інструмент, який може створювати тривимірні форми, що асоціюються з певними емоціями. На цьому відео ви можете побачити приклад, у якому пояснюється, як вона використовувала наявні дослідження, щоби пов‘язати конкретні геометричні форми та емоції людей, які вони викликають.

Колір — це наступна властивість, що може додавати певний емоційний аспект вашому дизайну. Може здатися, що сприйняття кольору є дуже суб’єктивним і також залежить від культурного контексту, але є універсальні принципи. Наприклад, червоний використовується для світлофорів та візуалізує стан помилки через його інтенсивний вплив на глядача. Або візьмемо фіолетовий — тут навіть є жарт, що всі сайти, пов’язані зі штучним інтелектом, фіолетові. Якщо ви задається питанням «чому»? То відповідь така: фіолетовий часто сприймається як щось магічне та таємниче.

Шрифти також мають свій власний характер. Якщо ви не вірите, рекомендуємо подивитися це відео.

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

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

Ми почали зі створення голосу бренду (tone of voice), щоб з’ясувати, як спілкуватися з нашою аудиторією. Ми, безперечно, не хотіли залякати людей або шокувати їх — люди й так уже знають, що війна це жахливо. Ми хотіли створити відчуття оптимізму та віру в можливість розв’язати будь-яку проблему попри всі труднощі.

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

Приклад поєднання фотографій з ілюстраціями

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

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

Загальний вигляд та відчуття вебсайту

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

Швидше за все, ви задаєтеся питанням, як аналізувати щось настільки тонке, як суб’єктивна реакція людини на наш дизайн? Ось, що про це говорить Дональд Норман у своїй книзі:

«Інстинктивний дизайн орієнтується на негайну реакцію на продукт, а дослідити її можна, демонструючи продукт людям та спостерігаючи за ними.»

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

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

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

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