Кнопка какого цвета обладает самой высокой конверсией :: Shopolog.ru

У какого цвета кнопки самая высокая конверсия — старый философский вопрос, на который многие знают ответ. «Красная» — ответят начинающие маркетологи. «Контрастная» — ответят опытные маркетологи. Мы протестировали 21 666 пользователей на эту тему. И пришли к довольно интересным выводам.

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

Насколько можно повысить конверсию с помощью цвета?

Не буду рассказывать, что мы изобрели волшебную таблетку по управлению конверсией. В случаях увеличения конверсии я пришел к одному простому выводу. Стопроцентных утверждений, которые будут работать всегда и для всех — не существует. Волшебных таблеток тоже. Ранее мы писали о том, как в некоторых случаях слово «Бесплатно» понижает конверсию. Что уж говорить о других «стопроцентных» истинах.

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

Мы получили до 65% повышения конверсии. 65% было самым максимальным результатом тестов. Среднее значение было на уровне 11%. Но даже такое повышение конверсии — очень хороший результат. Учитывая, что этого можно добиться с помощью изменения цвета кнопки.

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

Многие тесты экспертов говорят, что кнопка красного цвета обладает самой высокой конверсией. Почему? Мы знаем, что каждый цвет обладает своими ассоциациями и вызывает определенные эмоции. Красный цвет подразумевает остановку, опасность и страстность. И в большинстве случаев (как считается) он приводит к лучшим результатам в интернет-маркетинге.

Например, в этой статье Uniweb рассказывает о ряде тестов, которые проводили с цветом кнопок. В Unbounce тестировали красную и зеленую кнопки.

У красной конверсии конверсия была на 34% выше.

В Hubspot провели аналогичные тесты. Результат снова в пользу красной кнопки и повышение конверсии на 21%.

Но действительно ли красная кнопка самая конверсионная? На самом деле, нет. На тему психологии цвета написано много статей. И в той же статье Uniweb говорится, что в первую очередь имеет значение контрастность, а не какой-то определенный цвет. Чем лучше выделяется кнопка на фоне сайта, тем больше будет у нее конверсия. Так ли это на самом деле? Я считаю, что не всегда. Об этом чуть ниже.

И даже, если учесть, что контрастность решает все… То становится ли от этого нам легче? Не совсем. Что делать, если контрастным для сайта будет сразу несколько цветов. Какой окажется лучше? И насколько? Именно в этом и помогает А/Б тестирование. А/Б тестирование — это сравнивание 2-х вариантов одного элемента на сайте.

Наши тесты красной, зеленой и синей кнопок

Мы решили провести серию А/Б тестов, чтобы определить насколько цвет кнопки влияет на конверсию. Для этого мы создали в конструкторе KEPLER LEADS несколько похожих попапов с различием только в кнопке. Все тесты проходили в двух интернет-магазинах спортивных товаров.

Тест 1: Красная против синей

В первом случае мы тестировали красную и синюю кнопку.

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

Но результат теста, нас удивил. В результате синяя кнопка имела конверсию на 9,7% выше, чем красная. И это результат получен не на трафике в полтора землекопа, где половину конверсий делает сам автор теста. Нет. В тесте участвовало 6506 посетителей. Существенная статистика. Конверсия победителя — 4,18%.

Выводы:

Контрастность работает не всегда, о чем я говорил выше. Но это не значит, что ее не надо принимать в расчет.

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

Тест 2: Синяя против зеленой

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

Однако, результат в этом тесте оказался самым максимальным. У зеленой кнопки конверсия была на 65% выше. В защиту синей можно отметить, что в тесте участвовало не так много людей. В данном случае 1322 посетителя. Скорее всего, в будущем разрыв сократится. Тем не менее зеленая кнопка явный фаворит с конверсией 4,24%.

Тест 3: Красная против зеленой

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

Результат данного теста показал, что у зеленой кнопки конверсия выше на 11,4%. 6488 посетителей это подтвердили. Конверсия победителя — 3,61%.

Тест 4: Зеленая против синей

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

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

В результате зеленая кнопка вновь оказалась лучше на 11,4% на трафике в 7350 посетителей. Конверсия зеленой кнопки — 3,40%.

Итоги тестов

Значат ли эти тесты, что зеленый — самый лучший цвет для кнопки для всех сайтов? Нет.

