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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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