Секреты создания эффективной CTA кнопки для сайта
Previous
выбрать за меня
Мобильный поиск: что, как, где, когда и почему. Маркетинговое исследование
Next
not found
Интернет-маркетинг

Memento конверсия, или что вы еще не знали о кнопке призыва к действию

Автор: Аркадий Туманов04.04.2014

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

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

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

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

not found

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

Еще один классный пример кнопки для сайта – на пасадочной странице Skype. «Где бы вы ни находились, вас соединит скайп», – гласит надпись на сайте и рядом – гигантская кнопка со стрелкой для перехода и регистрации.

not found

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

not found

И последнее, но не по важности замечание по теме. Многие пользователи увидят ваш сайт с экрана своих планшетов или смартфонов – и адаптивный дизайн сегодня в тренде. На размер кнопки для сайта это также не может не повлиять: 44х44 px – вот минимальный размер, при котором пользователь не только увидит вашу кнопку, но и не испытает затруднений нажать.

А согласно данным Hubspot, оптимальный размер CTA-элемента в px будет следующим:

not found

Где разместить CTA-элементы

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

Дилемма №1: Вверху или внизу.

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

Правило работает, но… Это самое «но» по теме могут добавить западные гуру веб-аналитики, и будет разумно к ним прислушаться.

Так, тестируя сайт туристического агентства, эксперты Marketing Experiments выяснили, что CTA-элемент, расположенный внизу сайта…

not found

дает на 20% больше конверсии аналогичной страницы, где кнопка призыва к действию расположена в верхней части.

not found
Майкл Аагаард опубликовал в блоге Content Verve результаты сплит-тестирования, согласно которым, перемещение регистрационной формы в нижнюю часть страницы привело к росту конверсии на 304%.

not found

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

Сооснователь KISSmetrics и Crazy Egg Нейл Патель также приводит результаты A/B-тестирования своего сайта, которые совпадают с выводами коллег. После смещения CTA-формы в нижнюю часть страницы конверсия сайта увеличилась на 17%. По словам Пателя, пользователи охотнее кликают по СТА-кнопке, если они точно понимают, что это им даст.

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

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

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

not found
2. разместить плавающую кнопку, которая всегда остается в видимой области экрана. Чаще всего это консультационные формы, реже – иконки «в корзину», но владельцы сайта ниже уверены: их посетители сразу должны записаться.

not found

«Зависающий» СТА-элемент обязательно увеличит количество кликов. Но обратите внимание: именно кликов, а не конверсии сайта.

В поддержку зависающих призывов к действию выступает и уже упоминаемый нами Нейл Патель. На личном блоге Нейла QuickSprout.com размещены целых 3 формы призыва к действию, последняя из которых остается с пользователем до конца. Слегка навязчиво, однако прирост кликов на 218% – приятное последствие.

Дилемма №2: Справа или слева.

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

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

not found

Дилемма №3: Выше или ниже

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

not found

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

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

Выводы:

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

CTA-текст

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

Правило 1. Простой и привычный язык.

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

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

сплит-тестирование, юзабилити, юзабилити CTA, CTA, CTA, CTA элемент, элемент CTA, элемент дизайн, дизайн кнопки, дизайн CTA, кнопка CTA, конверсия, A/B тестирование

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

сплит-тестирование, юзабилити, юзабилити CTA, CTA, CTA, CTA элемент, элемент CTA, элемент дизайн, дизайн кнопки, дизайн CTA, кнопка CTA, конверсия, A/B тестирование

Слепо скопированный «кол-ту-экшен» – первый враг конверсии интернет-магазина. К тому же, обратите внимание: если на первом сайте «продолжить покупки» означает возврат к выбору товара, то на втором – собственно оплату и приобретение.

Правило 2: Глагольные формы.

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

А потому начинайте свой текст с глагола. «Скачать», «Купить», «Добавить в корзину», «Оформить заказ» или «Заказать обратный звонок»… – именно так будет выглядеть конвертирующий призыв.

Правило 3: Точность, или когда работают «тут/здесь/подробнее».

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

Однако у любого правила есть свои исключения, и результаты сплит-тестирования снова подтверждают это. Создателем платформы для блоггеров Дастин Кёртис призывал следовать за ним в Twitter. Однако заменив «Twitter» на расплывчатую формулировку «здесь», он наблюдал 172% -ый рост переходов по ссылке.

