Баннерная слепота и как с ней бороться: психология восприятия цвета

Giraff.io
9 min readFeb 6, 2018

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

Немного статистики:

  • средний CTR баннера 0,06%;
  • 60% кликов по баннерам — случайность;
  • 63% миллениалов используют блокировщики рекламы;
  • в месяц средний пользователь видит 1700–2000 баннеров;
  • 54% пользователей никогда не кликают на баннеры, потому что не доверяют им;
  • 85% кликов приходится на 8% пользователей;
  • 86% пользователей «научились» баннерной слепоте.

И еще чуть-чуть для оптимизма. У вас больше шансов на то, чтобы:

  • собрать фул-хаус в покере;
  • выиграть в лотерее;
  • стать родителем близнецов;
  • окончить Гарвард;
  • посмотреть American Idol;
  • взойти на Эверест;
  • выжить в авиакатастрофе,

… чем кликнуть на баннер.

Почему возникает баннерная слепота?

Баннерная слепота — естественная реакция психики в условиях переизбытка информации. Сегодня говорят уже и о контентной слепоте, но это — отдельная тема, которая нас, в Giraff.io, кстати, очень беспокоит.

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

Наш мозг быстро научился игнорировать баннеры на бессознательном уровне. Ситуация усугубляется тем, что очень часто рекламные объявления располагаются в «слепых» зонах страницы.

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

F-паттерн (горячие зоны отмечены красным и оранжевым)

… и так:

Z-паттерн

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

Что делать?

Учитывая баннерную слепоту, вопрос «что делать, чтобы пользователь кликнул на баннер?» становится вторичным. Для начала надо сделать так, чтобы объявление в принципе увидели.

Расположение и цвет — основные инструменты воздействия на пользователя в первые доли секунды, после того как баннер попадает в поле его зрения. Формулируем задачу: сделать так, чтобы пользователь сначала заметил (выделил объект из фона), а потом посмотрел на баннер.

Найти верное место — значит выйти из слепого пятна

В этой статье мы сосредоточимся на воздействии цвета баннера на зрителя, но вначале — пара слов о расположении баннера на странице.

Область первого экрана — самая выигрышная для привлечения внимания. Поэтому на сайте самые дорогие места для размещения рекламы — в хедере страницы. Это не единственный вариант: баннер в неожиданном месте также увеличивает кликабельность.

Выигрышным может оказаться место в середине материала, а также в самом конце, в том числе в правом нижнем углу (см. Z-паттерн).

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

Не стоит забывать и о Законе Хика: чем больше вариантов, тем дольше пользователь будет выбирать или откажется от выбора совсем. Поэтому более высоким будет CTR у баннеров, размещенных на страницах с меньшим количеством рекламных мест.

Цвет: стимулируем нужную реакцию

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

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

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

Примечание: речь идет о восприятии цвета в европейской культуре.

Красный

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

Итак, ощущения, которые вызывает красный цвет:

  • скорость, срочность (распродажа, ограниченное предложение, фастфуд и т.д.);
  • движение, динамика, риск (цвет Ferrari);
  • страсть и любовь (обручальные кольца, «взрослая» тематика);
  • сенсации (заголовки жёлтых СМИ);
  • высокая температура (красная кружка Nescafe, обезболивающие и жаропонижающие лекарства).

Риски:

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

Оранжевый

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

  • сладкий, солнечный, активный, легкомысленный (сладости, напитки, турагентства);
  • жизнерадостный, здоровый (детские витамины и медикаменты в целом);
  • низкая цена (магазины дешёвых товаров, сетевые магазины шаговой доступности);
  • тёмные оттенки оранжевого — тепло, уют, терпкий и пряный вкус (осенние предложения, домашние вещи и т.д.)

Риски:

Слишком много чистого оранжевого может вызывать ощущение вульгарности и избыточной активности; некоторые оттенки (например, охра) воспринимаются гораздо мягче. Оранжевый цвет не подойдёт для рекламы премиальных товаров и для «серьёзных» тематик.

Жёлтый

Энергичный и жизнерадостный цвет, активный и бросающийся в глаза. Не кажется таким легкомысленным, как оранжевый. Кроме того, жёлтый цвет:

  • «наделяет» предмет интеллектом (хайтек-тематика);
  • ассоциируется с креативом (рекламные агентства, развивающие школы и т.д.);
  • связан с натуральными продуктами, богатыми углеводами (крупы, мука, орехи, мёд и т.д.)

