Эмоциональный веб-дизайн

Уолтер Аарон

4. Эмоциональное взаимодействие

 

 

Итак, индивидуальность – отличный способ взаимодействия с аудиторией. Она дает пользователям понять, кто вы, формирует эстетику и интерактивный дизайн сайта.

«Дизайн-образ» из третьей главы – это общая схема для создания эмоционального дизайна. Сейчас по этой схеме, я буду выстраивать структуру взаимодействия, в основе которой лежат психологические принципы, призванные создать у вашей аудитории длительные положительные воспоминания.

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

 

Удивление и радость

 

Замечали ли вы, что, когда на радио вдруг начинает играть ваша любимая песня, вы испытываете бо́льшую радость, чем если бы включили ее сами? Удивление усиливает эмоциональный отклик. Когда вы предвкушаете что-либо, ваши эмоции распределены во времени. Удивление сжимает эмоции до одного мгновения, делая реакцию более интенсивной и оставляя отпечаток в памяти.

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

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

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

Photojojo удалось добиться когнитивного кунг-фу удивления и закрепить свой коммерческий успех.

 

Photojojo: атака услужливых кукол

Photojojo () – сайт, который стремится сделать цифровую фотографию более веселой. Его разработчикам удалось добавить в копилку покупательских впечатлений удивление. С развитием Сети дизайн интернет-магазинов становился все более типовым и однообразным – это облегчало пользователям процесс покупки товаров. Делая сюрпризы покупателям, Photojojo полностью изменяет эмоциональную сторону этого процесса – теперь все хотят продолжать шопинг.

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

Рис. 4.1. Корзина Photojojo грустит, пока покупатель не добавит в нее товар, после этого она начинает улыбаться

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

Подобные сюрпризы подстерегают клиентов и на других страницах. Например, между корзиной и изображением товара находится таинственный рычаг. Он отгоняет любопытных пользователей табличкой «Не тянуть». Согласитесь, довольно необычно видеть на веб-странице что-то, что нельзя трогать. Только самые дисциплинированные покупатели могут противостоять соблазну. Тех же, кто все-таки потянет за рычаг, ждет весьма необычное переживание: на странице появится оранжевая рука и сдвинет ее на описание продукта, которое находится в другом окне (рис. 4.2).

Рис. 4.2. Оранжевая рука тянет страницу на себя после того, как вы дернете рычаг с табличкой «Не тянуть»

Будь это обычная ссылка на описание продукта, пользователи могли бы ее и пропустить, но загадочный рычаг работает с реверсивной психологией, и в результате описание читают большее число пользователей. Если верить Амиту Гупте, создателю Photojojo, это значительно увеличивает конверсию. Гениально!

Сюрпризы делают сайт интересным и заставляют клиентов возвращаться снова и снова. Гупта рассказывает, как эмоциональный дизайн расширил аудиторию и повлиял на успех сайта:

Эмоциональный дизайн – часть нашей маркетинговой стратегии. Люди рассказывают друзьям о пузырьке, скачущем по странице, если добавить что-то в корзину. Они рассказывают фолловерам [20] и читателям своего блога о рычаге с табличкой «Не тянуть», о том, как им нравятся сэндвич и динозавр на страничке с контактами, когда они пишут нам письма, и вдобавок они фотографируют счет и размещают его фотографию на Flickr. Все это вместе (включая прекрасные товары и отличный сервис) обеспечивает популярность компании, привлекает новых поклонников, клиентов и друзей.

С Photojojo приятный сюрприз поджидает покупателей на каждом углу, и они постоянно ищут следующий. Чем больше Photojojo стимулирует покупателей переходить со страницы на страницу, тем больше товаров они видят, что влияет на рост продаж. Ядро успеха Photojojo – удивление и радость.

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

 

Wufoo: удивительно личное сообщение

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

Рис. 4.3. Создатели Wufoo от руки пишут письма пользователям

Письма делают бренд Wufoo человечным. Удивление запускает у клиентов эмоциональную реакцию, они чувствуют себя особенными. Это ощущение вызывает только одно желание: немедленно рассказать об этом всем, кто способен слышать. Рассылка писем не была маркетинговой задумкой, но теперь подобные послания постоянно вывешивают в Twitter, Facebook и на Flickr. Внимание, которое Wufoo уделяет людям, производит впечатление на их друзей, и те с гораздо большей вероятностью станут клиентами этой компании.