сплит-тестирование, юзабилити, юзабилити CTA, CTA, CTA, CTA элемент, элемент CTA, элемент дизайн, дизайн кнопки, дизайн CTA, кнопка CTA, конверсия, A/B тестирование

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

Правило 4: Персонализированные призывы.

А вы персонализируете призывы? Предлагаете пользователю индивидуальную услугу или товар?

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

not found

Призыв «Добавить вашу компанию» («Add Your Company») на дизайнерском блоге Xemion увеличил количество кликов на 43%. При такой формулировке у пользователя создавалось впечатление, будто владельцы сайта говорят с ним, а не о нем. И ответ «нажать» закономерно возникал в читательских умах.

Правило 5: Формулировки глазами пользователя.

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

not found

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

not found

Речь идет о покупке подарка. А что в этих случаях покупатель говорит консультанту? – правильно, ответ и является эффективным CTA.

Правило 6: Соответствие товару/услуге.

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

not found

Подтверждением тому будет и A/В-тест, проведенный интернет-гуру Нейлом Пателем на сайте CrazyEgg. Замена стандартного призыва на формулировку «Покажите мне мою тепловую карту» («Show me my heatmap») привела к росту конверсии сайта на впечатляющие 20%.

Правило 7: Результат действия.

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

not found

В этом случае практика датского портала, предоставляющего информацию о помещениях в аренду, показала рост конверсии на 38,26%.

А чтобы понять, как улучшить текст на вашей кнопке, задайте себе всего два вопроса:

1. Какая мотивация у клиента нажать эту кнопку?
2. Что клиент получит, если нажмёт её?

Именно так поступили владельцы известной российской компании, предлагающей написание дипломных и курсовых работ. Призыв «Закажи» (необходимое для компании действие) на их кнопке соседствует со «спи спокойно» (желаемый клиентом результат).

not found

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

Правило 8: Срочность.

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

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

not found

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

Правило 9: Позитивные формулировки.

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

Тест CTA-кнопки «Начать мою бесплатную подписку» («Start my free subscription») на сайте Cabot Heritage Corporation показал на 22,9% ниже конверсию по сравнению с безобидным «Отправить мое бесплатное сообщение» («Send my free report»). В первом варианте слово «подписка» предполагает больше обязательств, к тому же отсылает к негативному пользовательскому опыту, когда вместо полезной информации пользователь получает спам.

not found

Правило 10: Попробуйте/Бесплатно.

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

На сайте браузера Firefox «бесплатный» с перевесом в 0, 4% одолевает противника:

not found

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

Например, протестировав различные типы рекламных объявлений на своем сайте, компания Tree House так и не добилась желаемой эффективности. И только добавленное в рекламный блок слово «Бесплатно» привело к уменьшению CPA – ни много ни мало – на 17$.

not found

Правило 11: Скажите не кликать.

Призывать или не призывать? – вот в чем вопрос. Некоторые интернет-маркетологи вместо того, чтобы говорить пользователям, что делать, информируют о том, что последние делать якобы не должны.
Так, на сайте TimothySykes текст «Не кликайте, если вам лень» принес на 39% больше конверсии, чем стандартное «Кликните здесь».

Похожую тактику использовал ресурс IWillTeachYoutoBeRich:

not found

И даже для загрузки бесплатной версии книги про эффективные CTA ee автор Майкл Аагаард призывает «не кликать»:

not found

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

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

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

А проводили ли такое тестирование вы? И как выглядит ваша CTA-кнопка?

Реакция на статью
поделюсь
0%
интересно
0%
полезно
0%
не уверен
0%
скучно
0%
где автор?
0%
Комментарии
Оставить отзыв

    You must log in to post a comment

    ПОДПИСЫВАЙТЕСЬ НА НАС!
    ПОДПИШИТЕСЬ НА НАШУ РАССЫЛКУ!
    Уведомления о новостях, статьях и инфографике будут приходить раз в неделю.
    ПОДПИШИТЕСЬ НА НАШУ РАССЫЛКУ!
    Позвольте нам обновлять ваши знания раз в неделю.