Как микровзаимодействия улучшают UX
Микровзаимодействия играют большую роль в жизни цифровых продуктов, даже если мы не всегда замечаем их. Ваш телефон будит вас по утрам, оповещает вас о публикации новых постов друзей с фэйсбук, чтобы вы могли поставить им лайк, оповещает о новых письмах или о сообщениях в инстаграм — незаметно для себя мы встречаем микро-взаимодействия на протяжении всего дня.
Это то, над чем работают продукт-дизайнеры. Проектируя и создавая новые вещи, не забываем ли мы о возможности удивить и удовлетворить нашего пользователя? С каждой новой версией дизайна какого-либо продукта мы добавляем небольшую анимацию и затем дополняем её для увеличения взаимодействия и пользовательского опыта.
Что такое микровзаимодействия?
Микровзаимодействия — это еле заметные моменты, когда пользователь и цифровой продукт взаимодействуют между собой. Когда микровзаимодействия сделаны хорошо — они усиливают опыт пользовательского взаимодействия. Когда микровзаимодействия сделаны плохо — опыт пользовательского взаимодействия держится только на хорошо спроектированном цифровом продукте.
Согласно Дэну Стафферу, дизайнеру и автору книги «Микро-взаимодействия: проектирование в деталях», микровзаимодействия — это «моменты содержащиеся в диджитал-продуктах существующие ради единоразового использования». Это виды взаимодействия, которые мы едва заметим, пока они себя не проявят. Такие вещи как кнопка «Лайк» в Facebook’е, текстовый курсор в чате, или даже действие которые мы делаем неосознанно, когда хотим обновить страницу, будь то новостная лента в приложении или веб-страница. Всё это микровзаимодействия, которые мы встречаем каждый день, именно они создают и меняют наши поведенческие шаблоны.
Схема микровзаимодействий
Микровзаимодействия делятся на четыре составляющие:
- Триггеры говорящие о микровзаимодействии. Они могут быть инициированы пользователем или системой. При инициации пользователем, пользователь замечает триггер и совершает действие. При инициации системой — система проверяет выполнение условий и совершает действие.
- Правила определяют, что произойдёт, когда срабатывает микровзаимодействие.
- Правила определяют, что произойдёт, когда срабатывает микровзаимодействие.
- Обратная связь даёт понимание пользователю о том, что происходит. Всё что пользователь видит, слышит или ощущает в процессе микровзаимодействия и является обратной связью.
- Повторения и режимы определяют метаправила микровзаимодействия. Что происходит с микровзаимодействием при изменении условий?
Почему микровзаимодействия такая важная часть в дизайне цифрового продукта?
Иногда во время создания продукта мы забываем какова наша основная цель на самом деле. Наша цель: менять человеческое поведение. Мы создаём цифровой продукт для использования его людьми более одного раза. Мы хотим, чтобы они использовали наш продукт часто и многократно, чтобы это вошло в их привычку. Привычка — это ключ к изменению человеческого поведения, и как раз-таки микровзаимодействия помогают сформировать привычки.
Хороший дизайн — это то, за что мы боремся здесь. Чтобы найти возможности для микровзаимодействия (и формирование пользовательского опыта) в нашем дизайне. Мы должны сфокусироваться на деталях в наших продуктах. Особенности и фишки продукта — заинтересовывают пользователей, но именно детали продукта вызывают желание пользоваться этим продуктом ещё и ещё. Если микровзаимодействия привлекают внимание пользователя вне рабочих процессов продукта — значит что-то пошло не так.
Микровзаимодействия увеличивают пользовательское вовлечение относительно низкой стоимости. Люди всегда желают получить по максимуму при минимальных затратах. Если вы проектируете пользовательский опыт таким образом, что пользователь при достижении цели испытывает немного радости или удовольствия, значит вы даёте пользователю что-то действительно значимое. Именно это возвращает людей обратно к продукту.
Что делает микровзаимодействия успешными?
Успешные микровзаимодействия слегка заметны ещё до того, как они исчезнут. Так же, как и хорошую анимацию, которая невидима, вы не заметите и микровзаимодействия. Они должны быть небольшими и незаметными. Они создают невидимое общение с пользователем и всегда следуют правилам цифрового продукта, так что, когда бы ни зашёл пользователь он всегда будет знать, что ожидать.
Тем самым микровзаимодействия на протяжении всего пути пользования «экономят» время пользователя, не давая ему скучать и отвлекутся на что-то. Они должны ненадолго привлечь внимание пользователя и затем исчезнуть.
Вот прекрасный пример микровзаимодействия на практике:
Иногда нужно немного времени, прежде чем предоставить вашему пользователю информацию, которую он хочет — например экран загрузки. И вместо белого экрана, почему бы вам не проинформировать пользователя о том, что происходит в данный момент. Прогресс бар привлекает внимание пользователя и препятствует его замешательству «Нажал ли я это кнопку?!»
Подобно тому как микровзаимодействия должны пережить долгое использование. Что оказывается весёлым и интересным в первое время использования, может стать надоедливым после ста использований. Но будьте внимательны и не допускайте бесконечных повторений визуального шума, отнимающего время бессмысленных анимированных перерывов.
Несколько советов по использованию микровзаимодействий для улучшения пользовательского опыта (UX)
Следуйте этим основным принципам при проектировании интерфейса и внедрению микровзаимодействий, и вы будите на верном пути к большому воздействию на пользовательский опыт.
- Не давайте вашему пользователю скучать. Держите его в курсе событий, по крайне мере визуально.
- Делайте проще. Приставка «микро» в слове микровзаимодействия стоит неспроста.
- Если вы используете анимацию для изменения страницы или её состояния, то переход от должен быть понятным, плавным, и не требующий усилий (лёгким).
- Фокус на эмоциях пользователя. Играет большую роль в пользовательском взаимодействии и в формировании пользовательских привычек.
- Будьте предсказуемы. Пользователи ждут привычных действий. Микровзаимодействия — это не то место где можно пытаться изменить давно установленные модели поведений или привычки, подобно тому как светит светофор: «зелёный» — иди, «красный» — стой.
Данная статья является переводом. Автор оригинала: Will Fanguy
Страница оригинала: https://www.invisionapp.com/inside-design/use-microinteractions-improve-ux-design/
