Контраст: животные-альбиносы в природе долго не живут

В 2010 г. канадский дизайнер пользовательских интерфейсов Дэн Макгрейди запустил проект CareLogger, помогающий диабетикам следить за своим здоровьем. Проект не имел финансовой поддержки, поэтому привлечение максимального числа подписчиков было совершенно необходимо для его осуществления. Макгрейди, как все хорошие дизайнеры пользовательских интерфейсов, оценивал каждую деталь целевых страниц с помощью A/B тестирования – метода тестирования влияния незначительных изменений на веб-сайт или приложение путем предложения случайно выбранным пользователям текущего или «нового» дизайна, чтобы определить, какой больше привлекает или заинтересовывает. В одном из экспериментов Макгрейди тестировал только цвет кнопки «Подписаться». Одна кнопка была зеленой, другая – красной. Обе кнопки он поместил на светло-серый фон [34 - Dan McGrady, “How We Improved Our Conversion Rate by 72 %, ”Dmix blog, 2011, https://web.archive.org/web/20140413033138/https://dmix.ca/2010/05/how-we-increased-our-conversion-rate-by-72/.].

Неужели такая простая вещь, как цвет, влияет на внимание потенциальных клиентов? Он получил четкий ответ «да» – красная кнопка привлекла на 34 % больше подписчиков, чем зеленая. Впечатляющий результат.

Однако он не удивит дизайнеров пользовательских интерфейсов, которые прекрасно знают, как одно лишь изменение цвета может повлиять на поведение пользователей. Фирма WiderFunnel, занимающаяся оптимизацией маркетинга, однажды работала с гигантом SAP над улучшением показателя эффективности платы за клик для их страницы, с которой можно было скачать пробную версию программного обеспечения. SAP хотела увеличить конверсию на 20 %. WiderFunnel внесла ряд изменений в целевую страницу сайта, в том числе добавила огромную оранжевую кнопку «Скачать сейчас», в результате чего конверсия повысилась на 32, 5 % [35 - “B2B Landing Page Optimization Lifts Lead Generation by 32.5 %–Within Strict Branding Guidelines, ” WiderFunnel Marketing Conversion Optimization, https://www.widerfunnel.com/proof/case-studies/sap-landing-page-optimization (accessed September 12, 2014).].

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

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

В ходе трех экспериментов Кёниг и его команда демонстрировали испытуемым серию неизмененных фотографий джунглей Уганды вместе с фотографиями, на которых некоторые цвета были или удалены, или изменены. На фотографиях не было объектов, созданных человеком, только ягоды, листья, деревья и другие сцены из жизни Национального парка Кибале. В первом эксперименте испытуемым было предложено три типа фотографий – неизмененные, с удаленным красным и зеленым цветом и с удаленным синим и желтым. Во втором эксперименте испытуемым демонстрировали 12 сцен с различными оттенками цветов. И в последнем эксперименте тестировались оригинальные изображения из первого эксперимента, но с измененными цветами, а в качестве испытуемых были выбраны страдающие частичной цветовой слепотой. Исследователи пользовались программным обеспечением, отслеживающим движение глаз, чтобы измерить уровень внимательности каждого испытуемого и проследить, переключается ли визуальное внимание [36 - Hans-Peter Frey et al., “Beyond Correlation: Do Color Features Influence Attention in Rainforest? ” Frontiers in Human Neuroscience 5 (2011): 36.].

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

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

Именно с помощью цветового контраста мозг находит соответствующие стимулы и реагирует на них. В природе живительные красные ягоды выделяются на фоне зеленой травы и деревьев. Если бы естественным цветом листьев был фиолетовый, красный совершенно не справлялся бы с задачей привлечения внимания. Этим же объясняется, почему выделяются красные, желтые и оранжевые кнопки на веб-сайтах, – они лучше контрастируют с белым и серым фоном, чаще всего встречающимся на сайтах. Все, что нужно для подтверждения этой мысли, – открыть страницу продукта на сайте Amazon.com, известном своими методами оптимизации, и найти желтую кнопку «Добавить в корзину» и оранжевую «Купить в 1 клик».

Животные на протяжении веков используют привлекающие внимание цветовые контрасты в своих целях. Каракатица обладает уникальной способностью повторять сложные цветовые сочетания окружающей ее среды, хотя сама совершенно не различает цветов. Увидеть каракатицу на морском дне практически невозможно, потому что она становится не просто коричневой, а песочно-коричневой, имитируя отдельные песчинки. Когда животное – или охотник в лесу – хочет остаться незамеченным, оно пользуется камуфляжем, чтобы слиться с окружающей средой [37 - Roger T. Hanlon and John B. Messenger, “Adaptive Coloration in Young Cuttlefish (Sepia officinalis L.): The Morphology and Development of Body Patterns and Their Relation to Behaviour, ” Philosophical Transactions of the Royal Society of London, Series B, Biological Sciences 320, no. 1200 (1988): 437–87.].

Когда папа римский Франциск выпустил двух белых голубей мира из своего окна, на них немедленно напали ворон и чайка, что многие посчитали плохим предзнаменованием. На самом деле голуби выделяются на зеленом и коричневом фоне, а также практически на всех цветах поверхности земли или зданий, и это делает их легкой добычей. Животные-альбиносы в природе долго не живут, потому что слишком заметны в своей естественной среде обитания [38 - Mel White, “Why Birds Attacked the Peace Doves in Rome, ” National Geographic, January 27, 2014, https://news.nationalgeographic.com/news/2014/01/140127-white-peace-doves-attacked-birds-rome-vatican-pope/.].

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

И если вы хотите, чтобы люди что-нибудь купили у вас на сайте, используйте цвет, контрастирующий с цветом фона. У одного из своих многочисленных клиентов, крупной европейской розничной сети, компания Unbounce, занимающаяся оптимизацией, изменила цвет кнопки «Добавить в корзину», расположенной на сером фоне, с синего на ярко-зеленый – не на оранжевый или желтый. В результате ярко-зеленая кнопка «Добавить в корзину», выделяющаяся на странице, улучшила конверсию на невероятные 35, 81 %. Если вы хотите что-нибудь выделить, выберите объект, на который нужно направить внимание, и сделайте его контрастным. В большинстве случаев подойдут яркие насыщенные цвета и теплые оттенки [39 - Michael Aagaard, “How to Design Call to Action Buttons that Convert, ” The Landing Page & Conversion Rate Optimization Blog, Unbounce, May 22, 2013, https://unbounce.com/conversion-rate-optimization/design-call-to-action-buttons/.].

Если вы не доверяете своему зрению, то в Интернете существует множество инструментов, с помощью которых можно проверить цветовые контрасты. Инструмент компании Das Plankton не только позволяет наглядно увидеть контраст различных комбинаций цветов, но и тестирует цвет на недостатки и сообщает коэффициент контраста (т. е. измеряет степень контрастности) выбранных цветов [2 - Инструмент контраста Das Plankton можно найти здесь: https://www.dasplankton.de/ContrastA/.]. У компании WebAIM имеется более простой инструмент, позволяющий проверить коэффициент контраста двух цветов и определить, соответствует ли он стандартам Web Content Accessibility Guidelines [3 - Проверка контраста WebAIM: https://webaim.org/resources/contrastchecker/.].

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