Очевидно, что решение развивать бизнес, удивляя людей проявлением заботы и внимания, было абсолютно правильным. Более того, вскоре в Wufoo обнаружили, что, производя положительные впечатления, не нужно нести маркетинговые расходы. (Да, вы все поняли правильно: они убрали эту статью расходов из бюджета.) Их маркетингом занимается сама аудитория.

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

 

Предвкушение, эксклюзивность и статус

 

Удивление сжимает эмоции пользователя до одного мгновения, делая его реакцию более интенсивной, а предвкушение (антипод удивления) может создать особую эмоциональную связь. Предвкушение возникает тогда, когда мы объявляем о грядущем событии и даем аудитории время над ним подумать. Родители пробуждают воображение детей в канун Рождества, рассказывая, что скоро Санта придет к ним домой, а дети предвкушают праздничное волшебство и подарки.

Дизайнеры видеоигр называют предвкушение «открытой системой». Игры с открытой системой (например, The Sims) позволяют пользователям играть по своим правилам. Открытые системы побуждают людей задействовать воображение. Игры с закрытой системой, вроде Super Mario Brothers, сильно сужают игровое пространство, заставляя пользователя двигаться к определенной цели в заданном направлении. Сравнивать открытую и закрытую системы – все равно что выяснять, чем книга отличается от фильма. Книги требуют нашего воображения, а в фильмах все уже придумано за нас.

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

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

 

Новый Twitter

В начале 2010 года ребята из Twitter работали над проектом масштабного редизайна под скромным названием «Новый Twitter». Над концепцией вместе с командой работал и креативный директор Twitter Дуг Бауман, который тщательно изучал малейшие визуальные детали и схемы взаимодействия. Программист Марк Траммел проводил тесты на удобство и простоту использования интерфейса. Видео тестирования транслировалось в дизайн-студию, чтобы Бауман и команда могли сразу исправлять недочеты.

Ставки были очень высоки: Twitter стал частью повседневной жизни для сотен миллионов пользователей. Перед дизайнерами стояла сложнейшая задача – не потерять постоянных пользователей, которые изучили сервис вдоль и поперек и мимо внимания которых не прошло бы ни одно, даже самое незначительное изменение. Слухи о проекте редизайна пошли, когда Бауман опубликовал его частичный скриншот в Dribbble () – социальной сети, где дизайнеры могут размещать части своих работ в маленьком разрешении 300 × 400 пикселей (рис. 4.4). Ограничения Dribbble позволили Бауману, как он выразился, поделиться фрагментом «не сдавая контору». К тому же осталось достаточно простора для фантазий, что находится за пределами скриншота.

Рис. 4.4. Дуг Бауман опубликовал частичный скриншот редизайна Twitter на Dribbble в апреле 2010 года, чем спровоцировал массу слухов и обсуждений

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

Первые пользователи Нового Twitter (рис. 4.5) хвастались фолловерам, что выиграли в twitter-лотерее, и отсылали сообщения с хэштегом #NewTwitter. Это позволяло с легкостью отслеживать обсуждение редизайна. Несмотря на то что постепенный запуск прежде всего преследовал цель избежать возможных негативных последствий и обеспечить пользователям плавный переход на новый интерфейс, ограниченный доступ вызвал у первых пользователей ощущение принадлежности к избранному кругу, что, разумеется, не оставило их равнодушными. Поделившись своими чувствами в твитах, они получали ответы от все еще находившихся в ожидании фолловеров, что позволило им закрепить свой уникальный статус.

Рис. 4.5. Результат редизайна Twitter 2010 года

Предвкушение, эксклюзивность и повышение статуса сформировали пользовательское восприятие редизайна Twitter.

Конечно, нашлись и активные критики, но в целом впечатление было таково: Новый Twitter лучше своего предшественника (рис. 4.6). Пользователи приходили к Новому Twitter в хорошем настроении и получали удовольствие от нового дизайна и функциональных улучшений. Твиты первых пользователей позволяли остальным влюбиться в новый дизайн еще до того, как они его увидели.

Рис. 4.6. Пример, иллюстрирующий положительные эмоции фолловеров при запуске Нового Twitter

 

Говорить «вы можете» вместо «вы должны»

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

Главный конкурент Twitter Facebook не так успешно внедрял новшества, так как заставлял людей меняться по расписанию. Когда ты торопишься и заходишь на сайт, чтобы быстро поговорить с другом, неожиданно измененный интерфейс заставляет чувствовать себя обманутым. Предоставив пользователям возможность пройти по ссылке и вернуться к привычному интерфейсу, Twitter позволил им думать, будто они контролируют ситуацию. Это открытая система, подход к нестандартной ситуации, который готовит людей к переменам.

