Микроанимации в UI — когда полезны, когда раздражают

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

Микроанимации в UI — когда полезны, когда раздражают

Микроанимация — это плавное изменение состояния UI. Кнопка плавно меняет цвет на ховер, пункт меню чуть двигается, чек-бокс пружинит при клике.

Микроанимации в UI — когда полезны, когда раздражают
Три состояния элемента: покой, наведение, нажатие. Каждое — разная плотность анимации.

Хорошо работает: подтверждение действия (галочка после сохранения), плавная смена страницы, состояние загрузки, drag-and-drop. То есть когда пользователю нужна обратная связь.

Плохо: анимация при каждом скролле, эффекты parallax больше 2 элементов одновременно, появление контента с задержкой («модно»). Это снижает воспринимаемую скорость.

Длительность: 100-300 мс — норма. Больше — раздражает. Менее 50 мс — не успевает заметить.

Не забыть: prefers-reduced-motion media query. Часть пользователей физически не переносят анимации, выключите для них.