Как анимация на сайте повышает конверсию

«Ну красиво, а смысл какой?», «Это всё свистоперделки», «Лишняя мишура, главное — чистенький дизайн и чтобы текст по-человечески написан был». Про анимацию в веб-дизайне пишут в комментариях на vc.ru разное, поэтому решили разложить по полочкам, как эффекты помогают решать задачи бизнеса. Все подробности и примеры в статье.

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

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

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

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

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

С помощью анимации анимацииможно за ручку провести потенциального клиента по сложной информации, задать иерархию в тексте и добавить эффект мини-геймификации. Например, в кейсе для ивента, посвященного криптоиндустрии, пользовательский путь сопровождает космолёт. Мы обыграли в тексте на сайте название события «Crypto вселенная», добавили космических метафор в заголовки, а после — тему поддержали в дизайн-концепции. Получилась единая динамичная история, в которой интересно наблюдать за космолётом и хочется узнать, куда он в итоге прилетит.

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

Движение объекта на сайте помогает не только довести пользователя до финала страницы, но и даёт возможность «поиграться», вернуться в предыдущий блок. Для сайта компании Cash-in-drive сделали анимацию автомобиля, который также прокладывает путь от начала до конца страницы. При скролле можно управлять скоростью и направлением движения. Пользователь получит эмоцию «вау, прикольно», возможно, скинет ссылку в рабочий чат и дополнительно расшарит сайт. А это уже полезный побочный эффект.

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

Пользователю, чтобы оставить заявку, важно знать, насколько торты вкусные, какое у них оформление. Наши заказчики Palette Dessert предлагают 10 видов начинки и 6 видов дизайна. Это крутые ценности, которые нельзя не раскрыть подробно на сайте. Кондитерская предлагает интересные вкусовые сочетания, а не просто «Наполеон с заварным кремом». Оформлением занимается художник, который из тортов делает мини-шедевры. А главное есть качественный фотоконтент готовых работ для демонстрации, и его тоже важно разместить.

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

В блоке с начинками по наведению на вкус раскрываются описание и фотографии торта в разрезе. Здесь пользователь может немного залипнуть. Психологически хочется навести на каждый объект и рассмотреть слои. Это так же воспринимается, как интерактив: аудитория сразу включается в контент. Вся информация расположена в одном месте, поэтому удобно сравнивать разные варианты. Горизонтальным скроллом разместили карточки с декором в одной плоскости и иллюзорно сократили лендинг: резкая смена движения направления привлекает внимание и вносит разнообразие.

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

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

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

Эмоции запоминаются и помогают продавать, поэтому так часто эксплуатируются в рекламе. Так же это работает и на сайте. Только эмоции в письменной форме могут считываться двояко, здесь огромную роль играет настроение самого пользователя. Анимация как раз помогает направить на нужный лад и передать нужный образ.

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

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

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

На главном экране сайта по аренде приватной виллы Icon на острове Самуи создаётся совсем противоположное ощущение. Плавная медленная анимация подчёркивает визуал на главном экране и дополняет ощущение «дорого-богато». Получается с главного экрана передать атмосферу премиум-сегмента, который по карману не всем, чем и привлекает ЦА.

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

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

Для компаний, которые ищут надёжное продвижение, важно сотрудничество с опытными рекламными агентствами. На лендинге команды Rise мы вынесли важные тезисы в один из первых блоков: рассказали, что исполнителям помогает настраивать кампании и показывать хороший результат. С помощью анимации с интерактивом визуализировали метафору, что «эффективность» буквально можно включить. Такой приём акцентирует внимание, чтобы пользователь не пропустил важный момент и более внимательно погрузился в ценность предложения.

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

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

Концепция разрабатывается строго под задачу бизнеса и ожидания ЦА. Соответственно, далеко не на всех проектах анимация будет уместна и поможет продать услугу или продукт. Эффектов должно быть умеренно, без переборов. Любой излишек будет раздражать пользователя и оттолкнёт от предложения.

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

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

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

Изначально для кейса ЖК «Королёва 13» планировалось использование лёгкой анимации, но в процессе разработки совместно с заказчиками приняли решение отказаться от эффектов, чтобы не перегружать страницу.

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

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

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

Больше кейсов и полезной информации по веб-дизайну и маркетингу у нас в Telegram-канале @flash_family