Значит ли, что контрастность не работает (при результатах первого теста)? Нет. Контрастность надо учитывать, но при этом не забывать о понимании своей целевой аудитории.

Ключевые выводы:

С помощью смены цвета кнопки можно повысить конверсию до 65%

Любую известную истину (контрастность, красная кнопка, зеленая кнопка и т.д.) лучше всего протестировать у себя, а не доверять безоговорочно

Конкретно в наших случаях на двух разных сайтах зеленая кнопка имела лучшую конверсию 🙂

Как проводить такие тесты

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

Как создать тесты, подобные тем, что проводили мы.

Это можно сделать с помощью конструктора виджетов KEPLER LEADS.

Ниже алгоритм создаия А/Б тестов:

1. Создать виджет в конструкторе. Занимает 5 минут.
2. Скопировать его и внести изменения для теста. Занимает 1 минуту.
3. Создать А/Б тест и выбрать данные виджеты. Занимает 1 минуту.

1. Создание виджета в конструкторе

Для создания виджета вы должны быть зарегистрированы в конструкторе KEPLER LEADS.

Процесс создания состоит из 3-х шагов:

1. Выбрать шаблон виджета, который вы будете использовать.
2. Отредактировать виджет:- написать нужный текст- поменять цвет и загрузить изображение, в случае необходимости
3. Выбрать настройки показа:- когда показывать виджет (по времени, при уходе, при пролистывании страницы и тд)- на каких устройствах (компьютер, мобильный, планшет)- что делать после конверсии (сказать спасибо, перенаправить по ссылке или просто закрыть виджет)

Вы можете посмотреть данное видео по созданию виджета. Здесь подробно разбирается каждый этап. Текстовая инструкция по созданию виджета находится здесь.

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

2. Копирование виджета и внесение изменений для теста

После того, как вы создадите виджет надо сделать его копию. Чтобы внести в новый виджет изменения и поставить в А/Б тест. Для этого вы кликаете на иконку «Копировать» в созданном виджете.

Он автоматически включается на сайте. Сейчас надо его выключить, так как он не отредактирован. Для этого измените статус.

Теперь перейдите в его настройки, нажав иконку «В редактор».

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

Кликните на «Цвет кнопки» и выберите нужный.

После этого сохраняем виджет. На 4-ом шаге можно ничего не менять, чтобы оставить настройки прошлого виджета. Для этого просто нажмите кнопку «Сохранить».

Теперь у вас создано 2 виджета с разным цветом кнопок. Можно переходить к созданию А/Б теста. Для удобства осталось только поменять название во втором виджете.

3. Создание А/Б теста

Для создания теста надо зайти в меню «А/Б тесты». И нажать на кнопку «Создать тест».

Здесь надо:

— выбрать сайт- написать название теста

— выбрать тип теста

Касательно типа теста. В KEPLER LEADS есть 2 разных типа А/Б теста: Классический и Индивидуальный. Различие — в показе виджетов вернувшимся посетителям. Если вы хотите вернувшемуся посетителю показывать новый вариант виджета, выберите Классический тест. Если хотите, чтобы вернувшемуся пользователю не показывался другой вариант виджета (запоминается первый показанный и всегда срабатывает только он, в зависимости от настроек показа), тогда выберите Индивидуальный.

Выбрав тип теста, нажмите кнопку «Добавить». Останется последний шаг — выбрать виджеты для теста. Для этого надо кликнуть на ячейку «Виджеты» и выбрать их.

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

Теперь нажмите кнопку «Сохранить».

Все! Тест создан. Все результаты вы можете посмотреть в статистике теста. Для этого кликните справа от названия теста на иконку «Просмотр». Рекомендует проводить тесты на общем трафике от 1000 показов (это видно в столбце «Просмотры»). После этого принимать решение о запуске следующей теста.

Заключение

Ваша работа на этом не заканчивается. Теперь надо отслеживать результаты, и после достижения значительных данных (мы рекомендуем от 1000 посетителй) тестировать другие гипотезы. Это могут быть заголовки, тексты призыва к действию, ценностные предложения, изображения и пр. О других А/Б тестах мы напишем в следующих статьях. Расскажите о своих результатах в комментариях.

Цвет кнопки на сайте: почему важно выбрать правильный

Из этого материала вы узнаете:

• Что такое кнопка призыва к действию

• Подходящие места на сайте для кнопки призыва к действию

