Как микровзаимодействия в интерфейсе влияют на взаимодействие с пользователем

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

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

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

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

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

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

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

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

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

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

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

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

Гораздо эффективнее предоставить пользователю всю нужную ему информацию:

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

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

Прыгающий call-back — этот вид «Просьбы», был эффективен, но лишь тем пользователям, кто не до конца осознавал опыт взаимодействия на сайтах. Сейчас же данный вид прыгающих, мигающих или светящихся элементов помогает в взаимодействии только людям мало имеющим отношения к пользованию интернетом.
У нас, лично, данный элемент на сайте вызывает дикое желание тянуться мышкой к кнопке закрытия вкладки и больше не появляться на этом ресурсе.

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

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

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

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

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

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

На примере ниже находится шапка официального сообщества «Хабра» Вконтакте.

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

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

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

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

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

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

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

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

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

Не все мы любим заполнять поля на найденных веб-ресурсах, чтобы зарегистрироваться или войти на сайт. Автозаполнение ведет за собой приятный пользовательский опыт, который облегчает и ускоряет обыденное действие. Автозаполнение можно назвать микровзаимодействием, а кнопку «использовать автозаполнение» — просьбой. Данная просьбы один из лучших примеров, пользователь получает удовлетворение своих потребностей благодаря единому нажатию кнопки.

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

Например: на «Хабре», при отправке письма подтверждения аккаунта на почту, происходит загрузка отправки, обозначающая, что действие обрабатывается.

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

На примере ниже мы наблюдаем такую же картину только на странице «Настройка ключницы».

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

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

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

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

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

Играйте на принципах построения, заложенных в ассоциативных действиях с определенными элементами.

Каждая мелочь достойна глубокого аналитического и логического разбора в взаимодействии с пользователем:

• эмоциональная нагрузка;
• эмоция доносимой информации;
  
• безболезненность производимых действий.
  

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

#анимация #интерфейсы