Главное Свежее Вакансии Образование
7 055 11 В избр. Сохранено
Авторизуйтесь
Вход с паролем

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

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

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

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

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

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

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

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

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

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

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

1 кейс

1bef.jpg

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

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

2 кейс

2bef.jpg

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

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

3 кейс

3bef.jpg

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

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

4 кейс

4bef.jpg

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

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

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

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

5bef.jpg

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

6bef.jpg

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

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

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

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

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

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

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

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

7bef.jpg

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

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

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

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

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

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

8bef.jpg

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

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

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

Вывод

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

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

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

Подготовлено блогом Boosta.ru - http://boosta.ru/ab-testirovanie/cases/kakoy-tsvet...

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

Читайте также наше другие популярные статьи:

1) Они помогут найти всех «убийц» конверсии — 10 отчётов в Google Analytics (8500+ просмотров)

2) Как увеличить конверсию сайта с помощью изображений – 6 советов на основе кейсов (4000+ просмотров)

3) Секрет успешного A/B тестирования — 5 вопросов самому себе (1000+ просмотров)

P.S. Всех стартаперов приглашаем присоединиться к проекту Startr.ru. Startr - это стартап комьюнити на Slack: чат, онлайн-питчи, встречи, горячие обсуждения своих проектов и последних новостей в стартап-сфере.

+6
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Администрация Spark
Спасибо за полезную статью! Анонсировали на ЦП:

http://vk.com/wall-33393308_346764
https://www.facebook.com/SMMrussia/posts/961259260565656
Ответить
Boosta.ru
Сайт об интернет-маркетинге: кейсы, советы, анализ ошибок, обзор сервисов
Andrei 8041
Благодарю!
Ответить
Kuoll
запись и воспроизведение багов в веб-приложениях
Dmitry Kaigorodov
Кстати, на некоторых языках есть только 4 слова для цвета: чёрный, белый, красный и зелёный. Обычно именно в таком порядке формируется понятие о цветности.
Ответить
ADZY
Ассистент для ведения рекламных компаний
Дмитрий Кубитский
каждый уважающий себя алхимик должен найти зависимости там где их нет.
Ответить
Дмитрий Наумов
хорошая статья! спасибо!
Ответить
Boosta.ru
Сайт об интернет-маркетинге: кейсы, советы, анализ ошибок, обзор сервисов
Andrei 8041
Дмитрий, спасибо за комментарий.
Будем и дальше радовать качественным материалом. А чтобы ничего не пропустить, подписывайтесь на нас здесь и на блоге Boosta.ru
Ответить
Пол Грэм Коммюнити
Площадка для чтения и обсуждения эссе Пола Грэма
WOB 18144
Какой бы цвет ни влиял лучше на коэффициент конверсии, все радикальные скачки конверсии кроются в совсем других вещах.
Ответить
Boosta.ru
Сайт об интернет-маркетинге: кейсы, советы, анализ ошибок, обзор сервисов
Andrei 8041
Т.е. Вы хотите сказать, что цвет не влияет на показатель конверсии?!
Ответить
Пол Грэм Коммюнити
Площадка для чтения и обсуждения эссе Пола Грэма
WOB 18144
Я хочу сказать то, что я сказал. Не знаю, как у вас получилось сделать из моего коммента столь неожиданный вывод.
Ответить
AdvertSolutions
Комплексный инструмент продаж (LP-CRM-Реклама)
Yaroslav Orlov
скорее всего, тут основное внимание надо уделять не на клики по кнопкам,как таковым,а дальнейшим продажам.
Цвет привлек,человек кликнул,а продажи нет. Либо заявку не отправил,а просто кликнул.
Кнопки все же, выделять стоит, только не нужно считать их основным источником конверсий.
Ответить
Boosta.ru
Сайт об интернет-маркетинге: кейсы, советы, анализ ошибок, обзор сервисов
Andrei 8041
Естественно.
Вообще, при правильном A/B тестировании вы должны считать не только увеличение конверсии на этапе клика по кнопке, но и конечное цель в воронке продаж.
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.