Используем UX-анимацию правильно: как улучшить юзабилити и не раздражать клиентов

Научить

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

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

Интерактивный тур

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

Фидбек и статус

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

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

Аналитика интерфейсов без них — показывает, как большинство пользователей многократно тычут в экран, пытаясь понять, что происходит, или просто уходят, не завершив процесс.

Объяснить

Одна из причин успеха магазинов IKEA по всему миру в том, что инструкция для сборки мебели своими руками «в картинках» доступна на любом языке и понятна без лишних слов. Тот же принцип действует и в интерфейсах.

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

Проинформировать и подсказать

Одна из наиболее часто встречающихся задач, с которой сталкивается бизнес — как проинформировать клиента об акциях и предложениях. Основная проблема в «баннерной слепоте» — реакции пользователя на обилие внешних раздражителей, при которой он просто не замечает новую информацию.

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

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

Постоянные подсказки

Современные сервисы, такие как конструкторы сайтов или онлайн-CRM, предоставляют пользователю широкий выбор из сложных и настраиваемых блоков, модулей, фильтров и так далее. Разобраться с тем, как их использовать, помогают постоянные подсказки. Благодаря им можно обойтись без больших разделов с инструкциями.

Микроподталкивания (напоминания)

Когда вы заказываете такси в «Яндексе», нужно свайпнуть вверх, чтобы раскрыть меню с вводом адреса. На это намекает тонкая еле заметная пульсирующая полоска. Благодаря ей пользователь знает, что нужно делать, даже когда пользуется приложением впервые, вряд ли осознавая почему. Просто удобно.

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

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

Не навредить!

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

Лучше всего воспринимать движение как своеобразную специю. Как соль и перец хороши в меру, так и UX-анимации, если ими злоупотреблять, могут вызвать у пользователя раздражение и привести к расфокусировке внимания.

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

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

Формула успешной UX-анимации

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

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

Фото на обложке: Shutterstock / StockStyle

Иллюстрации предоставлены автором.