Битва за конверсию: цвет vs контраст

Это не очередная статья из разряда используйте синий вместо красного . Мы уже достаточно об этом слышали. Применение цветов это деликатный процесс, который требует, чтобы вы учитывали аудиторию и среду сайта, который вы хотите изменить. Выбор крайне индивидуален, так как он должен соответствовать характеру вашего сайта (и бренда). Однако существует один крайне универсальный принцип. Знаете ли вы, что управляет нашим восприятием? Контраст. В этой статье вам не скажут использовать цвета в своем дизайне . Вместо этого вам скажут использовать контраст в своем дизайне , и приведут доказательства в виде примеров из практики.

Искупление красным

Скорее всего, вы неоднократно слышали (или читали), что использование одного цвета вместо другого приводит к значительному повышению коэффициента конверсии, и все должны так делать, потому что на это есть определенные причины. Конечно, практических примеров, доказывающих, что цвет Х принесет вам гору денег, огромное множество. Одним из них, который приводят чаще всего, по крайней мере, из того, что видели мы, является пример Hubspot, где запустили тестовую версию, изменяющую цвет призыва к действию.

Результатом их исследования стало то, что красная кнопка эффективнее зеленой на 21%. Отлично, красный!

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

При этом, вы видели цветовую схему первого дизайна? Он основан на зеленом цвете. Фоны, кнопки, иконки в основе всего лежит зеленый цвет. Даже если так, кнопка сама по себе менее насыщенная и более темная, чем ее красный вариант. Она просто сливается с фоном. Тогда как красная кнопка более светлая и насыщенная, а еще угадайте что? Красный дополняет зеленые элементы. Потому что он контрастный. Учтите простой факт, что вы читаете эту статью, написанную черным шрифтом на светлом фоне. Если вы посмотрите вокруг, некоторые предметы вы увидите быстрее, чем остальные. Контраст встречается повсеместно.

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

• Критичный обзор от Genetic, Social, и монография по общей психологии, объясняющие, как на наше восприятие цветов влияют различные факторы, такие как наше воспитание или культурный контекст,
  
  • Статья о важности цвета в маркетинге от журнала Академии маркетинговых наук, которая исследует эффекты разных цветов в создании бренда,
    
  • Похожая статья про воздействие цветов в маркетинге от Management Decision, в частности, как цвет влияет на наше настроение,
    
  • Окончательная статья от Marketing Theory, которая доказывает на примерах, как следует представлять продукцию с помощью цвета.

Красный выделяется

Что хорошего в тепле, если холод не подчеркнет всей его прелести?

Джон Стейнбек

Чтобы подтвердить эту точку зрению и протестировать новый дизайн сайта, Петр Козоровски провел исследование с помощью инструмента Screenshot Click Testing. Имея ограниченную аудиторию (около сотни человек), он попытался выяснить, правда ли более контрастная цветовая схема (и незначительное изменение призыва к действию) может привести к более высокому коэффициенту кликов на кнопку регистрации.

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

Принцип исследования был довольно простым. Участники получали следующее задание: \"Нажмите на элемент, который привлекает ваше внимание больше всего\", после чего последовательно показывались два приведенных выше изображения.

В конце исследования им задавался вопрос: \"Какая из версий показалась вам более интересной? Можете сказать, почему?\". Все, что им нужно было сделать кликнуть на наиболее интересный элемент в каждой версии и дать ответ.

Вот карта из 75 кликов, размещенных на менее контрастной версии. Как вы видите, они довольно равномерно распределены по странице. Призыв зарегистрироваться победил с довольно небольшим отрывом остальные зоны были интересны практически в той же степени.

Люди, которым больше понравилась эта версия, сказали, что эта схема была более мирной и приятной глазу и выглядела более профессионально. Это правда, оттенки синего выглядят очень минималистично и элегантно.

Результаты второго экрана более интересны.

Значительное большинство кликов (почти 75%) было направлено на контрастный оранжевый призыв к действию.

Около 68% респондентов утверждали, что им понравилась эта версия больше, чем другая. Причиной тому стало то, что она более интересная, привлекающая внимание и понятная. Контраст победил в эстетике.

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

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

Контраст 1:0 Цвет

Теория контраста стоит того, чтобы ее изучать. Если вы хотите использовать контраст в своем дизайне и сайтах, я могу порекомендовать изучить несколько художественных теорий. Здесь, на colorwheel.co объясняются основы теории контраста, созданные Йоханнесом Иттеном. Также можете поискать вдохновения у различных художников.

Использование контраста что и как

Так как вы уже ознакомились с тем, что именно делает контраст (а это уже неплохое начало), пришло время научиться, как использовать контраст.Чтобы быстро оценить, работает ли ваш контраст, вы можете уменьшить страницы и сравнить их между собой. Обратите внимание на то, какие элементы вы замечаете в первую очередь.

Убедитесь, что фоновые цвета натуральные и нейтральные. Джош Бирнс из Studiopress рассказывает о методе создания на сайте иерархии из трех цветов: фон, основа и акцентные цвета. Фон и основа должны поддерживать акцентный цвет, который должен быть контрастным по отношению к остальным.

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

И заключительный совет тестируйте. A/B тесты это наилучший метод проверить, как воспринимаются ваши кнопки, предложения или дизайны. Без тестирования вы не можете быть уверены, что ваш выбор действительно соответствует характеру вашего сайта. Хорошее впечатление это одно, но значимые данные это другое.