Как анимация влияет на UX

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

В UX движения и анимация могут оказаться очень полезными, если использовать их правильно. Движения чаще всего играют роль тонкой обратной связи с микровзаимодействиями, а не просто развлекают пользователей. В этой статье мы узнаем, в чём же польза ненавязчивой анимации.

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

Анимации могут быть полезны, впечатляя пользователей общей картиной UI, но не стоит ими перебарщивать – в первую очередь анимации нужно использовать в качестве легкозаметного, плавного взаимодействия с продуктом.

Миссия UI-анимации

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

Движения и взаимодействия

Анимации полезны в форме нативных взаимодействий. Повсеместный пример – анимация навигационного меню, выезжающего при нажатии на бургер-кнопку (hamburger icon). Короткая анимация может гарантировать, что пользователи увидят результат срабатывания кнопки.

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

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

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

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

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

Движения и анимация — Когда перетаскивание используется для изменения порядка в таблице, маленькая анимация даёт возможность посмотреть на новый порядок.

Анимация, сообщающая об изменении интерфейса

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

Сделать заметным изменение режима;
Показать метафору перехода к другому режиму.

Например, изменение значка карандаша после нажатия на него сигнализирует о переходе из режима редактирования в режим сохранения.

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

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

Загружая результаты поиска рейсов, Hipmunk предлагает сразу несколько анимированных подсказок. Во-первых, анимированный летящий бурундук. Однако в то же время возникают другие, более коммуникативные анимации: число результатов полета постоянно увеличивается от 0 до 754, что указывает на то, что система выполняет некоторые поиски. Кроме того, заполнитель показывает, где контент будет отображаться при загрузке результатов. Индикатор выполнения вместе с двумя анимированными эллипсами показывает, что результаты всё ещё загружаются. Наконец, по мере загрузки новых результатов и изменения порядка релевантности анимация показывает новые результаты, появляющиеся в списке. Однако количество одновременных анимаций огромно: сила любой из этих анимаций, привлекающих внимание пользователя, уменьшается из-за конкуренции со всеми остальными.

/////////////////////////////////////////////

Движение как пространственная метафора

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

Галерея IOS использует метафору зума, чтобы показать место в системе, где в данный момент находится пользователь. У перехода между годами, месяцами и днями есть анимация увеличения или уменьшения масштаба, которая помогает понять, листают они фотографии вверх или вниз. Такой подход помогает удерживать внимание пользователя на контенте.

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

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

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

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

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

Движения как знак

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

Вкладка «Сейчас играет» анимирована таким образом, чтобы помочь пользователю понять, что её можно закрыть, потянув вниз.

Анимация отскока – признак того, что при пролистывании элемента списка отображаются параметры.

Привлечение и угон внимания

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

Refinery29 проводят опрос о влиянии соц.сетей на психическое здоровье, показывая пульсирующее свечение на ползунке, чтобы усилить значение и привлечь внимание пользователя. Такое ограниченное использование анимации является относительно мягким (хотя в большинстве случаев бесполезным) способом привлечения внимания пользователя. Если бы анимации были широко распространены по всему сайту, они были бы отвлекающей проблемой.

Перемещение контента на страницах не приносит никакой пользы, а только отвлекает от него пользователя.

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

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

Оригинал статьи.

Читайте так же: 20 вдохновляющих интерактивных прототипов на 2020