Баннер

Это статья о дизайн-паттерне. Группа: привлечение внимания

Скачать исходник

 

Баннер — один из популярнейших дизайн-паттернов для привлечения внимания. Широко используется в интернет-рекламе. Поскольку очень просто сделать баннер плохо, пользователи ненавидят баннеры и блокируют специальными сервиcами вроде AdBlock. Ситуация с баннерами в интернете катастрофична настолько, что даже браузеры вроде Сафари стали их блокировать.

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

 

Пример неплохого баннера

 

Задача

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

Решение

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

Проблема баннеров в том, что дизайнеры пытаются относиться к ним как к картинам и стремятся впихнуть в них как можно больше дизайна, смысла и элементов для привлечения внимания. Я считаю баннеры совершенно техническим жанром, в котором не стоит стремиться изобретать велосипед и проявлять буйство креатива. Чем баннер меньше бесит пользователя, тем велика вероятность, что он нажмёт на него осознанно, а не по ошибке. Лучше сделать баннер со стандартными элементами, он точно будет работать. Экспериментировать с форматом можно, только если есть ресурсы на исследования.

В любой момент времени баннер должен отвечать на два вопроса: что рекламируют и что делать. Есть также дополнительный вопрос: кто рекламирует.

Вопрос 1: «Что рекламируют?»

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

 

Вопрос 2: «Что делать?»

Поскольку баннер часто бывает входной точкой в сценарий, он должен подсказывать, какое действие мы ждём от пользователя. Ему не нужно гадать, что произойдёт дальше. На баннере должна быть явная контрастная кнопка действия (call to action), либо телефон для связи. В случае с кнопкой пользователь нажмёт на баннер, если принял решение совершить действие, написанное на кнопке. Желательно, чтобы оно было в глагольной форме.

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

Примеры хороших призывов

На баннере про музыкальный концерт: «Заказать билет». Ведёт на форму покупки билета именно на этот концерт.

На баннере про сервис доставки еды: «Получить скидку». Ведёт на страницу с промо-кодом или инструкциями об этом.

На баннере про книгу: «Скачать бесплатно». Ведёт на страницу, на которой можно получить файл книги.

Вопрос 3: «Кто рекламирует?»

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

Если баннер при этом выглядит инородно и пользователь не может определить рекламодателя, он может сделать вывод, что автор сообщения — непонятно кто, его доверие снизится.

Характерно

Использовать графику

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

Очень красивый баннер сервиса Couchbase. Увы, без явного CTA.

Использовать баннер в связке с лендингом

Баннер привлекает и генерирует поток трафика, лендинг принимает трафик, рассказывает о продукте и продаёт.

Использовать контраст

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

Противоположная ситуация — когда граница между баннером и сайтом стёрта:

 

На сайте Vimeo под видео расположено баннерное место. Баннер Envato состоит из горизонтальных элементов, слишком похожих на нативный контент страницы.

 

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

Ошибки

Кричать

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

 

Выдуманный пример, который я сделал максимально кричащим без использования шок-контента. Скриншот без баннера снят на сайте Яндекс.Афиша

 

Крик создают:

  • Мигающая анимация
  • Стрелочки на кнопку призыва
  • Слишком большие шрифты без отступов
  • КАПСЛОК
  • восклицательные знаки!!!
  • острые углы в оформлении и шрифтах
  • чистые оттенки максимальной насыщенности, особенно, красный

Использовать шок-контент

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

Использовать кликбейт

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

Показывать баннер тому, кому он бесполезен

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

Не выделить ключевого действия

Неочевидно, что будет, если нажать на этот баннер:

 

Больше всего на CTA здесь похоже слово «Акция», однако оно само по себе ни к чему не призывает.

 

Пример 2. Ещё один баннер без призыва:

 

Чтобы понять, что рекламируют, нужно читать мелкий текст. Явно просится кнопка «Купить билет».

 

Не учитывать адаптивность

Баннеры обычно делают в размере, который нормально смотрится на ноутбуках и не учитывают, что такие баннеры не могут смотреться хорошо на мобильных. Решение — делать четыре версии баннера под разную ширину страницы: 320, 758, 1280 и 1920. Либо не показывать десктопные баннеры на мобильных. Если на это есть ресурсы и технологические возможности, для сайтов желательно полноценно верстать баннеры в HTML и CSS.

Фигачить слишком много баннеров

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

Из-за нарушенной иерархии контента главная страница «Комсомольской правды» вызывает ощущение шума и хаоса:

 

4 баннера смешаны в кашу. Скриншот снят на сайте kp.ru

 

Раздувать баннер контентом

Баннер должен читаться за минимум времени. Не стоит размещать больше трёх коротких строк текста. В заголовке — не больше двух. Две кнопки и три логотипа — гарантированный провал.

Допускать потерю контекста

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

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

Уводить вникуда

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

Техническая реализация

Баннеры делают в основном в форматах PNG, JPG и GIF. Реже встречаются HTML-баннеры, которые более технологичны, поскольку в отличие от статичных изображений могут быть интерактивными и адаптивными. Раньше пользовались популярностью флеш-баннеры, но Флеш умер как интернет-технология и его не жалко.

В чём создавать баннеры

Статичные баннеры удобно делать в Скетче. Для GIF подойдёт Фотошоп. Анимировать GIF на базе заготовок из Скетча удобно в ScreenFlow. HTML-баннеры делают в Hype 3, но я им не пользовался и предпочитаю верстать руками.