Бен Парр - Ловушка для внимания. Как вызвать и удержать интерес к идее, проекту или продукту
Неужели такая простая вещь, как цвет, влияет на внимание потенциальных клиентов? Он получил четкий ответ «да» – красная кнопка привлекла на 34 % больше подписчиков, чем зеленая. Впечатляющий результат.
Однако он не удивит дизайнеров пользовательских интерфейсов, которые прекрасно знают, как одно лишь изменение цвета может повлиять на поведение пользователей. Фирма WiderFunnel, занимающаяся оптимизацией маркетинга, однажды работала с гигантом SAP над улучшением показателя эффективности платы за клик для их страницы, с которой можно было скачать пробную версию программного обеспечения. SAP хотела увеличить конверсию на 20 %. WiderFunnel внесла ряд изменений в целевую страницу сайта, в том числе добавила огромную оранжевую кнопку «Скачать сейчас», в результате чего конверсия повысилась на 32,5 %{35}.
WiderFunnel называет это «Большой оранжевой кнопкой». Большинство веб-дизайнеров скажут вам, чтобы люди нажимали на кнопку, ее надо сделать красной, оранжевой или желтой, т. е. покрасить в один из теплых цветов. Если вам нужно направить внимание аудитории на конкретную кнопку, ссылку или иконку, используйте для них яркие цвета, резко контрастирующие с остальной страницей. Причины эффективности такого приема связаны с нашей психологией.
Питер Кёниг, немецкий профессор нейробиопсихологии из Оснабрюкского университета, заинтересовался тем, как люди визуально обрабатывают цвета и, что более важно, какие факторы позволяют человеческому глазу отличать цвет – особенно в природе. В предыдущих исследованиях обнаружилось, что насыщенность цвета, его яркость, является лучшим индикатором того, на каких объектах мы зафиксируем внимание, но Кёниг и его команда хотели пойти дальше. Они намеревались узнать, какие цветовые контрасты привлекают наибольшее внимание.
В ходе трех экспериментов Кёниг и его команда демонстрировали испытуемым серию неизмененных фотографий джунглей Уганды вместе с фотографиями, на которых некоторые цвета были или удалены, или изменены. На фотографиях не было объектов, созданных человеком, только ягоды, листья, деревья и другие сцены из жизни Национального парка Кибале. В первом эксперименте испытуемым было предложено три типа фотографий – неизмененные, с удаленным красным и зеленым цветом и с удаленным синим и желтым. Во втором эксперименте испытуемым демонстрировали 12 сцен с различными оттенками цветов. И в последнем эксперименте тестировались оригинальные изображения из первого эксперимента, но с измененными цветами, а в качестве испытуемых были выбраны страдающие частичной цветовой слепотой. Исследователи пользовались программным обеспечением, отслеживающим движение глаз, чтобы измерить уровень внимательности каждого испытуемого и проследить, переключается ли визуальное внимание{36}.
С результатами этого исследования трудно спорить, особенно когда видишь фотографии своими глазами. Например, одна фотография, на которой ярко выделяются красные ягоды, свисающие с куста, стала еще более яркой, когда с нее удалили синий и желтый цвет. Однако на фотографии, где удален красный и зеленый цвет, совершенно невозможно различить ягоды и крайне трудно различить какие-либо подробности.
Эксперименты подтвердили этот эффект – насыщенность и контраст были выше на изображениях, где отсутствовали оттенки синего и желтого (различать красный было легче), что помогало участникам находить важные объекты вроде ягод. Участники фиксировали внимание на одних и тех же местах гораздо чаще, когда на изображениях отсутствовал синий и желтый цвет, чем на изображениях, с которых удалили красный и зеленый, или даже на оригинальных изображениях. Даже страдавшие частичной цветовой слепотой были более склонны фиксировать внимание на тех же объектах, когда на изображениях отсутствовал синий и желтый цвет, – тот факт, что они не различали красный и зеленый, не мешал им находить важную информацию вроде ягод.
Именно с помощью цветового контраста мозг находит соответствующие стимулы и реагирует на них. В природе живительные красные ягоды выделяются на фоне зеленой травы и деревьев. Если бы естественным цветом листьев был фиолетовый, красный совершенно не справлялся бы с задачей привлечения внимания. Этим же объясняется, почему выделяются красные, желтые и оранжевые кнопки на веб-сайтах, – они лучше контрастируют с белым и серым фоном, чаще всего встречающимся на сайтах. Все, что нужно для подтверждения этой мысли, – открыть страницу продукта на сайте Amazon.com, известном своими методами оптимизации, и найти желтую кнопку «Добавить в корзину» и оранжевую «Купить в 1 клик».
Животные на протяжении веков используют привлекающие внимание цветовые контрасты в своих целях. Каракатица обладает уникальной способностью повторять сложные цветовые сочетания окружающей ее среды, хотя сама совершенно не различает цветов. Увидеть каракатицу на морском дне практически невозможно, потому что она становится не просто коричневой, а песочно-коричневой, имитируя отдельные песчинки. Когда животное – или охотник в лесу – хочет остаться незамеченным, оно пользуется камуфляжем, чтобы слиться с окружающей средой{37}.
Когда папа римский Франциск выпустил двух белых голубей мира из своего окна, на них немедленно напали ворон и чайка, что многие посчитали плохим предзнаменованием. На самом деле голуби выделяются на зеленом и коричневом фоне, а также практически на всех цветах поверхности земли или зданий, и это делает их легкой добычей. Животные-альбиносы в природе долго не живут, потому что слишком заметны в своей естественной среде обитания{38}.
Итак, что нужно делать, если вы хотите привлечь внимание с помощью цвета? Нужно выбрать подходящий контраст. Если вы хотите привлечь внимание к своему продукту, сделайте для него упаковку, отличающуюся по цвету от продуктов, которые, скорее всего, будут стоять рядом на полках магазинов (у всех упаковка голубая? Сделайте оранжевую!). Если вы хотите, чтобы вас заметили в баре, одевайтесь в яркие цвета, контрастирующие с темнотой, царящей в таких заведениях (красный – ваш друг в этой ситуации). Если вы хотите, чтобы на вас обратили внимание на профессиональной конференции, не надевайте светло-голубую рубашку – по моим наблюдениям, в мире финансов все носят голубые рубашки (лично я предпочитаю сиреневые и розовые).
И если вы хотите, чтобы люди что-нибудь купили у вас на сайте, используйте цвет, контрастирующий с цветом фона. У одного из своих многочисленных клиентов, крупной европейской розничной сети, компания Unbounce, занимающаяся оптимизацией, изменила цвет кнопки «Добавить в корзину», расположенной на сером фоне, с синего на ярко-зеленый – не на оранжевый или желтый. В результате ярко-зеленая кнопка «Добавить в корзину», выделяющаяся на странице, улучшила конверсию на невероятные 35,81 %. Если вы хотите что-нибудь выделить, выберите объект, на который нужно направить внимание, и сделайте его контрастным. В большинстве случаев подойдут яркие насыщенные цвета и теплые оттенки{39}.
Если вы не доверяете своему зрению, то в Интернете существует множество инструментов, с помощью которых можно проверить цветовые контрасты. Инструмент компании Das Plankton не только позволяет наглядно увидеть контраст различных комбинаций цветов, но и тестирует цвет на недостатки и сообщает коэффициент контраста (т. е. измеряет степень контрастности) выбранных цветов[2]. У компании WebAIM имеется более простой инструмент, позволяющий проверить коэффициент контраста двух цветов и определить, соответствует ли он стандартам Web Content Accessibility Guidelines[3].
Конечно, контраст – это только один из элементов, которые следует учитывать, когда речь идет о цвете. В конце концов, невозможно везде носить оранжевый или ярко-зеленый – вы будете раздражать или утомлять людей. И причина этого кроется в наших бессознательных цветовых ассоциациях.
Ассоциации: разница между красной и синей таблеткой
При возможности я предпочитаю пользоваться услугами авиакомпании Virgin America. Их рейсы – одни из самых комфортных и приятных. Для меня развлечения и Wi-Fi не главное, все это можно встретить у многих авиакомпаний. Больше всего мне нравится сиреневая подсветка салона.
Подсветка не просто улучшает настроение, она может в буквальном смысле спасти вашу жизнь. Власти японского города Нара, расположенного в нескольких сотнях километров к западу от Токио, искали решение проблемы роста преступности. У них был план. Услышав о том, какое влияние оказало синее освещение на уровень преступности в Глазго, Шотландия, власти установили синие фонари в наиболее криминогенных районах города и на железнодорожных станциях. В результате уровень преступности сократился на 9 %, но, что более удивительно, самоубийства на железнодорожных станциях Нары полностью прекратились. За период с 2006 по 2008 г. ни один человек не покончил с собой под синим светом{40}.
