Краткое руководство по микровзаимодействиям в дизайне

Автор: Ольга Маркова

Автор Freelance.Today

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

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

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

Что такое микровзаимодействия?

СХЕМА РАБОТЫ МИКРОВЗАИМОДЕЙСТВИЙ

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

Три основные задачи микровзаимодействий:

• Не допустить ошибки пользователя;
• Сообщать о результате действий;
• Подтолкнуть выполнить конкретную задачу.

Три основы микровзаимодействий

При работе с микровзаимодействиями возникают три фундаментальных вопроса:

• Что может случиться?

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

• Что происходит сейчас?

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

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

• Что уже произошло?

После выполнения микровзаимодействия пользователь должен знать результат действия, например, кнопку «Follow» в Instagram.

Как работают микровзаимодействия

Микровзаимодействия можно разбить на четыре компонента:

Триггер

Триггерызапускают взаимодействие. Есть два типа триггеров:

• срабатывает по инициативе пользователя (или срабатывает вручную)
• системные триггеры

Ручные триггеры активируются при намеренном взаимодействии с продуктом. Например: нажатие кнопки или встряхивание телефона.

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

Правила

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

Обратная связь

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

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

Цикл — это продолжительность микровзаимодействий.

Будут ли микровзаимодействия повторяться? Например, вы получите электронное письмо с просьбой подтвердить свой номер телефона или ввести код из SMS или электронного письма при регистрации. Это действие занимает определенное время, и если оно завершится, вы будете проинформированы об этом.

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

Преимущества микровзаимодействий

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

Упростите навигацию

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

Сделайте ваш продукт запоминающимся

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

Вспомните значок у Facebook «Нравится». Это маленькое анимированное микровзаимодействие стало визитной карточкой компании.

Микровзаимодействия в UX делают его ощутимым

По мнению Дэна Саффера, успех цифровых продуктов определяется мелочами.

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

Разрешить пользователю контролировать ситуацию

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

Советы по разработке микровзаимодействий для улучшения UX

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

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

Заключение

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

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

Источник