Дизайн CTA — одна маленькая деталь, которая имеет большое значение

Вы размышляете над отличной идеей. У вас есть идеальный дизайн для него. И вашей рекламе удается привлечь внимание нужных клиентов. Но они видят это и прокручивают, не нажимая на рекламу. Хотели бы вы этого? Очевидно нет! Но что заставило вашего клиента проигнорировать рекламу? Это была цветовая палитра или копия? Вы можете придумать так много причин. Но вы внимательно изучили дизайн CTA? Возможно нет. Возможно, это последнее, что вы исследуете, но в идеале оно должно быть первым!

Да, вы не хотите, чтобы идеальное объявление было потрачено впустую только из-за плохо разработанного или слабого CTA. На самом деле, вы даже не можете назвать это «идеальной рекламой», если CTA не выполняет поставленную задачу.

Но что в CTA правильно? Простое «нажмите здесь» или «узнать больше» — это все, что вы видите в большинстве случаев. Мы слышим вас. Но, хотите верьте, хотите нет, все, от положения этой кнопки CTA до выбранных вами цветов, используемого вами текста и стиля шрифта в нем, может прямо или косвенно влиять на его воздействие на зрителя. Любопытно много? Готовься тогда. Сегодня мы поговорим о дизайне CTA.

Дизайн CTA — так почему это важно?

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

1. CTA делает цель вашей рекламы ясной

Чтобы определить CTA, вам нужно знать, какова цель вашего объявления. Например, для всех ваших кампаний на различных платформах вы не ожидаете, что клиенты будут посещать главную страницу вашего веб-сайта. Для некоторых из этих объявлений вы хотите, чтобы клиенты загружали ваше приложение. Некоторым следует привести их на страницу захвата лидов, чтобы вы могли собрать их контактные данные для будущих усилий по взращиванию лидов. А другим, возможно, придется направлять клиентов на страницу продажи или страницу продукта, чтобы помочь им добавить товар в корзину и совершить покупку как можно быстрее.

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

2. Помогите клиентам принять решение

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

3. Помогите улучшить конверсию

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

Давайте возьмем пример, чтобы понять это лучше. Слайдер ниже появляется на веб-сайте Apple.

Хорошо, а как насчет Black & Blues Луи Армстронга? Почему клиенты видят это на веб-сайте Apple? Возможно, логотип Apple TV внизу говорит о том, что этот документальный фильм доступен на Apple TV. Но что с того? Если бы не CTA «Stream Now», большинство приведенных выше ответов остались бы без ответа. Сбитые с толку клиенты могли просто пролистать его. Но благодаря кнопке CTA посетители знают, что нажав на нее, они без проблем перейдут на страницу потоковой передачи на Apple TV. Это мотивирует их щелкнуть ползунок. Там просто произошла конверсия!

Это пример того, как самый простой способ добиться конверсии — добавить четкий и понятный CTA.

Установив тот факт, что CTA важны в дизайне, давайте теперь поговорим о некоторых советах по дизайну CTA.

Дизайн CTA: советы, как сделать его кликабельным

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

1. Небольшая корректировка вашей копии имеет большое значение

Вы должны знать, что 90% пользователей, которые читают заголовок в объявлении или на веб-странице, также читают призыв к действию. Так что да, копия имеет значение.

В приведенном ниже CTA было бы достаточно простого CTA «Скачать». Но добавление слова «бесплатно» убеждает клиентов в том, что в данный момент они ничего не платят, но при этом могут скачивать контент.

По оценкам, персонализированные CTA работают на 202% лучше, чем простые CTA. Итак, потратьте достаточно времени на копию. Определите лучшие слова, которые звучат наиболее убедительно и наиболее соответствуют контексту.

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

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

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

Сочетание правильных шрифтов без использования слишком большого количества шрифтов кажется непосильной задачей? Пусть об этом позаботятся профессиональные дизайнеры .

2. Сделайте CTA похожим на кнопку

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

Такая простая вещь, как превращение CTA в кнопку, может значительно повысить количество кликов на 45%. Конечно, в зависимости от визуального стиля остального дизайна и визуальной идентичности вашего бренда вы всегда можете использовать плоскую кнопку или скевоморфную (трехмерную) кнопку по мере необходимости. Но до тех пор, пока это легко воспринимается как кнопка, у посетителей больше шансов нажать на нее.

3. Выберите правильный цвет для CTA

Знаете ли вы, что простое изменение цвета вашего CTA может кардинально изменить внешний вид и эффективность CTA? Фактически, SAP заметила, что оранжевая кнопка CTA увеличила их конверсию на 32,5%.

Конечно, некоторые другие цвета могут лучше подойти для вашего бренда. Это можно выяснить, проведя A/B-тестирование. Один из способов сделать это — создать две разные версии одного и того же дизайна, сохранив все, кроме CTA. Используйте разные цвета CTA-дизайна в обоих этих дизайнах и посмотрите, какой из них лучше конвертируется. Если вы тестируете идею на веб-странице, вы также можете использовать тепловые карты и другие инструменты отслеживания, чтобы понять поведение посетителей и внести дополнительные изменения в свой дизайн.

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

В приведенном выше примере красный CTA выделяется на темном фоне. Таким образом, нет риска, что пользователи не заметят призыв к действию.

Совет Кимпа: Цвета и цветовые контрасты работают хитрым образом. Иногда цвета с максимальным контрастом могут вызвать сильное зрительное напряжение, когда они расположены вместе. Чтобы узнать больше о цветовых схемах и о том, как выбирать контрастные цвета, ознакомьтесь с нашим блогом о цветовом круге и цветовых схемах.

4. Будьте осторожны с непрозрачностью дизайна CTA

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

Хотите создать такие броские баннеры для своих цифровых кампаний? Свяжитесь с командой Kimp сегодня.

5. Используйте негативное пространство в своих интересах

Добавление пустого пространства вокруг CTA может увеличить конверсию примерно на 230%. Это потому, что эффективное использование негативного пространства убирает весь беспорядок вокруг CTA и направляет на него внимание.

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

6. Не добавляйте слишком много CTA

В идеале вы должны четко определить единое направление вашего маркетингового дизайна. Нацеливание и предоставление вариантов происходят на ранней стадии. У вас должны быть четко определенные категории потенциальных клиентов, и ваши объявления должны быть точно нацелены. Когда ваши объявления разделены, определение CTA становится проще. Мы приведем вам несколько примеров.

• Если вы ориентируетесь на потенциальных потенциальных клиентов, у вас может быть контент, который представляет ваш бренд или убеждает их посетить ваш веб-сайт. В таких случаях CTA, скорее всего, направит их на веб-сайт или вашу страницу в социальной сети, чтобы собрать больше информации.
• Лиды, которых вы нашли на своем веб-сайте или странице в социальных сетях, показали первый уровень интереса. Далее следует убедить их в правильных стратегиях. Здесь вы можете использовать лид-магниты с кнопкой загрузки или страницу захвата лидов с кнопкой подписки.
• Для существующих клиентов, когда вы отправляете соответствующие предложения по товарам из их списка желаний или товаров, которые они просматривали, ваш CTA перенаправит их на страницу продукта.
• И если это сообщение об отказе от корзины с адресом электронной почты, CTA переводит клиентов в корзину, чтобы продолжить размещение заказа.

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

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

7. Но когда есть несколько направлений, сохраняйте последовательность

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

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

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

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

• Форма и цвет кнопки CTA
• Шрифты, используемые в CTA-копии
• Выравнивание копии CTA внутри кнопки
• Ориентация кнопок CTA

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

Создавайте кликабельные CTA-дизайны с Kimp

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