Несколько месяцев назад мы рассматривали прототип для некоммерческой организации, сосредоточенной на детской грамотности. Макет был чистым, информационная архитектура имела смысл, а призывы к действию были заметными. Но чего-то не хватало. Сайт казался функциональным, не будучи трогательным. Он сообщал факты о влиянии организации, не создавая эмоционального притяжения к пожертвованию или волонтёрству. Мы провели следующий спринт, сосредоточившись целиком на эмоциональном дизайне - слое мастерства, который трансформирует компетентный веб-сайт в тот, который действительно побуждает людей действовать.
Почему эмоции важны в дизайне
Нейронаучные исследования установили, что эмоции не отделены от принятия решений - они центральны для него. Работа Антонио Дамазио с пациентами с повреждениями областей мозга, обрабатывающих эмоции, показала, что без эмоционального вклада люди испытывают трудности с принятием даже простых решений. Каждое взаимодействие, которое пользователь имеет с веб-сайтом, производит эмоциональную реакцию, независимо от того, намеревался ли дизайнер это или нет. Вопрос в том, поддерживает ли эта реакция цели сайта или подрывает их.
Три уровня эмоционального дизайна Дона Нормана - висцеральный, поведенческий и рефлексивный - предоставляют полезную структуру. Висцеральный уровень - это немедленная интуитивная реакция: выглядит ли это привлекательно? Поведенческий уровень касается юзабилити: работает ли это гладко и предсказуемо? Рефлексивный уровень касается значения: соответствует ли это моим ценностям и идентичности? Эффективный эмоциональный дизайн обращается ко всем трём уровням, хотя акцент варьируется в зависимости от контекста.
Для некоммерческой организации по грамотности мы сосредоточились в основном на рефлексивном уровне. Сайту нужно было связать посетителей со значением работы организации - отдельными детьми, чьи жизни менялись. Мы представили реальные истории с реальными фотографиями (с разрешения), заменяя общие стоковые изображения, которые заполняли исходный дизайн. Сдвиг был немедленным и измеримым во вовлечённости пользователей со страницами пожертвований.
Цвет: мгновенный установщик настроения
Цвет - это самый быстрый канал эмоциональной коммуникации. Прежде чем пользователь прочитает хоть одно слово, цветовая палитра уже установила настроение. Тёплые тона предполагают энергию, страсть и срочность. Прохладные тона передают спокойствие, профессионализм и доверие. Земляные тона вызывают естественность и стабильность. Эти ассоциации не произвольны - они укоренены в культурном обусловливании и, в некоторой степени, биологии.
Вызов - применять цвет с намеренностью, а не предпочтением. Мы работали с платформой ментального здоровья, которая изначально использовала яркий, весёлый оранжевый в качестве основного цвета, потому что основатели хотели, чтобы бренд казался оптимистичным. Но исследование пользователей показало, что посетители, прибывающие в моменты бедствия, находили яркость подавляющей. Мы перешли на приглушённую бирюзовую палитру - всё ещё достаточно тёплую, чтобы казаться гостеприимной, но достаточно спокойную, чтобы казаться безопасной. Одно только изменение цвета увеличило среднюю длительность сеанса на их страницах ресурсов.
Контекст имеет огромное значение. Тот же красный, который сообщает о срочности на новостном сайте, сообщает об опасности на медицинском сайте. Мы всегда тестируем выбор цвета в конкретном эмоциональном контексте продукта, а не изолированно на доске настроения.
Слова, которые говорят о многом
Копирайтинг - это дизайнерский материал. Слова на странице формируют эмоциональный опыт так же мощно, как любой визуальный элемент. Микрокопирайт - маленькие фрагменты текста в кнопках, меток полей форм, сообщений об ошибках и экранах подтверждения - особенно мощен, потому что он появляется в моменты взаимодействия, когда пользователи наиболее внимательны.
Сравните «Ошибка: Неверный ввод» с «Это выглядит не совсем правильно - не могли бы вы проверить адрес электронной почты?» Оба сообщают одну и ту же информацию, но вторая версия человечна, полезна и не осуждает. Она трансформирует момент разочарования в момент помощи. Мы пишем микрокопирайт так, как будто сидим рядом с пользователем, помогая ему в процессе.
Заголовки и призывы к действию выигрывают от эмоциональной специфичности. «Зарегистрироваться» - это функционально. «Начните бесплатную пробную версию» добавляет ценность. «Присоединяйтесь к 2,000 команд, которые уже работают умнее» добавляет социальное доказательство и принадлежность. Каждая итерация добавляет эмоциональный слой, который делает действие более убедительным без прибегания к манипуляции или ложной срочности.
Микровзаимодействия: маленькие, но мощные помощники
Эмоциональный дизайн часто живёт в моментах настолько кратких, что пользователи не регистрируют их сознательно. Анимация сердца, когда пользователь сохраняет избранный элемент. Взрыв конфетти после завершения длительного процесса регистрации. Лёгкий отскок, когда прибывает новое сообщение. Эти микровзаимодействия создают эмоциональную пунктуацию - маленькие награды и признания, которые делают опыт отзывчивым и человечным.
Для платформы продажи билетов на мероприятия мы добавили тонкую анимацию на экран подтверждения: билет появлялся «печататься» с верхней части экрана с лёгким эффектом сгибания бумаги. Это было чисто декоративно - билет был цифровым PDF, - но это придало покупке чувство осязаемости и церемониальности, о которой пользователи положительно комментировали в опросах обратной связи. Момент траты денег стал моментом волнения о предстоящем мероприятии.
Сдержанность необходима. Эмоциональные микровзаимодействия должны усиливать естественные эмоциональные пики, а не создавать искусственные. Анимация успеха после покупки кажется праздничной. Анимация успеха после обновления ваших предпочтений электронной почты кажется театральной. Соотнесите эмоциональный вес взаимодействия с эмоциональным весом момента.
Будьте честны с обратной связью
Доверие - это эмоциональное состояние, и ничто не разрушает его быстрее, чем нечестность. Тёмные паттерны - таймеры обратного отсчёта, которые сбрасываются, фейковые индикаторы дефицита, замаскированные рекламные объявления - могут произвести краткосрочные конверсии, но они повреждают эмоциональные отношения между пользователями и брендами способами, которые трудно восстановить.
Честная обратная связь строит эмоциональное доверие. Когда что-то идёт не так, признайте это чётко и предложите путь вперёд. Когда процесс занимает время, показывайте реальный прогресс, а не неопределённые спиннеры. Когда собираются данные, объясните, почему и как они будут использованы. Прозрачность может казаться рискованной, но она создаёт вид доверия, который превращает первых посетителей в долгосрочных сторонников.
Мы разработали страницу ошибки для сайта электронной коммерции клиента, которая включала краткое, честное объяснение того, что вероятно пошло не так, прямую ссылку на службу поддержки клиентов и код скидки 10% в качестве извинения. Эта страница ошибки генерировала больше положительных взаимодействий со службой поддержки, чем любая маркетинговая кампания, которую проводил клиент. Эмоциональный дизайн - это не о предотвращении негативных моментов, это о реагировании на них с эмпатией.
Финальный штрих: последовательность
Эмоциональный дизайн разваливается без последовательности. Если главная страница кажется тёплой и приглашающей, но процесс оформления заказа кажется холодным и транзакционным, пользователи испытывают эмоциональный хлыстовой удар. Тональный сдвиг подрывает доверие и связь, которые установили более ранние страницы.
Последовательность применяется к каждому эмоциональному каналу: использованию цвета, типографике, стилю иллюстраций, поведению анимации, тону копирайтинга и даже ритму обратной связи взаимодействия. Мы создаём эмоциональные руководящие принципы как часть наших дизайн-систем - документированные принципы, которые определяют не только то, как интерфейс выглядит, но и то, как он должен ощущаться на каждом этапе пути пользователя.
В Kosmoweb мы верим, что лучшие веб-сайты делают больше, чем информируют и конвертируют. Они заставляют людей что-то чувствовать - уверенность, волнение, доверие, принадлежность или восторг. Эмоциональный дизайн - это дисциплина, которая делает это возможным, и она заслуживает такой же строгости и внимания, как макет, производительность и доступность. Когда веб-сайт соединяется с пользователями на эмоциональном уровне, каждая другая метрика следует.