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

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

Были рассмотрены домашние страницы трех различных сайтов (testflightapp.com / signnow.com / axure.com ). Назначение выполненных от руки рисунков на них – добавить индивидуальности этим сайтам. 46 участникам было задано по три вопроса относительно каждого сайта и получено 529 различных мнений и 306 комментариев к ним. Задавались следующие вопросы:

• Какие элементы дизайна привлекают внимание больше всего? В комментарии укажите почему.
• Что вы думаете о рисунке? В комментарии укажите почему.
• Какие элементы дизайна вы бы удалили? В комментарии укажите почему.

Результаты в двух словах

В общем результат показал, что рисунки выполненные от руки оказали различный эффект на участников:

(1) Во всех трех версиях эти изображения показали свою высокую эффективность в привлечении внимания. Соответственно 52% опрошенных отметили это для Testflight, 62% для Sign now и 79% сказали, что рисунки на axure.com заслуживали их внимания.

(2) Было явно видно, что выполненные от руки рисунки оказывают на людей как позитивное, так и негативное воздействие. Это объяснимо эмоциональной природой таких изображений и соответственно делом вкуса при оценке каждого элемента.

(3) Также выяснилось, что во всех трех версиях рисунок от руки помогает более точно определить назначение сайта и продукта. Однако по вопросу семантической значимости, ценности рисунков мнения разделились.

(4) Позитивного в ответах указано меньше, чем негативного. Для людей труднее сказать что-либо положительное, чем критиковать. В целом было меньше сказано положительного про этих сайтов. Однако участники опроса не выбрали вариант удаления этих элементов, когда их спросили: «Что бы они хотели убрать с ?»

Подробно и с комментариями пользователей

Testflight

Привлечение внимания

Положительные эмоции

• Мне нравится эмоциональный дизайн, очень
• Удачный рисунок
• Мне нравятся такие рисунки
• Стиль рисунка очень привлекательный
• В рисунках сделанных от руки мне нравится факт того, что они очень просты, а не навязчивы и детальны

Отрицательные эмоции

• Я не люблю рисунки от руки. Я считаю, что они усложняют сайт и делают его назойливым
• Я не понимаю такие рисунки. О чем они могут рассказать мне?

Семантическая ценность

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

Sign now

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

Положительные эмоции

• Цвет и стиль картинок поднимают мне настроение
• Забавные изображения
• Мне нравятся рисунки сделанные от руки и они побуждают меня к дальнейшему изучению материала
• Они дают отличное и веселое начало для дальнейшего изучения сайта
• Мне нравятся эти рисунки поскольку они выглядят приятно и я думаю они запомнятся мне
• Незамысловатый стиль рисунков — очень мило

Отрицательные эмоции

• Мне не нравятся эти изображения
• Рисунки от руки — это старомодно
• Мне кажется рисунки несерьёзные, чересчур ребяческие
• Слишком простые, как будто детские рисунки, что не очень профессионально

Семантическая ценность

Привлечение внимания

• Изображение в центре с молнией, это первое что я заметил
• Рисунки действительно привлекают внимание
• Я сначала взглянул на рисунки сайта, может потому, они расположены в центре
• Эти изображения приковали мой взгляд
• Рисунки привлекают внимания потому, что они супер-оживленные, почти агрессивные

Положительные эмоции

• Забавные рисунки
• Забавные персонажи
• Мне нравятся все персонажи (и персонажи для маленьких ролей) на этом сайте
• Рисунки привлекают внимание, возможно даже слишком доминируют
• Мне нравится комбинация 2D & 2D в рисунках. Это дает возможность по новому взглянуть на них

Отрицательные эмоции

• Слишком много всего происходит
• Персонаж UX man выглядит раздражённым и недоброжелательным. У него такой вид, как будто люди вокруг чем-то разочарованы
• Рисунки слишком детские и нелепые
• Мне не понравилось изображение, хотя оно и было первым, что я заметил
• Лично я не люблю стиль рисованных изображений, это слишком примитивно
• UX man выглядит как уборщик туалетов

Семантическая ценность

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

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

Что такое эмоциональный дизайн веб-сайта?

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

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

Эмоциональное присутствие можно найти в нескольких составляющих веб-сайта:

1. Внешний вид . Преобладание мягких, округлых и гладких элементов в дизайне сайта смотрится намного приятное, чем острые углы и рваные отталкивающие формы. Первые эмоции при виде странички зарождаются еще в подсознании, и происходит это очень быстро. Именно поэтому важно в первую очередь сделать акцент на интуитивно правильное восприятие дизайна.
2. Юзабилити (или удобство использования). Главное здесь - грамотно организовать навигацию по сайту, чтобы у пользователя не возникало затруднений и вопросов, куда нажать. Для реализации этого удобнее всего сделать так, чтобы человек видел результат своих действий.
3. Созерцание . Здесь имеется ввиду удовлетворенность после посещения сайта, его запоминаемость. Это осознанная реакция человека по совершенным на сайте действиям, его оценка определенных объектов и их анализ.

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

Как реализовать эмоции в веб-дизайне?

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

• Юмор . Пожалуй, для воздействия на эмоции человека это один из самых действенных методов. Доля шутки, улыбка, смех всегда раскрепощают и невольно заставляют людей чувствовать себя комфортнее. Однако здесь также важно не перестараться, так как что одному будет смешно, другому может показаться оскорбительно. Да и не во всех тематиках юмор вообще уместен.
• Лица . Люди так устроены в большинстве своем, что сами того не понимая, ищут эмоциональную связь с собеседником. Использовать это в дизайне достаточно просто: лица на сайте всегда будут вызывать ответную реакцию, будь то радость сочувствие или огорчение. Иначе говоря, заходя на сайт, подсознательно пользователь ищет другого человека и заряжается от него эмоциями.
• Желания . Это в большей степени касается сайтов, занимающихся продажей товаров и интернет-магазинов. Чтобы вызвать желание приобрести определенную вещь, она должна быть отражена на очень привлекательной картинке, при одном взгляде на которую возникает мысль: «Хочу!»
• Продуманность до мелочей . Желательно проработать каждый элемент дизайна, чтобы сделать его максимально полезным. Но не стоит забывать и о приятных мелочах, способных зацепить или вызвать одобрение и улыбку. Самый простой пример - это оригинальное оформление страницы 404 ошибки . Именно здесь можно отойти от строгости сайта и добавить на нее немного юмора. Или же при нажатии кнопки покупки товара, запуска компании вывести надпись: «Это ваш момент славы!» А еще каждому пользователю будет приятно, если при регистрации у его фото появится надпись: «Хороший снимок!» И таких мелочей очень много, стоит лишь проявить немного креатива.

Вот несколько ярких примеров использования эмоционального дизайна на практике:

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

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

Реальность, с которой все мы сталкиваемся, – это созданные словно по шаблону сайты компаний, интернет-магазины, информационные порталы… Однообразие не лучший инструмент для привлечения клиентов. Эмоции продают!

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

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

От партнера российского издания

«Эмоциональный дизайн» – это название сразу заставило меня вспомнить замечательную книгу Виктора Папанека «Дизайн для реального мира» и не менее интересный документальный фильм Гари Хаствита Objectified (я затрудняюсь найти русский аналог этому слову, столь же емкий по смыслу). Мысленно возвращаясь к этим работам и открывая новую книгу с таким многообещающим названием, я предвкушал интереснейшее чтение. И не ошибся.

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

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

Приятного и полезного вам чтения.