Как микровзаимодействия улучшают UX

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

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

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

by Mike | Creative Mints

Согласно Дэну Стафферу, дизайнеру и автору книги «Микро-взаимодействия: проектирование в деталях», микровзаимодействия — это «моменты содержащиеся в диджитал-продуктах существующие ради единоразового использования». Это виды взаимодействия, которые мы едва заметим, пока они себя не проявят. Такие вещи как кнопка «Лайк» в Facebook’е, текстовый курсор в чате, или даже действие которые мы делаем неосознанно, когда хотим обновить страницу, будь то новостная лента в приложении или веб-страница. Всё это микровзаимодействия, которые мы встречаем каждый день, именно они создают и меняют наши поведенческие шаблоны.

Схема микровзаимодействий

Микровзаимодействия делятся на четыре составляющие:

  1. Триггеры говорящие о микровзаимодействии. Они могут быть инициированы пользователем или системой. При инициации пользователем, пользователь замечает триггер и совершает действие. При инициации системой — система проверяет выполнение условий и совершает действие.
  2. Правила определяют, что произойдёт, когда срабатывает микровзаимодействие.
  • Правила определяют, что произойдёт, когда срабатывает микровзаимодействие.
  1. Обратная связь даёт понимание пользователю о том, что происходит. Всё что пользователь видит, слышит или ощущает в процессе микровзаимодействия и является обратной связью.
  2. Повторения и режимы определяют метаправила микровзаимодействия. Что происходит с микровзаимодействием при изменении условий?

Почему микровзаимодействия такая важная часть в дизайне цифрового продукта?

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

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

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

Что делает микровзаимодействия успешными?

Тем самым микровзаимодействия на протяжении всего пути пользования «экономят» время пользователя, не давая ему скучать и отвлекутся на что-то. Они должны ненадолго привлечь внимание пользователя и затем исчезнуть.

Вот прекрасный пример микровзаимодействия на практике:

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

Иногда нужно немного времени, прежде чем предоставить вашему пользователю информацию, которую он хочет — например экран загрузки. И вместо белого экрана, почему бы вам не проинформировать пользователя о том, что происходит в данный момент. Прогресс бар привлекает внимание пользователя и препятствует его замешательству «Нажал ли я это кнопку?!»

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

И ещё один пример микровзаимодействия

Несколько советов по использованию микровзаимодействий для улучшения пользовательского опыта (UX)

  • Не давайте вашему пользователю скучать. Держите его в курсе событий, по крайне мере визуально.
  • Делайте проще. Приставка «микро» в слове микровзаимодействия стоит неспроста.
  • Если вы используете анимацию для изменения страницы или её состояния, то переход от должен быть понятным, плавным, и не требующий усилий (лёгким).
  • Фокус на эмоциях пользователя. Играет большую роль в пользовательском взаимодействии и в формировании пользовательских привычек.
  • Будьте предсказуемы. Пользователи ждут привычных действий. Микровзаимодействия — это не то место где можно пытаться изменить давно установленные модели поведений или привычки, подобно тому как светит светофор: «зелёный» — иди, «красный» — стой.

Данная статья является переводом. Автор оригинала: Will Fanguy
Страница оригинала: https://www.invisionapp.com/inside-design/use-microinteractions-improve-ux-design/

--

--

UI designer who codes on a freelance basis. I’m on my way to become a UX (Product Designer) in a large company.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
azamat.design/

UI designer who codes on a freelance basis. I’m on my way to become a UX (Product Designer) in a large company.