04.03.2017

Что такое микровзаимодействия (анимация интерфейса) и как правильно их применять?

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

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

  • Подтверждение добавления  предмета в корзину
  • Использование механизма «потяни-чтобы-обновить» для обновления контента
  • Анимация интерфейса, подтверждающего действие (к примеру, кнопка переключения)

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

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

1. Создайте петлю привычки

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

  1. Сигнал – Импульс, вызывающий действие
  2. Шаблон – В ответ на сигнал, вы выполняете действие
  3. Награда – Польза, которую вам приносит выполнение шаблонного действия, является причиной для совершения действия.

Петля привычки

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

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

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

Совет: Награды питают вашу мотивацию.Чем выше награда, тем сильнее становится привычка.

2. Свяжите с темой дизайна

Микровзаимодействия должны быть естественной частью вашего дизайна, нужно создать объединяющую тему, где все взаимодействия (микро- и макро-) связаны воедино. Следуйте двум простым принципам:

  • Целостность. Анимируйте переход между различными состояниями объекта, чтобы это смотрелось плавно, не прерывисто.

Целостность

  • Предсказуемость. Хорошо подходящие микровзаимодействия дают возможность прогнозировать результат и помогают осмысливать информацию вашим пользователям.

Предсказуемость

Предсказуемость 2

3. Используйте анимированные отклики

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

  • Функциональная анимация  сокращает мыслительную нагрузку, предотвращает т.н. «слепоту перемены»  и  устанавливает лучшее взаимодействие в пространственных отношениях между объектами.
    Функциональная анимация
  • Приятная анимация делает микровзаимодействия намноговеселее, а движения привлекают внимание и оживляют пользовательский интерфейс.
    Анимация
    Анимация 1

Совет:Помните о долговечности. Станет ли анимация выглядеть раздражающей на сотый раз или же она, в целом, приятна и ненавязчива?

4. Используйте юмор

Юмор во взаимодействии, безотносительно масштабов, есть надёжный способ вызвать эмоциональную реакцию у пользователя. К примеру, MailChimp, интернет-сервис по работе с электронной почтой, вознаграждает пользователя за создание и планирование своих первых E-mail добавлением неожиданного юмора и позитива на протяжении всего процесса. Благодаря очаровательным маленьким сюрпризам во время процесса, MailChimp превращает процесс отправки электронных писем в нечто увлекательное и весёлое.

Юмор

Так выглядит кнопка подтверждения отправки email. MailChimp использует лёгкий юмор для разрядки напряжённой ситуации.

Дизайн должен передавать эмоцию во всех своих формах.

Совет:Используйте человеческий голос. Отличный способ сделать ваш пользовательский интерфейс уютнее – это человеческая речь.

5. Избегайте нежелательных взаимодействий

Убедитесь в том, что визуальные сигналы и анимации уместны и нужны. Перенасыщение пользовательского интерфейса микровзаимодействиями или создание слишком сложных взаимодействий – одни из распространённых ошибок. Последнее можно увидеть на примере ниже, где анимация прекрасна, но непрактична.

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

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

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

Совет: Используйте принцип KISS («Keep it simple, stupid» — делай это проще, дурак) для вашего дизайна. Микровзаимодействие должно быть маленьким и простым. Не превращайте его в макровзаимодействие.

Заключение

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

Спасибо за прочтение!

Перевод: SpaceWell. Оригинальная статья по ссылке
Лучшие материалы