Ультимативное руководство по эмоциональному дизайну / Habr

В последнее время внутри дизайн-сообщества часто поднимается тема «эмоционального дизайна». Статей и материалов достаточно, и каждый затрагивает какой‑то определённый аспект этой темы. Я попытался собрать все знания, включая свои наработки, чтобы ответить на вопрос, а существуют ли критерии оценки эмоций от дизайна, и бывает ли дизайн эмоциональным в принципе.

Что такое эмоциональный дизайн

Это дизайн продукта, при котором все стороны этого продукта (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-канал дизайнеров Домклик, там мы обмениваемся опытом, мыслями, крутыми подборками, идеями и так далее. ✌️