Микровзаимодействия — это маленькие элементы функциональности продукта, сосредоточенные вокруг конкретной задачи. Почти все приложения, которыми мы пользуемся, состоят из микровзаимодействий. Вот несколько примеров:
- Подтверждение добавления предмета в корзину
- Использование жеста потяните вниз для обновления содержимого
- Анимация интерфейса, которая подтверждает действие (например, кнопка переключения)
Все эти казалось бы незначительные моменты работы с интерфейсом и есть микровзаимодействия. Мы часто не обращаем на них внимания, но их наличие существенно. Они обогащают дизайн, улучшают пользовательский опыт, делают интерфейс человечным и живым.
В этой статье опишу пять полезных типов микровзаимодействий и приведу примеры, как их использовать.
1. Формируйте петлю привычки
Микровзаимодействия подталкивают пользователя к совершению реальных действий. Они являются эффективным инструментом создания петли привычки: привычки формируются, когда люди постоянно выполняют одни и те же действия, и состоят из трех элементов:
1. Предпосылка/стимул — триггер, который инициирует действие.
2. Поведение/действие — оно совершается в ответ на стимул.
3. Поощрение — польза, которую вы получаете в итоге и причина завершения действия.
Источник: wikia
Уведомления Facebook о входящих сообщениях являются хорошим примером петли привычки: красный значок и белая иконка (стимул) указывают на новое сообщение, что, в свою очередь, заставляет пользователя кликнуть по иконке (действие) и начать переписываться с другом (поощрение). Через некоторое время пользователь автоматически щелкает на иконку, когда видит красный значок.
Микровзаимодействия — это секретное оружие, когда речь идет о создании приложения, вызывающего привыкание.
Совет: Награды подпитывают нашу мотивацию. Чем ценнее награда, тем лучше закрепляется привычка.
2. Свяжите воедино
Микровзаимодействия должны быть естественной частью вашего дизайна — создайте тему, в которой все взаимодействия (и микро, и макро) образуют единый опыт.
Следуйте двум простым правилам:
- Непрерывность. Анимируйте переход между разными состояниями объекта таким образом, чтобы переход был плавным и непрерывным.
Источник: Cam Runcie
- Предсказуемость. Хорошо проработанные микровзаимодействия позволяют формировать ожидания и делать информацию понятной пользователям.
Источник: Leo Zakour
Источник: Matt D. Smith
3. Анимируйте фидбек
Анимация может значительно улучшить пользовательский опыт, если ее правильно использовать. Функциональная и приятная анимация может стать способом обратной связи:
- Функциональная анимация снижает когнитивную нагрузку, предотвращает слепоту к изменениям и улучшает способность пользователя реагировать в интерфейсе.
Источник: Tamino Martinius
- Приятная анимация микровзаимодействий лучше вовлекает пользователей, а движение направляет внимание и оживляет пользовательский интерфейс.
Источник: Chris Bannister
Источник: Tubik
Совет: Помните о долгосрочной перспективе. Будет ли анимация раздражать после сотни просмотров или она понятна и ненавязчива?
4. Не забывайте про чувство юмора
Проявить чувство юмора в проектировании взаимодействия — верный способ вызвать у пользователя положительные эмоции. Например MailChimp, сервис для создания рассылок, поощряет пользователей за создание и отправку имейлов, внедряя неожиданные смешные зарисовки и позитивные иконки в течение всего процесса. Эти маленькие сюрпризы делают рутинный процесс отправки электронной почты гораздо приятней.
Иконка подтверждения отправки рассылки MailChimp использует юмор, чтобы разрядить напряжение во время процесса работы
Дизайн должен передавать эмоции во всех своих формах.
Совет: Используйте человеческий голос. Имитация человеческого голоса — один из способов сделать пользовательский интерфейс более дружелюбным.
5. Избегайте нежелательных взаимодействий
Убедитесь, что все визуальные подсказки, триггеры и анимация оправданы в вашей системе. Распространенной ошибкой является перегруженность пользовательского интерфейса микровзаимодействиями, или создание слишком сложных взаимодействий. Последнее можно увидеть в примере ниже — красиво, но непрактично.
Передвигающееся по экрану пятно при прокручивании чата, через какое-то время может начать раздражать пользователя. Источник: Jakub Antalík
Помните, когда речь идет о микровзаимодействиях — чем меньше, тем лучше. Если что-то можно убрать, и тем самым сделать пользовательский интерфейс чище, то лучше это сделать. Поэтому при создании микровзаимодействий нужно концентрироваться на аспектах практической пользы.
Совет: Используйте принцип KISS для своего дизайна. Микровзаимодействия должны быть небольшими и простыми. Отдавайте приоритет микро-, а не макровзаимодействиям.
Вывод
В UX важно то, как вы взаимодействуете с пользователем и как они себя чувствуют, когда пользуются вашим продуктом. Даже незначительные детали заслуживают пристального внимания, потому что внимание к каждой мелочи — ключ к успешному созданию простого взаимодействия между человеком и компьютером.
