PROFSOFT | UI-анимация: как помогает пользователю?

Выделение ключевых действий

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

Формирование ментальных моделей

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

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

Отображение процесса загрузки или выполнения задачи не оставляет пользователя без ответа, а передаёт, что его команда выполняется. Чтобы человек перед экраном не гадал: «А отреагировала ли система на мой запрос? Долго ли ждать результат?», в интерфейс внедряется прогресс-бар, который заполняется по мере выполнения команды и сообщает степень её выполнения. Ещё можно встретить колесико загрузки при открытии тяжёлого файла, изменение размера или цвета кнопки при нажатии и так далее. Анимация обратной связи создаёт ощущение активности и отзывчивости интерфейса на действия пользователя.

Предварительный просмотр действий

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

Демонстрирование происходящих изменений

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

Визуальные подсказки

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

Заключение

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