Скоро вы увидите: начав формировать настроение пользователей заранее, то есть до того, как приступать к решению задач, вы можете здорово улучшить впечатление потребителей от вашего продукта.

 

Эффект предшествования

 

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

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

Публикуя скриншот на Dribbble, Новый Twitter использовал предвкушение и заинтересованность аудитории, что и обеспечило ему положительные отклики после того, как обновленный дизайн был запущен. Ограниченный доступ заставил первых пользователей чувствовать себя особенными и определил их отношение к новому интерфейсу. Результатом стал поток твитов, сформировавших восприятие тех, кто еще не получил доступа к услуге. Разве это не цепочка последовательных событий, которые привели к блистательному успеху?

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

 

MailChimp: случайный эффект предшествования

Насколько силен эффект предшествования, я осознал, будучи ведущим дизайнером в MailChimp. В 2008 году мы запустили масштабный редизайн, перестроив бо́льшую часть приложения. Развеселый бренд (как вы, возможно, знаете, на нашем логотипе изображена обезьяна) и беспрецедентная свобода дизайна не мешали нам тестировать стратегии эмоционального дизайна.

Мы начали с бросающегося в глаза, но ненавязчивого элемента – говорящего шимпанзе на некоторых страницах. Этот персонаж, известный под именем Фредди фон Чимпенхаймер IV, выглядывает из-за заголовка страницы и выдает забавное приветствие, иногда ссылаясь на смешное видео с YouTube (рис. 4.7). Из истории дизайна мы знали, что говорящее лицо бренда может стать проблемой, и сразу установили для Фредди ряд правил.

Рис. 4.7. Фредди фон Чимпенхаймер IV шутливо приветствует пользователей, делая рутинную отправку электронных писем чуть более приятной

Помните Скрепку, мультяшного ассистента в Microsoft Office с 1997-го по 2003-й? Пользователи вылили на него потоки негативных эмоций, потому что время его появления не было рассчитано. Когда вы писали письмо, Скрепка выскакивала на экран и спрашивала: «Пишете письмо? Вам нужна помощь?» Обычно люди отвечали: «Уберись отсюда, ты, заноза в заднице». (Это цензурная версия.) Мешать пользователю работать – очень плохая идея.

Скрепка была нашим антиобразцом. Мы хотели создать абсолютную противоположность помощнику из Microsoft Office. Нам не нужно было, чтобы Фредди занимался обратной связью, сообщал статистику или говорил, что что-то пошло не так. Он появлялся не для того, чтобы помогать. Его роль – развлекать пользователя во время работы, при этом не мешая ему.

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

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

Когда новая версия приложения была запущена, мы обнаружили, что Фредди производит довольно интересное впечатление на пользователей. Сначала появились твиты (рис. 4.8) о том, как приветствия украшают рабочий день.

Рис. 4.8. Пользователи MailChimp не замедлили поделиться реакцией на шуточки Фредди в Twitter

Но больше всего нас удивило то, что шуточки Фредди помогали пользователям справляться со сложными задачами (рис. 4.9).

Рис. 4.9. Юмор Фредди удивительным образом повлиял на скорость решения задач

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

Когда человек регулярно получает награду в виде забавных сообщений, в нем просыпается любопытство: «Каким же будет следующее? Вдруг очень крутым? Он должен посмотреть!»

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

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

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

Рис. 4.10. Комментарий Фредди о новой прическе не всегда уместен, зато, когда он попадает в точку, это действительно впечатляет

Конечно, мы не могли знать, в какой момент то или иное сообщение будет наиболее уместным. Но пользователи (скажем, Кейт, которой адресовывалось послание о прическе) не задумывались об уместности. Приветствие настолько точно подходило к реальной жизни Кейт, что ей казалось, будто с ней разговаривает живой человек. В этот момент приложение переставало быть просто бездушным кодом и превращалось в живое существо. Для Кейт это становилось настоящим человеческим общением.

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

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

Мы осознали, насколько эффект предшествования работает, когда увидели, как изменился тон людей, обращавшихся в службу поддержки. Люди адресовали сообщения своему «внутреннему Фредди», шутили и каламбурили про бананы. Они считали: «MailChimp смешной, и я должен быть смешным, когда разговариваю с MailChimp». Разумеется, служба поддержки предпочитает работать с клиентами, которые пребывают в хорошем настроении, а не с ворчунами, только и ищущими, на ком бы выместить свое недовольство.

 

Нет никакой формулы

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

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

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

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