Длительные отношения выстраиваются вокруг наших уникальных качеств и черт, то есть того, что мы называем индивидуальностью. Индивидуальность позволяет нам выразить весь спектр человеческих эмоций. Она та самая тайная сила, что влечет нас к одним людям и отталкивает от других. Индивидуальность в значительной степени влияет на процесс принятия решений, и дизайн должен апеллировать именно к ней.
Индивидуальность – основа для эмоций
Дизайн интерфейсов относится к тому роду деятельности, который характеризуется понятием «человеко-компьютерное взаимодействие» (Human-Computer Interaction, HCI) и который существует на пересечении информатики, бихевиоризма и дизайна. Специалисты HCI разбираются в вопросах психологии, юзабилити, пользовательского взаимодействия, концепциях программирования и основных принципах визуального дизайна. Знакомо? Да-да, именно с этими дисциплинами каждый день сталкиваются в своей работе дизайнеры.
Открою вам секрет: я не фанат термина «человеко-компьютерное взаимодействие». Создавая дизайн, я думаю о том, чтобы пользователь воспринимал интерфейс так, будто перед ним человек, а не компьютер. Возможно, вам покажется, что я слишком умничаю, но я считаю, что в этом процессе очень важны имена. Они формируют наше восприятие и порой подбрасывают необычные идеи.
Главная цель эмоционального дизайна – упростить коммуникацию между людьми. Если мы справляемся с этой задачей, компьютер отходит на задний план, и мы оказываемся лицом к лицу с личностью. Чтобы добиться этой цели, нужно представлять, как люди общаются между собой в жизни.
Я хотел бы ненадолго прерваться и предложить вам вспомнить человека, с которым вы недавно общались. Возможно, вы встретили его на каком-то мероприятии или вас представил ему общий знакомый. Ваша беседа была захватывающей и, не исключено, даже забавной. Почему этот разговор получился таким приятным? Конечно, у вас были общие интересы, темы для обсуждения, но ведь не поэтому вам так запомнилась эта встреча, правда? Вас привлекла индивидуальность собеседника, направлявшая разговор, она-то и вызвала у вас эмоции. Индивидуальность проявилась благодаря хорошей шутке, интонации, тембру голоса. Они и завоевали ваше расположение к новому человеку.
Благодаря индивидуальности рождаются дружеские отношения и возникают эмоциональные связи. Помните об этом и пронесите эту мысль через всю книгу. Подумайте об этом, когда начнете новый проект. Именно это ощущение мы пытаемся передать, когда используем эмоциональный дизайн. Мы создаем чувство радостного возбуждения и строим отношения с аудиторией, представляя ей личность, олицетворяющую наш интерфейс.
Давайте не будем думать о дизайне как о красивом фасаде, а представим его как человека, готового общаться с аудиторией. Давайте вдохнем жизнь в наши продукты. История вновь подсказывает нам, что и как делать. Оказывается, дизайнеры экспериментировали с индивидуальностью на протяжении столетий.
Краткая история индивидуального стиля в дизайне
Мы наделяем индивидуальным характером все, что создаем, пытаясь очеловечить технику. Когда в середине XV века Иоганн Гутенберг, ювелир и изобретатель печатного станка, экспериментировал с подвижными шрифтами, его вдохновляли рукописные книги. До возникновения печатного станка писцы – обычно ими были монахи – переписывали религиозные сочинения, используя перо и чернила. Переписывание Библии было священным трудом; считалось, что писец при этом транслировал божественное послание. Поэтому руке писца, его почерку придавалось огромное значение.
Разработав и начав применять гарнитуры, Гутенберг стал печатать сотни Библий, шрифт которых имитировал почерк писца. И хотя машина была создана для передачи божественного послания, он упорно работал над тем, чтобы результат был более «человечным» (рис. 3.1).
Рис. 3.1. Шрифт Гутенберга подражал рукописному тексту, чтобы напечатанные экземпляры Библии казались более «человечными»
Стремление сделать дизайн более человечным ясно просматривается и в XX веке, когда производство стало массовым.
Volkswagen Beetle выпущен в 1938 году, производился до 2003 года, а его облик признан самым удачным за всю историю автомобилестроения. Причина его успеха именно в человечности дизайна (рис. 3.2). Это был настоящий «народный автомобиль» – антропоморфность сделала его больше чем просто автомобилем для людей. Фары Beetle похожи на глаза, а скругленный капот, словно улыбающийся нам, – на детское лицо. И хотя дизайнеры главным образом стремились оптимизировать аэродинамические характеристики автомобиля, а вовсе не создать индивидуальный образ, «лицо» автомобиля дарит надежду и радость. Значительные культурные изменения, произошедшие за семь десятилетий, не помешали нескольким поколениям автолюбителей ощущать глубоко личную связь с Beetle.
Рис. 3.2. Индивидуальность – главное, что есть в дизайне автомобиля Volkswagen Beetle, и именно она обеспечила этому автомобилю колоссальный успех у нескольких поколений
Улыбка, приветствующая водителя, выражает эмоции и вызывает особое отношение. В этом случае хочется улыбнуться в ответ даже неодушевленному предмету. Вокруг этой улыбки мы выстроили настоящий архетип, придумали игры вроде Slug bug red! и сделали Beetle героем фильмов (например, Херби в фильме The Love Bug). Мы сумели создать воспоминания, и теперь они напоминают нам о положительных эмоциях, которые дарил этот автомобиль.
Библии Гутенберга и Volkswagen Beetle – интересные примеры, но, пожалуй, нет более наглядного примера очеловечивания дизайна, чем рекламная кампания Apple – Get a Mac. В ролике актер Джастин Лонг предстает в образе Mac’a – молодого хипстера, легко решающего сложные проблемы, в то время как его собеседник – безвольный и скучающий PC в исполнении Джона Ходгмана – справляется с задачами с заметным трудом. В этой рекламе есть эмоциональные переживания, она заставляет потребителя сравнить отношения, которые у них могут возникнуть с компьютером одной и другой модели. Никто не говорит о технических особенностях – вам просто показывают, как чувствует себя тот, кто купил Mac.
Теперь, когда вы узнали, как исторически развивалась идея индивидуальности в дизайне, давайте вернемся в настоящее и начнем строить такие отношения с аудиторией, которые будут вызывать у нее искренние эмоции.
Моделирование «персонажей»
Работая сегодня в сфере веб-дизайна, мы исследуем, строим планы и творим, держа в голове мотивацию нашей аудитории. Дизайнеры проводят исследование аудитории и создают «персонажи» – своего рода визуализированное досье на архетипичных пользователей продукта, в котором представлен набор их поведенческих характеристик. Думайте о «персонажах» как о результатах исследования. Они помогут вам помнить о целевой аудитории и концентрироваться на ее потребностях.
Пример такого «персонажа», показанный на рис. 3.3, создан Тоддом Заки Варфелем, дизайнером из messagefirst (). Это Джулия – собирательный образ определенной группы пользователей. Благодаря ему мы узнаем о ее возрасте, поле, образовании, интересах, понимаем, что́ влияет на ее решения в отношении нашего проекта – в сущности, мы начинаем более глубоко воспринимать этот образ. Мы замечаем ее индивидуальность, что позволяет нам лучше понять ее мотивацию и выбрать наиболее подходящее для нее дизайнерское решение.
Рис. 3.3. «Персонажи» определяют процесс создания дизайна и позволяют фокусироваться на потребностях пользователя
Джулия – не настоящий человек, она архетип группы пользователей, хоть и списанный во многом с человека, с которым дизайнеры messagefirst знакомы лично. В этой компании так создаются все «персонажи» – это удобно. Если дизайнеры сталкиваются с трудностями в работе или не уверены, какой будет реакция пользователей на тот или иной интерфейс, они могут просто позвонить прообразам своих «персонажей» и задать им несколько вопросов. Это помогает находить правильные решения и не забывать о людях, для которых они работают.
Из первой главы, где я рассматривал пирамиду потребностей Маслоу, вы узнали, что пользователям нужен функциональный, надежный и удобный дизайн. Чем лучше мы понимаем аудиторию, тем лучше удовлетворяем ее потребности, а значит, теперь мы можем задействовать верхнюю ступень пирамиды – удовольствие, создав такой дизайн, который будет вызывать эмоциональный отклик.
«Персонажи» – стандартный инструмент в процессе разработки дизайна, однако они не дают полной картины наших отношений с аудиторией. Мы знаем, кто наши пользователи, но кто такие мы? Как я говорил выше, продукты могут быть представлены в образе людей. Развивая эту мысль, можно предположить, что и у нашего дизайна может быть «персонаж» – своего рода отражение «персонажей» пользователей.
Создание образа для вашего сайта
Если бы ваш сайт был человеком, каким бы он казался? Серьезным, деловым, строгим, застегнутым на все пуговицы, но при этом талантливым и вызывающим доверие? Или рубахой-парнем, который весело решает любые будничные задачи?
По аналогии с «персонажем» пользователя вы можете создать досье на свой дизайн, вычленив и собрав воедино его индивидуальные черты. Индивидуальность может проявляться в интерфейсе – через графический дизайн, текст или способы взаимодействия с посетителями.
«Персонаж» вашего дизайна, его дизайн-образ, призван описывать, как именно проявляется индивидуальность в каждом из разделов сайта, и помогать команде разработчиков действовать согласованно.
Цель – создать образ столь же яркий, как образы Джастина Лонга и Джона Ходгмана в рекламе 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 столь же уютным, как любимый свитер.
Общий стиль . Элементы интерфейса простые, интуитивно понятные, неустрашающие. Мягкие, нежные текстуры смягчают пространство и делают его более человечным. Фредди нужно использовать с умом – только чтобы разрядить обстановку. Фредди не должен помогать с решением задач или обратной связью.
Методы связи: удивление и восторг . Тематические экраны авторизации напоминают о праздниках, культурных событиях или о вашем любимом человеке. «Пасхальные яйца» радуют в самые неожиданные моменты, порой добавляя ностальгические нотки, а порой напоминая о штампах поп-культуры.
Предвкушение . Смешные приветствия Фредди меняются при переходе со страницы на страницу. Они не дают информации или обратной связи – это просто веселое дополнение, не снижающее юзабилити.
Рис. 3.4. Фредди фон Чимпенхаймер IV, лицо MailChimp
Рис. 3.5. Карта индивидуальности MailChimp
Шаблон «дизайн-образа» и образец для MailChimp вы можете скачать на . Попробуйте использовать их в своем следующем проекте или если решите изменить уже существующий дизайн.
«Дизайн-образ» размещается там, где его могут увидеть другие члены команды, занимающиеся разработкой сайта, его развитием и стратегией в области контента. Они должны напоминать команде об отношениях, которые вы хотите выстроить с пользователями. «Дизайн-образ» – это инструкция для всех и каждого, без нее не должен появиться ни один пиксель, параграф или процесс на вашем сайте.
Создатели многих сайтов уже оценили преимущества, которые дает индивидуальность, и пользуются ими для того, чтобы правильно выстроить взаимоотношения с пользователями и добиться коммерческого успеха. Например, компании Tapbots, Carbonmade и Housing Works, несмотря на разницу брендов, целей и платформ, уже осознали, что индивидуальность – ключевой момент в построении эмоциональных связей с аудиторией, а следовательно, и в достижении успеха.
Tapbots: робот и любовь
Tapbots (), создатель удобных приложений для iPhone, разработала индивидуальный интерфейс, благодаря которому даже самые нудные задачи можно решать с удовольствием (рис. 3.6).
Рис. 3.6. Приложения Tapbot похожи на маленьких роботов, готовых сделать за вас всю работу с цифрами
Приложение Convertbot (как видно из названия) предназначено для конвертирования единиц измерения, а приложение Weightbot помогает пользователям следить за колебаниями массы тела. Ни одна из этих задач не может сама по себе приносить удовольствие – особенно контроль над весом, который часто и больно бьет по самооценке. Однако дизайн этих приложений обеспечил им бешеную популярность.
У приложений есть некое подобие лица, которое и взаимодействует с пользователем. Темные панели сверху похожи на темные очки вроде тех, что носит рэпер Кул Мо Ди. Они располагаются над треугольником «носа» и большим «ртом». Если вам нужно следить за весом, киборг Кул Мо Ди – достойный помощник.
В отличие от других приложений для iPhone, эти действительно напоминают маленьких роботов. И именно робот вдохновил дизайнера Марка Джардина на внедрение индивидуальности в интерфейс:
Вся концепция родилась из мультфильма «ВАЛЛ-И». При разработке первых двух приложений концепция заключалась в том, чтобы сделать их похожими на настоящих роботов.
Мы хотели, чтобы приложения использовались для серьезных целей, но в то же время воспринимались пользователями не просто как набор программ, а вызывали у них эмоциональную привязанность. Потому что мало кто любит программы так, как это делают гики [17] , то есть невзирая на их внешний вид.
Пользователи бурно реагируют на наши мультяшные, издающие звуки, похожие на типичный голос робота, но в то же время практичные интерфейсы. Вы можете провести параллели с «ВАЛЛ-И» в том, что касается физических и личностных качеств: как и герой мультфильма, наши образы дружелюбны, очаровательны и надежны.
Техноблогер Джон Грабер обобщает впечатления пользователей от приложений Tapbots в своей рецензии (): «Обожаю, как выглядят и звучат их приложения».
Ирония в том, что Грабер даже не упоминает о функциональных свойствах приложений – их достоинства подразумеваются сами собой. Он употребляет слово «обожаю», то есть ему не просто нравятся приложения, он любит их. Эти антропоморфные интерфейсы вызывают у пользователя ощущение, будто они взаимодействуют с живым существом, наделенным индивидуальностью, что в свою очередь формирует эмоциональную связь. Интерфейсы, вызывающие эмоции, не только привлекают множество поклонников, но и формируют армию евангелистов, готовых их пропагандировать.
Наш поезд движется в направлении следующего примера. Компании Carbonmade удалось создать образ бренда с яркой, воздействующей на аудиторию индивидуальностью, и при этом не отступить от своего усатого безумия.
Carbonmade: осьминоги, единороги и усищи
Индивидуальность формирует связь с аудиторией, только если она действительно уникальна и аутентична. Если это просто маркетинговая уловка, то эффект может оказаться прямо противоположным. Как я уже говорил, наш мозг настроен на поиск как полезных, так и вредных вещей. Люди замечают неестественность в дизайне и тут же уходят – и будьте уверены, в этом случае не может быть и речи о доверии к вашему бренду.
Carbonmade () – веб-приложение, позволяющее людям создавать элегантные портфолио, совмещая серьезность Джимми Стюарта с дурашливым обаянием Эдди Иззарда. Осьминоги и единороги бродят по фантастическому пейзажу их главной страницы (рис. 3.7), нетипичной для сайта, сконцентрированного на конверсии.
Рис. 3.7. Carbonmade использует свою яркую индивидуальность для того, чтобы привлечь новых пользователей
Причудливая индивидуальность и немного пошловатый юмор – детище дизайнера Дейва Горума. Судя по всему, именно эти черты привлекают скептически настроенных дизайнеров и художников, которые пользуются этим приложением. Сам Горум объясняет это так:
Мое правило – добавлять абсурда до тех пор, пока он не отвлечет от главной мысли.
Именно неформальное безумие заставляет пользователей нажимать на кнопку регистрации. Впрочем, градус абсурда постепенно снижается. Мы мажем его толстым слоем на маркетинговую страницу, чуть более тонким слоем – на инструменты, а в самом продукте он просто исчезает. В результате получается гигантская, дурацкая, манящая конфета, ядро которой наделено швейцарской точностью!
Юмор и индивидуальность Carbonmade – что-то вроде перевернутой наоборот прически «маллет»: безумие спереди, а сзади – просто и коротко. Простота внутри самого приложения позволяет пользователям сосредоточиться на работе, а не на усах экранных персонажей. Я опишу этот прием в четвертой и седьмой главах. Неформальный сайт позволяет аудитории чувствовать себя комфортно, подписываясь на услуги. В то же время конкуренты ошибочно полагают, что Carbonmade – сплошное легкомыслие, в котором нет практического смысла.
Непринужденность помогает начать диалог с аудиторией. Мы вроде того придурковатого дружка, с которым так легко общаться и который к тому же способен помочь нам сделать крутое портфолио.
Наша придурковатость успокаивает конкурентов и не дает им воспринимать нас всерьез – а нам того и надо.
Индивидуальность бренда Carbonmade противопоставляет его конкурентам. То есть возникает контраст, который, как я уже говорил, влияет на процесс принятия решений.
Юмор прекрасно работает на индивидуальность Carbonmade, однако он не всегда уместен. Все мы – сложные люди с широким спектром эмоций. Но когда дело доходит до эмоционального дизайна, порой нужно подправить индивидуальность, чтобы соответствовать содержанию и аудитории.
Немногим сайтам удается это так же хорошо, как Housing Works – компании, работа которой ассоциируется с человеческими лицами.
Housing Works: имя и лицо
Индивидуальность сайта не всегда стоит подчеркивать с помощью юмора. В некоторых ситуациях необходима другая тактика.
Housing Works () – некоммерческая организация, цель которой – положить конец СПИДу и бездомности. Каждый день Housing Works меняет чью-то жизнь. Их работа наполнена эмпатией, добротой и верой в обычных людей.
Когда в 2008 году компания Happy Cog () создавала новый дизайн сайта Housing Works (рис. 3.8), она черпала вдохновение в специфике организации и индивидуальности работающих в ней людей.
Рис. 3.8. Housing Works строит взаимоотношения с аудиторией, рассказывая поразительные истории о людях
Ден Молл, ведущий дизайнер Housing Works, говорит об этом так:
Очевидно, что сердце Housing Works бьется благодаря людям, которые работают здесь, и тем, для кого они работают. Главное – тепло и забота. Создавать сайт, который вы видите сегодня, следуя этим критериям, было довольно легко.
Большие фотографии на главной странице и цитаты о том, как Housing Works меняет судьбы, формируют связь между посетителями и организацией. Улыбающиеся лица и истории людей сменяют друг друга, помогая сайту получить прекрасные результаты в сфере человеческого общения.
Кадрирование фотографий формирует эмоциональное восприятие. Когда в кадр попадает только лицо человека, зрители сосредоточиваются на нем, и это вызывает у них душевный отклик. Более широкий охват заставляет зрителей обращать внимание не только на лицо, но и на все, что попадает в кадр. Фотографии на странице Housing Works скадрированы так, чтобы взгляд останавливался именно на лицах запечатленных людей, – это заставляет сопереживать им.
Сила индивидуальности
Подобно тому как наша индивидуальность меняется в зависимости от ситуации, в которой мы оказываемся, должна меняться и индивидуальность разрабатываемых нами проектов. Универсального решения не существует. Если мы перестанем думать об интерфейсах как о скучных панелях управления и начнем воспринимать их как людей, с которыми хочет общаться наша целевая аудитория, мы сможем создать прочные эмоциональные связи.
Но необходимо помнить, что подчеркнутая индивидуальность может кому-то не понравиться, и в этом нет ничего страшного. В мире бизнеса, если индивидуальности сталкиваются лбами, эффект может быть положительным. Если люди не понимают вас, вероятно, они просто не ваши клиенты, – соответственно, вы избавляетесь от проблем в будущем, которые могли бы возникнуть при общении с ними. В седьмой главе я расскажу о том, что делать ставку на индивидуальность – это риск, но практика показывает, что он оправдан.
Сделав индивидуальность основой вашего дизайна, вы сможете впоследствии усилить эмоциональное взаимодействие. Об этом – в следующей главе.