Какой цвет повышает конверсию сайта?

Какой цвет повышает конверсию сайта?

Какой цвет повышает конверсию?

Цвет – неотъемлемая часть нашего восприятия мира. Но играют ли цвета роль в процессе оптимизации конверсии?

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

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

Известно, что в североамериканской культуре синий цвет вызывает чувство доверия, но также усиливает аппетит. Зеленый цвет связывают с природой, свежестью, ростом и деньгами. Желтый вызывает ассоциации с солнцем, светом и счастьем.

Во всем этом есть смысл, но как мы можем использовать силу цвета на пользу конверсии?

Эксперименты с использованием цвета

Красный цвет принесет вам победу

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

Исследователи изучили результаты Олимпиады 2004 в таких видах спорта, как бокс, тейквондо, греко-римская борьба и реслинг. Конкурентам выдавали синие или красные костюмы в случайном порядке, так что никаких совпадений или подтасовок быть не могло.

wrestling

В 16 из 21 раундов выигрывал спортсмен в красной форме. Те же самые тенденции были выявлены в Чемпионате Европы по футболу 2004 года. Однако, исследователи не берутся утверждать, что цвет формы является определяющим фактором победы. Скорее, это дополнительное преимущество, если в остальном силы соперников равны.

«Мы обнаружили, что красная форма чаще ассоциируется с высокой вероятностью победы», — пишут исследователи университета Дарема Рассел Хилл и Роберт Бартон.

… и поражение

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

Результаты

Четыре проведенных эксперимента показали, что даже кратковременное восприятие красного цвета негативно влияет на результаты. «Он как будто сбивает людей с толку», — говорит Эллиот (один из авторов), когда речь заходит об академических достижениях.

Результаты показали, что «в контексте достижений красный цвет должен быть использован с осторожностью». Исследователи утверждают, что красный цвет, даже в малых количествах, может сильно повлиять на поведение человека.

Цвет и вкус горячего шоколада

coffee

Оказывается, цвет посуды, в которой подается еда или напиток, влияет на восприятие их аромата и вкуса. К такому выводу в ходе эксперимента с горячим шоколадом пришла Бетина Пикьераз-Фишман, исследователь из Политехнического университета Валенсии (Испания). Она проводила эксперимент в сотрудничестве с Чарльзом Спенсом из Оксфордского университета (Великобритания).

Эксперимент

Эксперимент задействовал 57 участников, которые должны были оценить образцы горячего шоколада, поданные в пластиковых стаканчиках различных цветов (белого, кремового, оранжевого и красного). Стаканчики были одинакового размера, изнутри все они были белыми.

Результаты

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

“Не существует определенных правил, гласящих, что вкус и аромат в чашке определенного цвета или оттенка усиливается”, — признает Пикьераз-Фишман. “В действительности это зависит от типа еды. Однако, эффект имеет место быть, а цвет посуды играет в восприятии гораздо более значительную роль, чем мы могли подумать”.

В ходе других экспериментов было выяснено, что на белой тарелке клубничный мусс кажется слаще и насыщеннее, чем на черной.

Лучший цвет кнопок

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

Красный против зеленого

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

Был проведен ряд интересных А/Б тестирований, в которых оранжевая, в нашем случае даже скорее красная, кнопка противопоставлялась другим цветам, в том числе зеленому.

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

Что вы думаете по этому поводу?

Какая кнопка победит? Зеленая или красная? Красная или зеленая? Мы расскажем вам, что на этот счет говорят результаты теста.

Исследование 1

green vs red button

Dmix писали об одном из своих проектов, в котором они протестировали зеленые и красные кнопки. Тестирование с 600 субъектов показало, что при использовании красной кнопки конверсия выросла на 34%.

34% — приличный рост конверсии. 1:0 в пользу красных кнопок.

Исследование 2

green vs red button 2

Далее у нас идет исследование HubSpot. На сайте своих клиентов они запустили похожий тест с зелеными и красными кнопками. Тест продолжался несколько дней, за это время сайт посетило более 2000 человек.

Результаты показали, что красная кнопка обошла зеленую примерно на 21%. 2:0 в пользу красных

Исследование 3

visual-1

Третий тест был проведен в Visual Website Optimizer. Их клиент – интернет магазин сотовых телефонов и аксессуаров к ним. Они протестировали на своем сайте цвета кнопки «Купить сейчас». В соревновании участвовали белая кнопка с зеленым текстом, зеленая с белым и красная (темно-оранжевая) с белым.

И победителем стала… Угадайте с первого раза – красная кнопка, показавшая конверсию выше на 5%. 3:0 в пользу красных.

