Микровзаимодействия в пользовательском интерфейсе
Перевод статьи UX-специалиста в Nielsen Norman Group Элиты Джойс
Микровзаимодействия отражают состояния системы, способствуют предотвращению ошибок пользователей и связывают интерфейс с брендом. У них обязательно есть триггер, по которому они срабатывает. Как правило, их используют для решения не более одной задачи. При правильном использовании этого инструмента формируется положительный пользовательский опыт.
Что такое микровзаимодействия?
При использовании цифровых интерфейсов мы ежедневно сталкиваемся с микровзаимодействиями. Они обеспечивают обратную связь, отражая статус системы и помогая пользователям предотвращать ошибки. Кроме того, микровзаимодействия используют для брендирования интерфейса.
Микровзаимодействия состоят из триггера и обратной связи. В данном случае триггером может быть действие пользователя или изменение состояния системы. Обратная связь — это ответ на триггер, передаваемый через небольшие, обычно визуальные, изменения в пользовательском интерфейсе.
Триггеры бывают пользовательскими и системными. Пользовательские срабатывают при взаимодействии с графическим интерфейсом, а также могут быть вызваны голосом или жестом. Системные возникают при выполнении определенного набора условий.
Не каждый элемент является частью микровзаимодействий. Например, к ним нельзя отнести статичные элементы (у них нет триггеров) и флоу, состоящий из нескольких действий. Так что же является и что не является микровзаимодействими?
В 2014 году Дэн Саффер опубликовал книгу «Microinteractions», которая определила микровзаимодействия как концепцию. В этой статье мы сфокусируемся на том, почему они важны для пользователя, и рассмотрим несколько примеров.
Почему микровзаимодействия важны?
Положительный пользовательский опыт — это не только про юзабилити, но еще и про вовлечение. Микровзаимодействия играют значительную роль, влияя на внешний вид продукта или услуги.
Микровзаимодействия могут улучшить интерфейс продукта через:
- Поощрение участия
- Отражение состояния системы
- Предотвращение ошибок
- Связь с брендом
Современные элементы микровзаимодействия (например, потянуть для обновления) сложнее сделать понятными пользователю, чем их стандартные аналоги (полоса прокрутки). Это связано со сформировавшимися за долгое время пользовательскими паттернами при использования интерфейсов. Современные элементы микровзаимодействия требуют особого внимания и продуманности при создании, поскольку они являются новыми для пользователей.
Рассмотрим примеры хорошо продуманного микровзаимодействия:
Для контроля повседневных дел автор статьи использует инструмент управления задачами Asana. Есть несколько вещей, которые она выделяет: например, теги и визуальный дизайн. Но больше всего ей нравится единорог, который возникает в окне браузера при завершении задачи. Это — пример микровзаимодействия.
Когда пользователь помечает задачу как завершенную, в нижнем левом углу страницы появляется небольшое диалоговое окно, в котором есть кнопка для быстрой отмены действия. Так Asana защищает пользователя от совершения ошибки. Через секунду после появления окна пролетает единорог, знаменуя выполненную задачу. В этом примере есть два микровзаимодействия: диалоговое окно и анимация единорога.
Инструментов управления задачами довольно много: Asana, Jira, Trello, Wrike. Эти продукты имеют много общего: объединяют функции назначения задач членам команды, создания досок и интеграции с другими продуктами.
Различия между этими продуктами становятся заметными при анализе микровзаимодействий. В Trello, при перемещении задачи в столбец «Done», нет никакой обратной связи. Для многих людей это соответствует ожиданиям. Но автор статьи ждёт положительной поддержки выполнения задачи и надеется увидеть единорога.
Тем не менее, микровзаимодействия не просто заставляют пользователей чувствовать себя лучше. При правильном использовании они добавляют значимую ценность, выделяя продукт на фоне конкурентов.
Отображение системного статуса
Первое правило юзабилити говорит о необходимости отображения статуса системы. Если система прозрачна, пользователи чувствуют себя более вовлеченными. Любое отображение состояния системы является микровзаимодействием, так как имеет триггер и обратную связь.
Индикаторы прогресса
Индикаторы прогресса позволяют понять, что система находится в процессе выполнения задач. Они показывают определенное и неопределенное время ожидания, поддерживая лояльность пользователя.
LinkedIn использует круговые индикаторы для отражения процесса обновления новостной ленты. Этот компонент сообщает, что система работает, позволяя пользователям не задумываться, распознала ли система их действие. Так пользователи ожидают загрузки новых постов и продолжают взаимодействовать с LinkedIn.
Ожидание
Иногда для дальнейшего взаимодействия с системой пользователю необходимо ввести данные. Микровзаимодействие уведомляет о том, что система находится в режиме ожидания и нуждается в дополнительном действии.
В iOS, при нажатии и удержании иконки на главном экране, все приложения начинают немного «трястись». Это позволяет понять, что система ждет дальнейших действий: приложение можно перетащить в другое место, а при нажатии крестика в верхнем левом углу программа удалится.
Микровзаимодействия не ограничиваются экранными интерфейсами. Голосовые помощники, такие как Google Home, используют их в режиме ожидания команды пользователя. После того, как пользователь говорит, «Эй, Гугл», устройство отображает анимацию из четырех точек. Почти мгновенно точки образуют форму мерцающего алмаза. Благодаря визуальной обратной связи пользователь знает, что устройство слушает, и может обратиться к нему с вопросом, например «Какая сейчас погода?».
Предотвращение ошибок
Другое правило юзабилити касается предотвращения ошибок. Нужно избавлять пользователя от ситуаций, в которых он может сделать что-то не так. Микровзаимодействия предупреждают о таких ситуациях и способствуют формированию положительного опыта использования сервиса.
Отмена действия
Все мы совершаем ошибки. В цифровом мире это, как правило, случайные нажатия. В системе должен быть простой механизм отмены действия. Микровзаимодействия отражают состояние компонента пользовательского интерфейса и показывают, что можно сделать дальше. Микровзаимодействия предоставляют удобную возможность для отмены действия, поскольку именно они сообщают пользователю о том, что что-то произошло.
Пульсирующее сердце в углу фотографии товара на сайте Gap — удачный пример использования анимации для привлечения внимания. И вот почему:
- оно делает это ненавязчиво;
- в отличие от зацикленных, благодаря небольшой продолжительности эта анимация является микровзаимодействием;
- пульсирующее ♥️ отражает обратную связь при добавлении товара в избранное, информируя пользователя о том, что система распознала действие.
Так интерфейс интернет-магазина Gap явно демнострирует пользователю, что совершено действие, и, если оно совершено случайно, пользователь может быстро его отменить.
Предотвращение повторного ввода данных
Сложно себе представить более раздражающую вещь при создании аккаунта, чем финальный клик на кнопку «Отправить» и получение сообщения об ошибке: «Ваш пароль не соответствует указанным требованиям». Микровзаимодействия сообщают пользователям, соответствует ли их пароль всем необходимым требованиям, и, таким образом, предотвращают повторный ввод данных (т.е. избавляют от необходимости заполнять всю форму вновь).
eBay использует микровзаимодействия в форме регистрации для предотвращения ошибок при проверках данных. К примеру, когда поле для ввода пароля активно, возникает список требований к паролю. Во время ввода символов, по мере того, как пароль соблюдает указанные требования, список автоматически обновляется. Если требование не соблюдаются, под полем возникает красное сообщение об ошибке. Такая серия микровзаимодействий обеспечивает пользователям последовательную обратную связь и приятный опыт работы с сервисом.
Отражение ценностей бренда посредством микровзаимодействий
Помимо того, что микровзаимодействия должны служить определённой цели, с их помощью можно отражать идею бренда. Если бренд представлен забавным и ярким, стоит это отражать на протяжении всего контакта пользователя с интерфейсом.
Но с другой стороны, если бренд представлен серьезным и надежным, это ещё не значит, что в коммуникации нельзя использовать что-то весёлое. Просто делать это нужно очень острожно и ни в коем случае не размывать видение вашего бренда в глазах клиента. От глобального позиционирования зависят и ваши микровзаимодействия. Важно помнить, что любая мелочь может испортить представление о бренде.
Вспомните, как выглядит поздравление с днём рождения в сообщениях от Apple: воздушные шары на весь экран. Здесь одновременно закладывается и позиционирование компании как инновационной, идущей на встречу людям, и, в тоже время, не нарушающей границ. Вы можете отправить такое поздравление как маме, так и боссу. Подобный эффект вызовет позитивное впечатление.
В Snapchat микровзаимодействия используются для сообщения о том, что два Bitmoji-пользователя находятся в одном и том же чате. Когда ваш сосед по чату что-то пишет, его Bitmoji возникает в виде баббла. Если же он читает письмо, его Bitmoji поднимается над полем ввода текста. В этом случае обратная связь мотивирует пользователей к продолжению диалога и сохраняет заинтересованность в использовании приложения.
Для общения с пользователями многие бренды полагаются в основном на визуальные эффекты. Но ведь звук тоже имеет очень мощное воздействие! Если вас попросят нарисовать логотип страховой компании или пропеть их коммерческий джингл, что будет легче? Если вы много смотрите телевизор, то в первую очередь вы вспомните именно джингл.
Микровзвимодействия также могут состоять из звуковых откликов на конкретные действия пользователя. К примеру, приставка Xbox One обеспечивает звуковую и визуальную обратную связь, когда пользователь входит в систему. Кнопка Xbox подсвечивается, и система издаёт короткую характерную мелодию. Микровзвимодействия — это не только узнаваемый элемент, но и одна из специфических особенностей бренда Xbox.
Заключение
Хорошо продуманные микровзаимодействия могут оказать большое влияние пользовательский опыт. Они играют важную роль, так как служат средством коммуникации с пользователем. Микровзаимодействия обеспечивают обратную связь о состоянии системы, а также помогают пользователям не допускать ошибки. Кроме того, микровзаимодействия могут выделить ваш продукт на фоне конкурентов, тем самым заинтересовывая пользователя в его выборе. В целом, такие маленькие детали могут перевести хороший товар в категорию превосходного, а невовлечённых пользователей сделать вовлечёнными.
Перевод подготовил Кирилл Карманов, дизайнер студии разработки мобильных приложений Trinity Digital 🦄
