Более рациональные люди могут попробовать обратиться к исследованиям — наверняка ведь результаты A/B тестов уже показали, какой цвет лучше? Но это тоже не поможет. Можно найти результаты A/B тестов, которые показывают, что синяя кнопка сработала лучше оранжевой (на 9%), зеленая лучше, чем оранжевая (на 86%), красная лучше, чем зеленая (на 21%)… Получается, что самого “правильного” цвета для CTA-кнопок нет.
Сейчас считается, что на самом деле для успеха важен не столько цвет, сколько контраст кнопки по отношению к странице. Поэтому в хороших статьях на эту тему вы не встретите рассуждений про психологию цвета, а вот рекомендацию сделать кнопку “контрастной” — обязательно. Но контраст бывает разным: можно подобрать такое сочетание красного и зеленого или черного или синего, при котором элементы все равно будут плохо различимы. Поэтому важен не цветовой контраст, а яркостный (luminance contrast). Если вы обесцветите страницу, и кнопка всё равно будет хорошо видна, значит, яркостный контраст подобран правильно. Также важно обеспечить хороший яркостный контраст между заливкой кнопки и надписью на ней. Кстати, люди с нарушениями цветового зрения будут вам за это благодарны.
Если яркостный контраст так важен, почему тогда никто не использует черные кнопки на белом фоне? Потому что на веб-страницах, как правило, много черного текста, а еще есть другие цветные элементы интерфейса — картинки, видео, боковые и верхние меню и т.п. Среди них черная кнопка просто потеряется. Поэтому хорошая CTA-кнопка должна быть контрастной по яркости по отношению к фону и контрастной по цвету по отношению к другим элементам интерфейса.
Конечно, есть и другие факторы, которые влияют на эффективность кнопок с призывом к действию: текст, форма, расположение и размер. А еще часто оказывается, что причина низких конверсий страницы связана не с оформлением кнопки, а с более глобальными проблемами: неоптимальная структура страницы, непонятные тексты, неадекватная цена в конце концов. Но если представить себе экстремальную ситуацию, в которой у вас есть бюджет только на то, чтобы перекрасить кнопку, то почему бы не поэкспериментировать…
Хороших вам интерфейсов!
Ссылки для тех, кто хочет углубиться в вопрос
https://bit.ly/2Mu4VJI – зеленая кнопка лучше оранжевой
https://bit.ly/2Mg1ib1 – желтая кнопка лучше зеленой
https://bit.ly/2vJoNz3 – красная кнопка лучше зеленой
https://bit.ly/2MeYcEk – синяя кнопка лучше оранжевой
https://bit.ly/2B9rgrH – обзорная статья с хорошими иллюстрациями разного вида контраста (и небольшим блоком про психологию цвета)
https://bit.ly/2P7M9Xd – обзорная статья с рассуждениями про luminance contrast
https://www.vtb.ru/ – хороший пример ярких CTA-кнопок на сайте ВТБ, в создании которого мы принимали участие. Красные кнопки контрастны по отношению к белому фону страницы и к синей заливке в шапке, подвале и других элементах интерфейса.
