Посетитель заходит на сайт, просматривает страницу, изучает товары или услуги — и уходит. Это типичная ситуация для владельцев бизнеса. Так происходит потому, что потенциальный клиент не находит удобного способа связаться с компанией или не хочет тратить время на поиск телефона и заполнение формы. В результате ваш трафик на сайте не конвертируется в заявки.

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

Для этого организовали А/Б-тест и сравнили поведение пользователей на двух версиях сайта. Результат получился показательным: анимированная кнопка дала на 28% больше заявок.

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

Что тестировали#

Основная гипотеза звучала так: анимированная кнопка обратного звонка привлечет больше внимания, чем статичная, поэтому пользователи будут чаще нажимать ее и оставлять контакты. 

Объектом эксперимента стал обратный звонок Jivo. Пользователь может кликнуть по кнопке обратного звонка и оставить номер телефона, чтобы менеджер ему перезвонил.

Анимацию добавили на кнопку, которая находится рядом с окошком Jivo в правом нижнем углу экрана.

При клике на кнопку обратного звонка появляется форма, в которой пользователь сможет оставить свой номер.

Эксперимент проводили в формате А/Б-теста:

• Контрольная группа видела стандартную кнопку обратного звонка без анимации.

• Тестовая группа ту же кнопку, но с легкой пульсацией.

Трафик распределили поровну. Каждый пользователь всегда видел одну и ту же версию сайта. Тест проходил 11 календарных дней.

Показатели до эксперимента#

Перед запуском теста мы проанализировали статистику по взаимодействию пользователей с функцией обратного звонка за предыдущие два месяца:

• 5 150 643 пользователей увидели кнопку обратного звонка на сайте.
• 23 428 человек нажали на кнопку обратного звонка.
• 6 396 посетителей оставили свои контакты.

Средние значения конверсии выглядели так:

Метрика	Значение
Конверсия из открытия сайта в нажатие на кнопку обратного звонка	0.455%
Конверсия из нажатия на кнопку обратного звонка в отправку контактных данных	27.3%

В рамках А/Б-теста мы хотели проверить, как анимация повлияет на конверсию из открытия сайта в клик по кнопке обратного звонка.

Чтобы провести эксперимент, разделили аудиторию на две равные группы:

• Контрольная группа: 758 419 посетителей, которые видят кнопку без анимации.
• Тестовая группа: 759 657 посетителей, которые видят анимированную версию кнопки.

Результаты эксперимента#

Конверсия из открытия сайта в клик по кнопке обратного звонка#

Контрольная группа без анимации кнопки

0.203% — 1 538 пользователей кликнули по кнопке обратного звонка после открытия сайта.

Тестовая группа с анимацией

0.242% — 1 839 пользователей кликнули по кнопке.

Разница составила +0.039 процентного пункта, что дает примерно 19% относительного роста.

Сравнение конверсии для анимированной и статичной кнопки обратного звонка

Конверсия из клика по кнопке обратного звонка в отправку контактных данных для связи#

Следующий шаг — проверить, оставляют ли пользователи заявку после того, как кликнули по кнопке обратного звонка.

Контрольная группа без анимации

27.9% — 429 посетителей, которые кликнули, в итоге оставили заявку.

Тестовая группа с анимацией

29.2% — 549 пользователей оставили заявку.

Есть небольшой рост — около +1.3 процентного пункта, однако статистически значимого отличия нет (p ≈ 0.21). 

Это означает, что вероятность получить такую разницу случайно составляет около 21%, поэтому нельзя утверждать, что улучшение связано именно с изменениями в тесте.

Итоговая конверсия из открытия сайта в отправку контактных данных#

Теперь перейдем к самой важной метрике: количеству заявок, которое получает бизнес на одном и том же объеме трафика.

Контрольная группа без анимации кнопки

0.0566% — 429 заявок.

Тестовая группа с анимацией

0.0723% — 549 заявок.

Рост составил +0.0157 процентного пункта, или +28% относительного прироста.

Что это означает#

Чтобы оценить бизнес-эффект, возьмем трафик 759 000 посетителей в месяц.

При статичной кнопке обратного звонка 429 посетителей оставляют заявки на обратный звонок. Если добавить движение, мы получаем уже 549 заявок.

Получается, что благодаря анимации к нам приходит +120 потенциальных клиентов за 11 дней и около 327 человек в месяц без увеличения рекламного бюджета.

Если хотя бы 20% обращений конвертируются в сделки, это +65 продаж при том же объеме трафика.

Почему анимация кнопки работает#

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

Анимация привлекает внимание#

Когда человек читает страницу, его взгляд сосредоточен на тексте или карточке товара. Но периферийное зрение продолжает сканировать интерфейс.

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

Создает эффект «живого» интерфейса#

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

Побуждает к действию#

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

Как использовать анимацию на сайте#

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

Анимируйте от одного до трех ключевых элементов на странице

Лучше всего подходят:

• кнопки обратного звонка;
• чат для сайта;
• основные призывы к действию (оставить заявку, записаться на консультацию).

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

Используйте мягкие эффекты

Активная анимация раздражает пользователей. Хорошо работают ненавязчивые движения:

• мягкая пульсация;
• небольшое покачивание;
• плавная анимация при наведении.

Вывод#

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

Анимация кнопки обратного звонка:

• увеличила число кликов на 19%;
• привела к росту заявок на 28%;
• и при этом не ухудшила дальнейшие этапы воронки.

Именно поэтому в Jivo мы регулярно тестируем новые решения — чтобы помогать бизнесу получать больше клиентов при том же объеме трафика и рекламном бюджете.

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

Как установить анимированную кнопку обратного звонка в Jivo

1. Перейдите в Управление → Каналы связи → Обратный звонок:

Нажмите Подключить обратный звонок:

2. Выберите основные параметры. Вы можете включить опцию «Показывать отдельную кнопку обратного звонка», тогда на сайте в нижнем правом углу будет отображаться кнопка обратного звонка с анимацией. Можно также добавить форму заказа звонка по центру экрана.

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

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

4. Определите операторов, которые будут обрабатывать звонки, и настройте, на какие номера они будут поступать.

5. Выберите страны, где опция будет доступна посетителям.

6. Дополнительно можно включить отложенный звонок: если операторов нет на месте, пользователь сможет выбрать удобное время, в которое ему стоит перезвонить. Этот параметр станет доступен после подключения функции в разделе «Обратный звонок».

7. Выберите отображаемый номер. При необходимости задайте отдельный номер, который клиент увидит во время звонка — он может отличаться от основного. Этот параметр также можно подключить в разделе «Обратный звонок».