• Общие правила цветового оформления кнопки призыва к действию на сайте

• Психология цвета в маркетинге

• Результаты тестов по поводу цвета кнопки призыва к действию на сайте

• Немного о полупрозрачных кнопках на сайте

• 12 полезных советов по созданию эффективной кнопки призыва к действию

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

Значимую роль в данном случае играет множество факторов: и расположение заветной кнопки, и сопровождающая ее надпись, и, разумеется, цвет. Однако не надо думать, что стоит выделить клавишу призыва к действию кислотно-красным, и человек автоматически ее нажмет. Люди — не собаки Павлова. И подход тут нужен совершенно другой.

Что такое кнопка призыва к действию

Люди, как правило, заходят на сайты с какой-то определенной целью. Для ее достижения необходимо выполнить ряд действий, первое из которых — нажатие на кнопку call to action.

Например, пользователь хочет зарегистрироваться на сайте, загрузить приложение на телефон или же купить что-то в интернет-магазине. Практически во всех случаях он прежде нажимает на кнопку призыва к действию.

Основная задача такой кнопки — повысить конверсию сайта, направляя пользователей к нужному действию и конвертируя их в клиентов. Вот характерные примеры CTA:

• «Установите приложение».
• «Скачайте книгу или инструкцию».
• «Оформите подписку на обновления».
• «Нажмите для получения консультации».

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

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

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

Подходящие места на сайте для кнопки призыва к действию

1. Главная страница

При первом посещении интернет-магазина посетитель, вероятно, заинтересуется качеством сервиса данной площадки. Пока речь о покупке какого-то товара не идет, нужно произвести на пользователя приятное впечатление, получив от него при этом контактные данные. Сделать это можно через форму подписки.

2. Страница с категориями товаров

Пользователь на данном этапе хочет ознакомиться с представленным ассортиментом, изучить характеристики позиций, сравнить их по цене, чтобы затем определиться и выбрать что-то одно. В частности, ему интересны предлагаемые скидки или выгодные акции в определенном товарном сегменте. Привлечь внимание пользователя можно кнопкой «Купить» с изображением продуктовой корзины.

3. Карточка продукта

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

4. Корзина

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

5. Запись в блоге

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

6. Пост в социальной сети

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

7. Посадочная страница

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

Общие правила цветового оформления кнопки призыва к действию на сайте

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

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

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

Чтобы функция призыва к действию работала, цвет кнопки на сайте обязан отвечать следующим требованиям:

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

• Тени и градиенты в оформлении следует использовать с осторожностью. Например, эффект вогнутости объемного элемента будет восприниматься посетителями как нажатая, а значит, неактивная кнопка. Поэтому она должна выглядеть либо изначально выпуклой, либо плоской и однотонной.
• Лучше не обрамлять кнопку простой рамкой. Она делает элемент плохо заметным и не призывающим к действию.

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

Контраст в свою очередь может достигаться по-разному и дает разную эффективность. Например, выделение цветом, даже очень ярким и выразительным, все равно не сделает кнопку очень заметной. Иной эффект дает создание контраста с помощью яркости (luminance contrast). Попробуйте выключить весь цвет на своем сайте и обратите внимание на кнопку. Если она продолжает быть заметной, значит, яркостный контраст подобран верно. При этом контрастировать должна не только кнопка в целом со страницей, но и фон элемента с надписью на нем. Преимущество яркостного контраста состоит еще в том, что он работает и для людей с нарушениями зрительного восприятия цвета.

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

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

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

Психология цвета в маркетинге

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

• • Желтый цвет

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

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

  • Красный цвет

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

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

  • Синий цвет

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

  • Зеленый цвет

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

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

  • Оранжевый цвет

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

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

    Однако определенный процент посетителей не видит в таком цветовом решении особой привлекательности (а это 22 % мужской и 33 % женской аудитории), некоторые же и вовсе считают его слишком бедным (22 % от общего числа посетителей). Поэтому использовать этот цвет следует в меру.

  • Фиолетовый цвет

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

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

• Черный цвет

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

  Следует помнить, что помимо классической респектабельности черный несет в себе часто траурное настроение, особенно сильно воспринимаемое старшей возрастной категорией пользователей.

• Белый цвет

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

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

Результаты тестов по поводу цвета кнопки призыва к действию на сайте

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

Красный нужен, чтобы побеждать?

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

