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

Тема эмоционального дизайна становится популярнее каждый день. О ней пишут в блогах и литературе. Наиболее значимые работы в данной области — книги «Emotional Design» Дональда Нормана и «Design for Emotions» Аарона Уолтера (вариант книги есть и на русском языке). Этот метод или стиль создания сайтов действительно важен, ведь он обеспечивает отличный опыт для пользователей, а это благотворно влияет на конверсию и бизнес в целом.

Примеры

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

Безэмоциональный дизайн

Самые безэмоциональные примеры веб-дизайна легко найти среди сайтов банков. Посмотрите на представленные ниже примеры. У Chase, Bank of America и Capital One безликие и устаревшие сайты, которые не вызывают никаких положительных эмоций.

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

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

Теперь давайте взглянем на сайты Simple, AmericanWest Bank и Moven. Эти ресурсы также посвящены финансовой тематике, а два из них — сайты банков. Они используют эмоциональный веб-дизайн себе на пользу. Давайте рассмотрим их подробнее, чтобы понять как им это удается.

Прозрачность опыта

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

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

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

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

Увлекательный скроллинг

У сайта AmericanWest Bank трендовый дизайн. Он цепляет тем, что выглядит действительно хорошо. Первое, что вы видите на сайте — большое фото. Это свежее решение, ведь большинство сайтов банков выглядят совсем иначе. Решение интересно и необычно. У многих банков в худшем случае устаревший дизайн сайтов, а в лучшем — просто безликий. А вот AmericanWest Bank выбрали отличный способ доставить удовольствие посетителям своего веб-представительства. На этом сайте пользователь думает о себе, а не о назойливых предложениях банка. Это подкупает с первой минуты.

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

Финансовая история

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

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

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

Автор статьи Paula Borowska

Перевод — Дежурка

Смотрите также:

• Эмоциональный веб-дизайн: советы и примеры
• Как превратить случайного посетителя в фаната вашего бренда
• Книги по веб-дизайну на русском языке