Практически в каждой статье, касающейся дизайна сайта или проектирования прототипов , я подчеркиваю важность и необходимость такого элемента как «Call to Action» . И часто меня спрашивают — «почему ты считаешь, что этот элемент имеет первостепенное значение?»

Основная цель элементов «Call to Action» — привлечь внимание посетителя, заставить его глаз «выцепить» из мешанины текста, картинок и прочих графических «наслоений» самый важный и самый главный элемент — ту самую заветную кнопку или ссылку, которые призваны решить ту проблему посетителя, ради которой он вообще находится на сайте — купить товар/услугу, подписаться на рассылку/RSS и т.д. То есть, выполнить то самое действие , ради которого так долго трудились дизайнер и программист и которого является розовой мечтой любого владельца бизнеса — продажа .

Именно поэтому, любой элемент «Call to Action» должен быть максимально заметным и привлекательным — при его создании необходимо удалить максимум внимания размеру, положению, свободному пространству вокруг элемента.

Сегодня мы на практике разберем 11 примеров продуманных и проработанных элементов «Call to Action» . Каждый пример я буду комментировать и пояснять — какие именно приемы используются и почему.

В данном случае пользователю предлагают два варианта , с которых можно начать знакомиться с ассортиментом. Первый вариант — посмотреть непосредственно миниатюры и выбрать нужную тему (View the Themes) , второй - ознакомиться с теми преимуществами тем , которые предоставляют (View the Features) .

Оба варианта выполнены одним шрифтом, в одном стиле и визуально представляют собой некий указатель — идти «налево» или «направо». Разница же представлена с помощью цветовой схемы для каждой «лопасти» указателя.

У Mozilla нет вариантов выбора , поэтому большая зеленая кнопка «Скачать Firefox» расположена на самом видном месте. При этом, обратите внимание, что помимо надписи «Скачать» , на кнопке присутствуют:

• логотип;
• указание на бесплатность продукта;
• порядковая версия продукта;
• языковая версия продукта.

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

Поступили похожим образом , разместив кнопку для скачивания практически в шапке сайта. Однако есть одно существенное, на мой взгляд, отличие — если у Mozilla под кнопкой расположена ссылка на другие языки и платформы для которых может быть скачан Firefox и не слишком нужный Privacy Policy, то Wijimo разместили ссылку не только на все варианты пакета, но и на все предыдущие версии .

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

Не ограничились одной кнопкой, а скомпоновали свой Call to Action в целую графическую группу . Вот что видит посетитель , когда открывает сайт, последовательно:

1. это сайт о сайтах;
2. здесь собирается пользовательский опыт;
3. я могу рассказать о своем проекте.

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

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

1. Где я? | Это сайт Tweetie.
2. Что такое Tweetie? | Это Twitter-клиент для Mac.
3. Хочу попробовать! Какие есть варианты программы? | Вариант А — купить за $19.95 и вариант В — бесплатно, но с рекламой.
4. Я выбираю вариант В! | Скачайте.

У основной упор сделан не столько на действие, сколько на объяснение клиенту простоты действия :

1. Попробуй!
2. Это абсолютно бесплатно!
3. Займет максимум 30 секунд!
4. Но если ты все же не хочешь — тогда читай подробную информацию.

Meme ориентируется на новых пользователей. Лейтмотив их Call to Action звучит так: «для нас самое главное — новые пользователи . Но и про существующих мы не забыли — они точно увидят эту большую цветную кнопку на черном фоне, а значит и текст под ней».

А вот вариант Capo на мой взгляд не слишком удачен , хотя и подразумевает определенную уловку — нам предлагают выбор: «или скачай или купи» . Но в подсознании интернет-пользователя возникает противоречие :

1. если я могу это свободно скачать, то зачем мне покупать?
2. значит мне предлагают либо урезанную версию, либо trial.
3. но я ведь не знаю ограничений, а тратить время на закачку и проверку мне не хочется .

