Мотивировать клиента к действию через ограничение предложения. Призыв к действию (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 и в зависимости от сферы бизнеса, призывы к действию будут отличаться. И, конечно же, давать разные результаты.

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

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

НАС УЖЕ БОЛЕЕ 29 000 чел.
ВКЛЮЧАЙТЕСЬ

Формулы призывов к действию

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

1. Действие
   Пример: Заказать звонок / Позвоните по телефону
2. Действие + ограничение по времени
   Пример: Скачать сейчас / Получить на следующий день.
3. Действие + выгода
   Пример: Получить подборку 5 лучших туров / Закажите бесплатный выезд специалиста.
4. Действие + выгода + дедлайн (не всегда получается использовать)
   Пример: Получить доступ на 7 дней только сегодня / Сделайте заказ ночью и получите в подарок ____.

ВИДЫ призывов - офлайн

Теперь, когда вы знаете основные формулы и можете самостоятельно создавать ваш “автомат денег”, напишу примеры для вдохновения, а именно список призывов к действию в офлайне (типовые отсутствуют):

1. Действуйте быстро;
2. Звоните и узнавайте про наличие;
3. Купите сейчас, платите потом;
4. Свяжитесь с экспертом;
5. Рассчитайте стоимость по телефону;
6. Зайдите и получите подарок;
7. Забронируйте себе место;
8. Позвоните нам;
9. Делайте, а не думайте;
10. Приступите к этому вопросу прямо сейчас;
11. Поверните налево, скорее!
12. Остановитесь и подумайте о _____;
13. Хватит хотеть. Возьми и сделай сейчас;
14. Получите полный каталог в офисе;
15. Оформите заявку на бесплатный образец до 05.12;
16. Оставьте заявку на пробное занятие по телефону _____;
17. Выбери свой подарок на сайте ____.

Все это вы также можете использовать как шаблон. Так что пользуйтесь на здоровье:-).

Виды призывов - онлайн

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

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

1. Скачать прайс лист. Отличный вариант, если у вас есть достаточно большой каталог моделей с разными ценами. Ну и, конечно же, это самая востребованная кнопка в сфере оптовых продаж.
2. Узнать подробнее. В случае, если Ваш блок раскрывает не все плюсы Вашей продукции, то разместив такую кнопку, Вы поможете рассказать посетителю больше. Это тот самый пример промежуточного призыва к действию.
3. Подписаться на _____. Можно, конечно, использовать и более оригинальные варианты из серии “Я в теме”, но смысл один - получение чего-либо полезного.
4. Получить скидку/подарок. Используется в случае, если находится в том месте, где клиент хочет что-то получить, но не знает как.
5. Заказать обратный звонок. Баян, баяном, поэтому останавливаться на этом не будем.
6. Купить/добавить в корзину. Ваш продукт люди покупают эмоционально? Или же Вы интернет магазин? То без этих вариантов Вам просто нельзя жить.
7. Попробовать 7 дней бесплатно. Можете дать демо-доступ или пробный период на свой продукт, так чего Вы ждёте, скорееееее!!!

   И само слово “попробовать/испытать” имеет очень мягкий характер, что положительно влияет на показатели.

8. Рассчитать мой проект бесплатно. Люди любят получать расчёты ещё до заключения договора, так же как и замеры. Тоже стоит однозначно пользоваться.
9. Получить предложение с полными ценами/книгу на e-mail. У нас эта кнопка на данный момент показала лучший вариант среди а/б тестов, но он не финальный, явно мы найдём ещё лучше. А те, кто не готов ждать, пробуйте.
10. Хочу работать с Вами. Можно данную кнопку назвать аналогом “Купить”, только актуальна она больше в В2В сегменте.
11. Заказать ______. Тут на пустом месте может быть сразу Ваш продукт, а может быть часть его из серии “Заказать прототип”, как мы используем это на нашем сайте по созданию лендингов.
12. Написать вопрос. Удивительно, но не все люди любят звонить. Некоторые стесняются и поэтому пишут, пишут и пишут, стирая руки в кровь, но лишь бы не звонить. Поэтому такой вариант тоже имеет место быть.
13. Забронировать место / Записаться на семинар. Актуально для мероприятий, как для онлайн, так и для офлайн.

    Причём, как видите, “Забронировать место” более лёгкий вход, чем “Записаться на семинар”. Но опять же нужно подумать, что Вам важнее - больше трафика или больше целевого трафика.

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

