Сибирикс

Роль микровзаимодействий на сайте

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

Один из примеров микровзаимодействий — в iOS7 иконка приложения показывает текущее время

Микровзаимодействия могут самым положительным образом сказаться на впечатлениях пользователей о вашем сайте. Дэн Саффер (Dan Saffer) в своей статье «Improve Your Websites With Microinteractions» объясняет, что представляют из себя эти самые микровзаимодействия и как эффективно их использовать.

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

Микровзаимодействия: что это?

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

Например, знали ли вы, что разблокировать iPhone можно не только при помощи «Slide to Unlock», но и проведя по значку Push-уведомлений? По мнению Джареда Спула (Jared M. Spool), многие пользователи смартфона узнали об этой функции от своих знакомых.

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

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

IMDB использует юмор и тему из фильма в своем сообщении обратной связи

Почему важны микровзаимодействия?

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

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

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

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

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

Роль триггеров в микровзаимодействиях

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

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

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

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

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

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

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

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

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

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

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

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

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

Получение обратной связи

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

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

Что делать, если ничего не происходит? Может, вы потянули не достаточно далеко? Отвалился интернет или вовсе эта функция не работает?

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

На YouTube есть умное правило: когда пользователь нажимает на кнопку «Пожаловаться», воспроизведение видео автоматически приостанавливается

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

Повтор цикла

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

Длинные циклы могут помочь расширить микровзаимодействие в будущем: подумайте над тем, что будет, когда пользователь столкнётся с вашим микровзаимодействием во второй, третий, десятый, тысячный раз? Цикл можно и нужно адаптировать и изменять с течением времени.


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

P. S. Много крутых примеров микровзаимодействий смотрите на сайте littlebigdetails.com.

У вас есть проект?

Давайте обсудим его. Продумаем. И сделаем!

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