Риски:

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

Зелёный

Классический «природный» цвет; активно используется в рекламе, делающей упор на натуральность продукта. Кроме экологичности, зелёный вызывает такие ассоциации:

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

*Разные оттенки зелёного апеллируют к разным целевым аудиториям: светлый и яркий — для малышей; насыщенный травяной — для активно «растущих» молодых предпринимателей; глубокий зелёный — для уверенных и стабильно развивающихся компаний (один из популярных оттенков в банковской и страховой сферах).

Риски:

Зелёный — безопасный цвет, поэтому не слишком цепляет глаз (в противоположность красному). Зелёный не подойдет для рекламы сладостей, т.к. ассоциируется с кислым или горьким.

Голубой

Модный (его любят по всему миру) и лёгкий цвет; очень популярен в иконках приложений. Для чего его можно использовать в баннерах?

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

Риски:

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

Синий

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

Давайте посмотрим, на какие характеристики этого цвета всё же стоит обратить внимание, чтобы грамотно использовать его в акцентах:

  • надежность и авторитетность синего может неожиданно хорошо сработать в детской тематике: родители ищут для малышей все самое качественное и безопасное. Баннер магазина детской одежды в синих тонах может показаться более привлекательным, чем несерьезный/дешевый оранжево-зелёный;
  • синий воспринимается скорее как B2B цвет и эта ассоциация дает простор для творчества в B2C-сегменте: например, мелкооптовый магазин с синим логотипом («без торговой наценки»);
  • синий не кричит, но спокойно, уверенно и весомо заявляет о себе;
  • ключевые ассоциации с синим: авторитет, мудрость, строгость, интеллект, профессионализм и т. д.

Риски:

В бизнес-тематике синего слишком много; тёмный насыщенный синий может создавать гнетущее ощущение или ассоциироваться с официальными службами (полиция, ССП и т.д.).

Фиолетовый

Фиолетовый традиционно считается цветом мистики и часто используется в рекламе оккультных практик. Кроме того, фиолетовый:

  • дорогой (лакшери-сегмент);
  • чувственно-страстный (взрослая тематика);
  • гедонистический (шоколад);
  • медленный и весомый.

Риски:

Довольно спорный цвет, людьми воспринимается очень по-разному (ассоциации варьируются от «романтики» до «смерти»).

Ещё несколько цветов

В дополнение к цветам радуги, кратко пройдемся по характеристикам еще четырёх цветов: серого, коричневого, белого и черного.

Серый:

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

Коричневый:

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

Белый:

чистый, светлый, стерильный. Баннеры с белым фоном отлично выделяются на сайтах с ярким дизайном.

Чёрный:

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

Цветовые сочетания: контраст

Баннер должен либо сочетаться либо контрастировать с дизайном сайта, на котором он размещается. Активно экспериментируйте с этими двумя стратегиями.

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

Вот несколько контрастных цветовых сочетаний (по степени восприятия от лучшего к худшему):

  • синий на белом;
  • чёрный на жёлтом;
  • зелёный на белом;
  • чёрный на белом;
  • зелёный на красном;
  • красный на жёлтом;
  • красный на белом;
  • оранжевый на чёрном;
  • чёрный на пурпурном;
  • оранжевый на белом;
  • красный на зелёном.

Бонус. Неожиданные характеристики цвета: от расстояния и влажности до стихий и «космического влияния»

Мы нашли несколько интересных таблиц с данными о восприятии людьми таких характеристик цвета, как температура, влажность, расстояние, звук, ассоциации и т.д. Будем рады, если они окажутся полезны в ваших экспериментах:

Источник: Цветовые ассоциации и основные качества цвета
Источник: Воздействие цвета и психология цветовосприятия
Источник: Воздействие цвета на человека

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

В поддержку — и нам, и вам — слова регионального директора Outbrain Франсуа-Ксавьера Прео (François-Xavier Préaut): «Возможно, я выражу непопулярное мнение, но я вполне оптимистично смотрю на будущее баннеров, при условии их высокого качества, релевантного контента и хорошей интеграции в дизайн сайта. Я также уверен, что рекламодатели продолжат размещать баннеры для привлечения внимания, а контент-маркетинг будет использоваться для создания более плотных связей с целевой аудиторией».

--

--