Где должна быть кнопка?

Наверное, в данном случае лучше пересолить, чем не досолить. Так как чем больше кнопок, тем больше вероятность, что клиент заметит и нажмёт на неё.

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

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

Призыв к действию на первом экране

Следующим правилом будет: соответствие смысла блока с текстом на кнопке. А то бывают умельцы, на блок “Как мы работаем”, ставят кнопку “Подписаться на нашу рассылку”.

Дизайн кнопки

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

Цвет кнопки

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

• общий стиль сайта;
• контраст между кнопкой и фоном.

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

И всё же изменение цвета может положительно повлиять на рост продаж, если у вас сейчас изначально подобран не лучший вариант.

Важно! Можно использовать разные цвета кнопок на сайте, чтобы акцентировать внимание, на те или иные призывы.

Размер кнопки

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

Так, компания JustClick удвоила свою конверсию, увеличив в два раза кнопку “КУПИТЬ” у себя на сайте. Так что, размер имеет значение.

Подходящий размерчик

Длина кнопки

Что касается этого параметра, то на принт-скрине ниже вы видите максимально возможную ширину, так сказать, на грани фола.

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

Длинный текст

Форма кнопки

Большинство тестов разных компаний показали, что лучшая форма для кнопки это прямоугольник с закруглённым углами.

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

Хитрости любого call to action

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

1 - Текст от 1-го лица. Так как вы создаёте сайт для клиентов, то так и хочется написать ваш, ваше, вам, НО правильнее будет на кнопках писать так, как читает клиент - Мой, Мне, Моя.

Такой подход может увеличить конверсию в 2 раза! На примере, чтобы было понятнее, вариант “Получите ваш план тренировок” хуже, чем “Получить мой план тренировок”.

Текст от первого лица

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

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

Да как же поймать?

3 - Двойные формы. Так мы называем форму, которая имеет в себе как дополнительную информацию, так и саму форму для заполнения.

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

4 - Усилители. Бывает такое, что клиент хочет вроде бы нажать, но что-то его останавливает.

Для этого многие компании, в особенности под кнопками “Купить” и “Подписаться”, подписывают, например, варианты оплаты или текст из серии “Мы против спама”.

Усилители

5 - Срочность. Если в вашем случае человек может предполагать в мыслях, что ваш продукт имеет срок действия/жизни, то можно добавить в кнопку такие слова как “Сейчас/Сегодня”, чтобы создать эффект срочности. Пример: “Получить скидку 50% прямо сейчас”.

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

Две кнопки

Так вот и для тех, и для других нужно делать кнопки, причём, их можно разместить рядом.

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

7 - Указатель. Можно дополнительно привлечь внимание не только за счёт анимации, цвета и размера, так ещё и с помощью дополнительного элемента в виде стрелки, которые кстати можно интересно анимировать.

8 - Воздух. Хотите ещё больше акцентировать внимание на действии, то окружите его “воздухом”, то есть пустотой, чтобы весь акцент был прямиком на нашу “звезду”.

Пример воздуха

Коротко о главном

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

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

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

И напоследок финальный чек лист, какая же должна быть идеальная кнопка призыва к действию:

• Понятный призыв;
• Лёгкий вход;
• Яркая и привлекающая внимание;
• Расположенная в нужном месте.

Постоянным читателям нашего блога хорошо известно, что такое “элемент призыва к действию” (Call to Action Button) целевой страницы, и насколько велика роль этого элемента веб-интерфейса в деле .

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

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

Метод 1: привлекайте внимание пользователя, увеличивая размер CTA-кнопки.

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

Пример 1: кнопка призыва к действию превышает размером окружающие элементы.

Продемонстрируем этот способ привлечения внимания пользователя на примере целевой страницы компании Lifetree Creative.

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

Пример 2: если на целевой странице есть несколько кнопок призыва к действию - более важная кнопка должна быть больше по размерам.

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

Вот как эта концепция была воплощена в жизнь на сайте paramore|redd - кнопка, предлагающая посетителю подписаться на рассылку, значительно больше размером, чем кнопка, «разрешающая» пользователю продолжать чтение блога. Цель конверсии этой страницы понятна и ясна - подписка!

