15 правил создания баннера, которые можно нарушать

Смотрите в каталоге
Контекст (управление и аналитика)
15 правил создания баннера, которые можно нарушать

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

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

Цвета

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

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

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

Обязательные составляющие баннера:

  •  Логотип.

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

  •   Сообщение.

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

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

  • Призыв к действию.

Это главный элемент баннера, который побуждает пользователя кликнуть. Используйте кнопки с фразами “Купить”, “Узнать больше”, “Зарегистрироваться”.

Пример баннера Jaguar:

Наш пример:

Размеры

Загружайте в Гугл Эдсенс баннеры самых конверсионных размеров:

  • 336×280 большой прямоугольник
  • 300×250 средний прямоугольник
  • 728×90 шапка
  • 160×600 “небоскреб”.Идеальное место для показа баннера — первый экран, в окружении основного контента страницы.

Наш сервис работает с Google Adwords. У Google порядка 400 шаблонов и под каждый сайт он самостоятельно подбирает подходящий размер.

По нашей статистике средний сtr по баннерам у нас колеблется от 0,5% - 1,50% в зависимости от аудиторий на тематических площадках Google.

Дизайн

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

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

Рассмотрим в качестве примера наш баннер и расскажем, что в нём учтено. На объявлении есть логотип и основные преимущества жилого комплекса: метро, невысокая стоимость квартир, скидка. Нет кричащих цветов, каждая мысль акцентирована, на баннере изображена знакомая символика метро.

Кнопки на баннерах

Кнопки определяют кликабельность (CTR) баннера. Разместите их под основным содержимым или справа внизу в зависимости от размера баннера. Следите за их единообразием в наборе баннеров.

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

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

Границы, обводка

Убедитесь, что содержимое баннера использует все пространство.

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

Пример баннера Сбербанка:

Наш пример:

Текст

Заголовок и текст должны быть разного размера и занимать не более четырех строк. Откажитесь от курсива, капслока и шрифта мельче 10.

Изображения

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

Реклама джинс от Levis является тому примером:

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

Соответствие стилю компании

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

В качестве примера приведем наш баннер с дальнейшим переходом на целевую страницу:

Соответствие дизайну сайта

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

Ощущение срочности

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

Анимация

Анимированные баннеры могут быть эффективнее статических. Но только в том случае, если анимация не отвлекает от основного сообщения.

Используйте простую анимацию не дольше 15 секунд и не больше трех повторений. Финальный кадр — призыв к действию.

Интерактивность

Интерактивность баннеров больше не ограничена стрельбой по уточкам как в 1999 году. Теперь мы можем выйти за границы баннера.

Формат файла

Сохраните баннер в формате, который поддерживается в сети. Помните, что не все устройства поддерживают flash-баннеры. Стандартные форматы — png и jpg для статических и gif для анимированных баннеров.Выбирайте их и не ошибетесь!

Размер файла

Чем меньше, тем лучше. Google Adwords рекомендует ограничить размер баннера до 150 Кб. Баннер должен загружаться быстро, иначе посетитель страницы пропустит его.

Заключение

Подведем итоги. Понятная цель, призыв к действию, релевантность и соответствие стилю компании — главные составляющие кликабельного баннера.

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

Автор: Елена Крыкина, Директор по маркетингу Reenter

Компании и сервисы: Google AdWords, reEnter, Сбербанк России, Levi’s
Автор: Анна

Подписаться на новости

Читайте также

21 февраля / Комментарии

Дизайн, ориентированный на конверсии

Повышение конверсии — путь часто длинный и извилистый.  Он состоит из понимания возражений (негласных) и эффективной работы с ними. В конечном итоге пользователь оказывается на распутье: один путь ведет к конверсии, а другой с кнопкой «назад». Или хуже – к вашему конкуренту. В этой статье мы разберем что такое дизайн, ориентированной на конверсию. И не забудем рассмотреть несколько реальных кейсов (с неожиданными заключениями).

далее →

1 февраля / Комментарии

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

Одежда – один из самых продаваемых товаров в интернете. Ранее мы публиковали резюме отчёта об исследовании, проведённом аналитическим агентством Nielsen, «Nielsen: какие товары россияне чаще всего покупают в интернете». Согласно результатам этого исследования, одежда не просто самый популярный товар, приобретаемый в интернете. Этот вид товаров на 14% опережает «ближайшего преследователя», потребительскую электронику. Очевидно, что у многих интернет-магазинов одежды дела идут неплохо. Могут ли они идти ещё лучше? Если они внедрят в свои товарные страницы одну маленькую деталь, ответ запросто может быть положительным.

далее →

13 декабря 2016 / Комментарии

Мобильная версия интернет-магазина: предпраздничная подготовка

Мобильная версия почему-то не воспринимается как важный аспект многими владельцами интернет-магазинов. Альтернативный такому невниманию вариант – адаптивная вёрстка, которая просто логично умещает весь контент на маленькие экраны мобильных устройств. Это, конечно, уже что-то, но если уж делать, то делать хорошо, да? В таком случае, надо учесть ряд факторов.

далее →

25 октября 2016 / Комментарии

11 принципов веб-дизайна, которые повышают конверсию

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

далее →

26 сентября 2016 / Комментарии

Разбор юзабилити интернет-магазина Ulmart.ru и его преобразования за 2016 год

Изначально статья планировалась как одно целое, где я хотел рассмотреть возможные ошибки в юзабилити топа российских интернет-магазинов. Но после нескольких дней обзора, понял, что каждый сайт заслуживает отдельного разбора. Кроме того, мне захотелось не только осветить проблему, но и предложить своё видение ее решения. В связи с этим вся статья строится по схеме: Гипотеза о проблеме > Причина и Обоснование > Решение.
Поскольку статья начата еще в ноябре 2015 года, а закончена только сейчас, Ulmart успел исправить часть проблем,  обозначенных в статье. Об этом я дополнительно говорю в примечаниях . И сейчас мы можем отследить те преобразования, которые были сделаны.

далее →

X
Нажмите «Нравится»,
чтобы читать Shopolog.ru в Facebook