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


 

С психологической точки зрения цвета могут ассоциироваться с различными качествами и эмоциями. Именно поэтому цветовая гамма влияет на то, как посетитель воспринимает ваш сайт. Более того, цвет кнопки призыва к действию (CTA button)  или другого важного элемента может даже позитивно или негативно повлиять на уровень конверсии.

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

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

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

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

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

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

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

1 кейс

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

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

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

2 кейс

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

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

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

3 кейс

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

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

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

4 кейс

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вывод

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

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

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