Цвет кнопки CTA: что говорят данные

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

01Почему «зелёная против красной» — не работает

Распространённый сюжет: «мы поменяли кнопку с зелёной на красную и получили +21% конверсии». Проблема в том, что в исходном дизайне кнопка не контрастировала с фоном, а в новом — стала бросаться в глаза. Сработал не цвет, а контраст.

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

02Что в цвете действительно работает

Цвет влияет на конверсию через три механики:

• Контраст с фоном. Кнопка должна выделяться из окружения. Если страница в светлых тонах — кнопка должна быть тёмной и насыщенной (или наоборот).
• Отличие от других элементов. Если CTA того же цвета, что заголовки или ссылки, она теряется. Главное действие должно быть визуально уникальным.
• Ассоциации в контексте. Красный для кнопки «купить» в банковской теме — плохая идея, потому что красный ассоциируется с ошибкой/тревогой. В фастфуде — наоборот, нормально.

03Правило акцентного цвета

В большинстве сайтов работает простая схема: один акцентный цвет — только для главных действий. Кнопки второстепенных действий — нейтральные (серая обводка или прозрачная заливка).

Если на странице 5 ярких оранжевых кнопок, ни одна не выделяется — мозг перестаёт их замечать. Если оранжевая одна, а остальные «бледные» — глаз сам идёт к ней.

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

04Цвет, бренд и доверие

Цвет кнопки часто хочется привязать к бренду: «у нас фирменный синий, и кнопки тоже синие». Это работает, если фирменный цвет действительно контрастирует с фоном страницы. Если нет — нужен второй акцентный цвет специально для CTA, который сочетается с брендом, но не сливается со страницей.

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

05Как тестировать цвет правильно

Если очень хочется проверить именно цвет — делайте A/B-тест честно. Что важно:

• Меняйте только цвет. Если одновременно меняется и текст кнопки, и расположение — вы не поймёте, что сработало.
• Дождитесь достаточной выборки. На малом трафике «выигрыш на 30%» — почти всегда случайность.
• Сравнивайте конверсию в целевое действие, а не просто клики по кнопке.

Подробнее про методику тестов — в материале «A/B-тестирование сайта: как проверять гипотезы».

06Что важнее цвета

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

• Текст кнопки. «Получить расчёт» работает лучше «Отправить», «Узнать стоимость» — лучше «Подробнее».
• Размер и место. Кнопка должна попадать в зону внимания и быть достаточно крупной для тача.
• Что вокруг кнопки. Доверительная подпись, иконка, гарантия — повышают готовность нажать.
• Скорость загрузки. Если страница грузится медленно, никакая кнопка не спасёт.

Чтобы цвет действительно работал на конверсию, его нужно встроить в общий дизайн сайта — это часть услуг «Разработка сайтов» и «Дизайн и аналитика».

07Короткий чек-лист

• Кнопка CTA выделяется из фона и из других элементов страницы.
• Главных кнопок одного типа — одна-две на экран, не пять.
• Цвет сочетается с брендом, но не сливается с ним.
• Текст на кнопке говорит о результате, а не о действии.
• Контраст текста и фона кнопки — достаточный для чтения (минимум 4.5:1).

Официальная документация по теме — Справка Яндекс.Вебмастера.