какой цвет кнопки лучше для конверсии

Цвет кнопки для сайта, какой выбрать

Из этого материала вы узнаете, какой цвет кнопки на сайте имеет лучшую конверсию:

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

Было решено провести исследования, в котором приняли участие 21,5 тысячи пользователей. И была выявлена закономерность в 65%, от которой все-таки зависит результат.

Конечно, 65% это самый максимум и среднее значение было чуть больше 10%, но при этом – это все еще хороший показатель, ведь мы только поменяли цвет.

Красный цвет кнопки на сайте, привлекает внимание?

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

Чтобы разобраться в этом вопросе сравнивали 3 цвета: зеленый, синий и красный. Соответственно провели 4 теста.

Первое тестирование: Красный vs Синий цвет кнопки на сайте

Результат этого теста был неожиданным. В нем приняли участие 6000 человек. Конверсия красной кнопки составила 3,81%, а синей – 4,18%. Это на 9% больше. Вывод из этой ситуации: нужно учитывать свою целевую аудиторию, так как для этого продукта клиенты предпочли цвет спокойствия, так как именно такие эмоции они испытывали в этот момент.

Второе тестирование: Зеленый vs Синий цвет кнопки на сайте

Такие цвета являются приблизительно похожими, но на удивление, данные отличались. Конверсия синей кнопки составила 2,57%, зеленой – 4,24%, что больше на 65%.

Третье тестирование: Красный vs Зеленый

Для этого тестирования мы поменяли цвет самого сайта и картинки рядом с кнопкой. Выбрали яркие красные элементы. По результатам видно, что конверсия зеленой кнопки была больше на 11%. У зеленой кнопки – 3,62%, у красной – 3,61%. То есть клиенты выбирали кнопку контрастного цвета.

Четвертое тестирование: Зеленый vs Синий

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

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

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

Как протестировать, какого цвета должна быть кнопка на сайте?

Сделать тест удобнее и быстрее всего можно при помощи виджета Kepler Leads. Он работает по принципу А/Б тесты и его настройка занимает не более 10 минут.

Сделать саму настройку можно в несколько этапов:

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

Источник

Какого цвета должны быть кнопки на сайтах: вся правда на основе UX-исследований и статистики NASA

Команда проекта EyeQuant опубликовала пост о том, как правильно выбирать цвет кнопок с призывом к действию. Мы подготовили адаптированную версию этого материала.

Множество специалистов уверены, что кнопки должны быть красными, потому что этот цвет создает ощущение «срочности» и вызывает воодушевление, другие убеждены, что нужно использовать зеленый, потому что «он разрешает действие. Специалисты из Unbounce разработали концепт BOB (big orange button — большая оранжевая кнопка) и считают идеальным решением именно его, поскольку «оранжевый цвет выражает энергию, энтузиазм и стимулирует настрой к решению задачи».

Почему этот спор все еще длится? Проблем в том, что не существует данных, которые бы позволяли однозначно утверждать, что тот или иной цвет кнопки будет однозначно лучшим решением. Компания HubSpot публиковала ставший популярным кейс, в котором в процессе A/B теста красная кнопка показала лучшие результаты, чем зеленая. Но при этом коллеги из Sentient добивались того, что красная кнопка проигрывала оранжевой, розовой, ярко зеленой и даже белой. Крис Говард из WiderFunnel говорил, что в их тестах чаще победителями оказывались кнопки оранжевого цвета.

Учитывая всю разнонаправленность результатов различных тестов, неудивительно, что специалисты их ConversionXL считают, что цвет на самом деле не очень сильно влияет на конверсию сам по себе. Гораздо важнее то, как он влияет на визуальную иерархию веб-страницы — самая эффективная кнопка должна выделяться.

Какая кнопка на самом деле «выделяется»

В неврологии существует термин визуальной значимости (visual saliency) — он описывает то, насколько определенный контент «выделяется» из своего окружения. Значимость — сложная тема, но есть кое-что, что стоит о ней знать: зрительная кора людей запрограммирована таким образом, чтобы замечать наиболее значимые объекты. Это не психологический момент, на него не влияют культура, личные предпочтения или демография. Этот схема, выработанная в ходе эволюции — людям важно было быстро замечать потенциальную добычу, хищников или соплеменников в мире, заполненном визуальным шумом.

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

Какие факторы влияют на визуальную значимость

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

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

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

Пример из исследования NASA показывает, как контраст позволяет определить, какой элемент дизайна кажется наиболее заметным

Что все это значит в контексте CTA-кнопок

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

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

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

Теперь понятно, почему все не так просто, как выбрать между зеленым, красным или оранжевым цветом. Пример — супе-заметная CTA-кнопка от Abercrombie & Fitch:

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

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

При этом, может быть и так, что зеленая кнопка вовсе не будет такой заметной:

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

Не равны между собой и любые красные кнопки. Пример:

Дизайн сайта Sephora и тепловая карта движений взгляда в первые три секунды попадания на страницу

Сайт Uniqlo и тепловая карта

В данном случае более маленькая, но контрастная кнопка на сайте Sephora привлекает больше внимания, чем большая, но менее контрастная кнопка у Uniqlo. В последнем случае увеличена общая яркость, а в первом лучше продуман контраст.

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

Сайт B&Q и его тепловая карта

Сайт автопрокатчика Sixt и его тепловая карта

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

Но если контраст так важен, почему тогда все просто не используют белый и черный цвета? Но не все так просто, что иллюстрируют данные NASA:

На этой картинке красные и розовые буквы заметны сразу, в отличие от черных — и это несмотря на то, что они обладают меньшим контрастом по сравнению с последними. Это так называемый эффект «всплытия» (pop-out effect).

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

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

Выводы

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

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

Ссылки и материалы по теме:

Источник

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

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

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

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

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

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

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

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

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

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

1 кейс

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

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

2 кейс

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

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

3 кейс

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

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

4 кейс

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вывод

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

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

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

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

Источник

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

Возможность убедить людей принять верное решение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Корзина

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

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

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

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

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

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

Лендинг демонстрирует преимущества продукта, а также отвечает на возникающие у посетителей вопросы. Здесь ключевую роль играет правильный порядок подачи информации, в том числе грамотное размещение кнопок 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-кнопку.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник