В то время как дизайн решает универсальные проблемы, микро-взаимодействия — это приятные ощущения, которые испытывают ваши пользователи при использовании продукта.
Лучшие продукты делают две вещи хорошо: функции и детали. Функции — это то, что привлекает людей к вашему продукту. Детали — это то, что держит их там. И именно детали выделяют приложение на фоне конкурентов, так как функционал можно легко скопировать — например, истории из Instagram.
Это помогает создать приятный опыт взаимодействия с продуктом когда, как пользователь обнаруживает их. Понимание пользователем эффектов микро-взаимодействия так же важно, как и их проектирование. Дизайнер должен создать нечто такое, что улучшит и сделает приятнее опыт взаимодействия пользователя и выполнит определенную цель функционально, а не только ради того, чтобы это было.
Что такое микро-взаимодействие?
Микро-взаимодействия — это события, которые обычно выполняют эти важнейшие функции:
- Обратная связь или результат действия.
- Выполняет индивидуальную задачу.
- Усилит действие.
- Помогают пользователям визуализировать результаты своих действий и предотвратить ошибки.
Их можно легко найти в вашем мобильном и в большинстве приложений. Например, при переключении телефона в беззвучный режим, телефон вибрирует вместе со значком бесшумного режима на экране.
4 компонента микро-взаимодействия
- Триггер ->
- Правила ->
- Обратная связь ->
- Цикл и режимы
Триггер
Триггер — это действие, которое активирует микро-взаимодействие. Его можно разделить на две группы: инициированный пользователем или инициированный системой.
Инициируемые пользователем триггеры являются наиболее распространенными и могут быть найдены везде в виде кнопок, текстовых ссылок, выпадающих списков и т.д. Простым примером может служить нажатие пользователем кнопки (триггера), приводящее его на другую страницу.
Инициируемые системой триггеры немного сложнее, так как они автоматические и срабатывают при выполнении определенных условий. Одним из примеров могут служить уведомления — когда кому-то понравилась Ваша фотография в Instagram, это срабатывает, и Вы получаете уведомление.
Правила
Так что после того, как система получает сигнал о запуске (триггер), тебе нужно проследить за тем, что будет дальше. Когда пользователи нажимают на эту кнопку, что происходит? Направляются ли они на новую страницу? Добавится ли продукт в корзину? Удалит ли он их учетную запись?
То же самое касается и системных триггеров — что произойдет, когда все условия будут выполнены? Если пользователь неактивен в течение 30 минут (условие), он выйдет из своего аккаунта (правило).
Обратная связь
Это творческая часть процесса. Она используется для информирования пользователя о том, что произошло действие или изменение. Это может быть экран загрузки, эффект зависания, анимация, gif, вибрация и т.д. Существует множество примеров того, как можно спроектировать микро-взаимодействия.
Цикл и режимы
Цикл определяет продолжительность микродействия, повторяется ли оно или изменяется с течением времени. Подумайте о том, когда вы в последний раз использовали продукт, отличается ли этот опыт от того, когда вы использовали его в первый раз, по сравнению с десятым разом? Большинство продуктов показывают процесс работы на карте и визуальные эффекты только начинающим пользователям, поэтому длительность микродействия меняется с течением времени.
Режимы могут быть использованы для изменения способа получения обратной связи. Например, когда вы получаете текстовое сообщение на телефон, какова обратная связь, когда телефон находится в тихом режиме по сравнению с режимом по умолчанию?
Важны ли микро-взаимодействия?
Если микро-взаимодействия — это всего лишь крошечные элементы дизайна, то действительно ли мы должны заботиться о них?
Внимание к деталям — это то, что отличает исключительный сайт от обычного. Вот несколько причин, по которым следует использовать микро-взаимодействия.
1. Они обеспечивают мгновенную и необходимую обратную связь по выполненному действию.
2. Они передают информацию об определенных элементах, например, о том, является ли она интерактивной или нет.
3. Они информируют пользователя о происходящем.
4. Они помогают пользователям достичь своей цели
5. И, наконец, они просто делают ваш сайт более эмоциональным.
Микро-взаимодействия работают, потому что они обращаются к естественному стремлению пользователя к подтверждению. Пользователь мгновенно узнает, что его действие было принято, и испытывает легкий восторг от визуального эффекта.
Последние мысли
Проектируйте с осторожностью. Подумайте о том, как ваши пользователи будут взаимодействовать и использовать вашу платформу, а затем спроектируйте соответствующее взаимодействие, чтобы взаимодействовать с ними на протяжении всего пути. Дизайнерам важно эффективно использовать микро-взаимодействия, так как они действительно могут вывести продукты на новый уровень. С помощью микро-взаимодействия можно экспериментировать с новыми дизайнерскими решениями и искать новые способы удивить пользователей.
Иеремия Лам
Следующая
