UX-анимация должна быть ненавязчивой, быстрой и плавной. Используйте её для обратной связи, навигации, а также для общего улучшения вашего приложения.
В UX движения и анимация могут оказаться очень полезными, если использовать их правильно. Движения чаще всего играют роль тонкой обратной связи с микровзаимодействиями, а не просто развлекают пользователей. В этой статье мы узнаем, в чём же польза ненавязчивой анимации.
Большим преимуществом (а также недостатком) UI-движений является то, что они привлекают внимание пользователя. Наше периферическое зрение отвечает за обнаружение такого движения. Благодаря эволюции, тот факт, что мы можем видеть движение за пределами нашего поля зрения, является, конечно, преимуществом: мы можем вовремя распознать опасность и защитить себя. Но это так же означает, что мы чувствительны и склонны отвлекаться на любые движения (значимые или нет). Вот почему UI-движение может легко стать раздражающим.
Анимации могут быть полезны, впечатляя пользователей общей картиной UI, но не стоит ими перебарщивать – в первую очередь анимации нужно использовать в качестве легкозаметного, плавного взаимодействия с продуктом.
Миссия UI-анимации
Правильное использование анимации может помочь пользователям построить ментальные модели того, как работает система и как они могут взаимодействовать с ней. Анимации менее критичны для пользователя, когда они просто занимают собой время, необходимое для загрузки (на самом деле, именно эти анимации больше всего не любят участники тестирования юзабилити). Вместо того, чтобы использовать анимации для создания поверхностного впечатления (которое быстро портится), их лучше всего использовать в качестве инструментов удобства: отображение текущего состояния системы, индикаторы поведения элементов UI, и в качестве маркеров текущего местонахождения пользователя в системе.
Движения и взаимодействия
Анимации полезны в форме нативных взаимодействий. Повсеместный пример – анимация навигационного меню, выезжающего при нажатии на бургер-кнопку (hamburger icon). Короткая анимация может гарантировать, что пользователи увидят результат срабатывания кнопки.

Если тапнуть по значку меню, оно выедет с левой части страницы, а не появится внезапно.

Эпизодично в iPhone: у списка покупок есть небольшая анимация, когда пользователь добавляет новый элемент в список: после нажатия кнопки «Готово» только что набранное слово (в данном случае «Кофе») мгновенно становится светло-серого цвета, а затем быстро меняется на черный, чтобы показать, что он был добавлен в список. Одновременно с этим поле ввода сдвигается вниз, сигнализируя об ожидании ввода.
Иногда «статическая» анимация игнорируется из-за неочевидности изменений. Например, люди могут не заметить обновление иконки корзины после нажатия кнопки «Добавить в корзину», как в приведенном ниже примере. Анимация увеличивает шанс заметить это. (Альтернативой было бы сделать статическую обратную связь более заметной, например, с помощью диалогового окна, что будет более навязчиво, чем простая анимация.)

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

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

Значок карандаша, превращающийся в «+», помогает определить разницу между режимом редактирования и режимом добавления.
Помимо отображения перехода между режимами или представлениями данных, анимации также полезны для сообщения об изменениях состояния, которые не инициируются действиями пользователей. Например, индикаторы загрузки показывают, что система еще не готова к работе. Одной из форм этого является «скелетный экран» (интерфейс-заполнитель, который выглядит как каркас загрузочной страницы без содержимого), который анимируется движущимся по нему легким бликом.

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

Аналогично, скользящая анимация помогает понять, что пользователь идёт в правильном направлении, например при оформлении заказа.

Анимации также могут предотвращать дезориентацию и сообщать людям, находятся ли они на той же странице или перешли на другую – особенно на мобильных устройствах, где контекст может быть утерян из-за небольшого размера экрана. Выпадающие списки, якорные ссылки и наложения меню могут сбивать с толку, появляясь мгновенно. Поскольку меню занимает весь экран, взаимосвязь между ним и страницей (например, «является ли это содержимое новой страницей?») трудно понять без анимационной подсказки. (Почему пользователю важно знать, где оно располагается? Если он думает, что находится на новой странице, то он по ошибке может нажать «Назад» для перехода к предыдущему виду.)


Движения как знак
Анимации помогают пользователям понять, как взаимодействовать с UI-элементами. Направление (или другие атрибуты) движения обозначает тип допустимых действий. Например, окно, расширяющееся от нижней части экрана к верхней, сигнализирует пользователю, что его можно закрыть, свайпнув вниз.,


Привлечение и угон внимания
Поскольку зрительная система человека очень чувствительна к движению, анимация может использоваться для привлечения внимания пользователей. С одной стороны, это может сделать едва заметный признак очевидным, но с другой – бесполезная анимация отвлекает и раздражает пользователя. Кроме того, использование анимации для привлечения внимания – далеко не самый лучший способ её использования.



Таким образом, когда UI-анимации быстрые и ненавязчивые, они могут улучшить взаимодействие с пользователем, предотвращать дезориентацию и усиливать вложенные в них значения. Но их нужно использовать с умом, поскольку они могут стать подавляющими и с лёгкостью отвлекать внимание пользователей.
Читайте так же: 20 вдохновляющих интерактивных прототипов на 2020