Анимация на сайте: где она помогает, а где отвлекает и раздражает

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

Зачем сайту анимация

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

Причина в том, как устроено зрение. По словам NN/g, главное достоинство и главный недостаток движения в интерфейсе — оно притягивает внимание. Периферийное зрение реагирует на любое движение, и не замечать его трудно. Если движение связано с задачей посетителя, оно помогает. Если нет — мешает читать, как мешает мигающая реклама сбоку от статьи.

Поэтому вопрос не в том, «нужна ли сайту анимация», а в том, что именно она сообщает. NN/g считает самым уместным применением сдержанную обратную связь в микровзаимодействиях: нажатие, переключение, добавление в список. Анимация, которая ничего не сообщает, только развлекает, а развлечение быстро надоедает.

Анимация притягивает взгляд. Если движение не связано с задачей посетителя, оно отнимает внимание у текста.

Где анимация помогает посетителю

Анимация помогает там, где без неё посетитель может не заметить изменение. Nielsen Norman Group выделяет четыре таких случая.

Пример из исследования NN/g: после нажатия «В корзину» на одном сайте маленький счётчик корзины в углу просто менял цифру. Посетитель мог этого не заметить и добавить товар повторно. Короткая анимация повышает шанс, что человек увидит обратную связь, и при этом мешает меньше, чем всплывающее окно.

Важная оговорка NN/g: анимация не заменяет видимую навигацию с понятными подписями. Она лишь дополняет её, подсказывая направление движения.

Факт. По данным Nielsen Norman Group, длительность большинства анимаций интерфейса укладывается в 100–500 мс.

Где анимация мешает

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

Nielsen Norman Group предупреждает об одновременных анимациях: когда на экране движется сразу несколько элементов, каждый из них теряет способность привлечь внимание. Посетитель не понимает, куда смотреть, и устаёт.

Отдельная категория — анимация как давление. NN/g прямо называет тёмным паттерном попытку перехватить внимание анимацией или вызвать страх упустить: мигающие таймеры обратного отсчёта, трясущиеся кнопки, всплывающие счётчики «кто-то только что купил».

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

Мнение. Если сомневаетесь, нужна ли анимация блоку, уберите её и посмотрите, стало ли что-то непонятнее. Если нет, движение было украшением, и без него страница читается спокойнее.

Сколько должна длиться анимация?

Анимация интерфейса длится доли секунды. Nielsen Norman Group даёт ориентир: длительность большинства анимаций — от 100 до 500 мс, в зависимости от сложности и расстояния, которое проходит элемент. Слишком быстрое движение трудно разглядеть, слишком медленное ощущается как задержка.

Правило NN/g для выбора — самая короткая длительность, при которой движение не выглядит рывком. На практике анимации слишком длинные встречаются гораздо чаще, чем слишком короткие. И чем чаще посетитель видит анимацию, тем короче и сдержаннее она должна быть: эффект, который радует при первом открытии меню, к десятому разу раздражает.

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

Плавность: почему движение не должно быть равномерным

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

Nielsen Norman Group советует чаще всего использовать кривую ease-out: движение начинается быстро и замедляется в конце. Такая анимация кажется отзывчивой — элемент сразу реагирует на действие, — а замедление даёт глазу время заметить, где он остановился. Для элементов, которые уходят с экрана, иногда берут обратную кривую ease-in: предмет разгоняется и исчезает.

Кривую плавности дизайнеру стоит передавать разработчику явно, а не видеороликом. В CSS она записывается функцией cubic-bezier или словами ease-out, ease-in-out. Без такой договорённости разработчик подберёт кривую на глаз, и движение на сайте будет отличаться от макета.

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

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

Руководство по доступности WCAG задаёт здесь конкретные границы:

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

Последнее требование относится к уровню AAA, самому строгому в WCAG, но выполнить его несложно: достаточно учитывать настройку уменьшения движения в системе посетителя.

Как учитывать настройку уменьшения движения

В настройках телефонов и компьютеров есть пункт «Уменьшить движение». Сайт может узнать о нём через медиазапрос prefers-reduced-motion. Справочник MDN описывает его так: он определяет, включил ли посетитель на устройстве настройку, которая сводит к минимуму лишнее движение.

Если настройка включена, крупные анимации отключают или заменяют спокойными: вместо выезда и масштабирования — простое появление. Пример в CSS:

@media (prefers-reduced-motion: reduce) {
  .hero-card,
  .reveal-on-scroll {
    animation: none;
    transition: none;
  }
}

Руководство web.dev отдельно напоминает: учитывайте настройку prefers-reduced-motion, потому что анимация вредит части посетителей. Отключать стоит параллакс, выезжающие при прокрутке блоки, автоматические карусели и масштабирование. Обратную связь — смену цвета кнопки, появление галочки — можно оставить: это не крупное движение.

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

Как сделать анимацию без рывков

Плавность анимации зависит от того, какое свойство элемента меняется. Руководство web.dev советует избегать свойств, которые заставляют браузер пересчитывать раскладку страницы или перерисовывать её: ширины, высоты, отступов, положения через top и left. Такая анимация дёргается на слабых телефонах и нагружает процессор.

Для движения и масштабирования используют свойство transform, для появления и исчезновения — opacity. В статье web.dev о сдвигах раскладки сказано прямо: transform позволяет анимировать элементы без сдвигов раскладки. Вместо изменения высоты берут transform: scale(), вместо смещения через top — transform: translate().

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

Как проверить анимации на своём сайте

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

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

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

Источники

• The Role of Animation and Motion in UX — Nielsen Norman Group
• Executing UX Animations: Duration and Motion Characteristics — Nielsen Norman Group
• prefers-reduced-motion — MDN Web Docs
• Understanding SC 2.3.3 Animation from Interactions — W3C
• Understanding SC 2.3.1 Three Flashes or Below Threshold — W3C
• Understanding SC 2.2.2 Pause, Stop, Hide — W3C
• How to create high-performance CSS animations — web.dev
• Cumulative Layout Shift (CLS) — web.dev