Встраивание эмоций в сайт

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

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

Примерно в это же время вышла в свет книга Аарона Уолтера "Designing for Emotion". В ней Аарон определяет эмоции как родной язык, с пониманием которого рождается каждый человек — своеобразная лингва франка человечества.

Как Норман, так и Уолтер признают эмоции ключом к раскрытию потенциала современного веб-дизайна. В настоящей статье приводятся наиболее ценные выдержки их книг, подобранные Сабиной Айдлер для издания Smashing Magazine.

Три уровня визуального дизайна по Норману

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

В ходе исследования удалось показать, что разные области мозга связаны с разными атрибутами. Они являются причиной, по которой мы можем быть художниками, музыкантами или писателями; они являются причиной существования культуры на основе языка, искусства, юмора и музыки. Применительно к визуальному дизайну три когнитивных уровня по Норману ­это грубый (примитивный), поведенческий и рефлективный. Рассмотрим каждый из них.

Примитивный уровень

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

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

Поведенческий уровень

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

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

Рефлективный уровень

Этот уровень представляет собой высший уровень наших когнитивных мысленных процессов. Действия, инициируемые на этом уровне, Норман называет нисходящим поведением (top-down behavior). Этот уровень является сознательным. На рефлективном уровне мы интерпретируем и понимаем вещи, ищем логику в происходящем и размышляем о себе. Рефлективный уровень является результатом приобретения опыта и доминирует над двумя другими уровнями. Это означает, что в результате размышлений мы можем брать верх над автоматическим поведением и эмоциями.

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

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

Внешний облик дизайна работает только с примитивным уровнем. Поведенческий уровень соотносится с тем, как продукт работает, а рефлективный уровень — с долгосрочным влиянием дизайна. Правильно объединив все три уровня, вы получите дизайн, который:

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

Встраивание эмоций в графический дизайн

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

Юмор

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

В книге "Designing for Emotion" Уолтер приводит в качестве иллюстрации шимпанзе Фредди, который является талисманом сервиса почтовых рассылок MailChimp. Уолтер описывает Фредди как дружелюбное существо, которое приветствует пользователей и вызывает у них ощущение уюта. Фредди прекрасно отражает собой основные характеристики бренда: он вызывает доверие, прост и неформален, но при этом не производит впечатление дурашливого персонажа. Юмор может сыграть на вовлечение посетителей, но не должен их раздражать.

Узнавание

По природе мы ищем эмоциональных связей с другими. В своей книге Уолтер объясняет: мы знаем себя настолько хорошо, что пытаемся соотносить с собой всё увиденное. Мы можем даже соотносить себя с веб-дизайном, в котором нет ярко выраженных человеческих черт. Вполне достаточно человеческих пропорций (золотого сечения) для того, чтобы дизайн воспринимался как знакомый и гармоничный.

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

Узнавая себя в дизайне, мы ощущаем, что имеем дело не просто с набором кода и картинок. Мы чувствуем присутствие человека, что даёт ощущение комфорта и привязанности. Уолтер описывает «личность» сайта как ключ к созданию более человечного дизайна.

Диссонанс

Ещё одна черта, которая характеризует нас как людей — склонность к поиску закономерностей. Закономерности помогают нам понимать, что и как работает; они позволяют нам получать представление о том, чего следует ждать, а понимание этого вызывает ощущение комфорта. В статье "Brains Agree: The Case for Website Usability Guidelines" Тодд Фолленсби (Todd Follansbee) предлагает отличное объяснение того, почему вы обожаем закономерности и почему ищем их в Сети.

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

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

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

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

Интонации

Важным эмоциональным фактором является то, какие интонации вы используете в текстах на сайте — они говорят о том, как вы относитесь к читателям и на какое отношение к себе рассчитываете. Немецкий психолог Фридеманн Шульц фон Тун проиллюстрировал разные уровни сообщения при помощи своей модели четырёх каналов — информации (факты и данные), воззвания (призыв к действию), отношения и откровения (передача «Я» говорящего).

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

Вовлечение

Даже у хорошего и продуманного сайта может быть высокий показатель отказов, низкая конверсия и т.д. В презентации "The Art and Science of Seductive Interactions" («Искусство и наука соблазняющего взаимодействия») Стивен Андерсон (Stephen Anderson) показывает, как люди, работающие на вовлечение, помогают строить отношения и позитивный опыт взаимодействия.

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

Неплохим примером познавательного и при этом интерактивного сайта является slaveryfootprint.org. Покрутив разные ручки и пощёлкав кнопки несколько минут, пользователь получает примерную оценку того, сколько рабов в странах третьего мира незаметно работают на его благополучие.

В заключение

«Эмоциональный дизайн превращает обычных пользователей в фанатиков, готовых всем рассказывать о приобретённом опыте.»

Подведём итоги.

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

Статья подготовлена по материалам публикации "Not Just Pretty: Building Emotion Into Your Websites".