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

---

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

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

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

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

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

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

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

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

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

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

• При переключении айфона в тихий режим при помощи кнопки, включается коротенькая вибрация, а на экране появляется иконка беззвучного режима.

• Анимированный элемент интерфейса показывает возможность нажатия (или кнопка, которая меняет цвет при наведении мыши)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Микровзаимодействия: обратная связь, уведомления и инструкции — это посредники взаимодействий.
• Микровзаимодействия должны экономить время, мгновенно передавая информацию и при этом не отвлекая и не утомляя пользователя. Они должны восприниматься как неуловимое подмигивание.
• Если вы знаете своих пользователей и контекст, вы сможете сделать микровзаимодействия еще более точными и эффективными.
• Микровзаимодействия должны успешно проходить проверку временем. То, что показалось забавным в первый раз, может начать раздражать при постоянном использовании.
• Сделайте микровзаимодействия более человечными и сконцентрируйтесь на визуальной гармонии. Чтобы микровзаимодействие “ожило”, все движения должны быть очень плавными. Хороший дизайн — это всегда full stack: от функциональной части и до микровзаимодействий.

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

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

• Golden Rules of User Interface Design
• 9 Mobile UX Mistakes You’re Probably Making Right Now
• Empty State: Mobile App “Nice-to-Have” Essential