Правда о лучших цветах кнопок призыва к действию для вашего сайта

В Интернете много говорилось о цветах, которые лучше всего смотрятся на веб-странице. Вы найдете тысячи статей об этом. От той, где пользователь спрашивает, какой цвет лучше, и получает противоречивые ответы (какой сюрприз, а?), до известной статьи, объясняющей тесты, которые Google провел со многими оттенками синего для своих ссылок.

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

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

Если вы следили за серией статей, которые я ежемесячно писал об A/B-тестировании, вы наверняка уже знаете, что одной из самых важных страниц на нашем веб-сайте является целевая страница Nelio Content вместе со страницей с ценами. На обеих страницах кнопки призыва к действию у нас оранжевые.

Будет ли красный или зеленый цвет работать лучше по сравнению с оранжевым цветом, который мы уже используем на нашем веб-сайте для кнопок призыва к действию? Это вопрос, который я задал себе и на который я собираюсь ответить здесь с реальными данными от наших посетителей. Не субъективное мнение. Реальные данные.

Поехали!

Создание A/B-тестирования CSS

Самый простой способ изменить цвет кнопок на странице — добавить несколько дополнительных правил CSS, чтобы применить новый цвет. Вы добавляете к кнопке новое правило background-color с нужным вам цветом, и все. Очень просто.

С помощью Nelio A/B Testing у вас есть возможность создать A/B-тестирование стилей CSS для проверки различных вариантов дополнительных правил CSS. Вам просто нужно создать новый тест и выбрать опцию CSS в селекторе типа теста:

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

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

Для каждого дополнительного варианта вы можете перейти к его редактированию, чтобы добавить дополнительные правила CSS, которые изменяют цвет кнопок. Правила CSS, которые вам понадобятся, будут зависеть от темы, которую вы используете в своем WordPress. В редакторе CSS, предоставляемом Nelio A/B Testing, вы можете в режиме реального времени увидеть, как ваши новые правила CSS изменяют внешний вид вашего сайта. Это поможет вам проверить, все ли вы делаете правильно.

Вот как кнопки действий выглядят в редакторе стилей CSS каждого варианта A/B-теста, который мы настраиваем. Как упоминалось выше, сначала у вас есть исходная версия с оранжевыми кнопками. Два других варианта включают в себя CSS, чтобы сделать кнопки зелеными и красными соответственно:

Когда у нас есть готовые варианты, пришло время определить цели конверсии, которые мы хотим измерить. В данном случае, как видно на скриншоте редактора тестов, у нас две цели.

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

Наконец, обратите внимание, что A/B-тестирование CSS затронет все страницы вашего сайта. Чтобы ограничить это поведение в Nelio A/B Testing, на правой боковой панели редактора A/B-тестов у вас есть возможность ограничить объем теста. Я сделал это так, чтобы это влияло только на главную страницу Nelio Content и страницу с ценами.

У нас есть все готово, чтобы начать тест. Как только мы это сделаем, Nelio A/B Testing будет отвечать за разделение трафика, который посещает эти две страницы, и показ различных цветовых вариантов, а также за отслеживание конверсий (нажатий на кнопки).

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

Анализ результатов

Мы проводили A/B-тестирование цветов кнопок на нашем веб-сайте в течение полутора месяцев на испанском веб-сайте и почти месяц на английском веб-сайте. В английской версии мы остановили его раньше, потому что быстрее достигли статистически значимых результатов с высоким значением достоверности.

Но начнем с результатов теста в нашей сети на испанском языке:

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

Для второй цели, которая измеряла только клики на странице с ценами Nelio Content, мы также видим, что нет четкого выигрышного цвета. Мы даже можем наблюдать, как зеленый здесь работает хуже, чем оранжевый. Хотя мы не можем сделать однозначных выводов на основании данных, которые Nelio A/B Testing собрала у наших посетителей:

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

Кроме того, здесь мы можем утверждать, что зеленый цвет является выигрышным цветом теста. Результаты статистически значимы со степенью достоверности более 99%. Зеленый — лучший цвет, который мы можем использовать на нашем веб-сайте на английском языке для кнопок на страницах Nelio Content.

Если мы посмотрим только на клики на странице с ценами Nelio Content (вторая цель теста), мы увидим, что результаты согласуются с результатами первой цели теста:

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

Выводы

Здесь я показал результаты A/B-тестирования с реальными данными о посетителях, просматривавших две наиболее релевантные страницы нашего сайта. И вы смогли убедиться, что то, что лучше всего работает для определенной аудитории, не обязательно должно работать лучше для другой.

Зеленые кнопки лучше всего подходят для наших англоязычных посетителей. Но это не значит, что это то же самое для других посетителей. По этой причине мы изменили цвет кнопок действий на страницах Nelio Content только на зеленый в англоязычной версии этих страниц. Те, что на испанском, остаются оранжевыми.

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

По этой причине, прежде чем обращать внимание на многочисленных гуру, которых вы найдете в Интернете, проведите тест самостоятельно. Создать A/B-тест очень просто. И это единственный способ узнать, что работает (или не работает) лучше на вашем сайте. С вашей реальной аудиторией.

Избранное изображение Роберта Кацки на Unsplash.