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

Оглавление

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

Это дизайн продукта, при котором все стороны этого продукта (UI, UX, CX) вовлекают, развлекают, решают задачи и позволяют создать положительную связь с человеком, а в долгосрочной перспективе делают его (человека) лояльным пользователем (амбассадором бренда), который будет рекомендовать продукт просто потому, что ему правда понравилось.

Согласно концепции Дональда Нормана, взаимодействие с продуктом вызывает у людей эмоциональные реакции на трёх уровнях:

  1. Интуитивный. Этот уровень связан с автоматическими реакциями и первыми впечатлениями, которые невозможно повторить. Здесь важно не только создавать положительные эмоции, но и избегать возникновения отрицательных.

  2. Поведенческий. Этот уровень связан с удобством использования и основными аспектами дизайна интерфейсов. Пользователи желают чувствовать, что контролируют процесс и могут быстро получить результат. Они предпочтут продукт, который был удобным и приятным в использовании.

  3. Рефлексивный. На этом уровне люди анализируют свою историю использования продукта, обсуждают его с друзьями и принимают осознанные решения о его долгосрочном использовании. Здесь эмоциональный дизайн играет ключевую роль в построении долгосрочных отношений с пользователями.

Эмоциональная связь = добавочная стоимость в дополнение к стандартному продуктовому набору (jobs to be done). Это то, что вовлекает и удерживает, заставляя вернуться в продукт и получить эмоцию ещё раз и увеличить лояльность, укрепляя связь между брендом и аудиторией.

Влияния эмоций на пользовательский опыт и поведение

Обзор влияния эмоций на пользовательский опыт и поведение позволяет понять, как эмоции формируются в процессе взаимодействия с продуктом и какие реакции они вызывают у пользователей. Нейрофизиологические исследования подтверждают, что эмоции играют ключевую роль в принятии решений, в том числе и в процессе взаимодействия с интерфейсом продукта. Например, чувство удовлетворённости и доверия, вызванное позитивным пользовательским опытом, может стимулировать повторное использование продукта и рекомендации другим пользователям. С другой стороны, негативные эмоции, такие как раздражение или страх, могут привести к оттоку пользователей и негативному отзыву о продукте.

Цель эмоционального дизайна

В эмоциональном дизайне можно выделить три цели, три уровня, три плоскости, на которых можно работать.

  1. Дизайнерская цель: сделать дизайн человечнее, интерактивнее, отзывчивее, осязаемее, сенсорнее. Понять, как человек чувствует себя в процессе, в каком контексте находится, какие у него ощущения, эмоции и чувства, имеется ли когнитивная нагрузка и т. д.

    Цель: создание человекоцентричного, эмпатичного и интуитивно понятного опыта пользователя

  2. Продуктовая цель: создать продукт, который не только удовлетворяет функциональным потребностям пользователей, но и вызывает положительные эмоции, улучшая их общее восприятие и вовлечённость.

    Цель: интеграция положительных эмоций в пользовательский опыт, чтобы продукт стал неотъемлемой частью жизни человека, вызывал положительные эмоции и был таковым во всех точках контакта с человеком (CX).

  3. Маркетинговая цель: разработать маркетинговые стратегии, чтобы установить эмоциональную связь между брендом и потребителями. Задача заключается в том, чтобы через маркетинг создавать эмоциональные переживания, которые ассоциируются с брендом, укрепляя позитивное восприятие и привлекая внимание аудитории.

    Цель: создание эмоциональной связи между брендом и клиентами

Использование стилевых, композиционных и мультимедийных инструментов для передачи эмоций

