Это база: как создать эффективный рекламный баннер в приложении
Всем привет! Меня зовут Света Благодарева, я графический дизайнер, развиваю направление партнёрских коммуникаций в приложении «Кошелёк». За 2 года работы с креативами для рекламных кампаний от партнёров из разных сфер я набрала достаточно кейсов, из которых можно вывести, не побоюсь этого выражения, закономерности успеха.
В этой статье я поделюсь четырьмя полезными советами, к которым я пришла путём проб и ошибок, АВ-тестирования и большого количества экспериментов с контентом. Следуя этим рекомендациям, вы сможете добиться прироста конверсий рекламных баннеров в своих приложениях вплоть до 25%!
Сразу предупрежу, что некоторые рекомендации могут показаться очевидными, но вы не представляете, НАСКОЛЬКО часто повторяются эти ошибки. Эта статья — база для дизайна (и для заказчика) статичных рекламных баннеров, которые размещаются в мобильных приложениях.
Спойлер
Все иллюстрации к статье сделаны с повторением реального дизайна баннеров, но без упоминания конкретных брендов.
Совет №1: Помнить о масштабе
Баннеры для мобильных размещений рисуются в масштабе ×3, а иногда и ×4,. Сейчас одним из распространённых размеров стал баннер 1080×607 px. На полноценном мониторе в графическом редакторе этот размер смотрится довольно внушительно, баннер выглядит крупно и понятно. Сразу хочется поставить туда максимум информации, возможно даже в несколько колонок, не правда ли? Но не забывайте, что пользователь видит его на экране смартфона, а значит в совершенно другом масштабе, где перенасыщенный информацией баннер становится нечитаемым.
Первый способ проверить, всё ли хорошо с масштабом — открыть баннер на смартфоне и посмотреть, читается ли текст? Второй вариант чуть сложнее — поработать с мокапом. Нужно сделать скрин существующего рекламного размещения и поместить туда предполагаемый дизайн баннера. Такой подход будет работать с любыми баннерами: от миниатюрных всплывашек до полноценных размещений на весь экран.
А вот и конкретный пример: у компании (назовём её Supermarket) были конверсии из показа в тап хуже ожидаемых, и мы предположили, что дело в перенасыщенном мелкой информацией баннере. Переверстали его, оставили самое главное: основное предложение, брендинг и кей-вижуал, а всё остальное убрали. Как итог — конверсия из показа в тап выросла на 15,5%.
Принцип «less is more» (меньше значит больше) для мобильных размещений работает практически всегда.
Совет №2: Z-паттерн, логика чтения и окружение баннера
Мы знаем, что нужно наполнять рекламный баннер согласно масштабу размещения, не перегружать его элементами. Но как именно их располагать, по правилу третей или принципу золотого сечения? Обратимся к логике считывания информации — мы верстаем для пользователей, привыкших читать слева направо, а значит разумно строить композицию так, чтобы она тоже читалась слева направо. Ещё важно учитывать паттерны восприятия информации. Для экранных материалов с небольшим количеством текста характерен Z-паттерн. Следовательно, имеет смысл располагать элементы согласно линиям паттерна.
Помните о базовых инструментах композиции:
акцент, который будет притягивать основное внимание пользователя
контраст, чтобы информация на баннере легко считывалась
иерархия, которая помогает отделить первостепенную информацию от менее важной
отступы от края и между элементами, чтобы элементы не «прилипали» друг к другу или к границе баннера
работа не только с формой, но и контрформой, потому что свободные пространства на баннере — тоже инструмент дизайна
Вся композиция рекламного баннера обычно состоит из трёх элементов: логотип, кей-вижуал и текст. Иногда к ним добавляются кнопка и сноска (лигал). Руководствуясь Z-паттерном и логикой чтения мы рекомендуем собирать баннеры в композиции, где слева размещаются лого, текст и кнопка, а справа — кей-вижуал, при этом сноску (лигал) размещать внизу неконтрастным блоком. АВ-тесты показывают, что у баннеров с обратной (слева — кей-вижуал, справа — лого, текст и кнопка) и центральной (по центру — лого, текст, кнопка, по бокам — кей-вижуал) композицией конверсии не уступают при размещении одного баннера. Однако если пользователь сталкивается с ситуацией, когда ему показывают несколько баннеров, и все они скомпонованы по разным принципам, то конверсии группы таких баннеров будут ниже на 9,9% по сравнению с группой единообразно собранных баннеров.
Важно не только правильно компоновать элементы баннера, но и понимать, в какой среде он будет представлен, и как эта среда влияет на восприятие предложения.
Совет №3: Верность цветовой палитре бренда
Чаще всего при создании баннеров мы работаем с уже готовой палитрой бренда. Однако даже в таком случае необходимо проверять контрастность цветовых сочетаний, поскольку это напрямую влияет на читаемость контента. Про теорию цвета и грамотные цветовые сочетания отлично написано в книге И.Иттена «Искусство цвета», так что рекомендую, если нужно освежить знания в этой области. А ещё есть бесплатный инструмент Adobe Color. Там можно проверить контрастность цветов и создать свою палитру по конкретной цветовой схеме (монохромная, комплементарная и т.д.).
При выборе палитры баннера важно помнить о том, на каком фоне он будет располагаться, его стоит делать контрастным к фону. Необходимо учитывать и фактор узнаваемости бренда. Если существует определённая цветовая палитра, привычная пользователю, то рекламные материалы лучше готовить в соответствии с ней. Да, даже если это праздничные креативы, посвящённые новому году. В противном случае есть риск, что пользователь просто не узнает бренд и не обратит внимание на предложение.
Снова рассмотрим конкретный пример: компания хотела разместить тематические баннеры в розовом цвете к 8 марта, хотя обычно материалы компании были выполнены в ярко-красной палитре. Конверсия из показа в тап в новом цвете упала на 8,1%, и мы решили вернуть обычный цвет.
На потребителя влияет не только содержание, но и форма контента на баннере, в том числе и цвет. Узнаваемая цветовая палитра бренда работает на улучшение конверсий.
Совет №4: Текст как элемент дизайна
Текстовое содержание на баннере несёт основной посыл, поэтому важно, чтобы оно хорошо читалось. Стоит рассмотреть текст не с точки зрения редактора или корректора, а как элемент дизайна.
Вот базовые правила для грамотной вёрстки текста на баннере:
размер текста достаточен для прочтения
текст контрастен к фону
начертание текста читаемое, не слишком тонкое и не слишком вычурное
посыл текста лаконичный, 2–3 предложения
Нужно помнить про масштаб баннера и обязательно проверять читаемость текста. Если текст дополняется кнопкой call to action (призыв к действию), не забудьте согласовать посыл кнопки и текста на самом баннере. Иначе может сложиться ситуация, когда в тексте указано «Участвуйте в розыгрыше», а на кнопке — «Получить». В целом, кнопка call to action — довольно важный элемент. Например, один из наших АВ-тестов показал, что использование конкретного призыва «Оформить карту» вместо «Узнать подробности» повышает конверсии до 25,77%. Конечно, этот приём работает, если остальной баннер свёрстан корректно.
Любопытный факт: даже одна строчка текста может ухудшить конверсии баннера. Снова смотрим на пример. У бренда было два варианта размещения: с заголовком в 4 строки или в 3 строки. Несмотря на относительно небольшую разницу в количестве и масштабе текста, конверсия у второго баннера была выше на 3,9%. Важную роль сыграл и больший акцент на преимуществе, выраженном в числах — 70% и 30%. Пользователям не столь интересны слоганы, сколько конкретная выгода.
Работа с текстом важна не менее, чем с вижуалом. Грамотная вёрстка позволяет получить дополнительный отклик от пользователей.
Секретный пятый совет статьи
В заключение я хочу упомянуть ещё одну составляющую, которая сильно влияет на дизайн баннеров — это… барабанная дробь юридические требования. В законодательстве есть конкретные требования к размеру сносок, и несоблюдение этих требований может привести к штрафам и другим неприятностям. На юридическую корректность баннеры лучше проверять до запуска рекламной кампании, а в идеале — иметь в штате юриста.
Для тех, кто дочитал до конца, у меня, на самом деле, есть ещё целых три дополнительных рекомендации:
Читайте гайдлайны. Да, это лежит на поверхности, но об этом многие забывают. У большинства крупных рекламных площадок есть не только сухие технические требования с размерами, расширениями и разрешением файла, но и подробные советы по подготовке корректных, хорошо работающих материалов.
Знайте своих пользователей. Тот приём в дизайне, который сработает с одной аудиторией, может совершенно провалиться на другой площадке. Например, АВ-тесты показали, что при размещении в Кошельке баннер с кей-вижуалом с человеком имеет конверсии до 16,8% ниже, чем такое же размещение с кей-вижуалом из графических элементов.
Анализируйте чужие баннеры. Реклама нас окружает повсеместно, какую-то мы игнорируем, а какая-то цепляет и срабатывает. Почему она срабатывает? Ответ на вопрос как раз и кроется в анализе конкурентов.
Надеюсь, это небольшое руководство поможет вам собирать не только креативные, но и эффективные баннеры.
