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

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

Кнопка «пропустить», которая позволяет пропустить введение в игре или приложении, надпись «операция выполняется» на экране банкомата, анимация загрузки — всё это микровзаимодействия.

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

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

Дэн Саффер в своей книге «Microinteractions: Designing with Details» описывает 4 основных элемента микровзаимодействия:

1. Триггер — событие, которое запускает микровзаимодействие. Есть два вида триггеров: ручной запуск, когда пользователь намеренно взаимодействует с продуктом (нажатие кнопки, хлопо́к) и системные триггеры, которые запускаются автоматически при соблюдении неких условий (уведомление приложения, звуковой сигнал робота-пылесоса, оповещающий о конце уборки).
2. Правила — точно определяют, что происходит после выполнения триггера. Например, когда вы отсканируете отпечаток пальца, телефон разблокируется.
3. Обратная связь — подтверждает действие пользователя. Это может быть звуковой или визуальный сигнал, вибрация и т.д..
4. Петли и режимы. Петли определяют длину и количество повторений микровзаимодействий, повторяется ли взаимодействие или меняется со временем. Например, когда микроволновка разогреет еду, она издаст звук и, если вы не откроете ее, позже звук повторится снова. В этом случае повторение важно, но не каждое микровзаимодействие в этом нуждается. Режимы изменяют типичные способы функционирования, например, установка режима «не беспокоить» на смартфоне.

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

Свайп

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

Быстрые действия

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

Направление внимания

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

Обратная связь

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

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

Выводы:

• Цель микровзаимодействий — быстро и ненавязчиво довести информацию до пользователя, не утомляя его; ненадолго привлечь внимание и исчезнуть;
• Существует 4 основных элемента микровзаимодействий: триггер, правила, обратная связь, петли и режимы;
• С помощью свайпа можно скрыть элементы действий и сэкономить место;
• Для того, чтобы сэкономить время и клики пользователя, можно использовать быстрые действия;
• Микровзаимодействия способны направлять внимание пользователя;
• Для обратной связи с пользователем нужно микровзаимодействие, которое будет оповещать об успешно выполненном действии.