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

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

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

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

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

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

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

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

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

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

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

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

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

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

Тип №1: Функциональные. Это анимации, которые повышают удобство использования продукта. Обычно незаметны, но без них пользователю станет тревожнее.

Тип №2: Структурные. Это анимации, которые сопровождают человека при переходе в новый раздел. Здесь мы делаем акцент на том, что платформа поменяла состояние, и просим человека обратить на это внимание. Часто элементы меняют свои размеры и саму структуру происходящего на экране.

Тип №3: Эмоциональные. Самый заметный и любимый пользователями тип анимаций. Он развлекает и вызывает эмоциональный отклик. Может быть ярким дополнением, которое мотивирует совершить полезное действие: перейти по ссылке, скачать, прослушать.

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

Чтобы понять, где в дизайне находится уровень эмоций (спойлер — он на самой верхушке), предлагаю взглянуть на две пирамиды:

Пирамида продуктового дизайна. Всего четыре уровня или ступени пирамиды (сверху вниз):

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

Пирамида коммуникационного дизайна. И тут также четыре уровня или ступени пирамиды:

Как вы уж поняли, и тут уровень эмоций — самый верхний (последняя ступенька в нашей пирамиде), и также как и в продуктовом дизайне это комплексная работа, и в эмоции стоит идти после того, как все нижние уровни закрыты.

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

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

Направление №1: дизайн

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

Направление №2: исследования

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

Направление №3: технологии

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

Технологичные методы:

Физиологический методы и биометрический анализ:

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

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

Если было интересно, можно залететь к нам в коллективный Telegram-канал дизайнеров Домклик, там мы обмениваемся опытом, мыслями, крутыми подборками, идеями и так далее. ✌️