Анимация на сайте: когда она помогает объяснить предложение, а когда мешает

Движение оценивают по тому, что понял посетитель

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

Сначала нужна причина движения. Без неё подрядчику передают пожелание украсить страницу, а принимать результат приходится по вкусу участников встречи.

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

Смысловое изменение и украшение

Для расчёта стоимости предпочтителен спокойный отклик: обновлённый итог остаётся в привычном месте, а подпись объясняет, какое условие повлияло на сумму, поэтому посетителю не приходится искать результат среди движущихся карточек и заново разбираться в расположении страницы. Этапы работы удобно представить последовательными блоками: пояснение остаётся рядом с названием этапа и не меняет своего места во время чтения. Их можно прочитать в своём темпе. Прокрутка уже помогает перейти к следующему этапу. Дополнительное выезжание каждого абзаца не сообщает нового порядка.

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

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

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

Три способа показать изменение на странице

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

Самый спокойный вариант — неподвижный. Он подходит там, где человек читает условия и сопоставляет их со своей задачей.

Чтение, отклик и объяснение процесса

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

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

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

Автоматическое движение требует управления

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

Управление должно быть доступно. Кнопка вне видимой области не помогает остановить движение в момент чтения.

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

Остановка карусели и сохранение места

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

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

Явную остановку лучше сохранять до нового запуска, иначе посетитель отведёт указатель к форме, карточки снова начнут переключаться и оставят его без того времени на чтение, ради которого он остановил демонстрацию. Пауза освобождает человека для других действий. Для страницы услуг предсказуемое состояние полезнее лишней автоматической смены. Если у блока нет убедительной причины продолжаться, оставьте его неподвижным после первого показа. Это сокращает и число управляющих элементов, и объём работы при приёмке.

Мигание рассматривают отдельно от плавного движения. Критерий WCAG 2.3.1 уровня A ограничивает вспышки: больше трёх за секунду допускается только при соблюдении специальных порогов общей и красной вспышки. Для обычной страницы услуг разумнее отказаться от мигающего привлечения внимания, чем поручать маркетологу измерять эти пороги. Нужное действие выделяют содержанием, расположением и контрастом.

Как выглядит страница с уменьшенной анимацией

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

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

Техника W3C C39 описывает учёт системного предпочтения через prefers-reduced-motion. Браузер передаёт разработчику значение reduce, когда человек просит уменьшить движение; отсутствие такого предпочтения обозначено как no-preference. Реакцию эффектов на этот выбор проверяют на странице. При показе спокойного режима исполнитель объясняет, какие эффекты меняются после системного выбора.

Что сохраняется после выключения эффекта

В расчёте стоимости новый итог появляется без пролёта и остаётся рядом с условиями. В описании этапов карточки видны в понятной последовательности. Форма сообщает об ошибке текстом. Успешное действие тоже получает устойчивое сообщение. Такой набор позволяет оценить страницу по содержанию, даже если декоративное движение убрать полностью.

Анимацию движения, вызванную взаимодействием, рассматривает WCAG 2.3.3 уровня AAA: движение можно отключить, кроме необходимого для функции или передаваемой информации. Уровень и выбранный объём требований к доступности фиксируют в задании. Для этой страницы услуг предпочтительнее поддержать спокойный режим сразу. Посетитель сможет пользоваться расчётом и формой так, как ему удобно, а исполнителю не потребуется объяснять отсутствие этой возможности после появления жалобы.

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

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

Решение по каждому эффекту в задании дизайнеру

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

Начните с места, где движение меняет смысл. Украшения проще решать после расчёта, формы и описания услуги.

Короткая запись для согласования

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

• Причина. Какую информацию помогает понять движение и почему статичного варианта недостаточно.
• Запуск. Эффект начинается автоматически или после намеренного действия человека.
• Конечный вид. Где остаётся ответ, как его прочитать и вернуться к предыдущему условию.
• Управление. Как остановить продолжительный показ и возобновить его по желанию.
• Спокойный режим. Что появляется вместо движения и как сохраняется весь смысл блока.
• Устройства. Как выполняется то же действие с телефона и клавиатуры.

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

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

Согласованное решение можно передать в ШТАБ ИТ для разработки страницы вместе с содержанием и перечнем действий посетителя. Тогда стоимость работы обсуждают по нужным блокам и режимам. У страницы остаётся понятный критерий: движение помогает увидеть изменение, а спокойный вид позволяет получить ту же информацию и выполнить то же действие.