book-open 1 heart Created with Sketch. test
Микровзаимодействия

Анимация интерфейсов: Микровзаимодействия и микроподсказки в интерфейсе

Пример микро-взаимодействий, с которым мы сталкиваемся каждый день.
Иллюстрация Oleg Frolov: https://dribbble.com/shots/3844909-On-Off

Вы читаете перевод статьи Николая БабичаMicrointeractions: The Secret of Great App Design”. Над переводом работали: Ольга Жолудова и Ринат Шайхутдинов. При поддержке iSpring.

iSpring — решение для запуска дистанционного обучения.

Самые лучшие продукты хороши в двух аспектах: функции и детали. Функции — это тот аспект продукта, который привлекает людей. Детали — это то, что их удерживает. И именно за счет деталей наше приложение выделяется на фоне конкурентов.

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

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

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

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

Интересуетесь свежими статьями по продуктовому дизайну (UX/UI)? 🚀

Подписывайтесь на канал в Telegram | ВКонтакте, Instagram, Facebook

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

Вот несколько примеров конкретных микровзаимодействий:

Источник: Dribbble.

Почему работают микровзаимодействия

Микровзаимодействия работают, потому что ориентированы на природное стремление человека к признанию. Пользователь понимает, что система зафиксировала его действие и хочет получить визуально приятный отклик. А еще микровзаимодействия могут помочь пользователю разобраться в системе.

Определяем возможности

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

Показать статус системы:

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

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

Шкала прогресса для процесса загрузки. Источник: Dribbble.

Шкала прогресса для процесса загрузки. Источник: Dribbble.

Или где находится пользователь:

Прогресс скроллинга

Прогресс скроллинга

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

Обратить внимание на изменения

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

Новое сообщение. Источник: Dribbble.

Новое сообщение. Источник: Dribbble.

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

Поддержать контекст

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

Material Design

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

Визуализировать ввод

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

Источник: Dribbble.

Вывод: Микровзаимодействия помогают выявить информацию, а также помогают пользователям добиться своей цели.

Призыв к действию

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

Вывод: Сконцентрируйтесь на эмоциях, потому что они играют огромную роль в пользовательских взаимодействиях. Исходите из контекста и пользовательских исследований и проектируйте на долгую перспективу.

Что стоит запомнить:

Изначально опубликовано на www.babich.biz

Рекомендуемые статьи:

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