Критерии хорошего баннера

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

Рекомендации Яндекса

Дизайн

1. Не маскируйте баннер под элементы пользовательского интерфейса.

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

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

Если при клике на «Играть» пользователь не запускает игру, а просто переходит на другой сайт, значит, надпись его обманывает.

3. Баннер не должен мигать и отвлекать пользователя. Допустимая частота смены элементов — 1 раз в 2 секунды.

Тексты

1. Текст должен быть контрастным и легко читаемым.

Текст внизу баннера набран слишком мелким и светлым шрифтом. Его невозможно разобрать. 

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

2. Если вы используете иностранный язык, баннер должен содержать перевод на русский. Указывайте цены в рублях. Если баннер рекламирует распродажу, то нужно указать сроки её проведения.

3. Недопустимо использование недостоверных сведений, оскорбительного материала, призывов к жестокости и насилию.

4. Не следует использовать сленг и ненормативную лексику.

Юридические тонкости

1. Поставьте возрастную метку на сообщениях с рекламой товаров и услуг, попадающих под действие закона «О защите детей от информации, причиняющей вред их здоровью и развитию».

Типы наиболее и наименее кликабельных баннеров

Минимальный CTR (4%) продемонстрировал баннер 468×90 Guruplay.

CTR-эксперимент: баннеры, CTA-кнопки, текстовые ссылки

Ключевые характеристики, объясняющие низкий уровень конверсий баннера:

  • Полное отсутствие цветных акцентов.
  • Нет призыва к действию (CTA).
  • Посыл сообщения не определён.
  • 50% баннера занимает блёклый брендинг.

Максимальный CTR (32%) продемонстрировал баннер William Hill.

CTR-эксперимент: баннеры, CTA-кнопки, текстовые ссылки

Его ключевые характеристики:

  • Налицо выделение цветом (отдельный синий сегмент, «подсветка» громких эпитетов золотом, гармоничное разграничение цвета в названии и т.д.).
  • CTA на бросающейся в глаза отдельной зелёной кнопке.
  • Всего 20% отграниченной площади баннера отведено под брендинг.
  • Сиськи (*комментарий читателя :Р)

Наиболее и наименее кликабельные типы кнопок

Тестируя кликабельность CTA-кнопок, Zazzle и Live Casino просто изменяли их цвета и смотрели на реакцию посетителей сайта. В ходе эксперимента за первенство по показателю CTR боролись кнопки зелёного, серого, чёрного, синего, красного, жёлтого и фиолетового цвета.

Наихудший результат (29%) показали CTA-кнопки красного цвета.

CTR-эксперимент: баннеры, CTA-кнопки, текстовые ссылки

Наилучший (43%) — изначально присутствовавшие на баннере зелёные кнопки.

CTR-эксперимент: баннеры, CTA-кнопки, текстовые ссылки

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

Вывод: крайне нежелательно размещать на сайте ссылки и кнопки красного цвета: они будут только настораживать и отпугивать пользователей.  

НО! правило “зеленых против красных” кнопок стоит использовать с умом, а не как обязательную инструкцию — по этому поводу много анекдотов в среде маркетологов: “не продает, потому что кнопки красного цвета”

Примеры баннеров: ошибки 

Ниже вы найдете два примера, в одном из которых — неудачный, устаревший дизайн, а в другом — более современный и эффективный макет.

1.

эффективный макет

2.

эффективный макет

Gilette хорошо сделал следующее:

  • Один четкий призыв к действию;
  • Один заголовок;
  • Название бренда;
  • ТОВАР ЛИЦОМ!!!!
  • Все элементы в одном месте баннера (центр) — что удобно для восприятия;

Еще один пример рекламного объявления с высоким CTR:

(New Relic — просто топовый баннер!!!!!)

эффективный макет

Совет 2

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

Поэтому дизайн объявлений на основе контрастных цветов так эффективен. Цвета могут создать эффект изоляции в макете рекламного баннера.

Психология цвета (и насколько она важна)

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

Разберем этот совет на примере неплохого баннера:

баннер

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

По мне так спорно, я читаю “white”, а все желтое вокруг — диссонанс. Но тут история, что это их фир стиль (белый, желтый, черный), наверняка тестировали белый фон, но он оказался недостаточно контрастным.

Про типографику

Типографика действительно имеет влияние на эмоции аудитории. Шрифт должен гармонировать с другими компонентами объявления и обладать высокой читабельностью.

Статьи про типографику:

  • Визуальная иерархия

http://habrahabr.ru/company/iloveip/blog/251689/

  • Оптика

http://habrahabr.ru/post/258571/

  • Типографика для e-mail

http://habrahabr.ru/company/pechkin/blog/259909/

  • Мобильная типографика

http://habrahabr.ru/post/188484/

  • Принципы работы с типографикой

http://www.dejurka.ru/articless/ballance-in-web-design-typography/

Про сетку

Выравнивать элементы на баннере по сетке (как минимум делать равные отступы от краев баннера). 

Подробнее тут: https://helpx.adobe.com/ru/photoshop/using/grid-guides.html 

Как сделать баннер в фотошопе (основное)

Как создать файл

Файл -> создать 

Указываем нужную ширину и высоту баннера. 

Интерфейс

Как сделать рамку

Как редактировать текст

Как нарисовать кнопку

Полезные статьи (материал взят из них)

  • CTR баннеров, ссылок и кнопок

https://www.seonews.ru/analytics/ctr-bannerov-ssylok-i-knopok/

  • Каким должен быть рекламный баннер

http://www.cossa.ru/216/12199/

  • Медийно-контекстные баннеры: новая волна

http://www.cossa.ru/152/96956/

  • Тренды в дизайне баннеров

https://spark.ru/startup/bannerboo/blog/17299/7-dizajnerskih-trendov-2016-goda-dlya-sozdaniya-veb-bannerov

  • Почему баннерная реклама неэффективна — и что с этим делать?

http://lpgenerator.ru/blog/2016/06/03/pochemu-bannernaya-reklama-neeffektivna-i-chto-s-etim-delat/

← Предыдущая статья Следующая статья →

Оставить комментарии: