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

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

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

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

 Четыре столпа микровзаимодействий

У микровзаимодействий 4 важных компонента: триггер, правила, обратная связь и циклы+режимы.

  • Триггер инициирует микровзаимодействие. Он может быть ручным действием, например, иконкой, на которую нужно кликнуть, чтобы что-то произошло. Или может быть встроен в систему и возникает, когда действие уже завершено. Например, звук, который вы слышите, когда получаете сообщение — результат системного триггера.
  • В микровзаимодействиях запрограммированы правила, суть которых заключается в том, можно или нельзя сделать то, что вы пытаетесь. Так как эти правила не всегда очевидны пользователю, информацию, можно сделать что-то или нет, мы получаем с помощью обратной связи.
  • Обратная связь помогает понять, что микровзаимодействие прошло успешно. Например, вибрация после перевода телефона в беззвучный режим. Без обратной связи вы не поймёте, получилось отключить звук или нет.
  • Циклы и режимы — финальная стадия микровзаимодействия. Циклы определяют, как долго оно будет длиться (вспомните вращающуюся при загрузке иконку). Режимы отвечают за персональные данные, которые нужны для продолжения процесса (например, получение информации о местоположении для определения погоды).

Lunch_Time_87_7

Советы по созданию микровзаимодействий

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

  • В начале работы вы уже должны иметь представление о конечных пользователях и платформе, на которой будет реализован ваш проект;
  • Вы должны учитывать ошибки, которые может совершить пользователь, и предотвращать их.
  • Избегайте беспорядка. Не придумывайте новые элементы, а используйте уже существующие;
  • Говорите с пользователями на их языке;
  • Убедитесь, что микровзаимодействия пройдут проверку временем. Нет ничего хуже микровзаимодействий, которые с каждым триггером становятся всё назойливее. Остерегайтесь всего, что кажется слишком сложным или перегружено анимациями;
  • Используйте анимацию разумно. Она не должна мешать основному действию. Пример — дрожание иконок на iPhone, когда вы хотите их удалить. Это мило и не мешает достижению основной цели;
  • Не забывайте про теорию цвета. Контраст может подчеркнуть специфический процесс или действие, но также может отвлечь. Микровзаимодействия — маленький элемент общего дизайна, который они не должны нарушать;
  • Наконец, определитесь: будет ли микровзаимодействие меняться в процессе использования? Имеет ли смысл менять его время от времени или лучше не трогать? 

Lunch_Time_87_8

Микровзаимодействия в социальных медиа и приложениях

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

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

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

Микровзаимодействия в CTA-дизайне

Микровзаимодейсвия хороши для призыва к действию (Call to action) в дизайне. Они распространены в этой сфере, но очень однообразны и выглядят, будто их делал один человек. В связи с этим не возникает проблем с их узнаванием. Но необычные CTA-элементы с уникальными микровзаимодействиями можно использовать, чтобы стимулировать пользователя нажать, поделиться и лайкнуть. Так в привычное действие можно добавить элемент игры.

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

Вывод: взаимодействия — микро, а польза — макро. В общем, хорошая штука, берите две.
Вы сэкономили: 5 минут.

Оригинал статьи: Methods for Using Micro-Interactions on Your Site

Комментариев 0

Добавить комментарий