Отклик и эмоциональность сайта

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

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

А в этом материале рассмотрим лишь некоторые принципы проектирования отклика сайта.

Сайт должен реагировать на действия пользователя

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

Отклик сайта — это его реакция на действия пользователя или на наступление определенного события.

Наиболее типичными действиями пользователя на сайте являются:

  • прокрутки,
  • наведения курсора,
  • нажатия,
  • заполнение форм.

Каждое из этих действий может приводить к реакции сайта.

Действия при прокрутке

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

Но на одной лишь реакции на прокрутки можно построить очень насыщенный опыт просмотра. Например, на сайте https://kubrick.life от украинской веб-студии Tubik Studio, посвященном 90-летию режиссера Стэнли Кубрика, все взаимодействия построены именно на действии прокрутки. И этого одного действия оказалось вполне достаточно, чтобы превратить проект в лауреата премий Webby Awards и Red Dot Award.

Наведение курсора

Наведение на элемент — это одновременно и способ показать интерактивную природу элемента, и самостоятельное действие.

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

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

На мобильной версии взаимодействие по наведению заменяется взаимодействием нажатием.

Действия при нажатии

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

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

Действия при заполнении форм

Заполнение и отправка форм — это интерактивные объекты, которые выполняют ключевые задачи данного сайта.

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

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

Наиболее важно в этом контексте:

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

Добавьте на сайт анимации

Современные версии HTML, CSS, JS позволяют использовать много интересных визуальных решений. Простые анимации являются базовой составляющей CSS3, и поэтому не требуют значительных усилий в реализации. Благодаря им в интерфейсе появляется ощущение плавности.

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

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

Ярким примером этого могут быть подсказки, которые возникают при первом открытии интерфейса. Помните? Мы отмечали, что для обеспечения удобства веб-сайтов крайне важна скорость восприятия. Анимации — это отличный способ ее обеспечить, ведь они более наглядны, чем текст.

Но анимации способны не только ускорить рациональное восприятие информации. Они также помогают придать действию эмоциональную составляющую. Например, одним из символов сервиса почтовых рассылок MailChimp является обезьянка-почтальон. Мало кто это знает, но у нее есть имя — Фредерик фон Шимпенгаймер IV (или сокращенно Фредди).

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

Такая анимация, согласитесь, гораздо быстрее передает ощущение важности действия, чем фраза вроде: «Внимание! Отправка рассылки является необратимой действием».

Но, когда дело сделано, нагнетать здесь ни к чему. Поэтому когда рассылка отправлена, то и сама рука Фредди дает вам «пять».

Звук

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

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

Звуки оправданы в таких случаях:

  • На сайте есть оповещения (например, о том, что кто-то ответил в чате).
  • При удачной отправке формы.
  • Если произошла ошибка.

Персонажи

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

Вы могли сами в этом убедиться. У нас есть целая куча персонажей в Креативной Практике.

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

Вот, например, в каждом модуле мы показываем небольшое сообщение. И в нем есть наш персонаж — дизайнер Маричка.

Просто посмотрите на это же сообщение без нее.

В завершение

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

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

Помните об этом и не забывайте наполнять ваши проекты эмоциями. Пользователи это обязательно оценят.

·
1102
·
super 4
Головна