Анимация в пользовательском интерфейсе: когда применять и как не ошибиться

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

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

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

Для чего анимировать сайты и приложения? В реальной жизни окружающие предметы мгновенно реагируют на наши действия и показывают свое состояние. Шариковые ручки оставляют след на бумаге и перестают писать, если чернила кончились. Ключ поворачивается в замочной скважине или не входит в нее, если его вставили неправильной стороной. В интерфейсах за обратную связь отвечает анимация: она показывает пользователю, что кнопка нажалась, а загрузка началась. Без неё человек не понимает, работает программа или нет.

Анимировать интерфейс полезно для достижения 4 целей:

1. Подтвердить, что действие выполняется или выполнено

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

2. Показать статус системы

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

3. Помочь в навигации

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

4. Подсказать, что и как нужно сделать

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

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

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

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

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

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

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

1. Для часов и браслетов — около 150–200 мкс;

2. Для смартфонов — 200–300 мкс;

3. Для планшетов — 400–450 мкс;

4. Для ПК — от 150 до 200 мкс.

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

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

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

Вторая опасность — излишняя декоративность, отвлекающая от задач. Красивые эффекты не должны замедлять и утомлять пользователя. Нельзя допускать, чтобы движущиеся объекты мешали работать с приложением . В противном случае количество анимации стоит уменьшить или вовсе убрать ее. Эстетичность прекрасно сочетается с информативностью. Главное — найти баланс между ними.

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

Об анимации в пользовательском интерфейсе рассказал Александр Зерин, руководитель лаборатории продуктового дизайна FINIK Design Lab (входит в Лигу Цифровой Экономики). Больше примеров из практики и рекомендаций смотрите в нашем телеграм-канале FINIK Design Lab.