То, что нас объединяет

Есть общая для всех нас черта: мы испытываем эмоции. В книге «Выражение эмоций у человека и животных»

Дарвин писал:

Дарвин считал, что мы идем по жизни с одним и тем же эмоциональным лексиконом. Мы не развиваем эмоции после рождения, наблюдая за окружающими, а рождаемся готовыми выражать боль, радость, удивление, раздражение и другие эмоции. Эмоции необходимы нам, чтобы выжить. С их помощью мы общаемся с теми, кто заботится о нас, а во взрослом возрасте строим взаимовыгодные отношения. Хотя по мере взросления мы развиваем устную речь, эмоции являются нашим родным языком с момента прихода в этот мир. Эмоции – это lingua franca[10] человечества.

Человеческая природа и дизайн

Изучая эволюционную психологию, мы многое узнаём о дизайне и способах эффективной коммуникации с аудиторией. Эволюции подверглось не только тело человека – мозг также отобрал инстинкты, дававшие большие преимущества, и поведение, обеспечивающее выживание вида. Мы называем эти инстинкты человеческой природой. Они, как пресловутый Розеттский камень[11], дают объяснение, почему мы ведем себя так, а не иначе.

Давайте рассмотрим знакомый всем инстинкт и изучим, как он способен помочь нашему дизайну.

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

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

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

Я понимаю, это звучит дико, но ученые полагают, что природа заставила нас умиляться детям, чтобы мы их не убили. Очарование – защита для младенца. Эволюционный биолог Стивен Джей Гоулд в своем эссе A Biological Homage to Mickey Mouse («Микки-Маус: биологический аспект образа») отмечает, что мультипликаторы эксплуатируют этот принцип десятилетиями, создавая персонажей с большими головами, маленькими туловищами и широко открытыми глазами.

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