Кстати, обратим внимание — при клике на «Buy» разворачивается дополнительная строка , которая гласит: "система продажи встроена прямо в Capo, поэтому сначала скачайте программу, а потом, когда будете готовы купить, выберите в меню пункт «Заказать» .

На мой взгляд, такая система слишком сложна и добавлять отдельную кнопку «Купить» не имело логического смысла — проще было визуально обыграть «Try and Buy» с указанием цены продукта.

Кстати, это вообще какая-то «родовая болезнь» сайтов для iPhone-приложений — практически каждый из них страдает именно такой компоновкой продающих элементов.

Решил вообще не морочить пользователю голову и с помощью простых стрелочек и иконок построил цепочку, вложив в нее весь максимум информации :

«Basecamp -> это календарь + задачи + общение и документы -> Выбери тарифный план. 30 дней бесплатного тестирования. Регистрация за 60 секунд. Если не хочешь прямо сейчас — посмотри обучение».

Обратите внимание на то, что пользователя изначально приучают к системе «стрелок» , выделяя серым цветом функционал сервиса, а вот указание на Call to Action отдельно выделено жирным черным .

И хотя мне не очень понравилась, но текст на кнопках блока Call to Action выбран абсолютно верно — любой пользователь, прежде чем потратить даже 3 секунды на заполнение хотя бы одного поля, должен получить четкий ответ на вопрос — зачем мне это нужно ?

Именно этот принцип и используется у MailChimp — «Зарегистрируйся бесплатно» -> «Не знаешь зачем?» -> «Нажми и мы расскажем!».

А вот явно поддался желанию разместить основное преимущество сервиса в центре страницы , но поскольку здравая логика подсказывает — два Call to Action на одной странице ужиться не могут , решил совместить «приятное с полезным» — и «фишку» разместить и с Call to Action совместить .

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

Ваше мнение?

«Цепляют» ли эти Call to Action? Сразу ли они заметны на странице или их необходимо искать? Какой вариант, на ваш взгляд, наиболее эффективен?

7 сентября 2012 в 12:56

Как писать call-to-action, которые повысят конверсию (с примерами)

• Чулан

Что нужно понимать про CTA

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

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

Незначительно изменение на странице = Значительное влияние на процент конверсии

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

Вот пример из исследования кейса, где изменение одного слова в CTA на B2B (wiki) сайте привело к 38.26% повышению конверсии.

У заказчика был портал, через который бизнесмены находили офисы под аренду. Сайт предоставлял тысячи офисов, которые потенциальные покупатели могли посмотреть. Когда клиенты находили подходящий офис, они должны были нажать на главный CTA (находившийся на всех страницах) чтобы получить на e-mail больше информации об арендном предложении.

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

It’s all about value and relevance

В примере выше мы видели, как одно слово имело сильное воздействие на конверсию. Вопрос - «Почему вдруг такое маленькое изменение создаёт такое влияние?»

Ответ в посыле кнопки. «Закажите» («Order») подчёркивает что вам нужно сделать - а не то, что вы собираетесь получить. При этом «Получить» («Get») подчёркивает что вы собираетесь получить, нежели то, что вам нужно сделать для этого. Другими словами трактовка текста отражает смысл.

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

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

Здесь заказчик - популярный сайт эссе. Их лендинг пейджи (wiki) включают анонс эссе, и их цель - добиться от потенциальных клиентов перехода на страницу подписки.

Несмотря на тот факт, что «Получить мгновенный доступ сейчас» («Get Instant Access Now») передаёт смысл (можно было бы сказать «Купить доступ»), оно не сравнимо с «Читать полное эссе сейчас» («Read Full Essay Now»).
Этот CTA размещён на 120.000+ лендинг пейджах, поэтому правильное его использование имеет важнейшее значение для общей конверсии сайта.