Исследование 4

 monetate-1

Пока что красные уверенно ведут. Давайте обратимся еще к одному исследованию. В этот раз посмотрим на битву красной и голубой кнопки, тестирование было проведено в Monetate. Удивительно, но голубая кнопка показала рост конверсии на 9% больше. Странно, может, в результаты вкралась какая-то ошибка…

В любом случае, по совокупным результатам красная кнопка побеждает со счетом 3:1. С уверенностью можно сказать, что, на основе различных А/Б тестирований лучшей призывающей к действию кнопкой можно считать КРАСНУЮ! Ура, победа…

Победа?

Вот что Пэп Лая (один из лучших оптимизаторов конверсии в мире и мой учитель) написал о цветах в веб-дизайне:

”Мне понравился этот твит Наоми Найлс:

naomi-tweet

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

Не могу не согласиться. Подобные заявления извращают само понятие тестирования. Конечно – иногда цвет влияет на результаты – особенно когда он влияет на визуальную иерархию, делает призыв к действию более заметным и так далее. Но «зеленый против оранжевого»… Вряд ли в этом смысл А/Б тестирований. Тестирования должны помогать вам лучше понять свою целевую аудиторию. Исследования и анализ – штука утомительная и непростая, но действительно важная.

Чтобы значительно поднять конверсию, нужно ее исследовать. Чтобы получить результаты, необходимо потрудиться.

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

Последнее исследование

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

Вот оригинальная версия:

original

А вот новая кнопка:

green-button

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

Ну, не совсем.

Взгляните еще раз на оригинал, вам ничего не кажется странным? Или же чего-то в нем не хватает?

Не хватает кнопки

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

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

Вот что пишут об этом Monetate (авторы теста с голубой и оранжевой кнопкой):

”Но если копнуть глубже, то выяснится, что оранжевая кнопка тестировалась в паре с контрольным вариантом, в котором кнопки не было вовсе. Неудивительно, что в таких случаях конверсия растет. Разумеется, оранжевый цвет делает свое дело… Но в сравнении с полным отсутствием кнопки. На самом деле, кнопка любого цвета показала бы точно такой же результат”.

В случае с RIPT Apparel протестирована была еще одна версия – в желтом цвете:

yellow-button

Конверсия выросла еще на 6.3%. Желтый цвет сильнее зеленого? Нет, нет и нет.

Сам по себе цвет не имеет особого значения

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

Также большую роль в этом деле играет привычка. Доходы Bing выросли до 80 миллионов долларов после того, как они нашли свой синий цвет для ссылок. Почему? Потому что люди привыкли к тому, что ссылки выделяются синим цветом. С момента возникновения интернета ссылки были синими. Инженеры Microsoft, работавшие над этой проблемой, также признавали: “…это был оттенок синего, похожий на тот, что используют в Google”.

Не существует цвета, использование которого на интернет-странице повысило бы конверсию. Повторюсь: цвета, повышающего конверсию, НЕ СУЩЕСТВУЕТ.

В случае с желтой кнопкой создатели также привлекли внимание и ограничением во времени («Купить за 10 долларов только в ближайшие 24 часа»), такой призыв также значительно повысил конверсию. В случае с голубым цветом Bing в силу вступил закон привычки.

Вернемся к HubSpot

То же самое можно сказать и про пример HubSpot. Посмотрите еще раз:

green vs red button 2

Посмотрите на оригинальную зеленую кнопку слева и на новую красную справа. Замечаете ли вы что-либо, что могло сделать красную кнопку привлекательнее? Что-то в общем дизайне страницы?

Может быть – даже не знаю – использование зеленого в качестве основного цветового решения на сайте? Бинго! Зеленый цвет в общем и целом на этой странице доминирует. И что происходит, когда добавляется еще одна зеленая кнопка?

Она незаметна! Вместо красного в тестировании мог использоваться любой яркий цвет, и результаты повышения конверсии были бы аналогичными.

К чести HubSpot, они подытожили исследование следующими словами: “Нельзя обобщать и применять данные результаты ко всем ситуациям. Мы можем лишь сказать, что они применимы к текущим условиям тестирования: дизайну страницы, сайту, аудитории, его посещающей”. Но все же, кто додумался добавить зеленую кнопку на зеленую страницу?

Выводы

Использование цветов имеет значение. Иногда достаточно большое. Но говорить о том, что один цвет увеличивает конверсию по сравнению с другим — неправильно. То, что работает для одного сайта, совершенно не обязательно будет работать для другого!

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