Эмоциональный дизайн

Привязанность создаётся не функциями, а эмоциями. Микро-взаимодействия, персонализация и delight-моменты превращают пользователей в фанатов.

1. Эмоции создают память

   • Эмоциональные моменты запоминаются лучше функциональных
   • Пользователи помнят, как продукт заставил их чувствовать
   • Пример: анимация успеха в Duolingo запоминается больше, чем список функций

2. Эмоции драйвят лояльность

   • Эмоциональная привязанность сильнее рациональной оценки
   • Пользователи прощают ошибки продуктам, которые любят
   • Пример: фанаты Apple прощают баги, высокую цену

3. Эмоции драйвят виральность

   • Пользователи делятся тем, что вызвало эмоции
   • Радость, удивление, восторг мотивируют шеринг
   • Пример: конфетти при завершении задачи в Asana

1. Висцеральный (Visceral) — мгновенная реакция на внешний вид

   • Красивый интерфейс, приятные цвета, плавные анимации
   • Пример: элегантный лендинг Stripe

2. Поведенческий (Behavioral) — удовольствие от использования

   • Продукт работает гладко, предсказуемо, эффективно
   • Пример: мгновенный поиск в Google

3. Рефлексивный (Reflective) — осмысленная привязанность

   • Продукт соответствует ценностям, идентичности пользователя
   • Пример: использование Patagonia как выражение эко-ценностей

1. Обратная связь (Feedback)

   • Кнопка нажимается с анимацией
   • Успешное действие отмечается галочкой
   • Ошибка подсвечивается красным

2. Визуализация состояния (State Visualization)

   • Прогресс-бар загрузки
   • Индикатор «печатает...» в чате
   • Анимация обновления (pull-to-refresh)

3. Предотвращение ошибок (Error Prevention)

   • Подтверждение перед удалением
   • Предупреждение о незаполненных полях
   • Авто-сохранение черновика

4. Навигация и ориентация (Navigation)

   • Плавные переходы между экранами
   • Анимация открытия/закрытия меню
   • Breadcrumbs с анимацией

• Сердечко заполняется с анимацией
• Конфетти при первом лайке
• Тактильная отдача (вибрация) на мобильных

• Анимация отправки сообщения
• Реакции эмодзи с анимацией
• Индикатор «печатает...»

• Двойной тап для лайка с анимацией сердца
• Свайп для обновления ленты
• Плавная загрузка историй

1. Идентифицируйте ключевые точки

   • Где пользователь совершает важные действия?
   • Где нужна обратная связь?
   • Где возможна ошибка?

2. Добавьте анимацию

   • Плавные переходы (200-400ms)
   • Easing (ease-in, ease-out) для естественности
   • Соответствие бренду (игриво vs профессионально)

3. Тестируйте на уместность

   • Не переусердствуйте (анимация ради анимации)
   • Учитывайте контекст (деловой продукт vs развлечение)
   • Давайте возможность отключить (accessibility)

• Asana: конфетти при завершении всех задач проекта
• Duolingo: анимация при завершении урока
• LinkedIn: конфетти при заполнении профиля на 100%

• Google: «Do a barrel roll» вращает страницу
• Slack: /shrug добавляет жест плечами в сообщение
• Trello: кондуктор появляется на 404 странице

• Spotify: «Доброе утро, Александр! Ваш микс готов»
• Duolingo: «30 дней подряд! Вы невероятны!»
• Notion: «Ваш первый документ создан!»

• Галочка с анимацией при завершении
• Прогресс-бар, заполняющийся с эффектом
• Звуковые эффекты (опционально)

1. Найдите моменты завершения

   • Завершение задачи, проекта, курса
   • Достижение вехи (100 дней, 1000 слов)
   • Заполнение профиля, настройка

2. Добавьте неожиданность

   • Конфетти, анимация, звук
   • Персонализированное сообщение
   • Маленький подарок (бейдж, бонус)