Выше еще один пример, который показывает, как добавление уместности в CTA имеет впечатляющий эффект на конверсию - в этом случае, повышение на 68%.

Заказчик пожелал остаться анонимным, но я могу сказать, что это крупная сеть спортзалов в Скандинавии. Пример взят из PPC (wiki) лендинг пейджа, где цель - добиться от потенциального клиента кликов по процессу оформления заказа, в котором они смогут выбратьспортзал и подписаться на членство в нём.

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

Я сделал небольшое исследование и обнаружил, что местонахождение это очень важный фактор, влияющий на решение о вступлении в состав чего-нибудь. Поэтому, в этом случае, можно сделать CTA более уместным в конкретном сценарии конверсии и повысить конверсию добавлением «Найди спортзал» («Find gym») (Первый шаг в процессе оформления включает полный список местонахождений спортзалов).

Выводы из анализов: 4 года исследований вылились в один простой оптимизационный принцип

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

Все исследования, которые я сделал, можно сжать в один простой оптимизационный принцип:
Смысл + Уместность = Больше Конверсии

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

Что вам делать сейчас?

Просмотрите свои сайты и ищите CTA, которые содержат типичный текст «Скачать» и «Отправить» или что-нибудь негативное, как «Купить сейчас», которые подразумевают, что вам нужно делать вместо того, что вы хотели бы получить.

Когда вы найдете CTA, который вы хотите оптимизировать, задайте себе два вопроса:
- Какая мотивация у клиента нажать эту кнопку?
- Что клиент получит, если нажмёт её?

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

Возьмём пример с членством в спорклуб:
- Мотивация клиента - стать членом-участником местного спортзала.
- Когда он нажмёт на кнопку, он получит возможность найти спортзал и вступить в его состав.

Текст кнопки: «Найди зал и получи членство»

Немного вдохновления для следующих CTA

Здесь несколько примеров типичных CTA, которых нужно избегать и немного идей альтернативного текста:

Время начать оптимизировать!

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

Элементы Call-to-Action (CTA, призывы к действию) стали важной частью веба. Они находятся повсюду, чтобы рассказать нам что конкретно делать: купите книгу, скачайте бесплатное руководство, свяжитесь с нами для более подробной информации и т. д. Иногда это выглядит как дешевый маркетинг, написанный и спроектированный людьми оторванными от реальности. Такие примеры чаще всего имеют обратный эффект. Но что делает элемент CTA хорошим, эффективным? Мы собрали 10 примеров призывов к действию с классным дизайном, правильным текстом или просто разработанные с умом.

На первом месте в нашем списке , которые справились с работой по созданию классного CTA хорошо как никто другой. У них на сайте ни один хороший элемент призыва к действию, но лидером стало диалоговое окно “Prepare for Launch” (подготовьтесь к запуску). Которое подписывает вас на e-mail-кампанию.

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

Превратили в CTA большую часть своей домашней странички. Заголовок и описание четко и емко описывают род деятельности компании, и просто просят оставить свой e-mail, чтобы начать. Визуальная часть интересна, и контент бьет прямо в точку.

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

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

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

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

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

Ответвление Bang and Olufsen, сайт продолжает минималистичный дизайн и стиль брендинга родительского сайта. Элементы Call-to-Action — отличный тому пример. Сайт богат красивым промышленным дизайном, а призывы к действию предлагают посмотреть всю коллекцию этих замечательных наушников, или приобрести эту пару.

Возможно у вас возникнет мысль: «Это выглядит неплохо, но что в этом особенного?». Главная идея, которую мы хотим подчеркнуть в этом примере следующая: CTA — важная часть вашего дизайна и бренда в целом, и они должны отражать то что вы делаете и то как вы это делаете.

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

Дизайн помогает увидеть людей в беде и побуждает к действиям.

Nest

Мастера домашней автоматизации Nest отметили День Земли, призвав к экономии энергии. Это послание было изображено при помощи энергосберегающего термостата.

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

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

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

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

