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


Еще совсем недавно разработчики были настолько увлечены внутренней адаптацией к Сети, что на какое-то время совсем упустили из виду внешний вид сайтов, делая их практически безликими. Если бы не Дон Норман (Don Norman) и его книга «Эмоциональный дизайн»> (Emotional Design), вполне возможно, что мы бы и по сей день концентрировались лишь на улучшении функциональности, игнорируя потенциал эмоций в веб-дизайне.

Чтобы получить большее представление о идеях Дона Нормана советую посмотреть этот ролик

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

Существует целых три уровня эмоционального дизайна:

1. Интуитивное восприятие (внешний вид)

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

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

2. Удобство (юзабилити)

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

Страница логина MailChimp — отличный пример приятной страницы с отличным юзабилити.

3. Созерцание (личная удовлетворенность, размышления, память).

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

Например, дизайн griblandiya.ru заставляет вести анализ, проводить некую аналогию с современной географической картой мира и искать в этом какие-то сходства.

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

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

Простой, но запоминающийся дизайн — bagigia.com

Реализация эмоций в веб-дизайне

Веб-сайт обычно включает в себя несколько элементов, которые помогают сделать его более ярким и рассматривать в качестве «носителя» той или иной эмоции. Некоторые элементы достаточно очевидны: формы, цвета, градиенты, контраст и т.д. Однако давайте остановимся на менее явных приёмах.

Юмор

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

dmitryshadrin.ru — Дмитрий в плане юмора оттянулся по-полной

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

Распознавание

Человек устроен так, что постоянно (порой даже неосознанно) ищет эмоциональную связь с другим человеком. Вот почему изображения лиц способствуют внутренним переживаниям — радости или огорчениям. Иными словами, человек подсознательно ищет на сайте лицо другого человека, и это лицо способно зарядить эмоциями.

Пример cpeople.ru эмоционально насыщен и вызывает положительные эмоции:

И ещё пример

Желание

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

Сочный и яркий сайт ресторана: kafesoyuz.ru

И пример свадебной тематики

Приятные мелочи

Где же ещё можно разгуляться, как не на игре с мелочами? Приятные мелочи могут «зацепить» человека на эмоциональном уровне. Вот пара примеров, чтобы вы поняли, что я пытаюсь сказать:

Самое элементарное место, где можно показать своё внимание к мелочам — это страница 404. Например, на хабре

Второй пример — страница запуска компании в MailChimp. Под кнопкой написана фраза “This is your moment of glory”, означающая важность этого события

Ну и наконец многими любимый Pinterest. На странице ввода логина и пароля используюстся небанальные фразы “Looks good!”, вызывающие положительные эмоции и расположение

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

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

И наконец… что почитать?

Есть отличная книга, где подробно рассказывается о эмоциональном веб-дизайне — книга Аарона Уолтера «Эмоциональный веб-дизайн».

Если вас данная тематика заинтересовала, обязательно прочтите.


© Найко Михаил для PRO веб-дизайн, 2012.