Повышаем конверсию сайта с помощью веб-анимации. Личный кейс

Обсудить
Повышаем конверсию сайта с помощью веб-анимации. Личный кейс

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

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

В этой статье вы узнаете, как и для чего целесообразно применять анимацию на сайте, а также какие технологии лучше выбирать для создания. Чтобы не лить воду, буду объяснять на примере анализа своего сайта svetozor.com Это позволит вам по мере прочтения статьи увидеть всё вживую и попробовать на практике.

Интерактивная заставка

Интерактивная заставка

Первое, что видит посетитель сайта, — небольшой вводный интерактив. Задача: зацепить посетителя и вовлечь во взаимодействие с сайтом.

Спидометр сразу показывает, что в итоге получит клиент (выгоду). Затем спидометр плавно исчезает, и прилетает надпись, которая даёт понять, каким образом клиент достигнет результата, указанного в начальной части заставки.

Вся интерактивность этой заставки в том, что в конце посетитель нажимает на кнопку «приступить». Казалось бы, мелочь, но важная. Человек начал взаимодействие с сайтом.

Зачем же здесь нужна анимация? Ведь можно было показать статическую картинку спидометра и ниже надпись с кнопкой и не тратить время и ресурсы на анимирование.

Думаю, если вы посмотрите на эту заставку и представите статичный вариант, многое поймёте сами.

  1. Эффект захвата внимания статичного варианта значительно ниже.
  2. Анимация позволяет лучше донести информацию. На статичном спидометре мы смогли бы показать только некую фиксированную цифру. А на «живой» картинке удалось показать ускоряющийся рост денежного потока.
  3. Анимация позволяет задать нужную нам последовательность восприятия. Посетитель не может пропустить этапы, которые важны для его «подготовки» к принятию решения, которого мы ждём.
  4. Интересно узнать, что будет делать дальше прилетевшая «кнопка-ракета», если на неё нажать. Это же не какая-то там статичная кнопка, а ракета, которая должна куда-то полететь :)
Недоработки 

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

Решение: разместить рядом с каждой цифрой спидометра изображения монеток. Чем больше цифра, тем больше монеток. Либо изобразить денежные символы.

Сила анимаций

Сила анимацийПосле анимированной заставки слегка «разогретый» посетитель попадает на основной сайт.

В заставке мы объяснили:

  • наша цель — помочь клиенту повысить эффективность сайта;
  • мы будем повышать эффективность сайта с помощью анимаций.

В этом разделе мы показываем, за счёт чего анимации повышают продажи.

Анимированный заголовок отлично раскрывает суть раздела. Почему недостаточно обычной надписи в заголовке?

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

Плюс такой заголовок создаёт иллюзию общения с чем-то живым.

Каждый пункт раздела состоит из текста и анимированной картинки. «Живые» картинки выполняют ту же роль, что и анимация заголовка — улучшают понимание сути каждого пункта.


Технологии

Анимация заголовка выполнена с помощью CSS 3. Его сейчас поддерживают практически все браузеры, и можно смело применять на своих сайтах. Этот способ удобен тем, что не требует особых навыков программирования. Лучше всего подходит для случаев, когда нужно плавно менять 1-2 свойства объекта. Например, в заголовке циклично меняется угол картинок рук и кадры моргания глаз.

Для картинок пунктов используется GIF. Выбор обусловлен тем, что область картинки имеет фиксированные пропорции, а сама анимация — лёгкие и простые кадры. Сами GIF-картинки созданы с помощью векторного редактора и фотошопа.

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


Недоработки

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

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

Почему мы

Почему мыЭтот раздел доносит до потенциального клиента выгоду работы со мной и по реализации аналогичен предыдущему разделу.

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

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

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


Недоработки

Главная недоработка — наличие ресурсоёмкой анимации.

Решение: использовать вместо стандартного вывода на canvas технологию webgl. Это позволит задействовать аппаратное ускорение графического процессора и значительно повысить производительность. Если раньше поддержка webgl браузерами была слабой, то сейчас с этим практически нет проблем.

Первый шаг

Первый шагЗадача последнего раздела — объяснить детали дальнейших действий. Чтобы не выдавать скучный список текстовой информации, это оформлено в видео поездки на машине бизнес-класса. Итогом поездки будет форма обратной связи.

Чтобы движение машины было реалистичнее, для облаков использован эффект параллакса. Технически это реализовано с помощью CSS 3 и JavaScript.


Недоработки 

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

Выводы

Прежде чем добавить на сайт анимацию, подумайте, зачем она нужна и какие задачи будет решать. Добавлять анимацию по принципу «чтобы было» — плохая практика, так как она увеличивает вес страницы и потребление ресурсов браузера.

Анимация — это средство достижения целей. В первую очередь определитесь с целями, а уже потом выбирайте инструмент решения.

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

Комментарии

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