CTA для кликов

Хорошие элементы CTA должны учитывать специфику аудитории и интересы пользователя. Цвета и изображения должны отражать ваш бренд и нести смысл. Анимация работает здесь отлично, только если она уместна. Текст должен быть емким, коротким и строго по делу.

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

Перевод — Дежурка

Сегодня мы поговорим о кнопках «Call to action» далее CTA. Элементы CTA, как понятно из названия, призывают пользователя совершить какое-либо действие на сайте. Однако дизайнеры часто относятся к ним с пренебрежением. В то время как понимание принципов в данном вопросе повысит эффективность готового продукта. Из этого материала вы узнаете как правильно создать кнопку CTA.

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

Цель кнопок «Call To Action»

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

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

Типы кнопок «Call To Action»

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

1. Добавить в корзину

Интернет-магазины, как правило, используют целый ряд кнопок CTA, но самые популярные из них — кнопки «Добавить в корзину». Эти кнопки обычно размещаются на страницах с продуктом, и призывают пользователя приобрести тот или иной товар. Обычно их оформляют коротким текстом с призывом «Купить» или «Добавить в корзину» и иконкой банковской карточки или корзины.

2. Скачать

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

3. Пробная версия

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

4. Узнать больше

Кнопки «Узнать больше» часто располагают в конце тизерного блока информации. Обычно это простые кнопки, однако достаточно большого размера, чтобы привлечь внимание пользователя.

5. Регистрация

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

Существуют и СТА-кнопки других типов, но большинство из них схожи с вышеперечисленными. А принципы, которые применимы к описанным выше кнопкам скорее всего подойдут и к большинству остальных.

Работа с негативным пространством

Вы наверняка хотите, чтобы кнопки СТА на вашем сайте выделялись на фоне остального контента и привлекали внимание пользователя. Для этого используйте негативное пространство вокруг кнопок. Создайте воздух между контентом и СТА-кнопками. В некоторых случаях (как с кнопками «Добавить в корзину») этим правилом можно пренебречь, но чаще всего оно добавит эффективности вашему дизайну.

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

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

Размер и цвет

Размер кнопки СТА очень важен. Очень большая кнопка затмит остальное содержание, слишком маленькая затеряется среди окружающего контента. Нам же нужно, чтобы наша кнопка выделялась на фоне других элементов, но при этом не подавляла их визуально.

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

• Кнопки СТА в идеале должны быть самыми крупными кнопками на странице.
• Используйте контрастные цвета, чтобы выделить маленькую кнопку.
• Используйте цвета меньше контрастирующие с основным цветом, чтобы визуально притушить большую кнопку.
• Кнопки СТА должны привлекать внимание, но не перегружать дизайн.

Текст

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

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

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

• Используйте просто, понятный язык.
• Используйте большой, заметный шрифт.
• Убедитесь что текст действительно призывает к действию.

Создайте срочность

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

Наша задача произвести на пользователя впечатление, что нужно действовать прямо сейчас. Вам нужно побудить их действовать незамедлительно, экспромтом. И пусть не все СТА-кнопки будут работать так (особенно если речь идет о покупке дорогостоящего товара), дешевые или бесплатные действия должны в идеале производится пользователем без раздумий.

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

Дополнительная информация

В случае необходимости, дайте пользователю дополнительную информацию о том, что он получит, нажав на СТА-кнопку. Чаще всего это относится к кнопкам «Пробная версия» или «Скачать». Обычно в этих случаях размещается информация о том, как долго действует пробная версия, сколько весит файл, который вы собираетесь скачать или какая версия программы будет вами скачана.

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

• Добавляйте на кнопки только ту информацию, которая будет пользователю однозначно полезна.
• Дополнительная информация уместна лишь на некоторых типах СТА-кнопок (например, «Пробная версия» и «Скачать»).
• Убедитесь что сам призыв к действию до сих пор является самым заметным текстом на вашей кнопке.

