Как мы протестировали 21 666 человек и выяснили у какой кнопки самая высокая конверсия
Вначале статьи надо добавить интриги и будоражащих фактов, чтобы привлечь внимание. Руководствуясь этим советом, могу сказать, что на практике мы получили увеличение конверсии до 65% при простой смене цвета кнопки. В этой статье расскажем о результатах и как это сделать.
Насколько можно повысить конверсию с помощью цвета?
Не буду рассказывать, что мы изобрели волшебную таблетку по управлению конверсией. В случаях увеличения конверсии я пришел к одному простому выводу. Стопроцентных утверждений, которые будут работать всегда и для всех - не существует. Волшебных таблеток тоже. Ранее мы писали о том, как в некоторых случаях слово «Бесплатно» понижает конверсию. Что уж говорить о других «стопроцентных» истинах.
Итак, насколько можно повысить конверсию, просто изменив цвета кнопки?
Мы получили до 65% повышения конверсии. 65% было самым максимальным результатом тестов. Среднее значение было на уровне 11%. Но даже такое повышение конверсии - очень хороший результат. Учитывая, что этого можно добиться с помощью изменения цвета кнопки.
Красный - цвет победителей
Многие тесты экспертов говорят, что кнопка красного цвета обладает самой высокой конверсией. Почему? Мы знаем, что каждый цвет обладает своими ассоциациями и вызывает определенные эмоции. Красный цвет подразумевает остановку, опасность и страстность. И в большинстве случаев (как считается) он приводит к лучшим результатам в интернет-маркетинге.
Например, в этой статье Uniweb рассказывает о ряде тестов, которые проводили с цветом кнопок. В Unbounce тестировали красную и зеленую кнопки.
У красной конверсии конверсия была на 34% выше.
В Hubspot провели аналогичные тесты. Результат снова в пользу красной кнопки и повышение конверсии на 21%.
Но действительно ли красная кнопка самая конверсионная? На самом деле, нет. На тему психологии цвета написано много статей. И в той же статье Uniweb говорится, что в первую очередь имеет значение контрастность, а не какой-то определенный цвет. Чем лучше выделяется кнопка на фоне сайта, тем больше будет у нее конверсия. Так ли это на самом деле? Я считаю, что не всегда. Об этом чуть ниже.
И даже, если учесть, что контрастность решает все… То становится ли от этого нам легче? Не совсем. Что делать, если контрастным для сайта будет сразу несколько цветов. Какой окажется лучше? И насколько? Именно в этом и помогает А/Б тестирование. А/Б тестирование - это сравнивание 2-х вариантов одного элемента на сайте.
Наши тесты красной, зеленой и синей кнопок
Мы решили провести серию А/Б тестов, чтобы определить насколько цвет кнопки влияет на конверсию. Для этого мы создали в конструкторе KEPLER LEADS несколько похожих попапов с различием только в кнопке. Все тесты проходили в двух интернет-магазинах спортивных товаров.
Тест 1: Красная против синей
В первом случае мы тестировали красную и синюю кнопку.
Как видите фон сайта (зеленовато-голубой) получается приглушенным фоном попапа. В данном случае акцент идет на сам попап. При этом сам фон попапа имеет серо-синий цвет. То есть отталкиваясь от контрастности, мы предполагаем, что красная кнопка должна иметь лучшую конверсию. Потому, что в этом попапе она более контрастная. Так ли это на самом деле?
Но результат теста, нас удивил. В результате синяя кнопка имела конверсию на 9,7% выше, чем красная. И это результат получен не на трафике в полтора землекопа, где половину конверсий делает сам автор теста. Нет. В тесте участвовало 6506 посетителей. Существенная статистика. Конверсия победителя - 4,18%.
Выводы:
- Контрастность работает не всегда, о чем я говорил выше. Но это не значит, что ее не надо принимать в расчет.
- Больше имеет значение понимание целевой аудитории. Того, что они ожидают, какие ассоциации вызывают у них ваши цвета и соответствие цвета их ожиданиям. В данном случае, зеленый и синий цвет более близок для аудитории. Так как до появления попапа они были на сайте именно с этими цветами. И скорее всего, именно зеленый и синий остались на подсознательном уровне.
Тест 2: Синяя против зеленой
После этого мы решили не останавливаться и продолжить тестирование. В следующем случае мы сравнивали нашего синего победителя с зеленой кнопкой. Зеленый цвет более контрастный в данном случае. Но после предыдущего теста мы не были уверены, что это сработает.
Однако, результат в этом тесте оказался самым максимальным. У зеленой кнопки конверсия была на 65% выше. В защиту синей можно отметить, что в тесте участвовало не так много людей. В данном случае 1322 посетителя. Скорее всего, в будущем разрыв сократится. Тем не менее зеленая кнопка явный фаворит с конверсией 4,24%.
Тест 3: Красная против зеленой
После этого мы решили провести в другом интернет-магазине тест зеленой кнопки против красной. В данном случае, попапы также скрывали фон сайта, который у него голубой. При этом в попапе использовались красные шарики для демонстрации скидки. В этом случае, однозначно, зеленая кнопка имела преимущества в контрастности.
Результат данного теста показал, что у зеленой кнопки конверсия выше на 11,4%. 6488 посетителей это подтвердили. Конверсия победителя - 3,61%.
Тест 4: Зеленая против синей
Теперь мы решили проверить наших прошлых соперников, чтобы определить лучшего. Вновь в тесте оказались зеленая и синяя кнопки.
Они вдвоем контрастны к красным шарикам попапа. Нам было интересно проверить на другом сайте кто же окажется лучше.
В результате зеленая кнопка вновь оказалась лучше на 11,4% на трафике в 7350 посетителей. Конверсия зеленой кнопки - 3,40%.
Итоги тестов
Значат ли эти тесты, что зеленый - самый лучший цвет для кнопки для всех сайтов? Нет.
Значит ли, что контрастность не работает (при результатах первого теста)? Нет. Контрастность надо учитывать, но при этом не забывать о понимании своей целевой аудитории.
Ключевые выводы после тестов:
- С помощью смены цвета кнопки можно повысить конверсию до 65%
- Любую известную истину (контрастность, красная кнопка, зеленая кнопка и т.д.) лучше всего протестировать у себя, а не доверять безоговорочно
- Конкретно в наших случаях на двух разных сайтах зеленая кнопка имела лучшую конверсию :)
Как проводить такие тесты
На самом деле процесс оптимизации конверсии - это история про тесты. Чем больше тестов вы проводите, тем лучше вы узнаете свою аудиторию и больше получаете данных. Например, Google тестирует каждый день разные гипотезы в своих продуктах. Они знают, что тесты улучшают продукт и повышают конверсию.
Как создать тесты, подобные тем, что проводили мы. Это можно сделать с помощью конструктора виджетов KEPLER LEADS.
Ниже алгоритм создания А/Б тестов:
- Создать виджет в конструкторе. Занимает 5 минут.
- Скопировать его и внести изменения для теста. Занимает 1 минуту.
- Создать А/Б тест и выбрать данные виджеты. Занимает 1 минуту.
1. Создание виджета в конструкторе
Для создания виджета вы должны быть зарегистрированы в конструкторе KEPLER LEADS.
Процесс создания состоит из 3-х шагов:
- Выбрать шаблон виджета, который вы будете использовать.
- Отредактировать виджет:- написать нужный текст- поменять цвет и загрузить изображение, в случае необходимости
- Выбрать настройки показа:- когда показывать виджет (по времени, при уходе, при пролистывании страницы и тд)- на каких устройствах (компьютер, мобильный, планшет)- что делать после конверсии (сказать спасибо, перенаправить по ссылке или просто закрыть виджет)
Вы можете посмотреть данное видео по созданию виджета. Здесь подробно разбирается каждый этап. Текстовая инструкция по созданию виджета находится здесь.
Хочу отметить, что возможностей настроек в конструкторе гораздо больше. Например, показ при просмотре определенного количества страниц, по дням недели, по источнику переходу, частоте показа и многое другое. Но вначале советую использовать основные настройки, а потом экспериментировать с дополнительными.
2. Копирование виджета и внесение изменений для теста
После того, как вы создадите виджет надо сделать его копию. Чтобы внести в новый виджет изменения и поставить в А/Б тест. Для этого вы кликаете на иконку «Копировать» в созданном виджете.
Он автоматически включается на сайте. Сейчас надо его выключить, так как он не отредактирован. Для этого измените статус.
Теперь перейдите в его настройки, нажав иконку «В редактор».
Здесь измените желаемый элемент, который вы хотите протестировать. Например, давайте поменяем цвет кнопки. Это делается в один клик. Надо просто выбрать другой цвет кнопки.
Кликните на «Цвет кнопки» и выберите нужный.
После этого сохраняем виджет. На 4-ом шаге можно ничего не менять, чтобы оставить настройки прошлого виджета. Для этого просто нажмите кнопку «Сохранить».
Теперь у вас создано 2 виджета с разным цветом кнопок. Можно переходить к созданию А/Б теста. Для удобства осталось только поменять название во втором виджете.
3. Создание А/Б теста
Для создания теста надо зайти в меню «А/Б тесты». И нажать на кнопку «Создать тест».
Здесь надо:
- выбрать сайт- написать название теста- выбрать тип теста
Касательно типа теста. В KEPLER LEADS есть 2 разных типа А/Б теста: Классический и Индивидуальный. Различие - в показе виджетов вернувшимся посетителям. Если вы хотите вернувшемуся посетителю показывать новый вариант виджета, выберите Классический тест. Если хотите, чтобы вернувшемуся пользователю не показывался другой вариант виджета (запоминается первый показанный и всегда срабатывает только он, в зависимости от настроек показа), тогда выберите Индивидуальный.
Выбрав тип теста, нажмите кнопку «Добавить». Останется последний шаг - выбрать виджеты для теста. Для этого надо кликнуть на ячейку «Виджеты» и выбрать их.
Выбрав виджеты, проверьте все ли они активные. Если есть неактивные виджеты, то вы можете включить их прямо здесь.
Теперь нажмите кнопку «Сохранить».
Все! Тест создан. Все результаты вы можете посмотреть в статистике теста. Для этого кликните справа от названия теста на иконку «Просмотр». Рекомендует проводить тесты на общем трафике от 1000 показов (это видно в столбце «Просмотры»). После этого принимать решение о запуске следующей теста.
ЗАКЛЮЧЕНИЕ
Ваша работа на этом не заканчивается. Теперь надо отслеживать результаты, и после достижения значительных данных (мы рекомендуем от 1000 посетителй) тестировать другие гипотезы. Это могут быть заголовки, тексты призыва к действию, ценностные предложения, изображения и пр. О других А/Б тестах мы напишем в следующих статьях. Расскажите о своих результатах в комментариях.
KEPLER LEADS — это инструмент, который помогает увеличить конверсию сайта с помощью виджетов. Начните улучшения, делая из посетителей сайта подписчиков и клиентов. Попробуйте сегодня KEPLER LEADS бесплатно!