2762
4 мин.

Улучшение UX с помощью микро-взаимодействия

Ссылка на основную публикацию

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

Лучшие продукты делают две вещи хорошо: функции и детали. Функции — это то, что привлекает людей к вашему продукту. Детали — это то, что держит их там. И именно детали выделяют приложение на фоне конкурентов, так как функционал можно легко скопировать — например, истории из Instagram.

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

Что такое микро-взаимодействие?

Микро-взаимодействия — это события, которые обычно выполняют эти важнейшие функции:

  • Обратная связь или результат действия.
  • Выполняет индивидуальную задачу.
  • Усилит действие.
  • Помогают пользователям визуализировать результаты своих действий и предотвратить ошибки.

Их можно легко найти в вашем мобильном и в большинстве приложений. Например, при переключении телефона в беззвучный режим, телефон вибрирует вместе со значком бесшумного режима на экране.

4 компонента микро-взаимодействия

  1. Триггер ->
  2. Правила ->
  3. Обратная связь ->
  4. Цикл и режимы

Триггер

Триггер — это действие, которое активирует микро-взаимодействие. Его можно разделить на две группы: инициированный пользователем или инициированный системой.

Инициируемые пользователем триггеры являются наиболее распространенными и могут быть найдены везде в виде кнопок, текстовых ссылок, выпадающих списков и т.д. Простым примером может служить нажатие пользователем кнопки (триггера), приводящее его на другую страницу.

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

Лайк в инстаграм как триггер
Это простое уведомление Instagram основано на инициируемом системой триггере

Правила

Так что после того, как система получает сигнал о запуске (триггер), тебе нужно проследить за тем, что будет дальше. Когда пользователи нажимают на эту кнопку, что происходит? Направляются ли они на новую страницу? Добавится ли продукт в корзину? Удалит ли он их учетную запись?

То же самое касается и системных триггеров — что произойдет, когда все условия будут выполнены? Если пользователь неактивен в течение 30 минут (условие), он выйдет из своего аккаунта (правило).

Обратная связь

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

Дизайн интерфейса
Анимация интерфейса, показывающая реакцию на наведение курсора, является примером обратной связи | Малан Аланкара.

Цикл и режимы

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

Режимы могут быть использованы для изменения способа получения обратной связи. Например, когда вы получаете текстовое сообщение на телефон, какова обратная связь, когда телефон находится в тихом режиме по сравнению с режимом по умолчанию?

Важны ли микро-взаимодействия?

Если микро-взаимодействия — это всего лишь крошечные элементы дизайна, то действительно ли мы должны заботиться о них?

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

1. Они обеспечивают мгновенную и необходимую обратную связь по выполненному действию.

ui дизайн кнопки
Это взаимодействие показывает, что действие пользователя успешно | Колин.

2. Они передают информацию об определенных элементах, например, о том, является ли она интерактивной или нет.

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

3. Они информируют пользователя о происходящем.

Анимация загрузки
Панель загрузки помогает информировать пользователей о времени, необходимом для запуска Nintendo Switch | Spencer Guerra.

4. Они помогают пользователям достичь своей цели

Интерфейс взаимодействия при вводе пароля
Инновационный способ помочь пользователям в создании надежных паролей | Duylam

5. И, наконец, они просто делают ваш сайт более эмоциональным.

Анимация на странице 404
Zendesk 404 page | Sara Farnsworth

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

Последние мысли

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

Иеремия Лам

Следующая
Другое7 рекомендации по дизайну кнопок CTA
Рейтинг автора
Автор статьи
Андрей Молотов
Главный в СинейМалине. Опыт в дизайне более 10 лет.
Написано статей
12