ЧАСТЬ I

 

Создание образа для вашего сайта

Если бы ваш сайт был человеком, каким бы он казался? Серьезным, деловым, строгим, застегнутым на все пуговицы, но при этом талантливым и вызывающим доверие? Или рубахой-парнем, который весело решает любые будничные задачи?
По аналогии с «персонажем» пользователя вы можете создать досье на свой дизайн, вычленив и собрав воедино его индивидуальные черты. Индивидуальность может проявляться в интерфейсе – через графический дизайн, текст или способы взаимодействия с посетителями.
«Персонаж» вашего дизайна, его дизайн-образ, призван описывать, как именно проявляется индивидуальность в каждом из разделов сайта, и помогать команде разработчиков действовать согласованно.
Цель – создать образ столь же яркий, как образы Джастина Лонга и Джона Ходгмана в рекламе Get a Mac.
Прежде чем перейти к реальному «дизайн-образу», который я создал для компании MailChimp, давайте посмотрим на составляющие этого документа. Вот что вам необходимо в него включить.

Имя бренда: название компании или сервиса.
Обзор: краткий обзор индивидуальности бренда: что делает бренд уникальным?
Индивидуальность: образ человека, обладающего теми качествами, которые вы хотели бы присвоить бренду. Это сделает индивидуальность вашего бренда менее абстрактной. Выберите человека, знакомого всем в вашей команде. Если у вашего бренда уже есть символ или лицо, которое включает в себя эту индивидуальность, используйте его. Опишите его характерные черты.
Свойства бренда: перечислите пять-семь свойств, которые лучше всего описывают ваш бренд, и одно свойство, которого вы хотели бы избежать. Это поможет дизайнерам и авторам текста создать цельный образ и при этом избежать неверных шагов.
Карта индивидуальности: мы можем поместить разные черты индивидуальности в систему координат XY. Ось Х сообщает, насколько индивидуальность дружелюбна, а ось Y позволяет определить степень доминирования или подчинения этой личности.
Голос: если бы бренд говорил, как бы он это делал? И что бы он сказал? Он говорил бы с местечковым акцентом или хорошим литературным языком? Опишите голос вашего бренда и то, как он меняется в различных ситуациях. Люди используют разный тембр и манеру говорить в зависимости от ситуации – значит, так должен вести себя и бренд.

