Все статьи

CTA-кнопки: какой цвет лучше?

Более рациональные люди могут попробовать обратиться к исследованиям — наверняка ведь результаты 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-кнопок на сайте ВТБ, в создании которого мы принимали участие. Красные кнопки контрастны по отношению к белому фону страницы и к синей заливке в шапке, подвале и других элементах интерфейса.

Тэги

Поделиться статьей

Поделитесь своим мнением
Ваше оценка отправлена!
Стоила ли статья потраченного времени?