Метод 2: завладейте вниманием пользователя, используя общеизвестные правила размещения CTA-элемента на веб-странице.

Место размещения CTA на целевой странице имеет решающее значение для привлечения внимания посетителей.

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

Пример 1: разместите призыв к действию «на уровень выше», чем все остальное содержимое целевой страницы.

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

Пример 2: CTA в верхней части целевой страницы.

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

Пример 3: CTA в визуальном центре.

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

Этот способ отлично сработал для страницы PicsEngine, однако помните, что выбранное вами место расположения не должно находиться слишком далеко от верхней части (header) веб-страницы.

Метод 3: используйте пустое пространство.

Использование пробелов (пустого, или «мертвого» пространства) отлично работает на таких целевых страницах, где поблизости от CTA-кнопки расположено много других элементов.

Пример 1: используйте пробелы для визуального выделения призыва к действию.

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

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

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

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

Метод 4: используйте высококонтрастные цвета для создания и выделения CTA.

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

Пример 1: используйте цвета, контрастирующие с окружающими элементами страницы.

Вот отличный пример использования такого приема на целевой странице сервиса Notepod: все окружающие элементы страницы имеют черный цвет, в то время как призыв к действию - ярко-синего цвета. Самый невнимательный пользователь не промахнется мимо нужной кнопки. :)

Пример 2: используйте контраст между цветом кнопки и цветом окружающего ее фона.

Этот способ прост и эффективен: поместите кнопку подчеркнуто яркого цвета (например, спектрально-желтого) над черно-белым или монохромным фоновым изображением, как, например, это сделали создатели данной страницы.

Метод 5: предложите посетителю воспользоваться дополнительной /альтернативной кнопкой призыва к действию.

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

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

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

Предоставьте ему такую возможность, установив на странице еще одну CTA-кнопку, позволяющую посетителю, например, просмотреть видеоролик, разъясняющий ценовую политику данного сервиса.

Пример 1: размещение вторичного элемента рядом с основной CTA-кнопкой.

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

Обратите внимание: здесь кнопка главного желаемого действия расположена в соответствии с классическим правилом восприятия информации - строка читается пользователем слева направо, что означает, что первому слову в строке (в нашем случае - кнопке) достанется максимум внимания посетителя.

На целевой странице программы Transmissions был применен другой способ горизонтального размещения 2 элементов призыва к действию. Кнопка основного действия - выделенная контрастным цветом - расположена позади дополнительного CTA-элемента. Однако такое расположение элементов полностью оправдано: дополнительное действие (загрузка бесплатной пробной версии приложения), если оно будет выполнено в первую очередь, вполне может подтолкнуть посетителя к совершению основного действия, предложенного на странице - оплате полнофункциональной версии опробованной программы.

Пример 2: размещение вторичного CTA-элемента под главной кнопкой призыва к действию.

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

Обратите внимание: дополнительное действие выделяется еще и применением «затемненного» (по сравнению с остальным пространством страницы) фона.

Метод 6: поторопите посетителя вашей страницы.

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

Например, на странице tap tap tap.com идею «поторопить пользователя» реализовали весьма остроумным способом: размещенное в непосредственной близости от CTA-кнопки с призывом «купите сейчас», объявление гласит, что на товары действует некая «начальная цена».

Тут задействован довольно тонкий механизм создания «тревожного ожидания»: сопоставляя слова «сейчас» и «начальная цена», пользователь начинает подозревать, что он рискует заплатить больше, если заплатит за товар позже, когда «начальные цены» (которые покупатель подсознательно ассоциирует с началом самого простого отсчета от малых к большим числам: 1, 2, 3…) непременно изменятся в сторону увеличения. ;)

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

Метод 7: сообщите пользователям, что предложенное вами действие выполняется легко и просто.

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

Например, на целевой странице Basecamp текст на кнопке призыва к действию четко определяет время, требующееся пользователю для регистрации (60 секунд), и объясняет, что пробная подписка на 30 дней предоставляется бесплатно.

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

Метод 8: открыто и подробно объясните пользователям, что они получат, воспользовавшись вашей CTA-кнопкой.

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

