Анимация на сайте

Анимация на сайте: инструмент, а не украшение

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

Если помогает, анимация остаётся. Если просто красиво, но отвлекает от кнопки или замедляет загрузку, я предлагаю от неё отказаться. Иногда это разочаровывает, но заявки важнее.

Где движение работает лучше всего

По опыту, в малом бизнесе пользу приносят пять видов анимации.

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

Порядок появления блоков. Когда блоки мягко проявляются при прокрутке, глаз следует за ними. Это помогает вести человека по странице в нужном порядке: проблема, решение, доказательства, цена, кнопка.

Схемы процессов. Как проходит ремонт, как работает доставка, что происходит после заявки. Анимированная схема из четырёх шагов объясняет это быстрее абзаца текста.

Калькуляторы и квизы. Плавный пересчёт цены, понятные переходы между вопросами. Человек видит, что его ответы на что-то влияют, и доходит до конца.

Цифры и результаты. Счётчик, который доходит до реального числа, привлекает внимание к важному факту. Главное, чтобы число было настоящим.

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

Самые частые ошибки, которые я вижу на сайтах небольших фирм:

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

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

Лёгкие средства вместо тяжёлых библиотек

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

В итоге сайт остаётся быстрым, а это важно и для клиентов, и для Google. Подробнее о скорости на странице ускорения сайта.

Доступность: не всем нравится движение

У части людей резкая анимация вызывает дискомфорт или головокружение. Поэтому в телефонах и компьютерах есть настройка «уменьшить движение». Мои сайты её учитывают: если она включена, блоки появляются спокойно, без движения. Кроме того, ничего важного не мигает быстро, а любое автоматическое движение можно остановить. Это часть требований WCAG, на которые ориентируется европейское законодательство о доступности. Подробнее на странице про доступность сайта.

Анимация и UX идут вместе

Движение не спасёт сайт с плохой структурой. Если человек не понимает, что вы предлагаете, анимация только отвлечёт его сильнее. Поэтому я сначала собираю структуру и тексты, проверяю, что страница понятна в статичном виде, и только потом добавляю движение в 3–5 ключевых местах. Об этом подробнее на странице UX/UI дизайна.

Цена

Отдельно анимацию я не продаю: она входит в проект сайта. Лендинг от 400 €, сайт компании от 700 €, большой сайт на своей CMS от 2400 €. Если нынешний сайт выглядит устаревшим, логичнее всего редизайн от 400 €: новый сайт на старом домене с продуманным движением с самого начала. Цены в евро, окончательные после созвона. Пришлите пару сайтов, которые вам нравятся: разберём, какие эффекты в них работают на продажи, а какие только на впечатление, и что из этого имеет смысл взять в ваш проект.