Эмоциональный дизайн часто сводят к ярким цветам и забавным иллюстрациям. На практике речь о другом: любое взаимодействие с сайтом вызывает у человека состояние, и это состояние либо помогает ему дойти до цели, либо мешает. Задача дизайна — управлять этим осознанно. Ниже разбираем, какие чувства имеет смысл вызывать, какими средствами это делается и что чаще всего разрушает эффект.
Три уровня восприятия
Удобно различать три слоя. Первый — мгновенная реакция на внешний вид: аккуратно или неряшливо, дорого или дёшево, свой или чужой. Она формируется за доли секунды, до чтения текста. Второй — впечатление от использования: получилось или не получилось, понятно или пришлось гадать. Третий — то, что остаётся в памяти: стоит ли возвращаться и рекомендовать.
Ошибка большинства проектов в том, что усилия тратятся на первый слой. Красивая обложка при неудобной корзине даёт разочарование сильнее, чем скромный дизайн с понятной механикой: обещание не совпало с опытом.
Какие эмоции полезны сайту
- Доверие. Базовая эмоция для коммерческого сайта. Строится на конкретике: реальные фотографии, полные реквизиты, честные условия, отсутствие сюрпризов на последнем шаге.
- Уверенность. Человек понимает, что происходит и что будет дальше. Никаких скрытых шагов и внезапных требований.
- Спокойствие. Ошибку можно исправить, действие отменить, данные не потеряются. Это снижает страх нажать не туда.
- Интерес. Уместен на первых экранах и в подаче продукта, но не должен мешать основному действию.
- Удовлетворение от результата. Короткое подтверждение, что всё получилось, и понятный следующий шаг.
Чувство срочности и тревоги мы почти не используем: таймеры и надписи о заканчивающихся местах дают короткий эффект и портят отношения с теми, кто раскусил приём.
Чем эмоции создаются
| Средство | Что передаёт | Типичная ошибка |
|---|---|---|
| Цвет | Настроение, акценты, статусы | Пять акцентных цветов сразу, ни один не работает |
| Типографика | Характер, серьёзность, ритм чтения | Мелкий текст и низкий контраст |
| Фотографии | Достоверность и близость | Стоковые снимки, не связанные с бизнесом |
| Иллюстрации | Тон общения, объяснение сложного | Декор ради декора, тяжёлые файлы |
| Тексты интерфейса | Отношение к человеку | Канцелярит и обвиняющие формулировки ошибок |
| Движение | Обратная связь, живость | Анимация, задерживающая действие |
| Свободное место | Спокойствие и порядок | Плотная сетка без воздуха |
Цвет: меньше символики, больше системы
Про цвета много пишут в духе «синий означает надёжность». Практической пользы в этом мало: восприятие зависит от культуры, контекста и от того, что делают конкуренты. Полезнее относиться к цвету как к системе. Один акцент на основное действие, нейтральная база, отдельные цвета под статусы: успех, предупреждение, ошибка. Если акцентный цвет использован в декоре, кнопка перестаёт выделяться.
Обязательная проверка — контраст. Светло-серый текст на белом выглядит воздушно на макете и не читается на телефоне под солнцем. Заодно проверяем, не передаётся ли смысл только цветом: людям с нарушением цветовосприятия нужна дублирующая подпись или значок.
Тексты решают больше, чем кажется
Формулировки в интерфейсе делают для эмоционального фона больше, чем иллюстрации. Сообщение «Вы ввели неверные данные» перекладывает вину на человека; «Не нашли такой номер заказа, проверьте цифры или напишите нам» помогает исправить ситуацию. Кнопка «Отправить» ничего не обещает, кнопка «Получить расчёт» объясняет, что произойдёт.
- В подтверждениях говорим, что сделано и что дальше, а не просто «спасибо».
- В ошибках даём путь исправления, а не констатацию.
- В пустых состояниях объясняем, как заполнить, а не показываем пустоту.
- В ожидании сообщаем, сколько примерно ждать, если это известно.
Мелочи, которые дают тепло
Небольшие детали работают, когда основная механика уже надёжна: приятное подтверждение после отправки формы, аккуратная иллюстрация на странице без результатов поиска, дружелюбная страница ошибки со ссылками на разделы, короткое движение при добавлении товара. Важное условие: такие детали не должны увеличивать время выполнения задачи и не должны повторяться слишком часто. Шутка, которую человек видит в двадцатый раз, перестаёт быть шуткой.
Что разрушает нужные эмоции
- Всплывающее окно в первые секунды визита, до того как человек понял, куда попал.
- Цена, которая появляется только на последнем шаге оформления.
- Форма с полями, назначение которых непонятно, и без объяснения, зачем они нужны.
- Медленная загрузка и прыгающая вёрстка: страница дёргается, и человек попадает не по той кнопке.
- Заблокированная кнопка отправки без указания, что именно не заполнено.
- Отсутствие контактов и адреса: доверие падает вне зависимости от качества оформления.
Как мы проверяем результат
Эмоции трудно измерить напрямую, но косвенные признаки есть. Мы смотрим, где люди останавливаются в сценарии, где возвращаются назад, какие поля формы чаще всего заполняются с ошибкой, о чём спрашивают в поддержке после посещения конкретной страницы. Отдельно проводим короткие наблюдения: человек проходит сценарий и проговаривает мысли вслух. Фразы вроде «а это точно бесплатно?» или «непонятно, что будет после нажатия» прямо указывают на эмоциональные разрывы.
Полезная привычка — разбирать обращения в поддержку как источник дизайна. Каждый повторяющийся вопрос означает, что интерфейс не ответил на него сам.
Разные аудитории — разный тон
Одно и то же оформление вызывает разные чувства у разных людей. Для корпоративного заказчика аккуратная сдержанность читается как надёжность, для аудитории детского центра та же сдержанность выглядит холодно. Поэтому эмоциональный тон мы задаём не по вкусу, а по портрету аудитории и по тому, в каком состоянии человек приходит на сайт.
Состояние важно не меньше портрета. Человек, который ищет срочный ремонт, находится в стрессе: ему нужны телефон, цена и срок, а не сторителлинг. Человек, который выбирает подрядчика на длинный проект, наоборот, готов читать и хочет увидеть команду, процесс и примеры работ. Один сайт может обслуживать оба состояния, но экраны под них должны быть разные.
С чего начать на своём сайте
Порядок действий обычно такой: сначала убрать раздражители, потом выстроить понятность, и только потом добавлять приятные детали. Обратный порядок не работает: анимации и иллюстрации не компенсируют скрытую цену или неработающую форму.
Персонажи, звук и характер бренда
Кроме цвета, текстов и движения у эмоционального дизайна есть ещё несколько средств. Пользоваться ими стоит по тому же правилу, что и мелочами: когда основная механика уже работает.
- Персонажи и маскоты. Очеловеченный объект придаёт продукту характер и делает общение теплее. Уместен на пустых состояниях, в подсказках, на странице ошибки; неуместен там, где человек решает серьёзную задачу — оплачивает заказ или заполняет документы.
- Микровзаимодействия. Переключатель и кнопка, которые приятно отзываются на нажатие, дают маленькое удовольствие от самого действия. Условие то же, что для любой анимации: она не задерживает работу.
- Звук. Ещё один слой обратной связи: удачный звук клика или подтверждения повышает удовольствие от использования, особенно в приложениях и играх. На сайтах звук применяют реже, и он не должен включаться для человека неожиданно.
- Характер в деталях бренда. Пример — праздничные логотипы Google (Doodle): они отражают события и праздники и делают бренд ближе. Приём работает, потому что меняется деталь, а навигация и привычный интерфейс остаются на месте.
Начинать стоит не с выбора приёма, а с вопроса, какое чувство нужно вашей аудитории: спокойствие в приложении для медитации и азарт в гоночной игре требуют противоположных решений. Эмоциональный тон подбирается под задачу и состояние человека, а не под то, что понравилось в чужом продукте.
Если нужен сайт, которому доверяют
Мы проектируем и делаем сайты, где оформление работает на понятность и доверие, а не только на первое впечатление. Если ваш сайт перестал вызывать нужную реакцию или морально устарел, разработаем сайт под ваши задачи. Напишите нам, посмотрим текущую версию и предложим план.
