Микровзаимодействия
Микровзаимодействия — это небольшие и незаметные детали, которые делают интерфейс дружелюбным. Они есть практически на каждом сайте или в приложении, настолько очевидны и привычны, что мы их не замечаем.
Кнопка «пропустить», которая позволяет пропустить введение в игре или приложении, надпись «операция выполняется» на экране банкомата, анимация загрузки — всё это микровзаимодействия.
Цель микровзаимодействий — быстро и ненавязчиво довести информацию до пользователя, не утомляя его; ненадолго привлечь внимание и исчезнуть.
Элементы микровзаимодействия
Дэн Саффер в своей книге «Microinteractions: Designing with Details» описывает 4 основных элемента микровзаимодействия:
- Триггер — событие, которое запускает микровзаимодействие. Есть два вида триггеров: ручной запуск, когда пользователь намеренно взаимодействует с продуктом (нажатие кнопки, хлопо́к) и системные триггеры, которые запускаются автоматически при соблюдении неких условий (уведомление приложения, звуковой сигнал робота-пылесоса, оповещающий о конце уборки).
- Правила — точно определяют, что происходит после выполнения триггера. Например, когда вы отсканируете отпечаток пальца, телефон разблокируется.
- Обратная связь — подтверждает действие пользователя. Это может быть звуковой или визуальный сигнал, вибрация и т.д..
- Петли и режимы. Петли определяют длину и количество повторений микровзаимодействий, повторяется ли взаимодействие или меняется со временем. Например, когда микроволновка разогреет еду, она издаст звук и, если вы не откроете ее, позже звук повторится снова. В этом случае повторение важно, но не каждое микровзаимодействие в этом нуждается. Режимы изменяют типичные способы функционирования, например, установка режима «не беспокоить» на смартфоне.
Примеры использования взаимодействий:
Свайп
Благодаря этому типу микровзаимодействия можно скрыть элементы действий, сэкономив место. Кроме этого, пользователю будет проще свайпнуть, чем тянуться к кнопке действия и нажимать на нее.
В приложении Gmail можно самостоятельно настроить свайпы. Здесь свайп влево — удалить письмо, вправо — сделать прочитанным
Быстрые действия
Для того, чтобы сэкономить время и клики пользователя, можно использовать быстрые действия. Например, если нажать и удерживать иконку приложения, появятся наиболее часто используемые элементы действий.
Приложение Kitchen Stories
Направление внимания
Иногда одно небольшое микровзаимодействие способно помочь сформировать положительный пользовательский опыт. Например, в приложении Telegram, когда вы начинаете писать сообщение, кнопки отправки не будет. Она появится после начала ввода текста.
Приложение Telegram
Обратная связь
При совершении некоторых действий пользователю важно удостовериться в их выполнении. Для этого нужно микровзаимодействие, которое будет оповещать об успешно выполненном действии.
В приложении Spotify при добавлении трека в плейлист, всплывает плашка «Добавлено в плейлист»
Применение микровзаимодействия не ограничено. Помните, что они должны быть незаметными и ненавязчивыми. Правильно спроектированные микровзаимодействия помогут сформировать положительный пользовательский опыт, облегчить восприятие и сэкономить время пользователя.
Выводы:
- Цель микровзаимодействий — быстро и ненавязчиво довести информацию до пользователя, не утомляя его; ненадолго привлечь внимание и исчезнуть;
- Существует 4 основных элемента микровзаимодействий: триггер, правила, обратная связь, петли и режимы;
- С помощью свайпа можно скрыть элементы действий и сэкономить место;
- Для того, чтобы сэкономить время и клики пользователя, можно использовать быстрые действия;
- Микровзаимодействия способны направлять внимание пользователя;
- Для обратной связи с пользователем нужно микровзаимодействие, которое будет оповещать об успешно выполненном действии.