Использование стиля и композиции для передачи определённых эмоций и ассоциаций — также одна из сторон, которую нельзя оставить без внимания, когда мы говорим о создании эмоционально насыщенного дизайна. Остановимся на нескольких важных приемов:

  1. Цветовая палитра. Цвета имеют сильное эмоциональное воздействие и могут вызывать разнообразные ассоциации и чувства у пользователей. Например, использование ярких и насыщенных цветов может вызывать чувство радости и энергии, поддерживая позитивный настрой, в то время как спокойные и нейтральные оттенки могут создавать ощущение умиротворённости и надёжности.

  2. Типографика. Шрифты также влияют на эмоциональный фон при считывании пользователем информации. Например, жирные и угловатые шрифты могут создавать впечатление силы и энергии, в то время как курсивные и изящные шрифты могут ассоциироваться с лёгкостью и элегантностью. Подбор подходящего шрифта позволяет дополнить эмоциональный контекст дизайна и усилить его воздействие на пользователя.

  3. Композиция. Расположение и взаимодействие элементов на экране также могут влиять на эмоциональное восприятие. Например, симметричные композиции могут создавать ощущение порядка и стабильности, в то время как нестандартные композиции могут вызывать интерес, чувство динамики и так далее.

  4. Иллюстрации и иконки. Такие визуальные элементы могут быть использованы для передачи определённых настроений и ассоциаций и являются одной из важнейших визуальных составляющих при взаимодействии пользователя и продукта.

  5. Фото, видео, аудио. Мультимедийный контент предоставляет более эмоционально насыщенный способ взаимодействия с аудиторией. Он помогает создавать атмосферу, отражающую ценности и характер бренда. Это более глубокий уровень взаимодействия, который позволяет передать сложные идеи и эмоции через движение, звук и визуальные эффекты, обогащая пользовательский опыт.

Использование стилевых, композиционных и мультимедийных инструментов для передачи эмоций и ассоциаций важно в синергии с брендбуком компании. Брендбук определяет основные элементы брендинга, такие как логотип, цветовая палитра, шрифты и общий стиль дизайна, которые должны быть согласованы с общими целями и ценностями компании.

Правильное использование стиля и композиции в соответствии с брендбуком позволяет не только усилить эмоциональное воздействие продукта на пользователя, но и обеспечить единый и узнаваемый визуальный облик компании на всех платформах и каналах коммуникации. Такая согласованность создаёт доверие у пользователей, помогает «привязать» его к бренду.

Значение анимации и микроинтеракций в эмоциональном дизайне

Анимация добавляет динамику и живость в интерфейс, делая его более привлекательным и привычным для пользователя. Она может быть использована для подчёркивания важности определённых элементов интерфейса, передачи изменений состояний или просто для создания игрового или развлекательного аспекта взаимодействия.

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

Выделяют три типа анимаций. В одном случае в центре удобство и функциональность, в других — эмоции и развлечение.

