Извечный вопрос для любителей А/В-тестов: «Будут ли люди чаще кликать на красную кнопку или на зеленую?» Можно ли как-то определить тот цвет кнопки, который будет помогать конверсии? Ответ: «да, если вы знаете формулу». Эксперты из Three Deep предлагают простую формулу правильных цветов для вашего сайта (прошлую подборку можно найти здесь).
Посетители сайта очень быстро выносят суждения о сайте. Согласно исследованиям Google первое впечатление о сайте формируется у людей менее чем за секунду.
Поэтому цвет является одним из определяющих факторов, ведь цвет обрабатывается человеческим мозгом быстрее, чем текст или изображение.
Давайте оставим в стороне на минутку все рассуждения о бренд-буках, руководствах по фирменному стилю, айдентике бренда, и даже А/В-тестах. Предлагаемая модель основывается на человеческой физиологии и психологии.
Чтобы объяснить этот принцип, прибегнем к небольшому упражнению из области психологии восприятия цвета.
Ниже расположена анимационная картинка. Сфокусируйтесь только на черной метке «Х» и смотрите на нее в течение 10 секунд не моргая. Только потом начните читать дальше, и ответьте на вопрос под картинкой.
Теперь ответьте на вопрос: какие цвета присутствовали на картинке?
Если вы все сделали, как было описано, то вы, конечно, видели там серый фон, черную метку, лиловые круги, и круги по очереди на очень короткий промежуток времени меняли цвет на светлый оттенок зеленого, что-то типа «лайма» или салатового, и потом снова становились лиловыми.
Однако, если вы откроете эту картинку в каком-то графическом редакторе, вы не найдете там этого светло-зеленого цвета. Этот цвет был создан в нашем воображении нашими глазами и мозгом.
С точки зрения физиологии, когда человеческий глаз «устает» от доминирования определенного цвета, в особенности чистого, яркого, то он начинает «видеть» другой цвет, «дополнительный» к нему.
И это помогает нам обратить внимание на СТА-элемент, который является главным, к чему мы хотим обратить внимание пользователя.
По нашему мнению, чтобы использовать особенности зрения и восприятия цветов, необходимо держаться следующих принципов:
- СТА-кнопки должны быть дополнительного цвета.
- Используйте зону дополнительного цвета ТОЛЬКО для СТА-элементов
- Используйте «чистые» цвета для СТА-кнопки
- Используйте вариации цветов для других элементов
Настало время дать три важных определения из области цветовых моделей, которые будут нами активно использоваться ниже. Эти вариации цветов часто используются неправильно, в непрофессиональном смысле, а для дизайнеров они значат вот что:
- Оттенок (tint): получается, если к базовому цвету добавить немного белого
- Тон или тональность (tone): получается, если к базовому цвету добавить немного серого
- Тень (shade): получается, если к базовому цвету добавить немного черного
Степень добавления белого, серого, черного может различаться, так получаются разные оттенки, тона и тени.
А теперь, как же все это использовать для повышения конверсии.
Принцип 1: Дополнительный цвет для CTA-элемента
СТА-элемент является главным элементом дизайна. В конце концов, вы хотите, чтобы пользователь нажал СТА-кнопку или заполнил форму с СТА. А перед тем, как нажать, он должен их заметить. Чтобы СТА-элемент хорошо бросался в глаза, он должен быть дополнительного цвета.
Для того чтобы определить дополнительный цвет, используйте цветовой круг. С большой вероятностью у вас на сайте определенный цвет будет доминирующим.
Дополнительный цвет – это противоположный к основному на «цветовом колесе», с которым знаком любой дизайнер
И одно важное уточнение. Вам нужно использовать цветовой круг, составленный по принципу RGB, где противоположный красному ярко-голубой (циановый) цвет. Дизайнеры используют также и RYB-версию цветового круга, где противоположный красному – зеленый. Это для других целей, не перепутайте.
Только RGB-версия цветового круга соответствует физиологическому восприятию цветов.
Принцип 2: используйте зону дополнительного цвета только для СТА-элемента
Как мы разобрались ранее, при наличии доминирующего цвета, человеческий взгляд притягивается к дополнительному цвету. Поэтому вы точно не хотите сбивать с толку этот природный механизм и использовать какие-то близкие к дополнительному цвета для других элементов.
Выделите сектор на цветовом колесе в 90 градусов (+/- 45 градусов от цвета СТА-кнопки), и убедитесь, что на вашем сайте нет никаких других элементов, которые эти цвета используют.
Есть несколько исключений из этого правила:
- Стрелки-подсказки, которые направляют пользователя к СТА-элементу могут быть также дополнительного цвета. Это особенно полезно, когда СТА-элемент находится за пределами экрана
- Если у вас используется сегментация на два потока, например, «для пациентов» и «для врачей» на сайте клиники, то обе кнопки могут быть из сектора дополнительного цвета, например красный и оранжевый
- Если у вас есть «вторичный» призыв к действию, например, «запомнить товар» является вторичным к «добавить в корзину», то вторичный СТА-элемент может быть из сектора дополнительного цвета. Но обязательно протестируйте! Схожесть этих кнопок может повредить конверсии.
Принцип 3: используйте чистый цвет для СТА-кнопки
Чистые цвета: это такие, в которых не присутствует добавления белого, серого или черного. Глаз человека быстрее реагирует на чистые цвета. Вы можете попробовать использовать небольшой градиент к оттенку или тени от чистого цвета, чтобы придать объем, либо сделать СТА-кнопку с некоторым объемом. Это дополнительно поможет распознать человеку этот элемент как именно кнопку, которую надо нажать.
Не используйте чистый цвет, если призыв к действию также повторяется на странице где-то еще в виде текстовой ссылки. Для этого используйте тень чистого цвета.
Принцип 4: Используйте оттенки, тона и тени для не-СТА-элементов
Теперь, когда вы определили цвет для своей СТА-кнопки, все другие элементы на сайте должны быть немного «нейтрализованы». В буквальном смысле. Человеческий глаз устает от чистых цветов.
Поэтому, если основной цвет у вас – голубой, цвет СТА-элементов, соответственно – оранжевый, то надо избежать использования чистого голубого цвета на сайте и заменить его на оттенки, тона и тени от чистого голубого цвета.
Совет: постарайтесь не использовать слишком много вариаций одного цвета. Как правило, 4 цвета вполне достаточно: основной цвет (придающий акценты), СТА-цвет, цвет ссылок и серый (темно-серый для яркого фона и светло-серый для темного).
И в заключение повторим все 4 принципа в одной инфографике.
По материалам Three Deep