Эмоции в дизайне: как передать нужное настроение на сайте

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

Для меня это когда визуальные, звуковые, смысловые и тактильные элементы формируют атмосферу, которая усиливает суть продукта и делает опыт использования живым.

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

• сочные и яркие фотографии еды;
• аватарки Додошики, которые появляются на ТВ выдаче в рестаранах. При этом можно создать уникальный экран, когда заказ готов;
• смешные и местами абсурдные 3Д-иллюстрации;
• живые элементы иконок, которые дают подсказки гостю.

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

У меня также есть сайты, которые точно передают нужное настроение. Показываю ниже ⬇️

Любая типология настроений будет условной — слишком много нюансов. Но как точкуа входа можно выделить следующие:

• доверие и надёжность (банковские и медицинские сайты);
• радость и лёгкость (бренды для молодёжи и фуд-индустрия);
• спокойствие и минимализм (технологии и экопродукты);
• энергия и драйв (спорт и стартапы);
• роскошь и статус (премиум-продукты).

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

Норман — отличная теоретическая база, но мне неудобно применять её напрямую в работе. Это слишком абстрактно. В своих докладах я разбивал приёмы на три уровня по сложности:

• лёгкий (цвет, форма и шрифт);
• средний (геймификация и маскоты);
• сложный (архитектура и сильная связь с брендом).

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

Цвет, типографика, шрифт и стиль — это визуальные составляющие. Помимо этого есть большой пласт в опыте, когда мы производим впечатление. И там очень много инструментов — от геймификации до архитектуры приложения. Чем выше уровень сложности, тем больше влияние. Условно, архитектура приложения целиком влияет на впечатление сильнее, чем одна 3Д-картинка или конкретный цвет.
Это не значит, что визуальный слой не важен — он формирует первое впечатление. Просто одним цветом эмоциональную связь не построишь.

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

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

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

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

Вот частые ошибки при передаче эмоций в дизайне:

• использование только поверхностных слоёв: цвет, типографика, анимация;
• использование шаблонных решений;
• игнорирование характера бренда;
• несогласованность между визуалом и смыслом;
• слишком большое количество анимации, 3Д-элементов и визуальных эффектов, когда они не дополняют и не раскрывают смысл. Это шум, а не эмоция;
• наличие проблем на уровне UI и UX.

Чтобы выбрать нужную эмоцию, нужно максимально хорошо понимать:

1. Бизнес заказчика и причины, по которым он востребован. Или не востребован.
2. Аудиторию и ту жизненную ситуацию, в которой она взаимодействует с вашим дизайном. Ведь даже если это B2B продукт, то там тоже сидят живые люди.

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

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

Держите в голове контекст, в котором человек пользуется задизайненным вами продуктом. Может, он бежит к перрону, пытаясь успеть на поезд? На эмоции тут нет ни сил, ни времени. Сидит и скучает в ожидании доставки? Можно и развлечь.

Я сделал чек-лист для проверки. Если по всем пунктам отвечаете «да» — значит, эмоция в дизайне работает.

Первое впечатление:

• Вау-эффект с первого взгляда. Хочется остаться, кликнуть, исследовать дальше?
• Цвет работает на эмоцию. Палитра осознанно вызывает нужное состояние: тепло, доверие, энергию?
• Типографика передаёт характер. Шрифт не просто читается, а говорит голосом продукта?
• Форма считывается правильно. Округлость, острые углы, масштаб — всё работает на нужное ощущение?
• Есть визуальная фишка. Что-то своё: маскот, стиль иллюстраций или уникальная графика?

Взаимодействие:

• Интерфейс не требует объяснений. Пользователь действует интуитивно и без инструкций?
• Каждое действие получает ответ. Анимации, лоадеры и микрофидбек дают ощущение живого продукта?
• Всё плавно и отзывчиво. Интерфейс не зависает, не дёргается и реагирует мгновенно?
• Тон общения тёплый и не казённый. Тексты и подсказки говорят с человеком, а не с пользователем?

Память и связь:

• Продукт запоминается. Через год человек вспомнит, как он выглядел и ощущался?
• Есть момент радости. Достижение, юмор, неожиданная деталь, которая вызывает улыбку?
• Хочется рассказать другу. Есть элемент, которым хочется поделиться или похвастаться?
• Дизайн отражает ценности бренда. Честность, забота и смелость считываются без слов?