Лучшие практики: микровзаимодействия

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

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

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

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

1. Формируйте петлю привычки

  1. Предпосылка/стимул — триггер, который инициирует действие.
  2. Поведение/действие — оно совершается в ответ на стимул.
  3. Поощрение — польза, которую вы получаете в итоге и причина завершения действия.

Изображение: wikia

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

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

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

2. Свяжите воедино

Следуйте двум простым правилам:

  • Непрерывность. Анимируйте переход между разными состояниями объекта таким образом, чтобы переход был плавным и непрерывным.
Изображение: Cam Runcie
  • Изображение: Cam Runcie
  • Предсказуемость. Хорошо проработанные микровзаимодействия позволяют формировать ожидания и делать информацию понятной пользователям.
Изображение: Leo Zakour
  • Изображение: Leo Zakour
Изображение: Matt D. Smith

Изображение: Matt D. Smith

3. Анимируйте фидбек

  • Функциональная анимация снижает когнитивную нагрузку, предотвращает слепоту к изменениям и улучшает способность пользователя реагировать в интерфейсе.
Изображение: Tamino Martinius
  • Изображение: Tamino Martinius
  • Приятная анимация микровзаимодействий лучше вовлекает пользователей, а движение направляет внимание и оживляет пользовательский интерфейс.
Изображение: Chris Bannister
  • Изображение: Chris Bannister
Изображение: Tubik

Image credit: Tubik

Совет: Помните о долгосрочной перспективе. Будет ли анимация раздражать после сотни просмотров или она понятна и ненавязчива?

4. Не забывайте про чувство юмора

Иконка подтверждения отправки рассылки MailChimp использует юмор, чтобы разрядить напряжение во время процесса работы

Иконка подтверждения отправки рассылки MailChimp использует юмор, чтобы разрядить напряжение во время процесса работы

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

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

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

Передвигающееся по экрану пятно при прокручивании чата, через какое-то время может начать раздражать пользователя. Изображение: Jakub Antalík

Передвигающееся по экрану пятно при прокручивании чата, через какое-то время может начать раздражать пользователя. Изображение: Jakub Antalík

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

Совет: Используйте принцип KISS для своего дизайна. Микровзаимодействия должны быть небольшими и простыми. Отдавайте приоритет микро-, а не макровзаимодействиям.

Вывод

Оригинальная статья по ссылке https://uxplanet.org/best-practices-for-microinteractions-9456211aeed0#.u1ftlo28k

Идеи, которые нас вдохновляют, видео-интервью и переводы исследований, которые были нам полезны в процессе работы. http://blog.aic.ru/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store