Сайты и приложения используют множество тактик, чтобы повысить удобство взаимодействия со своими посетителями. И это не случайно. Дело в том, что в последние несколько лет проведено множество исследований, согласно которым у нынешнего поколения активных пользователей другой образ мышления. Для примера немного статистики:
- 53% современных посетителей покидают сайт, если загрузка занимает более 3 секунд (исследования Linearity.io);
- 54% пользователей перестают приобретать продукцию бренда после негативного опыта использования;
- 94% пользователей не будут доверять веб-сайту, если он устарел (по опросам сервиса Smartinsights).
Пользователи заинтересованы не только в привлекательности продукта или услуги, но и в удобстве сервиса, на котором можно заказать их или ознакомиться с ними. Клиентам важно взаимодействовать с веб-сайтом, получать подтверждение правильности своих действий. В этом могут помочь «микровзаимодействия».
Что такое микровзаимодействия?
Представьте, что Вы находитесь на веб-сайте, и вам нужно нажать на галочку, чтобы перейти на следующую страницу (например, подтвердить согласие на обработку персональных данных). Зачастую не сразу очевидно, кликнули вы для перехода на следующий шаг, или нет. Здесь проявляются микровзаимодействия. После того, как вы нажмете на «пустую кнопку» с галочкой, она преобразуется и окрасится в синий цвет. Это простое изменение означает, что ваше действие было распознано и Вы можете уверенно в переходить к следующей странице. Это эффективный способ взаимодействия с веб-сайтом, который делает его использование интуитивно понятным.
В 2014 году Дэн Саффер опубликовал книгу «Микровзаимодействия», ввел термин «микровзаимодействия», определив их как простые взаимодействия в пользовательском интерфейсе, и описал модель их проектирования. Эта модель состоит из следующих частей:
1) Триггер — это то, что запускает микровзаимодействие. Существует два вида триггеров:
- инициируемые пользователем. Действие пользователя инициирует микровзаимодействие. Например, когда пользователь нажимает кнопку или говорит что-то системе, активируемой голосом (например, пользователь Яндекс говорит: «Привет, Алиса»).
- инициируемые системой. Система может инициировать действие при выполнении определенных (обычно заранее определенных) условий. Например, когда приложение электронной почты автоматически проверяет почтовый ящик пользователя на наличие обновлений и уведомляет пользователя о новой почте.
2) Правила
Триггер запускает последовательность событий (правила). Они определяют фактические действия, которые выполняются в ответ на изменившиеся условия.
3) Обратная связь
В большинстве случаев правила невидимы для пользователей, и пользователи понимают, что что-то происходит, только благодаря обратной связи. В зависимости
от типа продукта обратная связь может быть визуальной, звуковой или тактильной.
Какова роль микровзаимодействий?
Опыт пользователей является важным фактором при создании популярного веб-сайта или приложения.
Во-первых, они могут сделать сайт / приложение более очевидным.
Представьте, что пользователь нажимает на что-то, но этому элементу требуется время, чтобы появиться на экране пользователя. Пользователю может потребоваться подождать несколько секунд, но ничто не указывает на то, что ответ появится. Из-за этого пользователь покидает сайт до того, как произойдет ответ на его клик. Помочь исправить ситуацию могут микровзаимодействия: установите, что триггером является щелчок пользователя, в ответ на это Вы можете вывести на экран, к примеру, три движущихся круга. Они будут указывать на то, что щелчок был успешным, и элемент загрузится через несколько секунд. Как в этом случае:
С помощью такого типа микровзаимодействия посетители понимают, что происходит на сайте, и это улучшает пользовательский опыт.
Другой пример – анимированные символы на сайте. При выборе какой-либо услуги (товара) он предварительно меняет ориентацию (становится подвижным), либо цвет, что способствует более понятному взаимодействию сайта и пользователя.
Пример микровзаимодействия со сменой цвета
Пример микровзаимодействия с анимированными символами
Во-вторых, микровзаимодействия могут создавать эмоциональные связи.
Если веб-сайт способен наладить позитивное взаимодействие с пользователем, пользователь с большей вероятностью выберет этот сайт в будущем. Микровзаимодействия могут стать решающим фактором в этом. Детали могут вызвать эмоции и освежить восприятие сайта. Давайте рассмотрим на примере концепции веб-дизайна:
На этом сайте, когда пользователь нажимает на кнопку «далее», фон становится красным, и, наконец, на экране появляется только напиток со вкусом клубники. Цвет фона меняется в зависимости от вкуса выбранного напитка (оранжевый – для апельсинового, желтый – для лимонного). Такие решения на сайтах могут вызвать положительные эмоции и выстроить ассоциации у пользователей, что существенно повышает вероятность выбора вашего сайта для будущих покупок.
Кроме того, микровзаимодействия помогают пользователям сориентироваться на сайте.
Покупатели могут «застрять» на каком-то этапе совершения покупок на Вашем сайте. Возможно, на нем слишком много информации и сайт не помогает освоиться новому пользователю, в том числе когда появляется сообщение об ошибке. Хорошо налаженные микровзаимодействия могут быть одним из решений такой проблемы – мелкие подсказки помогут быстро сориентироваться, дать рекомендации, объяснить правила взаимодействия с сайтом или интерпретировать сложные задачи.
Например, мы находимся на странице регистрации, где пользователям необходимо указать свои имя и пароль. Чтобы избежать ошибок при заполнении формы, можно использовать микровзаимодействия. Если пользователь не ввел информацию
в обязательное поле, прямоугольник станет красным. Если пользователь находится внутри поля и начинает вводить в него текст, красный прямоугольник меняется на зеленый. Когда внутри поля появляется текст и пользователь нажимает на указанное поле, цвет прямоугольника меняется на серый.
Еще одни пример успешного микровзаимодействия – при заполнении формы обратной связи. Если пользователь пропустил обязательную информацию – сайт укажет на недостающее поле.
Таким образом пользователь всегда может легко обнаружить, если что-то не так. Такие мелочи сэкономят время пользователя и сделают его опыт использования сайта позитивным.
К приемам микровзаимодействия обращаются даже крупные компании, потому что это действительно рабочий инструмент. Например – Тесла.
В настоящее время среднее время загрузки веб-сайта на настольных компьютерах составляет 2,5 секунды (согласно Tooltester.com). При этом на мобильных телефонах среднее время загрузки составляет 8,6 секунды!
Мы рекомендуем, если время загрузки вашего веб-сайта превышает 2 секунды, разместить значок загрузки, со следующим посылом: «Не волнуйтесь, веб-сайт реагирует на клик, но для загрузки подстраницы требуется некоторое время».
Такая практика успешно реализована на сайте Tesla. Если вы хотите заказать у них один из доступных автомобилей, вам нужно нажать на название выбранного автомобиля. Затем, чтобы полностью ознакомиться с концепцией автомобиля, потребуется немного времени. Но вместо пустого окна пользователи видят имитацию загрузки.
Особенность этого приема микровзаимодействия в том, что разработчики не стали упускать возможность еще раз показать пользователям логотип. Внутри вращающегося круга загрузки время от времени появляется и исчезает значок Tesla.
Таким образом, даже самые популярные бренды время от времени используют микровзаимодействия, чтобы сделать свой веб-сайт или приложение более креативным и понятным, а также дать рекомендации своим пользователям.
Источники:
- https://capturly.com/blog/boost-user-engagement-with-microinteractions/
- https://www.shopify.com/partners/blog/microinteractions
- Изображение страницы — https://ru.freepik.com/
