В данной статье рассмотрен вопрос эффективности так называемых Call To Action кнопок (CTA кнопки). Попросту говоря — самого главного элемента на Вашей продающей странице (или что Вы там хотите от пользователя).

Предисловие

Наконец-то я созрел для еще одной статьи на тему веб-дева! =)

Данная статья является моим переводом английской статьи 6 Characteristics of High-Converting CTA Buttons из популярного источника для Интернет-маркетологов.

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

Конечно, я и до этого знал что такое Call To Action (далее CTA), но данная статья мне настолько понравилась, что я решил сделать для Вас перевод. Итак, усаживайтесь поудобнее, начнем.

Важность CTA кнопок

Ваши CTA кнопки являются самым важным элементом Вашей страницы.

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

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

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

Первые свойства кнопки с высокой конверсией: текст и форма

1. CTA кнопки являются…эээ…кнопками

Я могу показаться Капитаном Очевидностью, но следует все же сделать на этом пункте акцент.

CTA кнопка не является просто куском текста, ссылкой, анимированным изображением, мемом…

CTA кнопка должна быть КНОПКОЙ!

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

Кнопка должна выглядеть хотя бы примерно так:

То есть, каждая кнопка имеет:

• явно очерченную границу и форму;
• цвет, который отделяет ее от остального окружения;
• на кнопке присутствует текст (о нем ниже).

Посмотрите на пример формы на сайте компании Optimizely — эта компания как раз занимается оптимизацией сайтов и их A/B тестированием:

Сильно оригинальная у них кнопка? Нет.
Но зато пользователю точно ясно и понятно куда нужно кликнуть для отправки формы? Да.

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

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

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

Да и сама кнопка тут имеет непонятное значение…Целью данной страницы является факт загрузки PDF? О чем этот PDF? Как это относится к тому, что я (пользователь) ищу у них на сайте?

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

Ниже еще один пример «как делать не надо»:

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

Теперь хорошие примеры:

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

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

2. У эффективных CTA кнопок привлекательный текст

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

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

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

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

Эта кнопка на странице компании Sunglass Warehouse просто говорит «Сделай это». Но текст выше («Зарегистрируйтесь ниже чтобы получить 20% скидку») делает очевидным, что пользователь получит в результате нажатия кнопки. В данном случае все сделано как можно проще, и это очень хорошо. К тому же это более интересный текст, нежели стандартный набивший оскомину «Отправить».

В общем, не бойтесь экспериментировать с нестандартными текстами для CTA кнопки, и старайтесь делать их как можно проще: большинство самых эффективных CTA кнопок в плане текста просты как пробка.

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

• Начать
• Присоединиться
• Узнать
• Попробовать
• Заказать

(В оригинале статьи приведен такой список:

• Start
• Stop
• Build
• Join
• Learn
• Discover

Надеюсь, Вы уловили суть).

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

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

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

• You
• Easy
• Guarantee
• Save
• New
• Proven
• Results
• Free

Каждое из этих слов привлекательно по-своему, кто-то любит халяву (Free), кто-то любит пробовать новинки (New), кто-то наоборот ценитель опыта и не любит риск (Proven, Results, Guarantee). В любом случае каждое из этих слов добавляет эмоций пользователю, и ему больше хочется совершить целевое действие.

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

Вообще не стоит недооценивать мощь слова «бесплатно». Вам, как владельцу какого-то сервиса, данное слово может показаться совершенно банальным. Например, «делаем замер окон бесплатно». «Ясен пень бесплатно!» — скажете Вы. Но напоминаю, что такие вещи могут быть отнюдь не очевидны среднестатистическому пользователю. Да и психология играет свою роль — слово «бесплатно» автоматически повышает привлекательность Вашего предложения, даже если это итак было ясно без него.

Еще одна тактика для повышения конверсии, которую знает любой маркетолог — это запугивание. Звучит страшно. Перефразируем: создание ощущения срочности.

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

• Осталось X дней
• Ограниченная серия
• Скоро закрытие
• Только сегодня
• Поспешите
• Немедленно

А вот пример использования данных клише:

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

Ну, и наконец, обычно продающий текст CTA кнопки и вокруг нее делают относительно коротким. Все что длиннее 10-15 слов, скорее всего, слишком много.

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

«Post a Job. It’s Free!» — чисто технически это два предложения. Но здесь всего 5 слов и посетитель может быстро прочитать и оценить действие, которое ему предлагается сделать. Если этот посетитель является работодателем, который ищет новый источник фрилансеров для своих проектов, то это очень легкое решение для него: нажимать кнопку или нет.

На этом данная часть статьи закончена.

Продолжение перевода следует…