Гайды

Call-to-action: гид по конверсионным призывам к действию

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

Call-to-action (CTA, призыв к действию) — это сплав текста и дизайна, который побуждает читателя совершить определенное действие.

Призыв к действию бывает в форме кнопки, картинки или ссылки. «Купить», «Получить консультацию», «Подписаться на рассылку» и «Зарегистрироваться» — всё это call-to-action.

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

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

Написать и отредактировать статью помогли специалисты Студии Лепёхина — автор Анастасия Фёдорова и специалист по рекламе Мария Никитина.

Текст 

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

Чтобы правильно сформулировать call-to-action, задайте себе два вопроса:

  • как мотивировать посетителя нажать на кнопку;
  • что он получит после того, как это сделает.

Обычно CTA не ограничивается словами на кнопке. Это ещё и текст, расположенный рядом.

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

Самый простой способ. Дополните фразу «Я хочу…» от имени посетителя:  скачать шаблон, попробовать сейчас, получить консультацию. 

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

Поэтому пишите призывы от первого лица. Человек сам выбирает, что ему делать: «Участвую», «Хочу заказать», «Выслать мне шаблоны».

Призыв к действию от Unisender — «Я в деле»
Призыв к действию от Unisender — «Я в деле»

Сделать призыв понятным. Расскажите пользователю, что он получит, максимально конкретно. Если размер кнопки не позволяет сформулировать понятный call-to-action, расположите поясняющий текст рядом.

Понятные CTA
Примеры общих и конкретных call-to-action

Показать отсутствие обязательств.  Все мы хотим получать больше, а отдавать меньше. Если человек только зашёл на ваш сайт или получил первое письмо, не стоит сразу кричать «КУПИ». Такой напор только отпугнёт. 

Постарайтесь ничего не просить у потенциального клиента, а наоборот — дайте ему что-то полезное. Лучше прямо сейчас и без регистрации. Или хотя бы используйте более мягкие формулировки. Например, вместо «Купить» —  «Добавить в корзину». 

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

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

Показать пользу для человека. Расскажите, какую пользу получит человек после того, как нажмёт кнопку. Это можно указать прямо на кнопке или в сопутствующем тексте рядом с ней. А/B-тесты показывают, что призывы к действию, которые подчёркивают пользу, дают лучший результат. Например, компания FriendBuy получила втрое больше подписок, когда добавила преимущества рассылки в call-to-action. 

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

Магазин Peak предлагает подписаться на рассылку и показывает пользу — вы будете первыми узнавать о скидках и предложениях
Магазин Peak предлагает подписаться на рассылку и показывает пользу — вы будете первыми узнавать о скидках и предложениях

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

Skype предлагает организовать собрание прямо сейчас бесплатно, без регистрации и даже без загрузки приложения
Skype предлагает организовать собрание прямо сейчас бесплатно, без регистрации и даже без загрузки приложения

Использовать страх упустить что-то важное. Автор блога компании ConversionXL рассказывает, как ему удалось повысить конверсию на 330%, добавив элемент срочности к своему предложению. 

Используйте в call-to-action идею дефицита: ограниченные серии продуктов, краткосрочные акции, временные бонусы. Однако старайтесь, чтобы срочность не выглядела искусственной. Посетители очень быстро распознают обман. Когда у компании акция длится 2 недели, а потом автоматически продлевается ещё на две и так круглый год, доверие теряется.

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

Сервис онлайн-записи «Окошки» предлагает бесплатную версию продукта и не просит данные карты
Сервис онлайн-записи «Окошки» предлагает бесплатную версию продукта и не просит данные карты

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

Будьте прозрачными. Люди хотят знать, что произойдёт после нажатия кнопки. Некоторые пользователи неохотно оставляют адрес электронной почты для рассылки, потому что не хотят получать спам. В сопутствующем тексте можно указать, что и как часто вы будете отправлять им. Это поможет создать доверительные отношения с пользователями.

Пример call to action от издательства «МИФ». В сопутствующем тексте сказано, что человек получит и как часто будут приходить письма
Пример call to action от издательства «МИФ». В сопутствующем тексте сказано, что человек получит и как часто будут приходить письма

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

1500 руб. за 45 писем? — Да это совсем недорого
1500 руб. за 45 писем? — Да это совсем недорого

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

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

Указать конкретное действие на кнопке. Кнопки «Скачать» или «Отправить» — слишком скучные. Будьте более конкретными: напишите, что человек получит прямо на кнопке. Например, «Скачать шаблон медиаплана» или «Подписаться на рассылку».

Кнопки на «Авито» чётко говорят, что можно сделать
Кнопки на «Авито» чётко говорят, что можно сделать
На сайте Райффайзена понятно, что кнопка ведёт на обмен валют
На сайте Райффайзена понятно, что кнопка ведёт на обмен валют

