Коротко. Анимация нужна, когда помогает понять продукт, провести посетителя по сценарию или сделать бренд узнаваемым. Если движение ничего не объясняет, замедляет загрузку или мешает нажать кнопку — оно вредит.
Когда анимация помогает
- Сложный продукт. Показать, как работает сервис, быстрее схемой в движении, чем тремя абзацами текста.
- Последовательность. Этапы работы, путь заказа, превращение «до» в «после».
- Бренд. Узнаваемое движение логотипа или элементов запоминается лучше статичной картинки.
- Обратная связь. Кнопка реагирует на нажатие, форма показывает, что заявка отправлена, — человек понимает, что всё работает.
Когда мешает
- анимация на каждом блоке, и страница «пляшет» при прокрутке;
- заставка, которую нельзя пропустить;
- текст появляется так медленно, что его не успевают прочитать;
- тяжёлое видео или 3D на первом экране тормозит загрузку на телефоне;
- движение отвлекает от кнопки заявки.
Правила хорошей анимации
- Цель у каждой сцены. Если нельзя объяснить, зачем она, её не нужно.
- Короткая. Движение интерфейса — доли секунды, а не секунды.
- Не блокирует. Посетитель может читать, прокручивать и нажимать, не дожидаясь конца.
- Работает на телефоне. Проверяется на слабых устройствах.
- Уважает настройки. Если в системе включено «уменьшить движение», сайт показывает статичную версию.
Пример
На главной этого сайта при первом заходе на весь экран появляется название студии, а пиксель из логотипа отрывается и открывает сайт. Это одна короткая сцена, её можно пропустить кликом или прокруткой, а при отключённой анимации она не показывается.
Если хотите добавить движение на свой сайт, посмотрите, что входит в работу над анимацией для сайта.