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

Рис. 7.2. Охота на пасхальные яйца началась с твита вице-президента Джея Корнелиуса

Вскоре новость распространилась в Twitter и Facebook, и посещаемость сайта резко пошла вверх: в первые три дня она выросла в три раза. Если до начала охоты посетитель CoffeeCup просматривал в среднем пять страниц, то после ее начала эта цифра выросла до тридцати. Люди сидели на сайте часами, пытаясь найти выигрышное яйцо. Одна из посетительниц на странице компании в Facebook призналась, что разыскивала яйцо пять часов и в конце концов купила себе одну из программ:

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

А вот как описал свою реакцию пользователь форума CoffeeCup (http://bkaprt.com/de/12):

Не могу остановиться. Пошел третий день. Стыжусь, сколько потратил времени. К тому же я кликал на все яйца, которые видел с самого начала (10:15, понедельник) – и оказалось, что каждое из них уже кто-то нашел до меня!

Разве кто-нибудь раньше мог сказать, что посетитель провел на его сайте три дня? Форумы CoffeeCup переполняли сообщения о промоакции. За время ее проведения их было написано более 3700, а просмотрели их более 55 тысяч раз!

Охота на яйца получила широкий резонанс в социальных сетях. Число поклонников страницы CoffeeCup на Facebook возросло на 217 %, а количество фолловеров в Twitter – на 170 %.

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

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

Это утверждение справедливо и для компании Blue Sky Resumes, сделавшей ставку на эмоциональный дизайн и сорвавшей большой куш.

Игра по-крупному: редизайн Blue Sky Resumes

Если вы создаете новый сайт и готовы к значительным переменам, то можете объединить бренд, дизайн и основной посыл в стратегию эмоционального дизайна. Blue Sky Resumes (http://blueskyresumes.com) – сервис, помогающий людям создавать отличные резюме, – сделал именно это. Сайт обрел новый облик в 2010 году благодаря усилиям дизайн-агентства из Южной Каролины Squared Eye (http://squaredeye.com) во главе с Мэтью Смитом.

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

После общего ребрендинга компании силами агентства Able Design (http://designedbyable.com), Squared Eye разработала сайт, представляющий Blue Sky Resumes как идеальный выбор для молодых технически подкованных профессионалов, которые не хотят, чтобы их резюме было лишь одним из стопки. Сузив аудиторию, команда Squared Eye придала бренду индивидуальность, наслаждаясь свободой творчества и избегая шаблонных подходов, за которые цепляются остальные резюме-сервисы.

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

Рис. 7.3. После редизайна сайт Blue Sky Resumes обрел неформальную индивидуальность, что значительно повысило уровень его конверсии

Плывущие облака, оригинальный текст и сильный, но неформальный шрифт с засечками в заголовке – вот лишь некоторые элементы дизайна, объясняющие пользователям, что Blue Sky Resumes уникален, как и они сами. Вот как Мэтью Смит описывает процесс его создания:

Я хотел сконструировать не просто свежий дизайн, но и технологию, которую с удовольствием будут использовать в современном мире, вот почему для усиления индивидуальности дизайна мы использовали @font-face[27] и необычный макет. Все эти технологии в сочетании с хорошими фотографиями и остроумными находками сделали сайт приятным и энергичным. Мы протестировали его с помощью клиентов Blue Sky Resumes и получили прекрасные отзывы.

Запуская свой новый сайт, компания Blue Sky Resumes была уверена, что это поможет ее бизнесу, но она не могла даже представить, насколько впечатляющими окажутся результаты. Количество предложений выросло на 15 % в месяц, средний доход на одного клиента – тоже на 15 %. Число клиентов увеличивалось на 65 % ежемесячно, а общая прибыль – на невероятные 85 %. Конверсия возросла с неплохих 25 до 36 %.

Другими словами, новый сайт Blue Sky Resumes завоевал внимание пользователей, помог выстроить с ними прочные отношения и тем самым способствовал росту бизнеса. И что особенно впечатляет – команда Blue Sky Resumes ничего не меняла в своей маркетинговой политике. Конверсия и доходы возросли исключительно благодаря оформлению сайта, основой которого стал эмоциональный дизайн.

У сооснователя Blue Sky Resumes Луизы Флетчер есть свое мнение о том, почему редизайн смог увеличить бизнес-показатели:

Цифры показывают, что дизайн сайта убедил потенциальных клиентов стать реальными. Иными словами, они приняли решение еще до того, как связались с нами. Отсюда и рост конверсии на 50 %.

Вскоре после проведения редизайна с Blue Sky Resumes связался креативный директор журнала O, the Oprah Magazine и попросил разрешения упомянуть о них в статье о женщинах, желающих сменить профессию. Почему он выбрал именно Blue Sky? Потому что сайт представлял их как компанию, которая заботится об интересах своих клиентов. Они отличались от конкурентов, поставивших сбор резюме на поток ради прибыли. Дизайн же сайта Blue Sky Resumes ясно дает понять, что эта компания больше всего ценит личность.

Руководители Blue Sky Resumes не сразу одобрили выбранное Squared Eye направление. Оно казалось рискованным, потому что слишком отличалось от привычного. Но в итоге именно благодаря яркой индивидуальности их бизнес резко пошел в гору.

Blue Sky Resumes сделала ставку на редизайн, а CoffeeCup Software использовала тщательно продуманный единовременный ход. Но есть и третий вариант.

Компромисс: постепенное улучшение

Можно экспериментировать с эмоциональным дизайном, применяя незначительные вре́менные нововведения, как в случае с CoffeeCup Software, или пройти весь путь от начала до конца, проведя ребрендинг и редизайн, как это сделали в Blue Sky Resumes. Но существует и еще один подход, который вы можете использовать при создании эмоционального дизайна. Если вы читали A List Apart, журнал для разработчиков веб-сайтов, то знаете о концепции прогрессивного улучшения (http://bkaprt.com/de/13). Согласно этой концепции следует создавать сайты, отвечающие общепринятым требованиям, и добавлять дополнительные функции для тех, кто использует новые версии браузеров.

Прогрессивное улучшение – вторая натура для тех, кто создает сайты по принятым стандартам.

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

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

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

Спустя год после запуска режима «ворчун» мы решили посмотреть, сколько наших пользователей его включили. Я очень боялся узнать результаты, потому что, если таких большинство, нам пришлось бы серьезно подумать, что делать с созданным нами дизайн-образом. Оказалось, что на режим «ворчун» перешли всего 0,007 % наших пользователей. Так мы убедились, что, несмотря на присутствие нескольких ворчунов, не разделяющих наших взглядов на бренд MailChimp, гораздо больше людей их принимают и получают удовольствие от того же, что и мы. Я считаю, что ради этого можно было рискнуть.

Прогрессивное улучшение может оказаться полезным и в вашем случае: поможет успокоить клиентов или начальство, утихомирить тех, кто не понимает индивидуальности вашего сайта. Теперь для аргументации у вас есть и цифры.

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

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

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

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

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

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

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

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

Не пытайтесь сразу радикально изменить образ вашего сайта, сначала попробуйте выбрать ключевой показатель, который вам хотелось бы улучшить, например среднее время, проведенное пользователем на сайте. Слегка преобразуйте ваш интерфейс, руководствуясь принципами эмоционального дизайна, а затем воспользуйтесь программой, подобной Google Site Optimizer (http://bkaprt.com/de/14), чтобы протестировать сделанные изменения. Если показатели улучшатся, у вас будет сильный аргумент, чтобы убедить руководителя внедрить эмоциональный дизайн и в другие разделы вашего сайта – с цифрами не поспоришь.

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

Заключение

В этой небольшой книге мы прошли немалый путь, в ней я рассказал вам о применении принципов дизайна и психологии на примерах Wufoo, Betabrand, Housing Works, Mint, Flickr и Blue Sky Resumes. Несмотря на то, что аудитория, контент и дизайн этих сайтов различны, у них есть нечто общее: создатели каждого из них ценят мастерство и индивидуальность, что позволяет их пользователям видеть живых людей за компьютерными интерфейсами.

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

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

Мы не просто разрабатываем страницы. Мы дарим человеку новый опыт. Подобно адептам движения Arts and Crafts, мы знаем, что вкладывать в работу частичку души не просто возможно – это крайне необходимо.

Благодарности

Эта книга не оказалась бы в ваших руках, если бы Джеффри Зельдман, Мэнди Браун и Джейсон Санта-Мария не предоставили мне эту возможность. Я счастлив стать одним из цветов в «радуге познания» Book Apart и с гордостью занимаю место среди прекрасных авторов этого издательства.

Я безумно благодарен Мэнди Браун и Кристе Стивенс, которые сделали так, что я выгляжу куда лучшим писателем, чем есть на самом деле. Они терпеливо ждали, пока я смогу придать своим мыслям какую-то форму, и предлагали мне помощь каждый раз, когда чувствовали, что я в ней нуждаюсь. Мэнди и Криста, вы превратили написание этой книги в удовольствие, большое спасибо вам за это.

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

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

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

За это я выражаю ему свою бесконечную благодарность.

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

Тайрик Кристиан оказал мне неоценимую помощь при написании третьей главы. Он помог описать примеры дизайн-образов в понятной любому читателю форме. Я был счастлив получить такую помощь.

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

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

Приложение

Полные веб-адреса упомянутых в книге источников

Глава 1

1. http://gettingreal.37signals.com/

Глава 3

2. http://www.flickr.com/photos/clagnut/4947389773

3. http://en.wikipedia.org/wiki/File: Bundesarchiv_Bild_146II-732,_Erholung_am_Flussufer.jpg

4. http://www.webdesignerdepot.com/2008/12/why-mood-boards-matter/

5. http://daringfireball.net/linked/2009/04/02/designing-convertbot

Глава 4

6. http://dribbble.com/shots/14379-Profile

Глава 6

7. http://blog.flickr.net/en/2006/07/19/temporary-storage-glitch/

8. http://www.flickr.com/photos/14922438@N00/194463892/

9. http://www.flickr.com/photos/41225983@N00/193706751/

10. http://interactions.acm.org/content/?p=1226

Глава 7

11. http://www.coffeecup.com/forums/search/?q=%22Guess+I+could+have+waited+for+today+if+all%22&in=81&type=contents&view=posts&search=true&button_search.x=54&button_search.y=-106&button_search=true

12. http://www.alistapart.com/articles/understandingprogressiveenhancement/

13. http://google.com/websiteoptimizer

14. http://amzn.com/1592535879

15. http://getmentalnotes.com/

16. http://amzn.com/0465051367

17. http://amzn.com/0393334775

18. http://amzn.com/014303622X

19. http://amzn.com/030746086X

20. http://amzn.com/0979777747

21. http://amzn.com/0321607376

22. http://uxmag.com/design/beyond-frustration-three-levels-of-happy-design

23. http://uxmag.com/design/the-psychologists-view-of-ux-design

24. http://uxmag.com/design/organized-approach-to-emotional-response-testing

25. http://boxesandarrows.com/view/emotional-design

Рекомендуемая литература

При решении визуальных и концептуальных проблем необходимо следовать основополагающим принципам дизайна. Скажу прямо: если вы с ними не знакомы, вам суждено постоянно поддаваться искушению украшать свои сайты бессмысленными образами. Если вы можете позволить себе купить лишь одну книгу по дизайну, то пусть это будет книга Джил Батлер, Кристины Холден и Уильяма Лидвелла Universal Principles of Design: 125 Ways to Enhance Usability, Influence Perception, Increase Appeal, Make Better Design Decisions, and Teach Through Design (http://bkaprt.com/de/15).

Разумеется, я не первый человек, кто обнаружил связь между дизайном и эмоциями. Легендарный дизайнер и мыслитель Дональд Норман исследует причины нашей любви к тем или иным продуктам в своей книге Emotional Design (http://bkaprt.com/de/17).