36
6 мин
На одном из разборов мы насчитали на первом экране семь движений: фон медленно приближался, заголовок собирался по словам, кнопка подпрыгивала, цифры отсчитывались от нуля, справа ехала фотография, ниже вращалась стрелка, а курсор оставлял след. Каждый эффект по отдельности был сделан аккуратно. Вместе они не давали спокойно прочитать предложение.
Мы предложили неприятный, но полезный эксперимент: выключить всё. Страница сразу стала понятнее. После этого вернули два движения — мягкое появление формы и подтверждение нажатия кнопки. Остальное не прошло вопрос «зачем это клиенту?».
Четыре работы, за которые стоит платить
Показать изменение
Форма открылась, товар добавлен, фильтр применён — движение подтверждает действие. Проверочный вопрос: человек понял, что сайт отреагировал, или всё равно нажимает повторно?
Сохранить связь
Карточка раскрывается там, где её выбрали, а не возникает неизвестно откуда. Посетитель сохраняет контекст и понимает, как вернуться.
Направить внимание
Важное уведомление можно один раз мягко подчеркнуть. Если оно заметно и без эффекта, постоянное движение становится лишним.
Объяснить процесс
Изменение схемы или расчёта по шагам помогает увидеть причинно-следственную связь. Здесь движение раскрывает смысл, а не заменяет его.
Если эффект не выполняет ни одной из этих работ, он остаётся украшением. Украшение допустимо, когда не задерживает контент, не мешает управлению и не повторяется навязчиво. Но на коммерческой странице оно не должно конкурировать с предложением.
Красные сигналы на рабочем сайте
- Текст нельзя прочитать, пока он не закончит появляться.
- Каждая карточка выезжает при любой прокрутке, даже если пользователь вернулся назад.
- Кнопка двигается под курсором или пальцем и становится сложнее нажать.
- Фоновое видео загружается раньше цены, формы или фотографии продукта.
- При слабом телефоне прокрутка идёт рывками, а нажатие отзывается с задержкой.
- У посетителя нет возможности уменьшить движение, хотя система просит об этом.
Последний пункт важен не только для аккуратности. Стандарты доступности предусматривают уменьшение необязательной анимации, возникающей из взаимодействия, а устройства умеют передавать сайту пользовательское предпочтение «меньше движения». Подрядчик должен учитывать этот режим, не заставляя владельца сайта разбираться в реализации.
Как мы обсуждаем эффект с заказчиком
Вместо ролика с идеальной демонстрацией открываем рабочую страницу на обычном ноутбуке и телефоне. Один человек читает текст, второй выполняет действие. Просим повторить его дважды: новый посетитель видит анимацию впервые, постоянный — снова и снова. То, что эффектно в первый раз, может быстро превратиться в препятствие.
Фраза для приёмки: «Покажите страницу без анимации и с ней. Что человек поймёт быстрее именно благодаря движению?»
Если ответ сводится к «так современнее», это дизайнерское предпочтение, а не доказанная функция. Мы можем оставить его как часть образа бренда, но честно обозначаем цену: вес, время проверки и риск для слабых устройств.
Живой пример без цирка
В редизайне сайта отеля «Мандариновый Остров» посетителю нужно увидеть атмосферу, выбрать раздел отеля или ресторана и перейти к бронированию. Реальные фотографии и понятная навигация работают сильнее непрерывных эффектов. Движение уместно в галерее и обратной связи интерфейса, но не должно задерживать контакты или меню.
Для медицинской тематики планка ещё строже. Человек может искать информацию в тревожном состоянии, поэтому автозапуск, мерцание и прыгающие призывы вредят доверию. На странице решений для медицинских организаций мы ставим ясность выше демонстрации техники.
Приёмка в три прохода
Смысл
Отключите движение и убедитесь, что страница остаётся понятной и все действия доступны.
Поведение
Включите эффекты, быстро прокрутите страницу, вернитесь назад, откройте форму и нажмите кнопки несколько раз.
Условия
Повторите на телефоне, в режиме уменьшения анимации и при неидеальной сети. Контент не должен ждать декораций.
Вопросы скорости лучше разбирать отдельно, не смешивая их с художественным вкусом; для этого есть материал о скорости сайта и стоимости обращения. А если страница ещё не разработана, полезнее сначала согласовать её логику в рамках создания лендинга.
Хорошая анимация не требует от посетителя восхищаться ею. Она незаметно объясняет изменение и уступает место содержанию. Если после удаления эффекта стало легче читать и действовать, ответ уже получен.