Тип №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)


  1. Skipy
    17.05.2024 10:34
    +1

    А не кажется ли вам, дорогие друзья, что вы сами себе противоречите в рекомендациях?

    1. Тип №3: Эмоциональные. Самый заметный и любимый пользователями тип анимаций. Он развлекает и вызывает эмоциональный отклик.

    2. Так как уровень эмоций — самый верхний (последняя ступенька в нашей пирамиде), то начинать идти в «эмоции» надо только тогда, когда ступеньки «функционально», «удобно» и «надёжно» закрыты как базовые потребности (и пользователи с этим согласны). Тогда следующим шагом в улучшении продукта являются эмоциональные аспекты.

    3. И в качестве примера - анимация на тему "Кажется, произошла ошибка сервера".

    Т.е. базовая потребность "надежно" вот ни разу не закрыта. А вы предлагаете пользователя развлечь. Да, эмоциональный отклик, безусловно, будет. Приблизительно такой: "Вы совсем охренели? У вас сервер лежит, а вы мне мультики показываете с бобром в коробке??? Лучше бы вместо этих потуг псведодизайна надежностью озаботились!"

    И это, кстати, не предположение. Дизайн абсолютно узнаваемый, Сберовский. А от дизайна сберовских продуктов я ору постоянно. Он кошмарен. Причем именно тем, что у там пирамида перевернута - на первом месте эмоции, остальное вторично. Ничего не работает - и картинка для трехлеток, примитивная до ужаса. Типа этого бобра в коробке.

    Нужные эмоции вызывает попадание в позитивные образы аудитории. И ТОЛЬКО тогда, когда закрыты остальные уровни. Вы сами об этом пишете, но забываете через пять секунд. Интернет-банк, вход, в течение 30 секунд анимация - примитивно нарисованный человек на самокате (аааа!), в развивающемся шарфе (аааааааа!) и со стаканом смузи (аааааааааааааааааа!), а потом сообщение - что-то пошло не так, мы это уже чиним. Дежурная фраза, посыл подальше. Буря эмоций!

    И, да, единый стиль со Сбером - это корпоративненько. И перетягивает на вас весь негатив Сбера. Ав-то-ма-ти-чес-ки. В силу безошибочной узнаваемости этого стиля. Я сейчас зашел на сайт Домклика. Пять секунд - и, натурально, начинает трясти эмоционально. Не потому, что Домклик, с которым я никогда дела не имел. А потому что Сбер.

    Подумайте об этом.


    1. gvrdvskii Автор
      17.05.2024 10:34

      Спасибо за такой развернутый комментарий, вижу что статью читали внимательно.

      Хотелось бы выразить некоторое несогласие с вашими аргументами относительно противоречия между эмоциональными аспектами и базовыми потребностями пользователей. В контексте статьи, мы стремились подчеркнуть важность учета эмоционального отклика пользователей при создании продуктов и услуг, но это не означает игнорирования базовых потребностей. В примере с анимацией "Кажется, произошла ошибка сервера" мы старались продемонстрировать, как даже в ситуациях, когда базовые функциональные аспекты не работают должным образом, можно сохранить позитивное восприятие пользователя через эмоционально уместные реакции.

      Ребятам из СБЕРа передам ваш комментарий относительно входа в их приложение и надеюсь в скором времени вас перестанет "потрясывать" :)


      1. Skipy
        17.05.2024 10:34
        +3

        В примере с анимацией "Кажется, произошла ошибка сервера" мы старались продемонстрировать, как даже в ситуациях, когда базовые функциональные аспекты не работают должным образом, можно сохранить позитивное восприятие пользователя через эмоционально уместные реакции

        Ну вот в этом случае, на мой взгляд, любая эмоциональная реакция - неуместна. Может это я такой неправильный, но последнее, что я хочу видеть в такой ситуации - это милую картинку. Мне гораздо важнее, что произошло и, главное, когда это будет исправлено. У меня "время" в ценностях на первом месте и, соответственно, его потеря воспринимается крайне негативно.

        В свое время невозможность сделать перевод в течение 24 часов привела к закрытию всех карт, в том числе и зарплатной, и полному выводу всех депозитов. Мне там тоже в течение суток красивые картинки показывали со словами "обратитесь в отделение". Снял наличные, перевел через другой банк. В офис обратился - с заявлением о закрытии всех продуктов.


  1. CitizenOfDreams
    17.05.2024 10:34
    +5

    Идеальный дизайн никаких эмоций не вызывает вообще, им просто пользуешься, не замечая. Но такой дизайн сейчас стал непозволительной роскошью. Банковское приложение просто обязано показывать котиков и человечков-хипстеров на самокатах, иначе дизайнера уволят. У телевизора должна быть блестящая рамка, иначе его не купят. В песне должно прозвучать знакомое "ааа-ууу-ааа" в первые пятнадцать секунд, иначе слушатель может переключить станцию.


    1. gvrdvskii Автор
      17.05.2024 10:34

      Все развивается в сторону упрощения и "попкорн-залипательных" паттернов. Это может не нравится, но так сейчас работает диджитал пространство. Был даже эксперимент, при котором на живом концерте, за выступающей группой на экране включили тик-ток ролики и люди реально начали смотреть больше на музыкантов, оторвавшись от своих телефонов. В современно мире, мозг начинает работать так, что если тебе не впрыскивают быстрые эндорфины, ты не запоминаешь/обращаешь внимание. Поэтому тут дело не в том, что "дизайнера уволят" (у дизайнера много работы помимо эмоционального дизайна), тут дело в современных реалиях и тенденциях, а как показывает практика, тот кто "забивает" на тенденции, тот остается, может и не за бортом, но точно в догоняющих.