Так на самом ли деле красная кнопка обеспечивает самую высокую конверсию? В действительности это не так. По поводу психологии цвета написано множество публикаций. Специалисты сходятся в мнении: на конверсию в первую очередь влияет контрастность кнопки, а не ее конкретный цвет. Другими словами, чем контрастнее элемент CTA, тем лучше маркетинговые результаты. Но и это правило срабатывает не всегда.

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

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

Красный и синий

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

Результаты теста на удивление получились иными. Лучшую конверсию дала синяя кнопка (на 9,7 % выше, чем у красной). При этом посещаемость сайта была достаточно высокой: число участников составило 6506 человек. Такая значимая выборка дала итоговую конверсию победившей кнопки в 4,18 %.

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

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

Синий и зеленый

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

Тем не менее этот раунд дал максимальный результат. Конверсия зеленой кнопки оказалась выше, чем у синей, на целых 65 %. Правда, количество участников в данном тесте составило всего 1322 человека и при большем числе посетителей разница была бы меньшей. Но факт остается фактом: зеленая CTA-кнопка показала лучший результат, обеспечив конверсию 4,24 %.

Красный и зеленый

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

Таким образом, по результатам теста зеленая кнопка обеспечила конверсию на 11,4 % выше, чем красная. За время тестирования сайт посетили 6488 человек. Конверсия победившей кнопки составила 3,61 %.

Зеленый и синий

Прежние соперники тестировались снова, но уже на втором сайте. Оба варианта хорошо контрастировали с фоном, но лучший результат показала зеленая кнопка (на 11,4 % по сравнению с синей). В тесте принимали участие 7350 посетителей, дав итоговую конверсию победителя раунда на уровне 3,4 %.

Итоги тестирования

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

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

Немного о полупрозрачных кнопках на сайте

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

Недостаток этих кнопок состоит в их незаметности. Пользователи не оценивают в полной мере значимость элементов с прозрачным оформлением, отвлекаясь на красочные фоновые фотографии.

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

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

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

Полупрозрачность такой CTA-кнопки дает возможность видеть фон сквозь нее. Тем самым сохраняется внешняя привлекательность «кнопки-призрака», но при этом пользователь отчетливо понимает, что сюда можно кликнуть.

12 полезных советов по созданию эффективной кнопки призыва к действию

Приведенные ниже простые принципы помогут вам создать эффективно работающую CTA-кнопку.

1. Соответствуйте бренду

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

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

2. Соответствуйте интерфейсу

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

3. Проверьте контрастность

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

4. Задумайтесь о форме

Если интерфейс сайта предполагает использование закругленных кнопок, можно выделить CTA-элемент, сделав его прямоугольным, круглым или даже треугольным. Это еще один способ создания контраста, привлекающего внимание пользователя.

5. Скройте все малозначимые элементы сайта

Сюда относятся пункты меню, всевозможные контроллеры и бегунки. Их нужно по возможности скрывать либо оформлять в едином стиле с общим интерфейсом так, чтобы они не выделялись (например, использовать одинаковые радиусы закруглений, но различные тени, градиенты и т. п.).

6. Добавьте «воздуха»

Акцент на кнопке можно создать, окружив ее обширным пустым пространством. Так элемент гарантированно станет заметнее.

7. Оформите границы кнопки

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

8. Анимируйте кнопку

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

9. Используйте размытые тени аккуратно

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

10. Добавляйте вспомогательные пиктограммы

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

11. Распределяйте элементы по степени важности

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

12. Явно отображайте текущее состояние кнопки

Многим будет очевидно, что кнопка должна визуально выглядеть как нажатая или отжатая в зависимости от ее состояния. Применительно к CTA-элементу эта наглядность особенно важна для пользователя. Реализовать данный эффект можно с помощью функционала CSS (тени, градиенты, границы). В качестве альтернативы при наличии достаточного места используются, хотя и достаточно редко, две кнопки вместо одной.

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

Дилемма UX: красная кнопка против зеленой кнопки Это также горячая тема для обсуждения на дизайнерских форумах, если судить по этому обсуждению UX на Stack Exchange.

В обсуждении пользователь спрашивает:

Какой вариант более интуитивно понятен пользователю?

Вот два варианта, которые он предлагает:

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

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

Значение цвета

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

Это, вероятно, является причиной использования красного цвета для кнопок удаления — это, естественно, заставляет нас задуматься из-за его коннотаций.

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