Какие слова использовать в call-to-action

Лучше выбирать сильные глаголы, ориентированные на действие.

Вот 2 совета по их использованию:

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

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

Учитывайте тональность ресурса. Отталкивайтесь от целевой аудитории и этапа воронки при подборе CTA. Например, кнопка «Хочу купить» подойдёт для сайта со скидками или демо-версиями продуктов. Если речь идет про лид-магнит, уместно будет написать «Получить подарок» или «Скачать электронную книгу».

Дизайн

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

Формат

Призыв к действию оформляют в виде ссылки, картинки или кнопки. Самый эффективный вариант — кнопка. Согласно исследованию Hubspot, конверсия картинок в среднем в 2 раза ниже, чем кнопок.

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

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

Размещайте call-to-action на кнопках. Картинки и ссылки используйте дополнительно.

Цвет

Цвет кнопки значительно влияет на конверсию. Несколько лет назад консультант Мэтью Вудворд протестировал несколько цветовых комбинаций и обнаружил, что разница между худшим и лучшим вариантом составляет 10%. Лучший вариант принёс на 850 лидов больше.

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

Фиолетовую кнопку хорошо видно на белом фоне
Фиолетовую кнопку хорошо видно на белом фоне
Вывод

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

Размер

Чем больше кнопка, тем она заметнее. А ещё на большой кнопке легко помещается более понятный и конкретный призыв к действию.

Не просто применить, а «Воспользоваться промокодом»
Не просто применить, а «Воспользоваться промокодом»

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

Вывод

Используйте большие кнопки, особенно для мобильных.

Анимация при наведении курсора или ховер-эффект

Любое движение привлекает внимание. Когда кнопки моргают, увеличиваются, перемещаются или меняют цвет, они становятся заметнее.

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

Лёгкое изменение оттенка кнопки при наведении курсора привлекает внимание и в то же время не выглядит навязчиво
Лёгкое изменение оттенка кнопки при наведении курсора привлекает внимание и в то же время не выглядит навязчиво
Вывод

Не переусердствуйте с анимацией.

Окружающее пространство

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

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

Аккуратная стрелочка направляет взгляд посетителя на простую форму с кнопкой
Аккуратная стрелочка направляет взгляд посетителя на простую форму с кнопкой
Вывод

Выделите call-to-action c помощью пустого пространства или других элементов дизайна.

Удобная форма для заполнения

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

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

В форме «Самоката» удобные большие поля с подсказками
В форме «Самоката» удобные большие поля с подсказками

Расположение

Разберём, где лучше всего разместить call-to-action и стоит ли ограничиваться одной кнопкой.

 

Выше или ниже «линии сгиба»

Наверняка многие слышали, что размещать кнопку лучше выше «линии сгиба», т.е. на первом экране. Логика очевидна. Не все добираются до конца страницы или письма.  По исследованиям Nielsen Norman Group, 80% времени на сайте посетители рассматривают первый экран.

И всё же бывают ситуации, когда кнопка, расположенная внизу, работает лучше. Об этом рассказала компания VWO в своем блоге. Мысль простая: кнопки в конце страницы показывают себя эффективнее, если предложение сложное и предполагает серьёзные инвестиции: обучение, строительство дома, сложное ПО, лечение.

Вывод

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

Справа или слева

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

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

Вывод

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

Всплывающие окна

Ещё один эффективный способ разместить call-to-action на сайте — использовать всплывающие окна (или попапы)

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

Чтобы выбрать идеальное время для всплытия попапа, ориентируйтесь на минимальное время, которое пользователь находится на сайте. Это можно узнать в Яндекс Метрике: ориентируйтесь на проведённое время холодной аудитории, например из рекламы.

Вот несколько идей для попапа, который не будет раздражать:

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

Мегамаркет ненавязчиво предлагает оценить товар
Мегамаркет ненавязчиво предлагает оценить товар

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

Вот пример всплывающего окна у Gmail:

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

Еще несколько важных советов:

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

К примеру, на сайте электромонтажной компании попал показывается через 21 секунду после того, как человек зашёл на сайт, один раз в 7 дней. Разработчики сайта учли, что 21 секунда — это минимальное время, которое проводит на сайте холодная аудитория. А периодичность раз в 7 дней была выбрана, чтобы не надоедать пользователям.

Компания занимается электромонтажом и с помощью квиза собирает заявки: можно сразу указать площадь квартиры и узнать стоимость работы
Компания занимается электромонтажом и с помощью квиза собирает заявки: можно сразу указать площадь квартиры и узнать стоимость работы
Вывод

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

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

Самый простой способ решить проблему с выбором подходящего места для кнопки — разместить несколько call-to-action. Так часто и делают: добавляют кнопку на каждые 2-3 экрана, а также в начале и в конце страницы или длинного письма.

