Микровзаимодействия в дизайне: детали, о которых не стоит забывать

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

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

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

Микровзаимодействия: это необходимость или блажь?

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

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

• Повышают вовлеченность. Эффект резиновой ленты, динамические иконки и другие визуальные эффекты делают процесс взаимодействия с сайтом гораздо более увлекательным, увеличивают глубину просмотра и положительно влияют на количество времени, которые посетитель проводит на вашем портале. Отвечая на вопрос, что такое микровзаимодействия, профессионалы в первую очередь отметят, что это детали для улучшения пользовательского опыта;
• Делают навигацию интуитивной. Микроанимации, как хлебные крошки, подсказывают пользователю правильный путь к цели – выполнению определенного действия. Это особенно важно для тех, кто вошел на портал впервые и пока не разобрался с его функционалом и меню. Так, подсветка полей формы может указать на ошибку во введенных данных, а подсветка кнопок – предложить правильное решение;
• Подтверждают действия. Посетителю ресурса, особенно если речь идет об оформлении заказа или других важных действия, важно знать, что площадка работает как нужно. Индикатор загрузки или навигация прокрутки – своеобразная обратная связь, которую пользователь получает от сайта в моменте. Использование таких элементов способно снизить количество отказов в несколько раз;
• Снижают когнитивную нагрузку. Поверьте: ни одному человеку не захочется напрягаться для того, чтобы получить результат, особенно если речь идет о получении информации в Сети. Пользователь скорее закроет площадку, чем будет разбираться в том, куда и как нажать, чтобы оформить заказ именно у вас, и отправится к конкурентам, у которых все гораздо проще и понятней. Нужно помочь такому посетителю стать вашим клиентом, сделав процесс понятным и увлекательным. Для этого и нужны микровзаимодействия;
• Укрепляют эмоциональную связь с брендом. Теплые оттенки микроанимаций и приятные звуки сигналов, используемых на вашем портале, несомненно вызовут положительные эмоции у юзеров. Это, в свою очередь, укрепляет позитивный имидж компании и повышает лояльность клиентов. Соответствующие айдентике микроанимации привлекают внимание, вызывают восторг, и заставляют возвращаться на сайт снова и снова.

Настройка микровзаимодействий. Важные факторы, которые нужно учитывать

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

Продолжительность

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

Триггеры

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

Правила

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

Циклы и режимы

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

Визуальная и звуковая обратная связь

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

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

Топ–5 микровзаимодействий на все случаи жизни

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

Спиннер или индикатор загрузки

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

Анимация при завершении действия

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

Подсказки и хлебные крошки

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

Контроль ошибок

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

Первый старт

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

Обычно для анимирования отдельных объектов и добавления на сайт визуальных эффектов используют сторонние платформы. Вдохнуть в сайт жизнь могут такие приложения и сервисы, как After Effect, Origami, Adobe XD. Если вы работаете над своим проектом в конструкторе Taptop, задача упрощается в разы, ведь любые микровзаимодействия с интерфейсом здесь можно добавить и настроить в Визуальном редакторе. О том, как работать с анимированными эффектами, мы подробно рассказали в Базе знаний. Здесь же вы найдете видео о настройке микровзаимодействий по определенным триггерам, советы по копированию эффектов и другую полезную информацию.