Примеры текста: приведите примеры текста, который вы могли бы использовать в своем интерфейсе. Это поможет авторам понять, как ваш «дизайн-образ» будет взаимодействовать с аудиторией.
Визуальный лексикон: если вы дизайнер и создаете этот документ для себя и/или своей команды, можете составить визуальный лексикон. Он будет включать цвета, шрифты и элементы визуального стиля, отражающие индивидуальность бренда. Можно использовать общую концепцию или создать так называемый mood board[15] (http://bkaprt.com/de/5).
Методы связи: опишите методы эмоционального вовлечения, которые вы, скорее всего, будете использовать в интерфейсе, чтобы поддержать образ и произвести впечатление. Я расскажу о них подробнее в следующей главе.

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

Название бренда: MailChimp

Обзор: Фредди фон Чимпенхаймер IV – лицо бренда и воплощение его индивидуальности (рис. 3.4). Крепкое телосложение Фредди говорит нам о мощи приложения, а его поза
демонстрирует, что он находится в движении. Все это дает людям понять, что у Фредди серьезные намерения.

Фредди приветствует пользователей доброй улыбкой, что позволяет им чувствовать себя как дома. Мультяшный стиль MailChimp предлагает им расслабиться и получать удовольствие. Хоть Фредди и мультипликационный персонаж, он все равно производит впечатление крутого. Он много шутит, но, как только ситуация становится серьезной, он перестает это делать.
MailChimp часто развлекает пользователей, подбрасывая им «пасхальные яйца»[16] или смешные видеоролики на YouTube. Праздник всегда с тобой, если он не мешает работе.

Индивидуальность (рис. 3.4)


Свойства бренда: весело, но не по-детски. Смешно, но не глупо. Функционально, но не сложно. Стильно, но не чуждо. Просто, но не простецки. Надежно, но не скучно. Неформально, но не разгильдяйски.

Карта индивидуальности (рис. 3.5)
Голос: голос MailChimp дружелюбный, как у старого знакомого, но прежде всего человеческий. Можно легко представить себе индивидуальность людей, стоящих за этим брендом. MailChimp травит анекдоты (но такие, которыми можно поделиться с мамой), рассказывает истории и говорит так, словно общается с близкими. MailChimp использует неформальные сокращения: don’t вместо do not, потому что так и говорят нормальные люди. MailChimp говорит «хм-м-м», будто задумался, или «Блин, какой ужас!» – в ситуациях, требующих сочувствия. Строчные буквы и текст на кнопках интерфейса подчеркивают неформальный характер бренда.
Примеры текста: в случае успешного завершения операции: «Дай пять! Твой список успешно импортирован». Сообщение об ошибке: «Ой, кажется, ты забыл ввести адрес».Сбой: «Один из наших серверов временно недоступен. Наши инженеры работают над этим и скоро все исправят. Спасибо за терпение».
Визуальный лексикон: цвет. Яркая, но не слишком насыщенная палитра говорит о чувстве юмора. Цвета чистые, но не как в детских телепередачах. MailChimp забавный, но функциональный.
Типографика. MailChimp легок на подъем, прост и эффективен, и типографика это демонстрирует. Простые шрифты без засечек в заголовках и сообщениях отличаются размером, плотностью и цветом, которые передают иерархию сообщений. Они делают MailChimp столь же уютным, как любимый свитер.
Общий стиль. Элементы интерфейса простые, интуитивно понятные, неустрашающие. Мягкие, нежные текстуры смягчают пространство и делают его более человечным.
Методы связи: удивление и восторг. Тематические экраны авторизации напоминают о праздниках, культурных событиях или о вашем любимом человеке. «Пасхальные яйца» радуют в самые неожиданные моменты, порой добавляя ностальгические нотки, а порой напоминая о штампах поп-культуры.
Предвкушение. Смешные приветствия Фредди меняются при переходе со страницы на страницу. Они не дают информации или обратной связи – это просто веселое дополнение, не снижающее юзабилити.

MailChimpРис. 3.4. Фредди фон Чимпенхаймер IV, лицо MailChimp

Карта индивидуальностиРис. 3.5. Карта индивидуальности MailChimp

Шаблон «дизайн-образа» и образец для MailChimp вы можете скачать на http://aarronwalter.com/design-personas. Попробуйте использовать их в своем следующем проекте или если решите изменить уже существующий дизайн.
«Дизайн-образ» размещается там, где его могут увидеть другие члены команды, занимающиеся разработкой сайта, его развитием и стратегией в области контента. Они должны напоминать команде об отношениях, которые вы хотите выстроить с пользователями. «Дизайн-образ» – это инструкция для всех и каждого, без нее не должен появиться ни один пиксель, параграф или процесс на вашем сайте.
Создатели многих сайтов уже оценили преимущества, которые дает индивидуальность, и пользуются ими для того, чтобы правильно выстроить взаимоотношения с пользователями и добиться коммерческого успеха. Например, компании Tapbots, Carbonmade и Housing Works, несмотря на разницу брендов, целей и платформ, уже осознали, что индивидуальность – ключевой момент в построении эмоциональных связей с аудиторией, а следовательно, и в достижении успеха.

Tapbots: робот и любовь

Tapbots (http://tapbots.com), создатель удобных приложений для iPhone, разработала индивидуальный интерфейс, благодаря которому даже самые нудные задачи можно решать с удовольствием (рис. 3.6).

Приложения TapbotРис. 3.6. Приложения Tapbot похожи на маленьких роботов, готовых сделать за вас всю работу с цифрами

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

У приложений есть некое подобие лица, которое и взаимодействует с пользователем. Темные панели сверху похожи на темные очки вроде тех, что носит рэпер Кул Мо Ди. Они располагаются над треугольником «носа» и большим «ртом». Если вам нужно следить за весом, киборг Кул Мо Ди – достойный помощник.
В отличие от других приложений для iPhone, эти действительно напоминают маленьких роботов. И именно робот вдохновил дизайнера Марка Джардина на внедрение индивидуальности в интерфейс:
Вся концепция родилась из мультфильма «ВАЛЛ-И». При разработке первых двух приложений концепция заключалась в том, чтобы сделать их похожими на настоящих роботов.
Мы хотели, чтобы приложения использовались для серьезных целей, но в то же время воспринимались пользователями не просто как набор программ, а вызывали у них эмоциональную привязанность. Потому что мало кто любит программы так, как это делают гики[17], то есть невзирая на их внешний вид.
Пользователи бурно реагируют на наши мультяшные, издающие звуки, похожие на типичный голос робота, но в то же время практичные интерфейсы. Вы можете провести параллели с «ВАЛЛ-И» в том, что касается физических и личностных качеств: как и герой мультфильма, наши образы дружелюбны, очаровательны и надежны.
Техноблогер Джон Грабер обобщает впечатления пользователей от приложений Tapbots в своей рецензии (http://bkaprt.com/de/6): «Обожаю, как выглядят и звучат их приложения».
Ирония в том, что Грабер даже не упоминает о функциональных свойствах приложений – их достоинства подразумеваются сами собой. Он употребляет слово «обожаю», то есть ему не просто нравятся приложения, он любит их. Эти антропоморфные интерфейсы вызывают у пользователя ощущение, будто они взаимодействуют с живым существом, наделенным индивидуальностью, что в свою очередь формирует эмоциональную связь. Интерфейсы, вызывающие эмоции, не только привлекают множество поклонников, но и формируют армию евангелистов, готовых их пропагандировать.
Наш поезд движется в направлении следующего примера. Компании Carbonmade удалось создать образ бренда с яркой, воздействующей на аудиторию индивидуальностью, и при этом не отступить от своего усатого безумия.

Carbonmade: осьминоги, единороги и усищи

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

Carbonmade (http://carbonmade.com) – веб-приложение, позволяющее людям создавать элегантные портфолио, совмещая серьезность Джимми Стюарта с дурашливым обаянием Эдди Иззарда[18]. Осьминоги и единороги бродят по фантастическому пейзажу их главной страницы (рис. 3.7), нетипичной для сайта, сконцентрированного на конверсии.

Carbonmade Эмоциональный веб-дизайнРис. 3.7. Carbonmade использует свою яркую индивидуальность для того, чтобы привлечь новых пользователей

Причудливая индивидуальность и немного пошловатый юмор – детище дизайнера Дейва Горума. Судя по всему, именно эти черты привлекают скептически настроенных дизайнеров и художников, которые пользуются этим приложением. Сам Горум объясняет это так:
Мое правило – добавлять абсурда до тех пор, пока он не отвлечет от главной мысли.
Именно неформальное безумие заставляет пользователей нажимать на кнопку регистрации. Впрочем, градус абсурда постепенно снижается. Мы мажем его толстым слоем на маркетинговую страницу, чуть более тонким слоем – на инструменты, а в самом продукте он просто исчезает. В результате получается гигантская, дурацкая, манящая конфета, ядро которой наделено швейцарской точностью!
Юмор и индивидуальность Carbonmade – что-то вроде перевернутой наоборот прически «маллет»[19]: безумие спереди, а сзади – просто и коротко. Простота внутри самого приложения позволяет пользователям сосредоточиться на работе, а не на усах экранных персонажей. Я опишу этот прием в четвертой и седьмой главах. Неформальный сайт позволяет аудитории чувствовать себя комфортно, подписываясь на услуги. В то же время конкуренты ошибочно полагают, что Carbonmade – сплошное легкомыслие, в котором нет практического смысла.
Непринужденность помогает начать диалог с аудиторией. Мы вроде того придурковатого дружка, с которым так легко общаться и который к тому же способен помочь нам сделать крутое портфолио.
Наша придурковатость успокаивает конкурентов и не дает им воспринимать нас всерьез – а нам того и надо.
Индивидуальность бренда Carbonmade противопоставляет его конкурентам. То есть возникает контраст, который, как я уже говорил, влияет на процесс принятия решений.
Юмор прекрасно работает на индивидуальность Carbonmade, однако он не всегда уместен. Все мы – сложные люди с широким спектром эмоций. Но когда дело доходит до эмоционального дизайна, порой нужно подправить индивидуальность, чтобы соответствовать содержанию и аудитории.
Немногим сайтам удается это так же хорошо, как Housing Works – компании, работа которой ассоциируется с человеческими лицами.

Housing Works: имя и лицо

Индивидуальность сайта не всегда стоит подчеркивать с помощью юмора. В некоторых ситуациях необходима другая тактика.
Housing Works (http://housingworks.org) – некоммерческая организация, цель которой – положить конец СПИДу и бездомности. Каждый день Housing Works меняет чью-то жизнь. Их работа наполнена эмпатией, добротой и верой в обычных людей.
Когда в 2008 году компания Happy Cog (http://happycog.com) создавала новый дизайн сайта Housing Works (рис. 3.8), она черпала вдохновение в специфике организации и индивидуальности работающих в ней людей.

Housing-WorksРис. 3.8. Housing Works строит взаимоотношения с аудиторией, рассказывая поразительные истории о людях

Ден Молл, ведущий дизайнер Housing Works, говорит об этом так:
Очевидно, что сердце Housing Works бьется благодаря людям, которые работают здесь, и тем, для кого они работают. Главное – тепло и забота. Создавать сайт, который вы видите сегодня, следуя этим критериям, было довольно легко.
Большие фотографии на главной странице и цитаты о том, как Housing Works меняет судьбы, формируют связь между посетителями и организацией. Улыбающиеся лица и истории людей сменяют друг друга, помогая сайту получить прекрасные результаты в сфере человеческого общения.
Кадрирование фотографий формирует эмоциональное восприятие. Когда в кадр попадает только лицо человека, зрители сосредоточиваются на нем, и это вызывает у них душевный отклик. Более широкий охват заставляет зрителей обращать внимание не только на лицо, но и на все, что попадает в кадр. Фотографии на странице Housing Works скадрированы так, чтобы взгляд останавливался именно на лицах запечатленных людей, – это заставляет сопереживать им.

Сила индивидуальности

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

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

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

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

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

Замечали ли вы, что, когда на радио вдруг начинает играть ваша любимая песня, вы испытываете бо льшую радость, чем если бы включили ее сами? Удивление усиливает эмоциональный отклик. Когда вы предвкушаете что-либо, ваши эмоции распределены во времени. Удивление сжимает эмоции до одного мгновения, делая реакцию более интенсивной и оставляя отпечаток в памяти.
Во второй главе говорилось о том, что наше сознание ищет нарушение закономерностей и выделяет когнитивные и визуальные контрастные элементы, с тем чтобы мы могли реагировать соответствующим образом. В момент удивления мы переживаем высококонтрастную ситуацию, которую не могли предсказать. Сюрприз захватывает наше внимание и отсекает лишние детали, оставляя в памяти лишь необычное.
Дизайнеры используют это весьма полезное свойство психики, чтобы распределить внимание и сформировать поведение пользователей. Мы знаем, что пользователи сайтов и приложений быстро обрабатывают информацию и их внимание ограниченно. Элемент неожиданности, встроенный в интерфейс, ломает поведенческую закономерность и заставляет мозг заново считывать ситуацию.
Вслед за удивлением всегда приходит пропорциональный ему эмоциональный отклик. Отследив контраст, мозг должен быстро среагировать. На глубокий анализ нет времени, и мозг вынужден полагаться на эмоции и интуицию. Дизайнеры интерфейсов обожают добиваться подобной реакции пользователей, ведь при правильном подходе она лишает их возможности усомниться в необходимости покупки и отказаться от нее. Однако вы должны помнить, что цель не обмануть или одурачить посетителя – аудитория наверняка поймет подобную игру и не станет доверять вашему бренду. Цель – положительное восприятие нашего бренда, а затем и лояльность.
Photojojo удалось добиться когнитивного кунг-фу удивления и закрепить свой коммерческий успех.

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

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

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

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

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

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

Будь это обычная ссылка на описание продукта, пользователи могли бы ее и пропустить, но загадочный рычаг работает с реверсивной психологией, и в результате описание
читают большее число пользователей. Если верить Амиту Гупте, создателю Photojojo, это значительно увеличивает конверсию. Гениально!
Сюрпризы делают сайт интересным и заставляют клиентов возвращаться снова и снова. Гупта рассказывает, как эмоциональный дизайн расширил аудиторию и повлиял на успех сайта:
Эмоциональный дизайн – часть нашей маркетинговой стратегии. Люди рассказывают друзьям о пузырьке, скачущем по странице, если добавить что-то в корзину. Они рассказывают фолловерам[20] и читателям своего блога о рычаге с табличкой «Не тянуть», о том, как им нравятся сэндвич и динозавр на страничке с контактами, когда они пишут нам письма, и вдобавок они фотографируют счет и размещают его фотографию на Flickr. Все это вместе (включая прекрасные товары и отличный сервис) обеспечивает популярность компании, привлекает новых поклонников, клиентов и друзей.
С Photojojo приятный сюрприз поджидает покупателей на каждом углу, и они постоянно ищут следующий. Чем больше Photojojo стимулирует покупателей переходить со страницы на страницу, тем больше товаров они видят, что влияет на рост продаж. Ядро успеха Photojojo – удивление и радость.
Помните Wufoo из первой главы? Этот сайт познакомил нас с идеей эмоционального дизайна. Теперь давайте посмотрим, какие сюрпризы ожидают его клиентов, только уже не в рамках интерфейса, а в их реальных почтовых ящиках.

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

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

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

Письма делают бренд Wufoo человечным. Удивление запускает у клиентов эмоциональную реакцию, они чувствуют себя особенными. Это ощущение вызывает только одно желание: немедленно рассказать об этом всем, кто способен слышать. Рассылка писем не была маркетинговой задумкой, но теперь подобные послания постоянно вывешивают в Twitter, Facebook и на Flickr. Внимание, которое Wufoo уделяет людям, производит впечатление на их друзей, и те с гораздо большей вероятностью станут клиентами этой компании.
Очевидно, что решение развивать бизнес, удивляя людей проявлением заботы и внимания, было абсолютно правильным. Более того, вскоре в Wufoo обнаружили, что, производя положительные впечатления, не нужно нести маркетинговые расходы. (Да, вы все поняли правильно: они убрали эту статью расходов из бюджета.) Их маркетингом занимается сама аудитория.
Не менее могущественным может считаться близкий родственник удивления – предвкушение. Один из известных мне сайтов использовал предвкушение, чтобы сформировать восприятие нового дизайна и смягчить негативную реакцию в случае, если она возникнет. Что это был за сайт? Прочтите, и узнаете. (Поняли, что я сделал? Это и есть предвкушение.)

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

Удивление сжимает эмоции пользователя до одного мгновения, делая его реакцию более интенсивной, а предвкушение (антипод удивления) может создать особую эмоциональную связь. Предвкушение возникает тогда, когда мы объявляем о грядущем событии и даем аудитории время над ним подумать. Родители пробуждают воображение детей в канун Рождества, рассказывая, что скоро Санта придет к ним домой, а дети предвкушают праздничное волшебство и подарки.
Дизайнеры видеоигр называют предвкушение «открытой системой». Игры с открытой системой (например, The Sims[21]) позволяют пользователям играть по своим правилам. Открытые системы побуждают людей задействовать воображение. Игры с закрытой системой, вроде Super Mario Brothers[22], сильно сужают игровое пространство, заставляя пользователя двигаться к определенной цели в заданном направлении. Сравнивать открытую и закрытую системы – все равно что выяснять, чем книга отличается от фильма. Книги требуют нашего воображения, а в фильмах все уже придумано за нас.
Предвкушение, как и открытая система, заставляет нас включить воображение, чтобы представить грядущие события. Если заставить людей предвкушать, то результат будет гораздо более эффективным, чем если сразу выложить им все детали. Неуверенность провоцирует разум. Предвкушение обещает нам что-то особенное, и мы изо всех сил желаем, чтобы тайна раскрылась и мы могли сравнить результат со своими ожиданиями.
Популярная социальная сеть Twitter использовала эмоциональную силу предвкушения, чтобы подготовить пользователей к появлению нового дизайна: о нем объявили, затем постепенно внедрили, и таким образом добились эмоционального взаимодействия с пользователями и в результате получили от них положительные отзывы. И вот редизайн Twitter стал одним из самых успешных в истории Сети.

Новый Twitter

В начале 2010 года ребята из Twitter работали над проектом масштабного редизайна под скромным названием «Новый Twitter». Над концепцией вместе с командой работал и креативный директор Twitter Дуг Бауман, который тщательно изучал малейшие визуальные детали и схемы взаимодействия. Программист Марк Траммел проводил тесты на удобство и простоту использования интерфейса. Видео тестирования транслировалось в дизайн-студию, чтобы Бауман и команда могли сразу исправлять недочеты.
Ставки были очень высоки: Twitter стал частью повседневной жизни для сотен миллионов пользователей. Перед дизайнерами стояла сложнейшая задача – не потерять постоянных пользователей, которые изучили сервис вдоль и поперек и мимо внимания которых не прошло бы ни одно, даже самое незначительное изменение. Слухи о проекте редизайна пошли, когда Бауман опубликовал его частичный скриншот в Dribbble (http://bkaprt.com/de/7) – социальной сети, где дизайнеры могут размещать части своих работ в маленьком разрешении 300 × 400 пикселей (рис. 4.4). Ограничения Dribbble позволили Бауману, как он выразился, поделиться фрагментом «не сдавая контору». К тому же осталось достаточно простора для фантазий, что находится за пределами скриншота.

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

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

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

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

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

Часть I→    Часть III →