Colorful pie chart

Юзабилити и цвета: руководство по оптимизации конверсии через цвет

Извечный вопрос для любителей А/В-тестов: «Будут ли люди чаще кликать на красную кнопку или на зеленую?» Можно ли как-то определить тот цвет кнопки, который будет помогать конверсии? Ответ: «да, если вы знаете формулу». Эксперты из Three Deep предлагают простую формулу правильных цветов для вашего сайта (прошлую подборку можно найти здесь).

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

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

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

Чтобы объяснить этот принцип, прибегнем к небольшому упражнению из области психологии восприятия цвета.

Ниже расположена анимационная картинка. Сфокусируйтесь только на черной метке «Х» и смотрите на нее в течение 10 секунд не моргая. Только потом начните читать дальше, и ответьте на вопрос под картинкой.

 

00

 

Теперь ответьте на вопрос: какие цвета присутствовали на картинке?

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

Однако, если вы откроете эту картинку в каком-то графическом редакторе, вы не найдете там этого светло-зеленого цвета. Этот цвет был создан в нашем воображении нашими глазами и мозгом.

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

И это помогает нам обратить внимание на СТА-элемент, который является главным, к чему мы хотим обратить внимание пользователя.

По нашему мнению, чтобы использовать особенности зрения и восприятия цветов, необходимо держаться следующих принципов:

  • СТА-кнопки должны быть дополнительного цвета.
  • Используйте зону дополнительного цвета ТОЛЬКО для СТА-элементов
  • Используйте «чистые» цвета для СТА-кнопки
  • Используйте вариации цветов для других элементов

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

  • Оттенок (tint): получается, если к базовому цвету добавить немного белого
  • Тон или тональность (tone): получается, если к базовому цвету добавить немного серого
  • Тень (shade): получается, если к базовому цвету добавить немного черного

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

А теперь, как же все это использовать для повышения конверсии.

 

Принцип 1: Дополнительный цвет для CTA-элемента

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

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

Дополнительный цвет – это противоположный к основному на «цветовом колесе», с которым знаком любой дизайнер

 

01

 

И одно важное уточнение. Вам нужно использовать цветовой круг, составленный по принципу RGB, где противоположный красному ярко-голубой (циановый) цвет. Дизайнеры используют также и RYB-версию цветового круга, где противоположный красному – зеленый. Это для других целей, не перепутайте.

Только RGB-версия цветового круга соответствует физиологическому восприятию цветов.

 

Принцип 2: используйте зону дополнительного цвета только для СТА-элемента

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

Выделите сектор на цветовом колесе в 90 градусов (+/- 45 градусов от цвета СТА-кнопки), и убедитесь, что на вашем сайте нет никаких других элементов, которые эти цвета используют.

 

02

 

Есть несколько исключений из этого правила:

  • Стрелки-подсказки, которые направляют пользователя к СТА-элементу могут быть также дополнительного цвета. Это особенно полезно, когда СТА-элемент находится за пределами экрана
  • Если у вас используется сегментация на два потока, например, «для пациентов» и «для врачей» на сайте клиники, то обе кнопки могут быть из сектора дополнительного цвета, например красный и оранжевый
  • Если у вас есть «вторичный» призыв к действию, например, «запомнить товар» является вторичным к «добавить в корзину», то вторичный СТА-элемент может быть из сектора дополнительного цвета. Но обязательно протестируйте! Схожесть этих кнопок может повредить конверсии.

 

Принцип 3: используйте чистый цвет для СТА-кнопки

Чистые цвета: это такие, в которых не присутствует добавления белого, серого или черного. Глаз человека быстрее реагирует на чистые цвета. Вы можете попробовать использовать небольшой градиент к оттенку или тени от чистого цвета, чтобы придать объем, либо сделать СТА-кнопку с некоторым объемом. Это дополнительно поможет распознать человеку этот элемент как именно кнопку, которую надо нажать.

 

03

 

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

Принцип 4: Используйте оттенки, тона и тени для не-СТА-элементов

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

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

 

04

 

Совет: постарайтесь не использовать слишком много вариаций одного цвета. Как правило, 4 цвета вполне достаточно: основной цвет (придающий акценты), СТА-цвет, цвет ссылок и серый (темно-серый для яркого фона и светло-серый для темного).

И в заключение повторим все 4 принципа в одной инфографике.

 

05

 

По материалам Three Deep

 

About likezilla

Мы увлечены тем, что находим способы снизить стоимость услуг digital-маркетинга.