5 причин почему нужна UI анимация

Alena Sarokina
Дизайн-кабак
3 min readOct 24, 2022

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

Для чего тратить время на создание анимации, какую пользу она приносит пользователям👇​

Анимация чекбокса

1. Объясняет суть действия

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

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

Анимация перехода по вкладкам

2. Показывает структуру

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

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

Анимация загрузки

3. Отражает состояние

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

Лучше бы дизайнеры показали состояние анимацией и предотвратили мои ошибки.

Анимация появления и скрытия гамбургер-меню

4. Подсказывает жесты

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

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

5. Облегчает работу мозга

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

--

--

Дизайн-кабак
Дизайн-кабак

Published in Дизайн-кабак

Cамый большой коллективный блог про дизайн на русском языке

Alena Sarokina
Alena Sarokina