В последнее время внутри дизайн-сообщества часто поднимается тема «эмоционального дизайна». Статей и материалов достаточно, и каждый затрагивает какой‑то определённый аспект этой темы. Я попытался собрать все знания, включая свои наработки, чтобы ответить на вопрос, а существуют ли критерии оценки эмоций от дизайна, и бывает ли дизайн эмоциональным в принципе.
Оглавление
Использование стилевых, композиционных и мультимедийных инструментов для передачи эмоций.
Значение анимации и микроинтеракций в эмоциональном дизайне.
Пирамида продуктового и коммуникационного дизайна (и её эмоциональный уровень).
Исследование пользовательских реакций на эмоциональный дизайн (как отследить и измерить эмоции).
Что такое эмоциональный дизайн
Это дизайн продукта, при котором все стороны этого продукта (UI, UX, CX) вовлекают, развлекают, решают задачи и позволяют создать положительную связь с человеком, а в долгосрочной перспективе делают его (человека) лояльным пользователем (амбассадором бренда), который будет рекомендовать продукт просто потому, что ему правда понравилось.
Согласно концепции Дональда Нормана, взаимодействие с продуктом вызывает у людей эмоциональные реакции на трёх уровнях:
Интуитивный. Этот уровень связан с автоматическими реакциями и первыми впечатлениями, которые невозможно повторить. Здесь важно не только создавать положительные эмоции, но и избегать возникновения отрицательных.
Поведенческий. Этот уровень связан с удобством использования и основными аспектами дизайна интерфейсов. Пользователи желают чувствовать, что контролируют процесс и могут быстро получить результат. Они предпочтут продукт, который был удобным и приятным в использовании.
Рефлексивный. На этом уровне люди анализируют свою историю использования продукта, обсуждают его с друзьями и принимают осознанные решения о его долгосрочном использовании. Здесь эмоциональный дизайн играет ключевую роль в построении долгосрочных отношений с пользователями.
Эмоциональная связь = добавочная стоимость в дополнение к стандартному продуктовому набору (jobs to be done). Это то, что вовлекает и удерживает, заставляя вернуться в продукт и получить эмоцию ещё раз и увеличить лояльность, укрепляя связь между брендом и аудиторией.
Влияния эмоций на пользовательский опыт и поведение
Обзор влияния эмоций на пользовательский опыт и поведение позволяет понять, как эмоции формируются в процессе взаимодействия с продуктом и какие реакции они вызывают у пользователей. Нейрофизиологические исследования подтверждают, что эмоции играют ключевую роль в принятии решений, в том числе и в процессе взаимодействия с интерфейсом продукта. Например, чувство удовлетворённости и доверия, вызванное позитивным пользовательским опытом, может стимулировать повторное использование продукта и рекомендации другим пользователям. С другой стороны, негативные эмоции, такие как раздражение или страх, могут привести к оттоку пользователей и негативному отзыву о продукте.
Цель эмоционального дизайна
В эмоциональном дизайне можно выделить три цели, три уровня, три плоскости, на которых можно работать.
-
Дизайнерская цель: сделать дизайн человечнее, интерактивнее, отзывчивее, осязаемее, сенсорнее. Понять, как человек чувствует себя в процессе, в каком контексте находится, какие у него ощущения, эмоции и чувства, имеется ли когнитивная нагрузка и т. д.
Цель: создание человекоцентричного, эмпатичного и интуитивно понятного опыта пользователя
-
Продуктовая цель: создать продукт, который не только удовлетворяет функциональным потребностям пользователей, но и вызывает положительные эмоции, улучшая их общее восприятие и вовлечённость.
Цель: интеграция положительных эмоций в пользовательский опыт, чтобы продукт стал неотъемлемой частью жизни человека, вызывал положительные эмоции и был таковым во всех точках контакта с человеком (CX).
-
Маркетинговая цель: разработать маркетинговые стратегии, чтобы установить эмоциональную связь между брендом и потребителями. Задача заключается в том, чтобы через маркетинг создавать эмоциональные переживания, которые ассоциируются с брендом, укрепляя позитивное восприятие и привлекая внимание аудитории.
Цель: создание эмоциональной связи между брендом и клиентами
Использование стилевых, композиционных и мультимедийных инструментов для передачи эмоций
Использование стиля и композиции для передачи определённых эмоций и ассоциаций — также одна из сторон, которую нельзя оставить без внимания, когда мы говорим о создании эмоционально насыщенного дизайна. Остановимся на нескольких важных приемов:
Цветовая палитра. Цвета имеют сильное эмоциональное воздействие и могут вызывать разнообразные ассоциации и чувства у пользователей. Например, использование ярких и насыщенных цветов может вызывать чувство радости и энергии, поддерживая позитивный настрой, в то время как спокойные и нейтральные оттенки могут создавать ощущение умиротворённости и надёжности.
Типографика. Шрифты также влияют на эмоциональный фон при считывании пользователем информации. Например, жирные и угловатые шрифты могут создавать впечатление силы и энергии, в то время как курсивные и изящные шрифты могут ассоциироваться с лёгкостью и элегантностью. Подбор подходящего шрифта позволяет дополнить эмоциональный контекст дизайна и усилить его воздействие на пользователя.
Композиция. Расположение и взаимодействие элементов на экране также могут влиять на эмоциональное восприятие. Например, симметричные композиции могут создавать ощущение порядка и стабильности, в то время как нестандартные композиции могут вызывать интерес, чувство динамики и так далее.
Иллюстрации и иконки. Такие визуальные элементы могут быть использованы для передачи определённых настроений и ассоциаций и являются одной из важнейших визуальных составляющих при взаимодействии пользователя и продукта.
Фото, видео, аудио. Мультимедийный контент предоставляет более эмоционально насыщенный способ взаимодействия с аудиторией. Он помогает создавать атмосферу, отражающую ценности и характер бренда. Это более глубокий уровень взаимодействия, который позволяет передать сложные идеи и эмоции через движение, звук и визуальные эффекты, обогащая пользовательский опыт.
Использование стилевых, композиционных и мультимедийных инструментов для передачи эмоций и ассоциаций важно в синергии с брендбуком компании. Брендбук определяет основные элементы брендинга, такие как логотип, цветовая палитра, шрифты и общий стиль дизайна, которые должны быть согласованы с общими целями и ценностями компании.
Правильное использование стиля и композиции в соответствии с брендбуком позволяет не только усилить эмоциональное воздействие продукта на пользователя, но и обеспечить единый и узнаваемый визуальный облик компании на всех платформах и каналах коммуникации. Такая согласованность создаёт доверие у пользователей, помогает «привязать» его к бренду.
Значение анимации и микроинтеракций в эмоциональном дизайне
Анимация добавляет динамику и живость в интерфейс, делая его более привлекательным и привычным для пользователя. Она может быть использована для подчёркивания важности определённых элементов интерфейса, передачи изменений состояний или просто для создания игрового или развлекательного аспекта взаимодействия.
Микроинтеракции, в свою очередь, уделяют внимание мелким, но важным деталям в пользовательском опыте. Это могут быть небольшие анимации или изменения, происходящие при взаимодействии с элементами интерфейса, такими как кнопки, ссылки или поля ввода. Например, изменение цвета кнопки при наведении мыши или анимация появления информационного сообщения после отправки формы.
Выделяют три типа анимаций. В одном случае в центре удобство и функциональность, в других — эмоции и развлечение.
Тип №1: Функциональные. Это анимации, которые повышают удобство использования продукта. Обычно незаметны, но без них пользователю станет тревожнее.
Тип №2: Структурные. Это анимации, которые сопровождают человека при переходе в новый раздел. Здесь мы делаем акцент на том, что платформа поменяла состояние, и просим человека обратить на это внимание. Часто элементы меняют свои размеры и саму структуру происходящего на экране.
Тип №3: Эмоциональные. Самый заметный и любимый пользователями тип анимаций. Он развлекает и вызывает эмоциональный отклик. Может быть ярким дополнением, которое мотивирует совершить полезное действие: перейти по ссылке, скачать, прослушать.
Объединение анимации и микроинтеракций позволяет не только создать эмоционально привлекательный дизайн, но и улучшить восприятие и понимание пользователем интерфейса. Например, анимация может помочь пользователю лучше понять последствия его действий (что также хорошо работает в связке с инклюзивным дизайном) или сделать процесс навигации более плавным и интуитивно понятным.
Пирамида продуктового и коммуникационного дизайна (и её эмоциональный уровень)
Чтобы понять, где в дизайне находится уровень эмоций (спойлер — он на самой верхушке), предлагаю взглянуть на две пирамиды:
Пирамида продуктового дизайна. Всего четыре уровня или ступени пирамиды (сверху вниз):
Эмоционально (то есть человекоцентрично, интерактивно, отзывчивее, сенсорнее, в общем, выше ожиданий).
Удобно (то есть понятно и доступно).
Надежно (то есть стабильно с технической точки зрения).
Функционально (то есть полезно).
Так как уровень эмоций — самый верхний (последняя ступенька в нашей пирамиде), то начинать идти в «эмоции» надо только тогда, когда ступеньки «функционально», «удобно» и «надёжно» закрыты как базовые потребности (и пользователи с этим согласны). Тогда следующим шагом в улучшении продукта являются эмоциональные аспекты.
Пирамида коммуникационного дизайна. И тут также четыре уровня или ступени пирамиды:
Эмоционально (то есть человекоцентрично, сенсорнее, атмосфернее, эмпатичнее, в общем, выше ожиданий);
Удобно (то есть понятно и доступно).
Считываемое (то есть донесение через образы сигнала, смысла(ов), сообщения).
Узнаваемо (то есть попадание в айдентику, паттерны, стилистику, визуальные атрибуты, и всё то, что прописано в брендбуке).
Как вы уж поняли, и тут уровень эмоций — самый верхний (последняя ступенька в нашей пирамиде), и также как и в продуктовом дизайне это комплексная работа, и в эмоции стоит идти после того, как все нижние уровни закрыты.
Исследование пользовательских реакций на эмоциональный дизайн (как отследить и измерить эмоции)
Я поделил всё, что касается попытки повлиять на эмоции пользователя или отследить и измерить их, на несколько функциональных направлений, в каждом из которых специалисты этих направлений могут со своей стороны помочь прокачать эмоциональную составляющую продукта:
Направление №1: дизайн (продуктовые и коммуникационные дизайнеры, UX-копирайтеры).
Направление №2: исследования (продуктовые, маркетинговые, аналитические).
Направление №3: технологии (специализированные UX-лаборатории).
Направление №1: дизайн
Ниже описаны те немногочисленные методы, которые помогают сделать «эмоциональнее» с точки зрения дизайна. То есть то, что может со своей стороны сделать дизайнер, чтобы помочь прокачать продукт с точки зрения эмоциональной составляющей.
Внедрить фактурные трёхмерные (статические или динамические) элементы, которые отвечают параметру «сенсорнее» (то есть такие, которые «глазами можно потрогать» и ощутить их текстуру и материал).
Внедрить микровзаимодействия и анимации.
Добавить юмор в текстах интерфейса и доносить информацию более понятным, не бюрократическим языком там, где возможно.
Снизить когнитивную нагрузку.
Исследовать и довести до идеала уровни пирамиды «функционально» и «удобно», чтобы быстрее перейти к уровню «эмоционально».
Попробовать подходить к сценариям с точки зрения не «сухого» или обыденного отыгрывание ситуаций (завершение сценария, ошибки, ожидание и др.).
Пройти самим путь или спросить знакомых об их опыте (опрос о том, как люди чувствуют себя в процессе взаимодействия с продуктом).
Глубже погрузиться в контекст человека и проявить эмпатии больше, чем в классической user story (добейтесь от себя, как от дизайнера, максимального уровня заботы о пользователе).
Направление №2: исследования
Изучение пользовательского поведения на основе аналитических данных может помочь выявить паттерны и тренды, связанные с эмоциональной реакцией. Например, анализ сеансов использования приложения или веб-сайта может показать, какие функции вызывают наибольший интерес или определённые эмоции у пользователей.
Запустить опросник «кайфовости или эмоциональности», или другой способ, чтобы измерить эмоциональный отклик от интерфейса (например, системы SUS и UMUX).
Анализ конкурентов — лидеров рынка (собрав эмоциональные бенчмарки в своей нише, можно наметить план улучшений).
Снизить когнитивную нагрузку, используя законы эксплуатации и базовые гештальт-законы (желательно опираясь на метод «элемент интерфейса + физиологические методы»).
Парные сравнения: «опросник» (который показывает не уровень сложности интерфейса, а уровень напряжения пользователя) + нейросеть-сканер эмоций.
Измерить не сами эмоции, а параметры, на которые эти эмоции повлияют (например, Customer Retention Rate, Churn Rate, Life Time Value и Daily Active Users).
Направление №3: технологии
Использование биометрических данных, таких как измерение частоты сердечных сокращений, изменения в электродермальной активности или анализ выражения лица, позволяет получить объективные показатели эмоциональной реакции пользователей. Эти данные могут быть собраны с помощью специализированного оборудования или программного обеспечения.
Технологичные методы:
Нейросеть-сканер эмоций. Камеры и микрофоны фиксируют поведение человека, а нейросети по 40 000 параметрам лица определяют шесть базовых эмоций: радость, грусть, злость, удивление, настороженность, страх, а также уровень когнитивной нагрузки.
Sense Machine, чтобы считывать эмоциональный отклик с лица респондентов.
Умные очки для отслеживания взгляда (Tobii Pro Glasses 3 или Tobii Pro Fusion). Очки помогают понять, как взгляд человека скользит по экрану, что привлекает внимание или заставляет отвлечься. В очки встроены камеры и инфракрасная подсветка глаз. Прибор следит за движением глаз и показывает, на чём человек останавливает взгляд.
Физиологический методы и биометрический анализ:
Электроэнцефалограмма, она же ЭЭГ (чтобы измерить импульсы в мозге).
Электрокардиограмма (чтобы измерить сердцебиение).
Дыхание (чтобы измерить амплитуду и скорость дыхания).
Вместо вывода
Эмоциональный дизайн является неотъемлемой частью продуктового процесса, а эмоции и в целом эмоциональная составляющая в дизайне играет важную роль в создании привлекательных и удобных продуктов и интерфейсов.
Последняя ступенька пирамиды, а именно эмоциональный дизайн, направлена на создание долгосрочной связи пользователя с брендом. Это то, что вовлекает и удерживает, заставляя вернуться в продукт и получить эмоцию ещё раз. Поэтому важно помнить, что мы, как дизайнеры, делаем не только продуктовый дизайн, нацеленный на укрепление ступеней «функционально» и «удобно» (с точки зрения логики, продуктового подхода, здравого смысла, консистентности, метрик и аналитики), но и дизайн, который любят, от которого испытывают эмоции, который помогает улучшить пользовательский опыт, увеличить лояльность, укрепляя связь между брендом и аудиторией.
Если было интересно, можно залететь к нам в коллективный Telegram-канал дизайнеров Домклик, там мы обмениваемся опытом, мыслями, крутыми подборками, идеями и так далее. ✌️
Комментарии (5)
CitizenOfDreams
17.05.2024 10:34+5Идеальный дизайн никаких эмоций не вызывает вообще, им просто пользуешься, не замечая. Но такой дизайн сейчас стал непозволительной роскошью. Банковское приложение просто обязано показывать котиков и человечков-хипстеров на самокатах, иначе дизайнера уволят. У телевизора должна быть блестящая рамка, иначе его не купят. В песне должно прозвучать знакомое "ааа-ууу-ааа" в первые пятнадцать секунд, иначе слушатель может переключить станцию.
gvrdvskii Автор
17.05.2024 10:34Все развивается в сторону упрощения и "попкорн-залипательных" паттернов. Это может не нравится, но так сейчас работает диджитал пространство. Был даже эксперимент, при котором на живом концерте, за выступающей группой на экране включили тик-ток ролики и люди реально начали смотреть больше на музыкантов, оторвавшись от своих телефонов. В современно мире, мозг начинает работать так, что если тебе не впрыскивают быстрые эндорфины, ты не запоминаешь/обращаешь внимание. Поэтому тут дело не в том, что "дизайнера уволят" (у дизайнера много работы помимо эмоционального дизайна), тут дело в современных реалиях и тенденциях, а как показывает практика, тот кто "забивает" на тенденции, тот остается, может и не за бортом, но точно в догоняющих.
Skipy
А не кажется ли вам, дорогие друзья, что вы сами себе противоречите в рекомендациях?
Тип №3: Эмоциональные. Самый заметный и любимый пользователями тип анимаций. Он развлекает и вызывает эмоциональный отклик.
Так как уровень эмоций — самый верхний (последняя ступенька в нашей пирамиде), то начинать идти в «эмоции» надо только тогда, когда ступеньки «функционально», «удобно» и «надёжно» закрыты как базовые потребности (и пользователи с этим согласны). Тогда следующим шагом в улучшении продукта являются эмоциональные аспекты.
И в качестве примера - анимация на тему "Кажется, произошла ошибка сервера".
Т.е. базовая потребность "надежно" вот ни разу не закрыта. А вы предлагаете пользователя развлечь. Да, эмоциональный отклик, безусловно, будет. Приблизительно такой: "Вы совсем охренели? У вас сервер лежит, а вы мне мультики показываете с бобром в коробке??? Лучше бы вместо этих потуг псведодизайна надежностью озаботились!"
И это, кстати, не предположение. Дизайн абсолютно узнаваемый, Сберовский. А от дизайна сберовских продуктов я ору постоянно. Он кошмарен. Причем именно тем, что у там пирамида перевернута - на первом месте эмоции, остальное вторично. Ничего не работает - и картинка для трехлеток, примитивная до ужаса. Типа этого бобра в коробке.
Нужные эмоции вызывает попадание в позитивные образы аудитории. И ТОЛЬКО тогда, когда закрыты остальные уровни. Вы сами об этом пишете, но забываете через пять секунд. Интернет-банк, вход, в течение 30 секунд анимация - примитивно нарисованный человек на самокате (аааа!), в развивающемся шарфе (аааааааа!) и со стаканом смузи (аааааааааааааааааа!), а потом сообщение - что-то пошло не так, мы это уже чиним. Дежурная фраза, посыл подальше. Буря эмоций!
И, да, единый стиль со Сбером - это корпоративненько. И перетягивает на вас весь негатив Сбера. Ав-то-ма-ти-чес-ки. В силу безошибочной узнаваемости этого стиля. Я сейчас зашел на сайт Домклика. Пять секунд - и, натурально, начинает трясти эмоционально. Не потому, что Домклик, с которым я никогда дела не имел. А потому что Сбер.
Подумайте об этом.
gvrdvskii Автор
Спасибо за такой развернутый комментарий, вижу что статью читали внимательно.
Хотелось бы выразить некоторое несогласие с вашими аргументами относительно противоречия между эмоциональными аспектами и базовыми потребностями пользователей. В контексте статьи, мы стремились подчеркнуть важность учета эмоционального отклика пользователей при создании продуктов и услуг, но это не означает игнорирования базовых потребностей. В примере с анимацией "Кажется, произошла ошибка сервера" мы старались продемонстрировать, как даже в ситуациях, когда базовые функциональные аспекты не работают должным образом, можно сохранить позитивное восприятие пользователя через эмоционально уместные реакции.
Ребятам из СБЕРа передам ваш комментарий относительно входа в их приложение и надеюсь в скором времени вас перестанет "потрясывать" :)
Skipy
Ну вот в этом случае, на мой взгляд, любая эмоциональная реакция - неуместна. Может это я такой неправильный, но последнее, что я хочу видеть в такой ситуации - это милую картинку. Мне гораздо важнее, что произошло и, главное, когда это будет исправлено. У меня "время" в ценностях на первом месте и, соответственно, его потеря воспринимается крайне негативно.
В свое время невозможность сделать перевод в течение 24 часов привела к закрытию всех карт, в том числе и зарплатной, и полному выводу всех депозитов. Мне там тоже в течение суток красивые картинки показывали со словами "обратитесь в отделение". Снял наличные, перевел через другой банк. В офис обратился - с заявлением о закрытии всех продуктов.