Специалисты Mozilla Firefox, например, смогли поместить всю самую необходимую для пользователей информацию на поверхности кнопки для загрузки приложения: информацию о стоимости продукта (бесплатно), сведения о версии предлагаемого продукта (веб-браузер версии 3.5.3, предназначенный для ОС Windows с англоязычным интерфейсом) и размер загружаемого установочного файла (7.7 Мб).

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

И не забывайте о главном: тестируйте каждое изменение, произведенное вами.

Известно, что все более или менее известные бренды американского рынка просто «помешаны» на тестировании своих интернет-ресурсов. Понимание того, что увеличение конверсии на 0.5% может принести дополнительные тысячи долларов годовой прибыли, служит прекрасной мотивацией для оптимизации конверсии целевой страницы/сайта.

Элементы 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 должны учитывать специфику аудитории и интересы пользователя. Цвета и изображения должны отражать ваш бренд и нести смысл. Анимация работает здесь отлично, только если она уместна. Текст должен быть емким, коротким и строго по делу.

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

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

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

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

Неважно, хотите ли вы, чтобы люди подписались, скачали или же купили что-то, кнопка должна всегда выглядеть убедительно.

Изучение более 200 малых предприятий, базирующихся в США, показало, что более 70% из них не имеют четких и понятных кнопок «призыва к действию».

Исследователи также обнаружили некоторые интересные факты, приведенные ниже:

• 82% испытуемых не ссылались на профили фирм в социальных сетях.
• у 72% из них не было кнопок «призыва к действию» на сайтах.
• 27% не отображали номер телефона на главной странице.
• 70% из тех, у кого все же был указан номер телефона, не размещали его на видном месте.
• 96% из них не размещали информацию о навигации по сайту на домашней странице.
• 68% не указывали свой адрес электронной почты на главной странице.
• 38% из тех, кто указывал адрес электронной почты, не размещали его на видном месте.

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

Примеры и типы «призывов к действию»

Так как именно вы будете создавать убедительные кнопки на вашем сайте?

Посмотрите на эти 24 простых совета по улучшению вашего «призыва к действию», в результате чего вы получите больше кликов по нему:

1. Выберите правильный цвет

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

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

2. Используйте легко читаемый текст

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

3. Напишите конкретное содержание

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

Hubspot является хорошим примером этого:

4. Используйте точную и понятную информацию

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

5. Будьте ориентированными на конкретные действия

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

6. Добавьте специальные эффекты

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

7. Используйте пробел

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

8. Создайте эффект срочности

Эффект лимита заставит посетителей принимать срочные решения: «первые 100 подписчиков получат бесплатную электронную книгу».

9. Будьте конкретны

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

10. Помните, что размер имеет значение

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

11. Выберите подходящую форму

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

12. Используйте точную информацию

Сделайте кнопку «призыва к действию» актуальной, покажите, почему именно ее должен нажать пользователь. Вместо того, чтобы использовать общий текст («увидеть больше»), 9gag использует фразу «Хочу больше веселья». Это заставляет пользователей нажимать на кнопку, если они хотят увидеть больше забавных фотографий.

13. Используйте доказательства

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

14. Общайтесь с посетителями

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

15. Используйте обратную психологию

В то время как на большинстве сайтов написано “нажать здесь”, вы можете получить больше кликов, написав, чтобы они не нажимали кнопку. Эта стратегия была реализована фирмой TimothySykes, на сайте которой было написано “не нажимайте, если вы ленивы”. В результате этого переходы по этой ссылке увеличились на 39%

.

16. Будьте креативными

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

17. Распределите время

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

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

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

19. Говорите от первого лица

Исследования, проведенные Майклом Аагордом из Content Verve, показали, что переход от второго лица к первому увеличивает количество кликов на 90% в среднем. Используйте личные местоимения для того, чтобы показать, что посетитель общается с реальным человеком.

20. Расставьте приоритеты

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

21. Добавляйте картинки

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

22. Создавайте опросы

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

23. Используйте правила минимализма

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

24. Выберите правильную позицию

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

Где разместить «призыв к действию»

Как уже говорилось в последнем пункте, позиционирование вашей кнопки может оказать огромное влияние на количество кликов. Расположение кнопок должно зависеть от контента и информации, а также дизайна Вашего сайта.

Тесты, проведенные Content Verve, показали, что кнопки, размещенные ближе к концу страницы, получили на 304% больше переходов, чем те, что размещены вверху страницы.

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

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