Моушн-дизайн в веб-интерфейсах как инструмент микровзаимодействия с сайтом

Движение всегда привлекает внимание, именно поэтому моушн-дизайн – отличный маркетинговый инструмент. Но как с его помощью улучшить UX? Мы в Friflex работаем над созданием высоконагруженных сайтов и сервисов, поэтому нам важно создавать уникальный пользовательский опыт, который помогает решать задачи бизнеса.

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

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

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

Микровзаимодействия должны быть не только удобными и привлекательными. Главное, чтобы они органично вписывались в единый дизайн сайта. Поэтому работой над анимацией интерфейса занимается UX/UI-дизайнер. Он продумывает механику: для каких ситуаций требуются микровзаимодействия и какими должны быть эффекты. После разработки и утверждения концепции к проекту для создания анимации подключается моушн-дизайнер. Давайте более подробно разберемся, что представляют собой микровзаимодействия, и как они функционируют в веб-интерфейсе.

Микровзаимодействия – это тонкие анимации или изменения дизайна сайта на основе пользовательского опыта (действий). Эти детали могут сделать взаимодействие с продуктом более легким и приятным.

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

1) Сначала триггер запускает микровзаимодействие. Он может быть вызван, например, щелчком мыши или изменением в системе, как завершение загрузки файла.

2) Правила указывают системе, что делать. Когда пользователь делает X, происходит Y.

3) Обратная связь — это то, что уведомляет пользователя о действии. Когда вы нажимаете кнопку «Мне нравится» на Facebook (триггер), вы получаете анимацию большого пальца вверх (обратная связь), подтверждающую это действие.

4) Циклы и режимы – это правила, работающие после выполнения действия. Они указывают системе следует ли ей повторить (циклы) или остановить (режимы) действие. Оповещение управляется циклом. Оно продолжается до тех пор пока пользователь с ним не взаимодействует. Анимация наведения курсора — это режим. Как только курсор уходит, микровзаимодействие прекращается.

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

Эффект свайпа

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

Эффект нажатия и удержания

С помощью бегунка пользователь может выбрать подходящую оценку.

Прокрутка

Тип анимации, который показывает действие, как в живом мире.

Прогресс бар

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

Ошибки

При визуальном информировании об ошибке пользователь сразу понимает, на что ему нужно обратить внимание.

Изменение состояния кнопки

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

Эффект наведения мыши / наведения курсора

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

Системная обратная связь

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

Переходы между страницами (затухание, взрыв и т.д.)

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

Простые, но эффектные микровзаимодействия можно сделать в Figma. Давайте разберем два примера, как сделать кнопку покупки и заставку экрана.

Как сделать заставку экрана:

1. Для начала добавляем картинку с подложкой в фрейм.
2. Копируем этот фрейм и растягиваем подложку на весь экран.
3. Добавляем текст на второй фрэйм со 100% заливкой, а на первом вставляем этот же текст с 0% заливки цвета.

4. Теперь переходим к самому интересному. Чтобы добавить анимацию:

- нажмите режим Prototype;
- протяните стрелку от первого экрана ко второму и выберите Smart animate, Ease in and out;
- поставьте тайминг на 1500ms, а затем то же самое повторите от второго к первому экрану.

Готово! Можно смотреть в Present.

Как сделать анимацию кнопки:

1. Сначала готовим элементы для кнопки: иконки, текст и подложку. У меня градиентный прямоугольник.

2. Собираем кнопку, создаём маску, чтобы спрятать иконку над кнопкой. Она пригодится на следующем шаге.

3. Копируем фрейм, раздвигаем элементы по сторонам за пределами кнопки и достаем иконку, которую спрятали.

4. Анимация кнопки:

- переходим в режим Prototype;

- протягиваем стрелку от первого экрана ко второму и выбираем Smart animate, Custom: тайминг на 600ms, повторить от второго экрана к первому.

Готово! Можно смотреть в Present.

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

Кнопка "Мне нравится” на Facebook стала частью бренда.

Больше примеров микровзаимодействий можно найти в Google Material.

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

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

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

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

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

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