Как использование микро-взаимодействий улучшит пользовательский опыт
Микро-взаимодействия играют большую роль в нашей цифровой жизни, даже если мы того не замечаем. Мы сталкиваемся с ними весь день: когда просыпаемся от будильника в смартфоне, когда лайкаем посты в Facebook и получаем уведомления о новых сообщениях в Instagram.
Это также то, о чем владельцы веб-сайтов и дизайнеры должны задумываться при создании новых продуктов. Разрабатывая новые продукты, мы сознательно ищем возможности удивить и порадовать наших пользователей. В большинстве проектов есть места, где небольшая анимация и обратная связь имеют большое значение для улучшения пользовательского опыта.
Что такое микро-взаимодействия
Это визуально взаимодействие пользователя и сайта. Когда они хорошо спроектированы, микро-взаимодействия улучшают связь пользователя с сайтом, а когда плохо - ухудшают.
По словам Дэна Саффера, дизайнера и автора книги “Микро-взаимодействия: проектирование с деталями”, микро-взаимодействия “содержат моменты продукта, которые вращаются вокруг одного сценария использования”. Это те виды взаимодействий, которые мы не замечаем, пока их нет.
Подумайте о таких вещах, как кнопка “Мне нравится” в Facebook, действие “потянуть вниз” для обновления или индикатор набора текста в окне чата. С ними мы сталкиваемся каждый день, и они изменили наши модели восприятия интерфейсов.
Микро-взаимодействия состоят из четырех частей:
Триггеры, инициирующие микро-взаимодействие (могут быть инициированы пользователем или системой);
Правила, определяющие, что происходит, когда срабатывает триггер;
Обратная связь, позволяющая пользователям узнать, что происходит (все что пользователь видит, слышит и чувствует во время микро-взаимодействия, является обратной связью);
Петли и режимы, определяющие что происходит с микро-взаимодействиями при изменении условий.
Почему микро-взаимодействия являются такими важными частями цифрового продукта?
Иногда, при создании нового продукта, мы забываем, какова наша главная цель: изменить поведение человека. Мы хотим, чтобы пользователи использовали наш продукт часто и неоднократно. Чтобы это вошло в привычку. Как раз привычка является ключом к изменению человеческого поведения, а микро-взаимодействия помогают формировать привычки.
Хороший дизайн это важно. Функции приводят пользователя к продукту, но детали заставляют его остаться. При этом, микро-взаимодействия, не должны отвлекать пользователя от главной задачи.
Микро-взаимодействия увеличивают вовлеченность пользователя при относительно низкой стоимости. Люди хотят максимальное вознаграждения при минимальных затратах. Если вы сможете создать опыт, который позволяет достичь цели и в то же время доставит удовольствие, вы дадите пользователю намного больше. Это заставляет людей возвращаться.
Что делает микро-взаимодействия успешными?
Также, как и хорошая анимация, - успешные микро-взаимодействия едва заметны. Они дают обратную связь и всегда следуют правилам, поэтому будь то в первый раз или 50-1, пользователь знает, что его ждет. Наш мозг любит предсказуемость, поэтому дать ему её - самый простой способ вызвать привыкание.
Микро-взаимодействия могут сэкономить время пользователей, мгновенно передавая информацию таким образом, который не утомляет и не отвлекает пользователей.
Вот отличный пример:
Иногда сайту нужно немного времени, прежде чем он предоставит пользователю информацию, которую он ищет. Почему бы пустой экран не заменить на веселый ползунок прогресса? Это также предотвратит когнитивный диссонанс в голове пользователя: “А я точно нажал на эту кнопку?”
Аналогично, микро-взаимодействия должны одинаково действовать на пользователя при длительном использовании. Та длинная анимация, которая кажется забавной в первый раз, может стать раздражающей после 100-го использования. Держитесь подальше от бесконечных петель визуального шума и отнимающих много времени бессмысленных анимированных прерываний.
Итак, какие советы мы можем вынести из этой статьи?
Не позволяйте пользователю скучать. Держите его в курсе дела (по крайней мере, визуально).
Будьте проще, микро-взаимодействия не зря имеют приставку “микро”.
Если вы решили использовать анимацию для изменения состояния или перехода между страницами - она должна быть плавной и четкой.
Будьте предсказуемы. Пользователи настроены на набор поведенческих паттернов. Не стоит придумывать “велосипед”;
Берегите внимание пользователей. Если анимация слишком длинная или состоит из нескольких итераций - пользовательского внимания может не хватить на более важные задачи;
Если необходимо создание сайта в Киеве – можно смело обращаться к нам.
