Представим лендинг условной мебельной мастерской. Над ним хорошо поработали: заголовок проявляется из тумана, фотографии столов выезжают слева, преимущества появляются по одному, а фон лениво плывет в другую сторону от текста. На большом мониторе в спокойной обстановке это выглядит красиво, и автор макета имеет полное право собой гордиться.
Теперь откроем ту же страницу в метро. Человек торопится, листает большим пальцем сразу к ценам, а блоки еще только собираются выехать. Пара секунд пустого экрана, потом все появляется разом. Лендинг ведет себя как фокусник, который перед каждым ответом обязательно достает кролика из шляпы. Первый раз забавно, на третьем хочется просто узнать цену.
Движение, которое что-то объясняет
У анимации есть работа, которую она делает лучше статичного интерфейса. Кнопка слегка меняется при нажатии, и человек понимает, что нажатие засчитано. Товар «улетает» в корзину, и понятно, куда он делся. Список плавно раскрывается, и видно, откуда взялись новые пункты. Такое движение связывает два состояния интерфейса и отвечает на вопрос «что сейчас произошло».
Декоративное движение работает иначе. Оно создает настроение и показывает характер бренда, и это тоже может быть ценно, особенно на имиджевой странице. Но у него другая цена ошибки. Если функциональную анимацию убрать, интерфейс станет менее понятным. Если убрать декоративную, страница станет спокойнее, а информации на ней останется ровно столько же. Мне кажется, полезно перед каждым эффектом честно себе ответить, к какой из двух групп он относится.
Когда эффект начинает мешать
Самая частая проблема — появление блоков при прокрутке. Пока человек читает медленно, все в порядке. Когда он листает быстро, контент оказывается позади собственной анимации, и страница на мгновение выглядит пустой или недогруженной.
Вторая история серьезнее, и она касается не только удобства. В пояснении W3C к критерию 2.3.3 «Анимация от взаимодействий» сказано, что движение, запускаемое прокруткой, у некоторых людей вызывает головокружение, тошноту и головную боль. Параллакс там отдельно назван как пример анимации, которая часто не является необходимой. Это критерий уровня AAA, то есть самого строгого уровня, и W3C не требует выполнять его на каждом сайте. Но сам факт, что эффект может буквально укачать часть посетителей, стоит учитывать при выборе.
Есть и требование попроще. По критерию 2.2.2, уровня A, для движущегося содержимого, которое запускается само, длится больше пяти секунд и показывается рядом с другим контентом, у пользователя должен быть способ его остановить, поставить на паузу или скрыть. Бесконечная бегущая строка или слайдер, который сам листается без кнопки паузы, — как раз про это.
Можно ли пройти сайт без движения
Хорошая проверка для любой анимированной страницы — мысленно выключить все эффекты. Остается ли текст видимым? Понятно ли, куда нажимать? Не прячется ли важная информация в элементе, который появляется только после анимации? Если сценарий целиком держится на движении, это повод его пересмотреть.
В настройках телефона или компьютера можно включить уменьшение движения, и сайт способен эту настройку учитывать. В пояснении W3C среди достаточных техник для критерия 2.3.3 названа CSS-проверка prefers-reduced-motion, а сами варианты решения сформулированы просто: избегать лишней анимации, дать пользователю способ ее отключить или воспользоваться настройкой уменьшения движения в системе. Любой из трех путей лучше, чем ни одного.
Лендинг, который не заставляет ждать
Анимацию на лендинге удобнее планировать вместе со сценарием страницы: где движение подсказывает следующий шаг, а где посетителю нужно спокойно прочитать цену и оставить заявку. Тогда эффекты работают на цель страницы и не спорят с ней.
Что предлагает Тильда и о чем стоит подумать заранее
В Zero Block у любого элемента есть настройки анимации. По справке о базовой анимации, это анимация появления (простое появление, выезд с любой стороны и появление с увеличением) с длительностью, задержкой и точкой срабатывания, параллакс по прокрутке и по движению мыши, а также эффект фиксации элемента. Кроме базовой, есть пошаговая и триггерная анимация для более сложных сценариев.
Возможностей много, и в этом есть своя ловушка: каждый эффект настраивается для конкретного элемента, а общего правила «как на этом сайте двигаются вещи» редактор за вас не придумает. Его лучше договорить до сборки. Еще одна практическая деталь из справки о мобильной версии: в режиме редактирования мобильной версии анимация не работает, поэтому смотреть, как эффекты ведут себя на телефоне, нужно в предпросмотре или на опубликованной странице.
Как решать, оставить эффект или убрать
Я бы задавала каждому эффекту три вопроса. Что человек поймет благодаря ему? Задерживает ли он путь к главному действию на странице, к цене, форме или кнопке заказа? Что увидит посетитель, у которого включено уменьшение движения, или тот, кто листает с недорогого телефона? Если на первый вопрос ответа нет, а на второй он «да», эффект, скорее всего, лишний.
Если на действующем сайте эффектов за годы накопилось столько, что страница больше развлекает, чем продает, их можно пересмотреть в рамках доработки, не переделывая весь дизайн. Мебельной мастерской из начала статьи для этого хватило бы оставить проявление заголовка и плавную реакцию кнопок, а столы пусть стоят на месте. Мебели это, в общем, идет.