Приоритет

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

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

Иконки и изображения

Оформление кнопок СТА иконками также может сыграть на увеличение конверсии. Примером могут служить иконка корзины на кнопке «Купить» или стрелка на кнопке «Скачать». Вы также можете использовать и уникальные иконки и изображения, но убедитесь что они в точности передают предназначение кнопки и не вводят в заблуждение пользователя.

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

Примеры

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

Logbook
Использование разных цветов для кнопок «Скачать» и «Купить» отделяют их друг от друга и подчеркивают важность кнопки «Купить».

Вопрос кажется довольно очевидным. Но что же такое Call-to-action или CTA? Очень часто мы не смотрим глубже в него и не рассматриваем его как потерянную возможность для привлечения читателей или слушателей глубже в ваш бренд.

Что же такое Call-to-action? Обычно это часть экрана, призывающая читателя кликнуть, чтобы вовлечь его дальше в процесс покупки/бренда. Иногда это может быть изображением, иногда просто кнопкой или просто поле содержащее какую-либо информацию, которая призывает к действию. Кстати Call-to-action в переводе означает – призыв к действию. По факту не только сайты имеют call-to-action, на самом деле любой тип контента может рассматриваться как призыв к действию.

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

Так ли нужно всему иметь Call-to-action? Вы найдете не так много контента, который имеет свои Call-to-action и вообще его не очень много в сети. Не всё, что вы делаете должно пытаться продавать, некоторое из вашего контента всё-таки должно выстраивать доверие и авторитет с лидами и покупателями. Всегда продавать – может быть мантрой в многих продающих и маркетинговых компаниях, но именно акцент на продажах может отбивать охоту конвертироваться у многих пользователей. Главное правило – всегда иметь Call-to-action, когда ваша цель мотивировать посетителя пойти дальше в вовлеченности в ваш продукт.

Как создавать эффективные призывы к действию?

Существуют доказанные методы эффективного использования CTA стратегии. Вот некоторые из них.

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

Оставляйте свои Call-to-action простыми. Не важно, изображение это или предложение в вашей речи, убедитесь в том, что детали объясняются очень доступно. Чем проще и понятнее вы объясните суть пользователю, тем выше будет число тех, кто кликнет или позвонит, в общем сконвертится на вашей CTA.

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

Добавьте чувство неотложности. Время уходит? Предложение истекает? Осталось ограниченное количество мест? Всё что поможет убедить читателя выполнить действие прямо сейчас, вместо «потом», повысит ваши показатели конверсий. Добавление чувства неотложности критически важный компонент каждой CTA.

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

Планируйте путь к конверсиям. К примеру, для постов в блоге, путь часто прост. Читать -> увидеть CTA -> зарегистрироваться на landing page -> Конверсия. Ваш путь к конверсии может отличаться, но визуализация и планирование пути, который должен пройти пользователь по вашему контенту помогут вам лучше представить ситуацию и увеличить конверсии посредством Call-to-action стратегии.

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

Тестируйте свои предложения. Free trial, бесплатная доставка, 100% удовлетворенности гарантируется, скидка и т.п. Вам всегда следует пробовать несколько разных соблазнительных предложений, которые увеличат ваши конверсии. Убедитесь, что вы можете измерять всю эффективность каждого предложения, с учетом удержания покупателя и его последующих конверсий. Множество компаний предлагают невероятную скидку прямо с первых страниц, чтобы затем потерять покупателя в конце всего пути покупки. На такой подход часто рассчитывают неопытные маркетологи, полагающие, что хоть какой-то, но процент покупателей будет сконвертирован в покупки. Однако такое мнение ошибочно, площадка мало того, что потеряет покупателя на стадии конверсии. Он больше никогда не вернется на неё. Это просто убивает репутацию и траст к ресурсу.

Представляем вам наглядную инфографику о том, что делать и не делать в целях эффективности создания Call-to-action.