3. Не переусердствуйте

   • Delight работает, когда редок
   • Повторяющиеся сюрпризы становятся ожидаемыми
   • Контекст важен (неуместно в серьёзных ситуациях)

1. Базовая (Basic)

   • Имя в приветствии
   • Аватар в профиле
   • Выбор языка, темы

2. Контекстная (Contextual)

   • Рекомендации на основе поведения
   • Персонализированная лента
   • Адаптивный интерфейс (роль, индустрия)

3. Прогнозная (Predictive)

   • Предсказание следующего действия
   • Авто-заполнение, умные подсказки
   • Адаптивные уведомления (тайминг, частота)

• Discover Weekly — персональный плейлист на основе истории
• Wrapped — годовая персонализированная статистика
• Daily Mix — миксы по жанрам и настроению

• Рекомендации фильмов на основе просмотров
• Персонализированные обложки (разные для разных пользователей)
• «Продолжить просмотр» с последнего места

• «Люди, которых вы можете знать» на основе контактов
• Персонализированная лента новостей
• Рекомендации вакансий по профилю

1. Собирайте данные этично

   • Явное согласие (GDPR, CCPA)
   • Прозрачность (какие данные, зачем)
   • Контроль у пользователя (настройки приватности)

2. Начните с простого

   • Имя, аватар, предпочтения
   • Ручные настройки (тема, язык, уведомления)
   • Постепенно добавляйте автоматическую персонализацию

3. Давайте контроль

   • Настройки персонализации
   • Возможность отключить
   • Прозрачность («Почему вы это видите?»)

1. Формальность

   • Официальный vs дружеский
   • «Вы» vs «ты»
   • Профессиональный vs разговорный

2. Эмоциональность

   • Нейтральный vs эмоциональный
   • Сухой vs игривый
   • Серьёзный vs с юмором

3. Сложность

   • Простой язык vs технический
   • Короткие предложения vs развёрнутые
   • Конкретный vs абстрактный

• Дружеский, с юмором
• «Hi there!», «You got this!»
• Игривые иллюстрации

• Простой, прямой, нейтральный
• Без жаргона, без эмоций
• Ясные инструкции

• Неформальный, дружеский
• Геймерский сленг
• Эмодзи, мемы

1. Определите ценности бренда

   • Что важно для продукта? (простота, надёжность, инновации)
   • Какой бренд «личность»? (друг, эксперт, помощник)

2. Поймите аудиторию

   • Кто пользователи? (возраст, индустрия, контекст)
   • Какой тон им комфортен?

3. Создайте гайдлайн

   • Документ с примерами «можно» vs «нельзя»
   • Словарь предпочтительных терминов
   • Примеры для разных ситуаций (ошибка, успех, онбординг)

Метрика	Что измеряет	Целевое значение
Emotional Response	% пользователей, отметивших положительные эмоции в опросе	> 70%
Delight Discovery Rate	% пользователей, заметивших delight-моменты	30-50%
Personalization Engagement	% пользователей, взаимодействующих с персонализированными элементами	40-60%
NPS (Net Promoter Score)	% промоутеров - % критиков	> 50
Brand Affinity	Лояльность к бренду (опрос)	Рост со временем

1. Микро-взаимодействия: Где можно добавить обратную связь, анимацию?
2. Delight-моменты: Какие моменты завершения достойны конфетти?
3. Персонализация: Какие данные можно использовать этично?
4. Голос: Какой у продукта голос? Последователен ли он?
5. Эмоциональный отклик: Какие эмоции вызывает продукт сейчас?

• Эмоции создают память, лояльность, виральность.
• Три уровня: висцеральный, поведенческий, рефлексивный.
• Микро-взаимодействия: обратная связь, визуализация, навигация.
• Delight-моменты: конфетти, пасхалки, персонализированные сообщения.
• Персонализация: базовая, контекстная, прогнозная.
• Голос и тон: формальность, эмоциональность, сложность.
• Измеряйте emotional response, delight discovery, NPS.