Сегодня на большинство родителей посмотрели бы странно, если бы они одели своего малыша в розовое, но сто лет назад это было нормой.

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

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

Зеленый также означает «идти» во многих странах, а также чувство природы и дает нам ощущение «движения вперед» и роста.

Однако, как отметил один из участников дискуссии, это также вызывает вопросы, связанные с «ложными срабатываниями».

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

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

Ибо вы считаете, что они инициировали акцию. Подтверждение этого действия не должно быть вопросом 50/50 да/нет.

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

Примеры из практики

Великая война «красных против зеленых» была длительной битвой в сети, в которой не было окончательного победителя.

В Интернете можно найти множество тематических исследований, но многие из них противоречат друг другу. Скорее всего, это связано с тем, что тестируется для какой платформы, а не с такой прямолинейностью, как «Красное лучше зеленого», как утверждает HubSpot в отношении выполняемого A/B-тестирования.

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

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

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

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

Что это значит?

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

В то время как участник, который сослался на дальтонизм как на причину, по которой он избегал красно-зеленой связи, был сбит огнем — возможно, он был прав.

Моделирование: Красный и Зеленый глазами дальтоников. источник: http://uxmovement.com/content/never-pair-green-and-red-together-on-the-web/

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

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

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

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

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

А оранжевый?

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

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

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

Именно так обстояло дело с Amazon — всегда одержимыми пользователями-тестировщиками — которые используют оранжевый цвет в большинстве наиболее важных призывов к действию. Но какие ассоциации несет цвет?

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

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

В целом кажется, что красный цвет — это цвет кнопок CTA, желательно использовать отдельно, проверен на контрастность при использовании текста кнопки и на фоне цветов сайта.

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

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

дизайн сайта — Красные кнопки на сайте электронной коммерции?

спросил
11 лет, 1 месяц назад

Изменено
5 лет, 9 месяцев назад

Просмотрено
4к раз

Я разрабатываю сайт электронной коммерции с красными кнопками. У него желто-белый фон, и в таком виде он выглядит неплохо.

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

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

Я говорю ему, что видел много сайтов с красными кнопками, а также довольно большими кнопками призыва к действию красного цвета. «http://mx.letsbonus.com/mexico-df-norte» может быть примером такого сайта (электронной коммерции).

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

• дизайн веб-сайта
• графический дизайн
• кнопки
• цвет
• цветовая схема

4

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

Это было подтверждено тестированием .

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

Примеры результатов испытаний:

2) Замена кнопки регистрации с зеленой на красную

Ранее на этой неделе я наткнулся на статью Performable, в которой объяснялось, как изменение их призыва к действию с зеленого на красный увеличило конверсию на 21%.

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

На данный момент у нас 600 участников, а коэффициент конверсии увеличился на 34%.

Результат? Красная кнопка превзошла зеленую кнопку на 21%.

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

0

Протестируйте оба и посмотрите, какой из них конвертирует лучше.

1

Я думаю, красный подойдет, если:

• вы избегаете использования красного цвета для сообщений об ошибках / уведомлений об отклонении в других областях
• вы используете красный цвет для «положительных» действий и призывов к действию в других местах

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

0

Я использую красную кнопку «РАЗМЕСТИТЬ ЗАКАЗ» на странице оформления заказа и синие кнопки на остальной части сайта. Только 2% клиентов, дошедших до страницы оформления заказа, не размещают заказы.

2

Я думаю, что хорошее «эмпирическое правило»:

Копируйте то, что делает Amazon, пока у вас не будет достаточно клиентов и ресурсов
провести собственное A/B-тестирование.

Однако будьте осторожны, просто получите больше конверсий в краткосрочный мой не то, что вы хотите. (Например, иметь веб-сайт, который конвертирует еще несколько человек при первом просмотре, но «отключает» многих людей, которые могли вернуться, чтобы купить позже.)

1

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

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

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

1

Я всегда понимал, что только чтение и расспросы других не помогут. Лучше всего прочитать о сплит-тестировании, посмотреть, что работает для других, а затем попробовать самому. И не пробуйте только 2 варианта, потому что лучший из двух вы точно не найдете. Делайте это постоянно, пока не перестанете улучшаться.

Выполняя сплит-тесты, мне удалось получить результаты на 300 % лучше, чем раньше, но требуется время и работа, чтобы протестировать абсолютно все.

1

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