Вот лишь несколько примеров: Twitter, StickyBits (http://stickybits.com/), Brizzly (http://brizzly.com; рис. 2.1) и MailChimp (http://mailchimp.com).

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

^{Рис. 2.1. Brizzly использует в дизайне стилизованные элементы детских лиц, чтобы понравиться клиентам}

Мир – наше зеркало

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

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

Нам не нужно видеть два глаза и рот, чтобы чувствовать эмоциональную связь. Иногда мы ощущаем присутствие людей благодаря совершенно абстрактным вещам, например пропорциям. Пифагор и древние греки осознали это, открыв золотое сечение – пропорцию, свойственную многим творениям природы, включая человеческое тело. Тысячелетиями мы применяли этот принцип, создавая произведения искусства и архитектуры. Мы можем не осознавать, что золотое сечение присутствует в дизайне таких вещей, как, например, iPod, но наше подсознание сразу замечает идеальные пропорции, присущие и нашему телу. Если вы читали гениальную книгу Роберта Брингхерста The Elements of Typographic Style[12], то знаете, что столетиями художники используют золотое сечение для размещения текста на странице.

Веб-дизайнеры также начали использовать этот принцип. Когда Дуг Бауман и его команда делали новый дизайн Twitter, страница была размечена по золотому сечению (рис. 2.2).

^{Рис. 2.2. Новый дизайн интерфейса Twitter использует золотое сечение для разметки страницы, делая ее более удобной и привлекательной для человеческого глаза}

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

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

Различия: плохо или хорошо?

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

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

Различия бывают:

• визуальными: разница в формах, цветах и т. д.;

• когнитивными: разница воспоминаний или впечатлений.

Узор на шкуре зебры контрастен и помогает ей слиться со стадом, чтобы львы не могли выделить кого-то одного. Когда все разные, никто не выделяется.

Люди используют визуальные контрасты похожим образом. Те, кто (вроде меня) регулярно нарушает скоростной режим, стараются держаться поближе к другим машинам, чтобы полиция не обратила на них внимания. Быстрая езда в одиночку делает вас легкой добычей для полицейских (конечно, я не оправдываю свое поведение – сейчас на моем столе лежат две штрафные квитанции за превышение скорости).

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

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

^{Рис. 2.3. Простая и понятная домашняя страница сайта tumblr ограничивает количество содержимого и эффективно фокусирует внимание пользователя}

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

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

Ограничения процессора

Если вы так же умело обращаетесь с контрастом, как это делает tumblr, интерфейс становится более практичным. Если увеличивать количество контрастных элементов на странице, то пропорционально возрастет и время, затрачиваемое на различение этих контрастов. Увеличение числа элементов заставляет мозг работать на пределе возможностей. Доводилось ли вам когда-нибудь присутствовать на вечеринке, где все вынуждены кричать, чтобы сосед их услышал? Чем громче музыка, тем громче должны говорить люди – и тем сложнее становится общаться. Дизайн работает так же: если вашего внимания требует все вокруг, вы ничего не заметите.

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

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

Контраст не просто формирует наше мировоззрение, он влияет на нашу способность воспринимать абстрактные концепции, например бренды.

Бренд и контраст

Визуальный контраст Tumblr призван направлять пользователей. Аналогичным образом мы могли бы использовать когнитивный контраст, чтобы сформировать у аудитории определенный образ. В этом и состоит главная задача брендинга – создать неповторимый образ, который не позволит перепутать вас ни с кем из ваших конкурентов. Если ваш бренд заметно отличается от других, он непременно запомнится.

Веб-дизайнер Рикардо Местра понимает, какое значение имеет контраст. Его сайт (http://duplos.org) бросает вызов традициям (рис. 2.4).

^{Рис. 2.4. Дизайнерское портфолио Рикардо Местра бросает вызов традициям}

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

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

Власть эстетики

Несмотря на то что tumblr и сайт Местра находятся, что называется, на разных концах спектра, у них есть кое-что общее: и тот и другой доставляют пользователям эстетическое удовольствие. Оба искусно используют цвет, шрифт, масштаб, разметку и пространство. Иными словами, они прекрасно сконструированы. Дизайн часто ошибочно принимают за необязательное украшение функционального интерфейса. Вы наверняка когда-нибудь слышали, как ваши коллеги говорят: «Было бы неплохо обзавестись стильным интерфейсом, но людей больше волнует то, что сайт делает, а не то, как он выглядит». Интересно, пришел бы кто-нибудь из них на собеседование в пижаме, раз важен не внешний вид, а способности? Думаю, если они осмелились бы это сделать, то быстро осознали бы, насколько неправы.

Как говорит в своей книге Emotional Design («Эмоциональный дизайн») первопроходец в области юзабилити Дональд Норман[13], красивый дизайн вызывает в мозгу позитивный эмоциональный отклик, который улучшает наши когнитивные способности:

Норман описывает эстетически-практичный эффект. Привлекательные вещи, как правило, лучше работают.

Многие бренды применяют этот принцип, но лишь некоторые достигли таких высот, как Apple.

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

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

В 2002 году Apple запатентовала так называемый Breathing Status LED Indicator. Каждый, у кого дома есть компьютер Mac, знает, что ноутбуки и моноблоки Apple оснащены индикатором статуса, который начинает мигать при переходе в спящий режим. Дизайнеры Apple поняли, что чаще всего этот индикатор будет виден в пустых офисах, спальнях и гостиных, где станет единственным источником света.

Индикатор пульсирует в строго определенном ритме. Он подражает дыханию человека в состоянии покоя: от 12 до 20 вдохов и выдохов в минуту. Мигание играет ту же роль, что и поглаживание младенца по спине – создает настроение. Как и в случае с золотым сечением в Парфеноне, человек не всегда сможет соотнести мигающий огонек с ритмом своего дыхания, но всегда ощутит его умиротворяющее воздействие. В Apple могли бы сделать индикатор, который просто горит в режиме сна, что было бы вполне оправданно с функциональной точки зрения, но «дышащий» огонек привлекает и успокаивает.

Основа эмоционального дизайна

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

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

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

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

3. Индивидуальность

Краткая история индивидуального стиля в дизайне

Мы наделяем индивидуальным характером все, что создаем, пытаясь очеловечить технику. Когда в середине 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[14]). Мы сумели создать воспоминания, и теперь они напоминают нам о положительных эмоциях, которые дарил этот автомобиль.

Библии Гутенберга и Volkswagen Beetle – интересные примеры, но, пожалуй, нет более наглядного примера очеловечивания дизайна, чем рекламная кампания Apple – Get a Mac. В ролике актер Джастин Лонг предстает в образе Mac’a – молодого хипстера, легко решающего сложные проблемы, в то время как его собеседник – безвольный и скучающий PC в исполнении Джона Ходгмана – справляется с задачами с заметным трудом. В этой рекламе есть эмоциональные переживания, она заставляет потребителя сравнить отношения, которые у них могут возникнуть с компьютером одной и другой модели. Никто не говорит о технических особенностях – вам просто показывают, как чувствует себя тот, кто купил Mac.

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

Моделирование «персонажей»

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

Пример такого «персонажа», показанный на рис. 3.3, создан Тоддом Заки Варфелем, дизайнером из messagefirst (http://messagefirst.com). Это Джулия – собирательный образ определенной группы пользователей. Благодаря ему мы узнаем о ее возрасте, поле, образовании, интересах, понимаем, что влияет на ее решения в отношении нашего проекта – в сущности, мы начинаем более глубоко воспринимать этот образ. Мы замечаем ее индивидуальность, что позволяет нам лучше понять ее мотивацию и выбрать наиболее подходящее для нее дизайнерское решение.

^{Рис. 3.3. «Персонажи» определяют процесс создания дизайна и позволяют фокусироваться на потребностях пользователя}

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

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

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