Какой цвет лучше влияет на коэффициент конверсии?

Какой цвет лучше влияет на коэффициент конверсии - Boosta.ru

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

Какой цвет лучше влияет на коэффициент конверсии?


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


Пример: За неделю Ваш сайт посетило 500 уникальных посетителей. И только 15 человек совершили покупку. Чтобы рассчитать коэффициент конверсии, нужно 15 разделить на 500 и умножить на 100 %. В результате мы получаем 3 %


В различных культурах некоторые цвета имеют очень серьёзное значение. Например, в Китайской культуре белый цвет ассоциируется со скорбью, а в Бразилии фиолетовый цвет – со смертью. Для индусов жёлтый – священный цвет, а для Греков – это цвет печали. В Северной Америке зелёный цвет ассоциируется с завистью. Люди из жарких стран больше предпочитают тёплые цвета, а люди с северных стран – холодные оттенки.

Как же всё-таки нужно выбирать цвета для сайта и основных его элементов? И как это вообще влияет на коэффициент конверсии? Мы постараемся дать ответы на эти вопросы.


Война зелёной и красной кнопки


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

Но сейчас давайте остановимся на интересных кейсах об A/B тестировании самых распространенных цветов – красного и зелёного. Между ними ведётся самая ожесточенная борьба.

Зелёный цвет чаще всего ассоциируется с позитивными эмоциями. Когда на светофоре загорается зелёный, мы можем двигаться. Что касается красного, то всё наоборот. Этот цвет связан с негативными эмоциями. Когда горит красный светофор, то все стоят. Запрещено. Вот вам негатив.

Но это субъективное мнение. Чтобы понять, с чем эти цвета ассоциируются у ваших посетителей и как это влияет на коэффициент конверсии, нужно провести A/B тестирование. Именно поэтому мы проанализируем результаты чужих экспериментов.


1 кейс



Какой цвет лучше влияет на коэффициент конверсии - Boosta.ru

Компания Dmix в одном из своих проектов тестировала, какую конверсию имеют эти цвета. Результат оказался следующим: красная кнопка имела конверсию на 34 % больше, чем зелёная. Неплохо, не правда ли?


1:0 в пользу красной кнопки


2 кейс



Какой цвет лучше влияет на коэффициент конверсии - Boosta.ru

Компания Hubspot запустила похожий тест с использованием зелёной и красной кнопки. После того, как в эксперименте поучаствовало более 2 000 пользователей, они подвели итоги. И опять красная кнопка оказалась более эффективной. Коэффициент конверсии оказался больше на 21 %, чем у зелёной кнопки.


2:0 в пользу красной кнопки.


3 кейс



Какой цвет лучше влияет на коэффициент конверсии - Boosta.ru

Крупный интернет-магазин по продаже мобильных телефонов и аксессуаров решил также проверить эту гипотезу. Но они добавили ещё один вариант – белую кнопку. И опять же вариант с красной (в данном случае темно оранжевой) кнопкой имел конверсию на 5 % выше, чем в других вариантах.


3:0 в пользу красной кнопки.


4 кейс



Какой цвет лучше влияет на коэффициент конверсии - Boosta.ru

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

Эх, казалось бы – красный цвет универсальный и всегда будет эффективнее других. Но на самом деле не всё так просто.

Давайте разберём ещё один пример, который даст вам больше пищи для ума. Компания RIPT Apparel проводила A/B тестирование кнопки «Купить сейчас» и проверяла, какой цвет лучше повлияет на продажи.

Вот такой была первоначальная версия страницы товара:

Какой цвет лучше влияет на коэффициент конверсии - Boosta.ru

А вот новый вариант страницы, где кнопка уже имеет другой цвет и текст:

Какой цвет лучше влияет на коэффициент конверсии - Boosta.ru

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

Но не всё так просто!

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

Правильно! Не хватает кнопки призыва к действию, которая была бы чётко выделена на фоне дизайна. В оригинальной версии кнопка «Купить сейчас» просто затерялась. А ведь должно быть наоборот. Фактически, для компании – это основное действие, которое должен сделать посетитель на сайте.

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

Кнопка призыва к действию должна чётко выделяться на фоне всех элементов

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

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

Та же компания RIPT apparel позже решила провести ещё один A/B тест. На этот раз они попробовали выделить эту кнопку жёлтым цветом. В результате чего коэффициент конверсии вырос ещё на 6.3 %.



Какой цвет лучше влияет на коэффициент конверсии - Boosta.ru

Всё-таки зелёный цвет тоже плохой? Может быть нужно везде ставить жёлтый?

Конечно же нет. Да цвет сам по себе вообще имеет мало значения. Имеет значение то, как цвет кнопки влияет на визуальное восприятие всей страницы и насколько сильно он выделяет эту кнопку. Также имеет значение дополнительная информация и текст этой CTA-кнопки.

Уясните одно важное правило…

Не существует лучшего цвета для увеличения коэффициента конверсии

Как видно в последнем варианте с жёлтой кнопкой, они ещё добавили надпись «Только в течение 24 часов». Ограничение срока акции – один из приёмов, который побуждает посетителя совершить покупку. Так что дело может быть не только в цвете.

Чтобы ещё больше убедить вас, рассмотрим более подробно второй кейс.

Какой цвет лучше влияет на коэффициент конверсии - Boosta.ru

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

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

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


Вывод


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

Визуальное восприятие картины в целом имеет значение. А CTA-кнопка должна выделяться на общем фоне.

Так что перестаньте надеяться на красный или зелёный цвет. Сформируйте идею для тестирования в соответствии с дизайном вашего сайта и приступайте к экспериментам. Только так вы сможете определить, какой цвет лучше конвертирует именно в вашем случае. А если не знаете, с чего начать, то вот вам 45 идей для A/B тестирования


Перевод и адаптация: http://conversionxl.com/which-color-converts-the-best/

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