О задаче

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

Онлайн-сервис для бизнеса с тарифами

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

С чем пришел онлайн-сервис

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

При этом владелец боялся, что с анимацией страницы потяжелеют, а посетители уйдут раньше, чем увидят продукт. Гифка весит несколько мегабайт, не дает прозрачного фона и не привязывается к прокрутке. В открытом кейсе рынка вес изображений превысил 8 Мб, и часть фото пришлось убрать. По открытому материалу рынка при ожидании загрузки 3 секунды теряется около 40% пользователей.

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

Задача показать продукт в движении без потери скорости

Владелец хотел, чтобы посетитель с первого экрана понимал, как устроена платформа, и без лишних усилий доходил до целевого действия. Движение ставим только там, где пользователь ждет реакции, а переходы делаем короткими. Ориентир скорости из открытого материала рынка: от 60 баллов на десктопе, хотя бы 50 на мобильном, первый контент в идеале быстрее секунды. Мест в выдаче мы не обещаем. Результат сравниваем по Метрике за равные периоды до и после.

Особенности сайтов онлайн-сервисов

Абстрактный продукт проще объяснить короткой мини-историей: анимированная иконка, например, показывает, как просто установить программу. На главном экране пользователь оценит, что каждый элемент отзывается на его действия. По открытому материалу рынка большинство людей читают по F-образцу и около 70% времени смотрят на левую часть страницы, поэтому важные элементы стоит держать слева. Требований закона к анимации мы не нашли. Рамки задают скорость загрузки и слабые устройства.

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

Бриф и аудит скорости

Бесплатный разбор проводим до оплаты, а после оплаты сразу берем проект в работу. Бриф занимает 1 день: собираем задачу, аудиторию и страницы, где посетитель ждет отклика. Аудит длится от 3 до 5 дней. В нем смотрим скорость на десктопе с телефоном, тяжелые изображения и гифки, которые тормозят загрузку. По итогам аудита клиент видит, что именно утяжеляет страницы сейчас.

Концепция по аудитории и задаче

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

Живая иллюстрация на первом экране

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

Переходы и отклик кнопок

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

Анимированные иконки

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

Проверка скорости и мобильной версии

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

Что получил онлайн-сервис и как применяет анимацию

Числовые примеры из материала не являются подтверждёнными результатами клиента.

Пример результата в нише. Так обычно выглядит итог за 2 месяца в таких проектах по открытым кейсам рынка: баллы проверки скорости мобильной версии с 62 до 78, когда тяжелое видео первого экрана заменяют легкой анимацией, отказы на первом экране с 48 до 38%, целевые действия первого экрана с 2 до 2,8% визитов. Анимация не задерживает загрузку и подсказывает посетителю следующий шаг.

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

Ограничения проекта

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

Выводы для владельца онлайн-сервиса

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