Чтобы не показаться навязчивыми при таком подходе, лучше использовать разные формулировки call-to-action. Однако менять стоит только текст, но не суть призыва. Иначе есть риск запутать посетителей.

Два одинаковых по сути призыва к действию от Ecwid — «Создать магазин» и «Регистрация»
Два одинаковых по сути призыва к действию от Ecwid — «Создать магазин» и «Регистрация»

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

Один VS много

Иногда на сайтах встречаются call-to-action с разным посылом. Обычно их добавляют, чтобы ориентироваться на посетителей на разных этапах воронки продаж или из разных сегментов.

Два призыва от Skyeng не конфликтуют друг с другом, так как рассчитаны на разные сегменты — на школьников и взрослых
Два призыва от Skyeng не конфликтуют друг с другом, так как рассчитаны на разные сегменты — на школьников и взрослых

 

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

После покупки камеры клиенту сразу предлагают новый call-to-action:«Чтобы получать советы о том, как использовать вашу камеру по полной, подпишитесь на рассылку»
После покупки камеры клиенту сразу предлагают новый call-to-action:«Чтобы получать советы о том, как использовать вашу камеру по полной, подпишитесь на рассылку»

Факторы, влияющие на call-to-action

Я постаралась собрать в статье наиболее общие рекомендации по дизайну, тексту и размещению call-to-action. Однако даже эти советы будут работать не у всех, так как оптимальный вариант призыва к действию зависит от многих факторов.

 

Сфера бизнеса 

Тут всё просто. «Купить производственную линию» и «купить рубашку» — разные вещи. У этих продуктов различные циклы продаж, и это влияет на call-to-action. 

Согласно исследовательскому проекту Persado, для ритейла, IT-компаний и финансовых организаций подходят разные призывы к действию. Для финансовой сферы оказались эффективными «наблюдательные» call-to-action (Посмотреть предложение), а для IT — «исследовательские» (Попробовать сейчас). 

Прикольно, когда при формулировке call-to-action используют слова из конкретной сферы бизнеса. Не «оставить заявку», а «вызвать врача»
Прикольно, когда при формулировке call-to-action используют слова из конкретной сферы бизнеса. Не «оставить заявку», а «вызвать врача»

Путь клиента 

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

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

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

Особенности посетителя

Исследование 330 000 различных кнопок показало, что персонализированные call-to-action работают эффективнее обычных на 200%. Персонализированные призывы к действию, адаптируются под конкретного посетителя, с учётом его предыдущих покупок, положения в воронке продаж.

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

Легче всего настроить персонализированные call-to-action для посетителей и клиентов, у которых есть личный кабинет. Можно использовать CRM-системы и сервисы email-рассылок вроде Unisender, которые будут менять кнопки в зависимости от статуса клиента, прошлых покупок и других параметров.

Используемое устройство

Выше я уже рассказывала про особенности дизайна и размещения call-to-action для смартфонов:

  • Кнопки стоит делать покрупнее.
  • Располагать call-to-action лучше на первом экране и правее от центра.

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

Как улучшить call-to-action

Итак, призыв к действию зависит от многих факторов. Так как же определить, что сработает именно для вас? Для начала создайте какой-нибудь вариант call-to-action, следуя советам из статьи. А потом приступайте к его последовательному улучшению, используя простой алгоритм:

  1. Определите, насколько хорошо работает текущий вариант call-to-action. Измерьте не только клики, но и конверсию.
  2. Проанализируйте поведение пользователей. Посмотрите тепловую карту, чтобы понять, как часто посетители нажимают на кнопку и что отвлекает их внимание. Изучите записи сеансов, чтобы увидеть, как посетители смотрят сайт, где останавливаются, с какого места уходят. 
  3. Сформулируйте гипотезы на основе проведённого анализа. Подумайте, какой call-to-action будет работать лучше. Может, разместить его в другом месте? Изменить текст? Или вообще поменять суть предложения?
  4. Выберите гипотезу и проведите A/B-тест с помощью любого удобного инструмента. Например, Roista или Calltouch или Unbounce. Проверять лучше один параметр. Например, только цвет или только размещение.
  5. Повторите 4 шаг с другой гипотезой.

Призыв к действию — гораздо больше, чем просто ещё один элемент страницы или письма. Call-to-action — это итоговый результат, на который работает весь остальной контент.

Согласно Wingify, почти 30% тестов, которые запускают их пользователи, это тесты call-to-action. Изменить призыв к действию можно быстро, а конверсия при этом может вырасти значительно. Переписываешь текст призыва с «Заказать информацию» на «Получить информацию» — и клики растут на 40%. Или перекрашиваешь кнопку и получаешь на 21% больше лидов.

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