Правила идеальной CTA-кнопки: создаем притягательную кнопку для сайта в 2021 году
Сегодня мы поговорим о том, какие правила нужно соблюдать, чтобы кнопки вашего лендинга были конверсионными прямо сейчас, в будущем году, да и всегда. Обсудим, как сделать нажатие кнопки на сайте любимым действием ваших клиентов.
Что такое CTA-кнопка
CTA-кнопка – это графический элемент на вашем сайте, который мотивирует посетителей страницы совершить целевое действие. Например, купить, заказать, подписаться, получить скидку или вызвать мастера на дом.
Нажми на кнопку – получишь результат
Прежде чем заняться улучшением существующих форм захвата на вашем сайте, вы наверняка изучили практики, которые есть на рынке и, как минимум, провели анализ конкурентов.
Важно иметь в виду, что пользователь принимает решение уйти со страницы или остаться буквально за 3–5 секунд. Именно поэтому первую кнопку и призыв к действию пользователь должен увидеть сразу, в рамках первого экрана.
Чтобы выбрать лучший формат кнопки для вашего сайта, не обязательно нанимать агентство интернет-маркетинга. Вы сможете сделать A/B или сплит-тест нескольких вариантов кнопок, выбрать наиболее эффективный дизайн, цвет и текст на кнопке, используя простые веб-сервисы, например: SplitButton или VWO.
Как повысить кликабельность кнопки на лендинге?
Есть несколько правил, которые каждый интернет-маркетолог должен выучить как аксиому:
1. CTA-кнопка обязательно должна выглядеть как кнопка. Здесь не нужно изобретать велосипед – оформите кнопку так, чтобы она напоминала реальную кнопку, на которую хочется нажать.
2. Кнопка обязательно должна быть уникального цвета. Это значит, что на лендинге больше не встречается других элементов такого цвета. Но важно соблюдать принцип комплементарности – кнопка должна вписываться в цветовую схему вашей посадочной страницы или сайта.
3. Текст на кнопке – это всегда глагол в инфинитиве. Еще один нюанс – этот глагол должен совпадать с глаголом в призыве к действию. Например, если призыв «оставьте заявку и получите бесплатную консультацию», то текст на кнопке – «получить консультацию».
Хороший пример совпадения текста-призыва к действию и текста на кнопке
4. Кнопки с конкретным предложением всегда оказываются более конверсионными, поэтому не нужно писать на кнопках «подробнее», «больше» и т.д. Пишите понятный глагол: получить, забронировать, купить.
5. Кнопки могут конкурировать друг с другом, поэтому мы не рекомендуем размещать сразу 2 кнопки в одном блоке.
Не самый лучший вариант расположения кнопок, однако, одна кнопка выделена цветом – это лучше, чем 2 одинаковые кнопки в одном блоке
6. Другие элементы лендинга не должны напоминать кнопку, это сбивает пользователя с толку.
Рекомендации по тестированию кнопок на сайте от американских маркетологов
Как понять, что именно тестировать? И как оценить текущие кнопки на сайте? Разобраться помогут рекомендации от американских маркетологов с сайта http://www.convinceandconvert.com.
1. Изучайте интересные результаты тестов, которые проводили владельцы других сайтов.
Один из таких тестов кнопок показал, что CTA «начать ваш бесплатный 30-дневный период» в разы менее эффективный по сравнению с «начать мой бесплатный 30-дневный период».
Англоязычные маркетологи выявили, что самые конверсионные кнопки содержат в себе глагол получить (или get). То есть призыв «загрузить электронную книгу» лучше заменить на «получить электронную книгу сейчас».
2. Проведите тест на реальных пользователях и убедитесь, что они понимают, какое действие нужно совершить и куда нажать. Текст на кнопке ни в коем случае не должен противоречить призыву к действию.
Сплит-тестирования показывают рост конверсий более чем на 20%, если текст на кнопке служит логическим продолжением призыва к действию.
3. Соблюдение принципа социального доказательства поможет убедить пользователя действовать. Social proof на сайте работают не только в виде отзывов, кейсов, логотипов крупных клиентов. В CTA тоже стоит задействовать принцип социального доказательства, например, заменив текст «Регистрация» на ««Присоединяйтесь к X числу ваших коллег».
4. Не решайте за пользователя, а тестируйте элементы. Считается, что значки Visa Verified и текст «Мы против спама» как бы успокаивают клиентов и повышают конверсию во взаимодействие с формой захвата. Однако, пометка «спама не будет» по результатам теста может снизить конверсию почти на 19%.
Вместо выводов
Как вы могли заметить, мы предлагаем протестировать совсем незначительные изменения, которые не отнимут много времени и не съедят бюджет. Однако, они способны изменить поведение вашей целевой аудитории на сайте.
Остались вопросы? Задайте их в комментариях в блоге Convert Monster.
Что такое CTA (call to action): как написать эффективный призыв к действию и правильно оформить, примеры
CTA – приоритетный элемент в маркетинге, который подталкивает будущего потребителя к действию при помощи разнообразных призывающих баннеров, текстов, изображений и других ресурсов маркетолога. Как написать призыв к действию и правильно оформить – расскажем в статье.
Что такое CTA и для чего нужен
Call-to-action или CTA – это элемент коммуникации, который может превратить потенциального покупателя в реального. Если говорить об эффективном маркетинге, то нельзя обойти стороной призывы к действию в рекламе: они могут использоваться повсеместно и значительно повышать конверсию. СТА является важным элементом сайта, так как информирует пользователя о шагах, которые ему требуется предпринять для покупки продукта или подписки на рассылку. Благодаря этому, посетитель не покинет сайт, не выполнив действия, которые мы от него ожидаем. Наличие сильных релевантных call to action поможет привлечь внимание посетителей вашего сайта.
Вне зависимости от того, где размещены СТА, они предназначены для стимулирования действий на различных этапах покупки. Без призыва к действию ваша маркетинговая кампания превращается в обычную рекламную трансляцию. А без аналитики – в бездонную пропасть для бюджета. Тестируйте разные call to action, например, на виджете обратного звонка.
Виджет обратного звонка для сайта
Ошибка многих владельцев бизнеса состоит в том, что они недостаточно используют call to action на страницах с предложением своего продукта. Тем не менее, это важнейший элемент обеспечения продаж.
Призыв к действию может использоваться для того, чтобы побудить пользователя стать вашим подписчиком или покупателем, для распространения информации путём репостов или привлечения посетителей на мероприятие. 
Цели CTA
Главная цель CTA — помочь пройти посетителю сайта наиболее коротким путем к финальной цели, увеличить количество продаж или количества других действий на сайте, например, побудить посетителя оставить свои контакты.
Популярные виды СТА в маркетинге
Регистрация или подписка
Пример с конференции Google и Registratura, где первым 15 участникам предлагалась уникальная услуга – экскурсия по Google. 
Оформление заказа, покупка
Наиболее применимым кейсом для CTA является призыв к оплате продукта или услуги. Крайне важно продумать именно такой призыв к действию, так как он непосредственно связан с финальной стадией конверсии и от него зависит прибыльность продукта.
Приглашение на мероприятие
Приглашая на мероприятия, используйте CTA. Покупки и приглашения удачно сочетаются с ограничением по времени.
Репосты и комментарии
Пользователей полезно побуждать к комментариям и распространению информации с тем, чтобы увеличить охват. Вовлечённых пользователей можно поощрять скидками и спецпредложениями.
Просмотр материала полностью
Для тизеров контента подойдут призывы к просмотру полной версии материала, в которой может содержаться дополнительная информация или предложение о приобретении товара или услуги.
Скачивание
Контент, который требуется загрузить на устройство пользователя, не всегда имеет очевидные указания на это. Применяйте CTA, чтобы побудить пользователя приступить к загрузке.
Заказ звонка
Посетителям сайта можно предложить связаться с ними через обратный звонок. Призыв к действию формулируется текстом или с помощью виджета обратного звонка.
Виджет обратного звонка для сайта
Расчет стоимости
Предложения, требующие индивидуального расчёта, обычно обсуждаются в частном порядке. С целью продолжения коммуникации создайте призыв к действию — оставить контакты для расчёта цены.
Правила создания эффективного call to action
Размещение кнопки с призывом – это малая часть процесса эффективной коммуникации. Иногда недостаточно даже продуманной рекламной кампании. Поэтому не питайте иллюзий, что яркая кнопка с крупным текстом моментально приведёт к покупкам. Важным вопросом является понимание своей аудитории – сообщение должно быть продумано и сформулировано так, чтобы отвечать потребностям пользователей.
Допустимо и полезно применение сразу нескольких форматов CTA на одной странице. Рассчитайте удалённость призывов друг от друга таким образом, чтобы они не выглядели навязчивыми и отторгающими. Абсолютно корректно использовать одинаковые формы в разных блоках страницы – в начале, середине и конце. В дополнение к форме может быть использована прилипающая кнопка звонка или всплывающие окна.
Психологический аспект
Виджет обратного звонка для сайта
Достигается эффект «два-в-одном»: помимо того, что клиент не успевает уйти к конкурентам, так как получает предложение перезвонить в удобное для него время, он видит на виджете ваше предложение с таймером – эти настройки есть в обратном звонке. Ощущение дедлайна подталкивает его к действию, а возможность связаться с вами в удобное время повышает вероятность, что обратится он именно к вам.
Расскажите клиенту о его выгоде. Людей привлекает возможность получить скидку, уникальную услугу, и это гораздо эффективнее, нежели нейтральное описание плюсов вашей компании. Предоставьте бесплатную доставку первой сотне клиентов или скидку на последующие покупки. Предложите пользователям накопительную систему. Делайте акцент на личности потенциального клиента, обращайтесь к нему и убеждайте, что лично он или его бизнес получит максимум пользы от продукта.
Укажите число пользователей, которые успешно пользуются вашим продуктом, какое место вы занимаете в рейтинге аналогичных сервисов или количество заключенных сделок – подобные вещи заинтересуют и вызовут доверие читателя.
Любой вариант возврата денег или тестового периода помогает убедить покупателя в минимуме рисков для него. Потенциальный клиент испытывает меньше дискомфорта и сомнений, если ему внятно сообщить о гибких условиях.
Как написать призыв к действию
Чтобы написать призыв CTA, придерживайтесь правил:
Готовые формулы call-to-action
Используйте формулы для призыва:
Как лучше оформить призыв к действию
От оформления зависит успешность и функциональность CTA. Размещение CTA сверху — не единственный правильный вариант. Целесообразно размещать и снизу, в зависимости от сложности посадочной страницы.
Видео
Видео оживляет призыв и захватывает внимание пользователей. Отлично работают видеоотзывы довольных клиентов, комментарии экспертов, репортажи о вашем бизнесе.
Графические элементы
Используйте кнопки или рамки для текста – графическое оформление работает эффективнее текста. Пользователь может не заметить его, тогда как кнопка с большей вероятностью привлечет внимание. Указатели на call to action помогают сориентироваться и быстро увидеть нужную кнопку или предложение.
Цвета
Используйте для call to action цвет, который будет выделяться на общем фоне вашего сайта, при этом не нарушая общую концепцию дизайна. Есть распространённое правило BOB – big orange button. При прочих равных, именно такая кнопка больше всего способствует привлечению внимания и совершению покупок или подписок. Впрочем, это не универсальное правило – все случаи уникальны. Яркие агрессивные цвета приводят к конверсиям чаще, но исключение составляют случаи, когда использование таких цветов противоречит оформлению страницы. В целом, наиболее приемлемым вариантом всегда является a/b-тестирование, с помощью которого вы можете измерить реальную эффективность того или иного элемента.
Величина
CTA не должен ос таться незамеченным. Предпочтительная высота кнопки (для мобильного устройства) находится в диапазоне от 42 до 72 пикселей. Оптимальный вариант – 60 пикселей.
Форма
Призыв оформляют в виде ссылки, баннера и кнопок. Кнопка почти на 30% эффективнее, чем ссылка, благодаря форме и подаче. Используют прямоугольные, квадратные, круглые кнопки — главное, чтобы они отлично вписывались в дизайн сайта и не терялись среди остального контента.
Интерактивность
Применяют нестандартные подходы и инструменты: подсказки, смена цвета по оверлею, изменение размера шрифта, эффект тени и вдавливания.
Взаимосвязь с другими CTA-кнопками
При размещении нескольких кнопок на странице следует учитывать их взаимовлияние друг на друга. Кнопки с одинаковыми предложениями снижают общую конверсию. Оптимально использовать три CTA и одну из них обязательно размещать на главной странице сайта. Не забудьте расставить приоритетность кнопок, подчеркивая важность элемента при помощи цвета и размера.
Повторение
Благодаря повторению мы расширяем круг заинтересованных пользователей, напоминаем о цели их присутствия на сайте. Размещайте кнопку в начале и конце текста с двумя разными формулировками.
Где лучше размещать call to action
Убедитесь что ваш призыв к действию всегда находится в зоне видимости. Представьте себя на месте пользователя. Он может принять решение в любой момент и необходимо, чтобы СТА всегда был на виду. Тем не менее, речь не идёт о том, что призыв обязательно должен быть на первом экране или в шапке – напротив, ряд тестов доказывают, что реальные клиенты склонны просматривать больше контента и наверняка окажутся ниже так называемой «линии сгиба» (нижняя граница первого экрана). Именно там, увидев CTA, они вероятнее воспользуются им.
CTA на домашней странице/лендинге
Кнопки call to action на лендингах должны подталкивать пользователей к знакомству с сайтом. Сделайте их большими и броскими с контрастным цветом, конкретными и без сложных предложений, например:
CTA на текстовых страницах
При размещении кнопок на текстовых страницах соблюдайте следующие правила:
CTA в электронной рассылке
Призыв к действию — незаменимый элемент всех рассылок. При создании кнопки СТА в рассылках учитывают следующее:
Примеры призывов в электронной рассылке:
Всплывающие СТА
Динамичные и интерактивные элементы, если их использовать умеренно, привлекают внимание и увеличивают конверсии. Окно pop-up может пригодиться для подписки на рассылку, регистрации на сайте и других действий.
Пример призыва к действию: эффективный CTA
Рассмотрим в качестве примера удачного призыва к действию сайт CMS WordPress – в данном случае продуктом является онлайн-конструктор, с помощью которого пользователи могут прямо в браузере управлять всеми настройками своего сайта, редактировать и публиковать его.
Во-первых, ясно видно, что структура сайта предельно проста и лаконична. Никаких отвлекающих элементов. Минимум блоков – вместо сложной схемы bootstrap один резиновый контейнер, в котором призыв к действию растягивается на всю ширину страницы. Один главный заголовок, одна фраза, одна строка. Далее располагается небольшое ценностное предложение, кнопка для начала работы и ссылка на описание тарифных планов.
Все элементы располагаются выше «линии сгиба». Мы уже говорили про некоторые противоречивые стороны такого подхода, но в данном случае логично предположить, что тесты показали оправданность решения. Безотносительно того, в любом случае удобно без лишнего скроллинга увидеть ожидаемые элементы управления на первом экране и немедленно приступить к обкатке продукта.
Призыв к действию и кнопка контрастируют с фоном сайта и чётко выделяются на нём. Пользователь моментально обращает внимание на них.
Как фраза, так и надпись на кнопке сокращены до минимума – так нам дают сосредоточиться непосредственно на ценностном предложении без необходимости отвлекаться на второстепенные ненужные мелочи.
Из контекста понятно, что продукт предполагает несколько оплачиваемых тарифных планов. Почему же нам так просто дают приступить к работе? Мы оказались юбилейными посетителями и для нас предусмотрен подарок в виде бесплатного использования сервиса? Часть правды здесь имеется. На самом деле помимо платных тарифов у продвинутых сервисов есть пробные версии, предоставляемые бесплатно.
Владельцу бизнеса важно продемонстрировать нам процесс, побудить потенциальных клиентов к собственноручному тестированию возможностей продукта. Именно поэтому платные тарифы на некоторое время остаются за бортом. Их можно анализировать позже, используя все возможности сквозной аналитики.
Сквозная аналитика
Их наличие подразумевается, но в текущий момент необходимо, чтобы мы ознакомились с преимуществами продукта, привыкли к его особенностям и были готовы к тому, чтобы приобрести его расширенную версию для использования на постоянной основе. Мы всегда можем просмотреть таблицу с описанием платных версий, но в данный момент это не принципиально.
Как повысить эффективность CTA
В информационном пространстве существует много техник по быстрому улучшению эффективности и качества вашего CTA. Но не все знают в чем заключается их суть.
Как анализировать эффективность CTA
Каждый призыв к действию рассчитан на конкретный результат, примерами которого могут служить пункты из раздела выше.
Соответственно, чем выше показатель вовлечённости пользователей, конверсии в посетителей, совершивших действие, тем эффективнее призыв. Выделить эффект CTA позволит A/B-тестирование. Оцените разницу в эффективности нескольких идентичных страниц, отличающихся призывом к действию и оставьте самый лучший.
Место расположения CTA
Расположение CTA — ключевой фактор призыва к действию. Вот несколько рекомендаций:
Тепловая карта
Heat Maps или тепловые карты — это схема, где обозначаются движения мышки, место клика, диапазон осуществления скролла, фокусировка глаз пользователя (Mouse Movement, Click Tracking, Scroll Tracking, Eye Tracking). Благодаря картам можно улучшить кликабельность, т.к. они помогают понять вкусы и предпочтения клиента.
Карта скроллинга
Карты скроллинга дают представление о количестве времени, которое пользователь потратил на просмотр страницы. Самые популярные сервисы: Яндекс Метрика, Crazy Egg, Hotjar, Clicktale и Decibel Insight. В них задают диапазон посетителей и страницы, по которым нужно собрать статистические данные.
На какие ссылки чаще нажимают пользователи
Есть два типа ссылок:
Для того чтобы ссылка привлекала, нужно:
Записи сессий пользователей
Просмотр записей сессий пользователя доступен в Crazy Egg, Yandex WebVisor, Mouseflow, SessionCam, Inspectlet, а также Mixpanel или Google Analytics. Эти сервисы подходят для отслеживания сессий пользователей исключительно на одностраничных сайтах.
Работа сервисов заключается в записи положения курсора и текущего положения бегунка полосы. У большинства записывающих программ возникает проблема с тем, что не все сессии фиксируются.
Запускайте А/В тесты
Чтобы проверить, какой из вариантов СТА получает положительный отклик у посетителей, проводите A/B тестирование. Для этого создайте два варианта письма: А (например, с фиолетовой кнопкой) и В (с красной кнопкой). Затем один вариант отправьте 20% адресатам и второй вариант другим 20%. Анализ переходов на сайты определит лучший СТА, который можно будет отправить остальным 60% базы.
Почему CTA не работает
CTA может не приносить результатов по многим причинам. Невнятный посыл, неудачное расположение, плохо акцентированное внимание на элементе. Составьте чек-лист на основе критериев из этой статьи и удостоверьтесь, что ваш CTA соответствует всем из них без исключения.
Заключение
Положим, вы обеспечили клиенту лёгкий и дружелюбный путь от первого контакта до покупки – привлекли его доходчивой и яркой рекламной кампанией, грамотно применили call to action, не утруждали его раскрытием лишней информации, расположили рабочие элементы регистрации под рукой. Что следует за этим? Всё зависит только от вас. Необходимо спланировать весь процесс движения клиента не только до покупки, подписки или иного действия, но и предоставить сопровождение использования продукта, чтобы благодарный покупатель или подписчик не раз воспользовался вашими услугами.
СTА-элементы, которые привлекут в 2 раза больше клиентов
CTA-элементы (Сall To Action) – это призывающие к действию элементы на целевой странице. Многие до сих пор недооценивают влияние на конверсию данных элементов интерфейса. В этой статье мы расскажем, что нужно для создания кнопки призыва к действию (CTA Button), которая на 100% привлечет внимание посетителей и сможет сильно увеличить генерацию лидов и коэффициент конверсии.
Из этой статьи вы узнаете:
Что такое CTA-элементы
Задача CTA-элемента заключается в том, чтобы побудить посетителя страницы совершить действие, ожидаемое разработчиком, – регистрацию, загрузку чего-либо, покупку, подписку и т.д. Такое действие ведет к конверсии, что в свою очередь повышает продажи и продвижение своего товара.
Наиболее распространенный CTA-элемент – интерактивная кнопка, запускающая какой-либо процесс (регистрации, скачивания, покупки и т.п.). Бывает, что такая кнопка выполняет переадресацию пользователя в другой раздел сайта, например, в раздел с дополнительной информацией. Обычно такие кнопки маркируют надписями: «Узнать сейчас», «Получить информацию» и подобными.
CTA-кнопки состоят из пары элементов – дизайна и текста. Оба они сказываются на конверсии, но у каждого из них своя роль.
Самый неудачный дизайн CTA-элемента – побуждение вроде «Позвоните нам». Такой вид строго недопустим. Гораздо лучше оформить CTA-кнопку в виде интересного предложения для пользователя. Это может быть подписка на полезную рассылку либо кнопка для скачивания нужного ПО или документа, книги, учебника.
CTA-элементы предполагают возможность постоянного экспериментирования в целях роста их кликабельности. Изменять можно не только форму CTA-элемента, но и его дизайн или месторасположение на странице. Через определенное время станет ясно, что не работает, а что успешно собирает переходы.
Рекомендуемые статьи по данной теме:
Какие цели преследуют CTA-элементы
CTA-элементы имеют самые разнообразные функции. Собственно, призыв к действию может иметь довольно широкий спектр значений. Главное, чтобы пользователь нажал CTA-кнопку, совершил действие.
При создании CTA-элемента нужно принимать во внимание как действие, к которому он призывает, так и целевую аудиторию, и тип сайта. Ниже мы расскажем про самые распространенные типы CTA-кнопок.
1. Добавить в корзину
В интернет-магазинах используют разнообразные CTA-элементы, и самыми распространенными являются кнопки «Добавить в корзину». Располагаются эти CTA-элементы на странице продаваемого товара и служат призывом его купить. Оформляются CTA-кнопки этого типа иконкой корзины или карточки с небольшим призывающим текстом «Добавить» или «Купить».
Данный тип CTA-кнопки схож с предыдущим, так как позволяет завладеть желаемым предметом. Текст этого CTA-элемента, как правило, более информативен, чем предыдущего. Например, в случае со скачиванием программы дизайнеры могут нанести на кнопку информацию о ее версии и размере.
Некоторые сайты в целях увеличения заинтересованности предлагают получить потенциальным клиентам пробный доступ к информации (пробный аккаунт) или пробную версию продукта. Дизайнеры таких CTA-кнопок могут как подробно снабдить элемент необходимой информацией, так и оформить его более сдержанно.
Эти CTA-элементы обычно располагают в конце тизерного блока информации. Дизайн таких кнопок прост, а привлечение внимания осуществляется за счет большого размера.
Как правило, CTA-элементы, связанные с регистрацией, бывают двух видов. Первый переводит непосредственно в форму регистрации, второй несет также функции CTA-элемента из первого пункта, выводя форму оплаты аккаунта для дальнейшего использования.
Довольно часто на различных сайтах встречаются поля, отмеченные значком лупы. Эти поисковые поля также относятся к CTA-элементам страницы.
Это не полный перечень CTA-кнопок, однако большая их часть функционально похожа на приведенные выше. Принципы, описанные для перечисленных CTA-элементов, вполне подходят и к другим призывам к действию, примеры которых мы не упомянули.
Как выглядят элементы call to action – примеры
Есть ряд способов создания CTA-элементов, при помощи которых можно стопроцентно привлечь внимание посетителя и побудить его совершить предложенное действие. Далее мы рассмотрим такие методы разработки и используем популярные интернет-проекты в качестве примера.
При разработке CTA-элемента важно учесть, что он должен находиться в гармонии с основным дизайном целевой страницы и сайта в целом. Хотя CTA-элемент должен выделяться на фоне прочих графических элементов, он обязан оставаться деталью общей композиции, не выбиваясь из нее.
Кнопка, которая предоставляет пользователю максимум информации о том, что он получит, нажав на нее
Примерами качественного (возможно, и лучшего) исполнения CTA-элементов могут служить сайты Skype и Mozilla. Если убрать со страницы всю текстовую и графическую информацию, посетителю не составило бы труда узнать все необходимое, только рассмотрев кнопку.
Схожими параметрами обладают CTA-элементы сайта Mozilla, но можно выделить несколько отличий:
Кнопка общего характера
Если ваша целевая страница предлагает скачать какое-либо программное обеспечение, то CTA-элемент не должен содержать только призыв общего характера (например, «загрузить» или «скачать»). Необходимо указать информацию о разработчике данного ПО, так как это повысит уровень доверия со стороны посетителей и уменьшит количество отказов на странице.
Рассмотрим страницы загрузок наиболее известных интернет-продуктов: браузера IE от Microsoft и приложения iTunes компании Apple.
Похожая ситуация с CTA-элементом на сайте Apple
Так как ПО является коммерческим, то рядом с CTA-элементом размещены ссылки на «Заявление о конфиденциальности» и форма для согласия с лицензионным соглашением.
Вас также может заинтересовать: Виды интернет-маркетинга
CTA-элемент, который содержит призыв, подчеркивающий выгоду предложения
В этом разделе приведем в пример сайты Mail.ru и Frendi.ru (бывший Группон).
Важно отметить, что страница имеет вспомогательный элемент «Бесплатные звонки», относящийся к призыву на кнопке. Его оформление приковывает к себе взгляд, за счет чего пользователь будет искать, как получить такое выгодное предложение. Эффективность этого CTA-элемента будет на высоте, ведь данная кнопка является логическим завершением посещения страницы.
Сайт Frendi пользуется другим приемом:
Отличное сочетание текста и кнопки в CTA-элементе, которые хорошо привлекают к себе внимание и побуждают совершить действие.
Кнопка призыва к действию расположена на верхней части страницы
Для иллюстрации этого раздела возьмем сайты Ozon и Pinterest. Оформления на их целевых страницах CTA-элементов во многом схожи.
Обратите внимание на цветовое оформление страницы «Озона», которое выполнено довольно «скромно», без изобилия цветов. Такой «психологический» прием сделан сознательно – пользователи видят в этом определенную надежность и отсутствие стремления разработчика привлечь внимание яркой мишурой. Изображения, показывающие работу сервисов, служат для простоты восприятия информации.
Вас также может заинтересовать: Inbound маркетинг
Как создать кнопку с призывом к действию
Шаг 1. Выбираем место, где будет располагаться кнопка.
Каждый владелец сайта хочет, чтобы CTA-элементы хорошо выделялись на общем фоне и могли быстро привлекать внимание посетителя. Для получения этого эффекта нужно использовать негативное пространство вокруг кнопок. Между контентом страницы и CTA-элементом должен быть «воздух». Иногда это правило необязательно к исполнению, как в случае с кнопками «Добавить в корзину», но обычно подобный прием добавляет эффективности.
При этом нужно помнить о балансе. Негативное пространство должно быть пропорционально размеру кнопок, если наша цель – объединить CTA-элемент и контент в единую композицию. Возможно, потребуются несколько попыток, чтобы достичь приемлемого результата.
Шаг 2. Определяемся с размером и цветом.
Размер CTA-элемента – важный параметр. Если кнопка будет слишком маленькой, она потеряется среди прочей информации на странице и не будет выполнять свои функции. Если размер CTA-элемента слишком велик, он затмит прочий контент на странице. Идеально, когда кнопка заметна на фоне остальных элементов, но при этом не подавляет их.
Выбор цвета зависит от размера кнопки. Если CTA-элемент планируется большим, нужно выбрать цвет, не сильно отличающийся от общей гаммы, но контрастирующий с фоном. Для кнопки маленького размера хорошо подойдет яркий цвет, который будет вступать в контраст с основной гаммой. Но и в этом случае цвет CTA-элемента не должен слишком выбиваться из дизайна страницы, сочетаясь с прочими ее элементами.
Шаг 3. Придумываем текст.
Эффективность всего CTA-элемента может зависеть от формулировки текста на нём. Например, фраза «Купить сейчас» может давить на пользователя, быть навязчивой. Более нейтральное «Добавить в корзину» лишено таких негативных коннотаций. Также стоит обратить внимание на размер текста. Более короткая надпись «Пробная версия» будет лучше длинной «Попробовать услугу бесплатно».
Текст на CTA-элементах не должен быть сложным и запутанным. Посетитель страницы с первого взгляда должен понять, что произойдет при нажатии на кнопку. Если же текст может быть понят двояко, это негативно скажется на конверсии. Шрифт на CTA-элементе лучше применять большой, однако он должен гармонично соотноситься с размерами кнопки и легко читаться.
Шаг 4. Придаем предложению сочности.
Наша задача – побудить посетителя целевой страницы сделать желаемое нами действие как можно быстрее. Не нужно обманывать потенциального клиента, однако, чем дольше он будет думать и сравнивать, тем выше вероятность получить негативный ответ.
Нужно сделать так, чтобы посетитель почувствовал необходимость в действии в этот же момент. Он должен нажать CTA кнопку сразу, экспромтом. Конечно, так должны работать не все CTA-элементы, особенно, если продается дорогой товар, но на бесплатные или дешевые предложения посетитель должен реагировать не думая.
Шаг 5. Добавляем дополнительную информацию.
В случае необходимости пользователь должен получить дополнительную информацию о последствиях нажатия CTA-элемента. Особенно это касается кнопок «Пробная версия» и «Скачать». В этих случаях нужно указывать размер файла, время действия пробного периода, версию скачиваемой программы.
Размещая такую информацию, не нужно забывать, что в центре внимания должен находиться призыв к действию. Обычно для этого CTA-текст делают чуть больше, а текст дополнительной информации – меньше.
Шаг 6. Расставляем приоритеты.
Если CTA-элементов на странице больше одного, необходимо расставить между ними приоритеты. Важность элемента можно выделить по-разному, однако чаще всего применяют выделение цветом и размером.
Более контрастные оттенки относительно основного цвета повышают важность CTA-элемента, менее контрастные – понижают. Аналогично и с размером – для более важных кнопок больший размер, для менее важных – меньший.
Шаг 7. Добавляем изображение.
Если оформить CTA-элемент иконкой, можно увеличить конверсию. Например, уместно изобразить иконку корзины на кнопке «Купить» или иконку стрелочки на кнопке «Скачать». Еще лучше использовать уникальные иконки, но в таком случае необходимо полное соответствие назначения CTA-элемента изображению. Пользователь не должен быть введен в заблуждение.
5 признаков успешной кнопки call to action на лендинге
CTA-элемент – это действительно кнопка
Несмотря на очевидность мысли, надо сказать, что CTA-кнопка должна быть кнопкой, то есть это не текст, не ссылка, не анимация или еще что-либо. В этом инструменте достаточно мощности и эффективности, чтобы заменять кнопку чем-то еще.
В вопросе оптимизации конверсии не нужно давать волю маркетинговой фантазии и гнаться за ролью трендсеттера. Мышление большинства людей устроено таким образом, что быстрее всего реагирует на привычные вещи. Шаблоны мышления нейропсихологи называют еще поведенческими паттернами.
Конечно, мышление пластично, оно может адаптироваться и развиваться, но в целом среднестатистический человек – раб привычного. Случись так, что ваш утренний путь от кровати до ванны вдруг изменится, такие перемены застанут вас врасплох и вам будет трудно сориентироваться.
Аналогичная ситуация с CTA-кнопками. Пользователи имеют свой привычный им опыт взаимодействия с онлайн-сервисами, который говорит им, что форма CTA-элемента – кнопка. И когда посетитель сайта видит кнопку, он сразу понимает, что ему нужно сделать.
Можно выделить ряд признаков, которыми обладают хорошие CTA-кнопки:
Наиболее распространенная форма CTA-элементов – прямоугольник, но это не является обязательным условием. Можно добавлять тень, округлять и срезать края и т.д.
Текст на кнопке побуждает к действию
Пример СТА-элемента в онлайн-журнале «Генеральный Директор»
Несмотря на важность дизайна CTA-элемента, гораздо большее значение имеет текст, который на нем написан. Здесь также не стоит изобретать велосипед. Самые эффективные CTA-элементы не поражают воображение своей сложностью. Слово «Получить» в различных вариациях будет наиболее действенным.
Не стоит делать фразу слишком длинной. Если в ней содержится более 10-15 слов, элемент будет перегружен текстом. Залог успеха – простые фразы. При этом можно составить и два предложения, если они будут короткими. Например, «Разместите вакансию. Бесплатно!».
CTA-кнопка расположена логично
Пример СТА-элемента на сайте патентного бюро «Царская привилегия»
Как говорит нам закон Фиттса, расположение CTA-кнопки должно быть на траектории взгляда посетителя страницы. Нужно немного спрогнозировать поведение пользователя и расположить CTA-элемент там, где посетитель захочет пройти дальше.
Эта идея не несет в себе никакой сложности, однако многими маркетологами почему-то игнорируется. Структура успешного лендинга выглядит следующим образом:
Таким образом, напрашивается очевидное решение – расположить CTA-кнопку в конце, но выше линии сгиба. Это работает и в случае, если лендинг имеет много текста, так как CTA-кнопка все равно должна находиться в самом низу.
CTA-кнопка связана с предыдущим действием
Пример СТА-элементов на сайте типографии «СловоДело»
Побуждение к действию у CTA-элементов происходит еще из-за того, что они располагаются на траектории взгляда и на пути действий пользователя.
Многие лендинги стараются использовать эффект параллакса. Части страницы выполняют определенные действия, и, пролистывая страницу вниз, посетитель встречается с CTA-элементами. Таким образом, встреча с побуждающими элементами происходит после прокрутки, что и является примером связанности CTA-элементов с предыдущим действием посетителя на странице.
CTA-кнопки не конкурируют с элементами интерфейса
Как говорилось выше, вокруг CTA-элемента должно быть определенное свободное пространство. Кнопка не должна вступать в «соперничество» с прочими элементами страницы.
Каким должен быть дизайн кнопки call to action
Сразу обратимся к примеру крупного сайта онлайн-торговли, который продает расписанный вручную фарфор. Изменив форму и цвет CTA-элемента, маркетологи смогли повысить не только рейтинг кликабельности, но и продажи на 35,81%.
Такой пример хорошо показывает, как можно увеличить конверсию, изменяя дизайн CTA-элементов.
Современный взгляд на теорию оптимизации конверсии и дизайна не считает возможным размещать квадратные и плоские кнопки. Если на вашем сайте таких CTA-элементов существенное количество, рекомендуем заняться их изменением.
CTA-кнопки могут быть самых разнообразных размеров, цветов и форм. Нельзя выявить только одно – универсальный принцип, использование которого будет давать гарантированный результат в самых различных ситуациях.
Многие псевдоспециалисты любят делать заявления в духе «Не используйте красный в CTA-элементах, ведь это запрещающий цвет» или «Лучшее решение – сделать кнопку зеленой!». Такие обобщения могут выглядеть довольно авторитетно, но их проблема в том, что они слабо соотносятся с реальностью.
Практика показывает, что при реализации одного и того же решения в различных обстоятельствах результат сильно меняется. На него влияет и общий дизайн страницы, и еще ворох других, самых разных обстоятельств, условий и переменных.
Выше мы привели пример, где кнопка зеленого цвета показала себя лучше, чем кнопка синего, но это не повод делать заявления об абсолютном превосходстве первых над вторыми. Существует множество результатов сплит-тестирований, в которых синие или красные кнопки давали лучшую конверсию, чем зеленые.
Ниже приведем несколько советов, которые помогут сделать повышающий продажи CTA-элемент.
Главное правило при оптимизации CTA-элемента – сделать его контрастным. Кнопка должна так находиться на лендинге, чтобы посетитель сразу мог ее увидеть. Если цветовая гамма вашей страницы находится в зеленых тонах, то CTA-элемент не сможет нормально функционировать и увеличивать конверсию. Причина будет в том, что посетитель не сможет быстро обнаружить кнопку, сливающуюся с общим фоном.
Для того чтобы узнать работающий «рецепт» на конкретной странице, необходимо провести сплит-тест.
Если вы будете руководствоваться здравым смыслом и примените контрастные цвета, это будет наилучшим решением. В этом вам поможет так называемый «тест на косоглазие». Вам нужно отойти от монитора на пару шагов, скосить глаза и попробовать увидеть ваш CTA-элемент.
Одна из общих рекомендаций специалистов заключается в совете выбрать оранжевый или зеленый цвет для CTA-элемента. Он основан на хороших результатах тестирования этих цветов. Не стоит здесь искать какие-то глубокие психологические корни, так как оранжевый и зеленый цвета просто хорошо заметны на большинстве целевых страниц.
На кликабельность CTA-элемента непосредственное влияние оказывают его визуальные эффекты. Однако нужно соблюдать большую осторожность, применяя их. Даже небольшой эффект может сильно повлиять на результат, и не всегда это влияние бывает положительным.
Возьмем в качестве примера один сайт недвижимости. Его CTA-элемент изначально был коричневого цвета. После изменения на оранжевый и добавления в элемент иконки зеленой стрелки конверсия значительно выросла. Однако дизайнер был против нового CTA-элемента, мотивируя это тем, что сочетание оранжевого и зеленого на кнопке выглядит «уродливо».
Специалист по оптимизации возражал, что зеленая стрелка на кнопке повышает заметность элемента, что выливается в большую активность пользователей и, как следствие, увеличение конверсии.
Этот спор был разрешен при помощи А/Б-тестирования, которое признало неправоту дизайнера. После удаления стрелки с кнопки конверсия просела на 12,3%.
Есть и другой пример. Разработчики одного сайта внесли предложение изменить на зеленой кнопке цвет надписи с черного на желтый. По задумке такое изменение должно было увеличить заметность кнопки, следовательно, поднять рейтинг кликабельности. Однако прогнозам не суждено было сбыться, так как кликабельность после применения этих изменений упала на 18,01%.
В этом примере увеличение контраста привело к негативным последствиям, а менее яркое решение справлялось гораздо лучше. В целом, если говорить о большинстве случаев, то более простые кнопки (которые пользователь воспринимает как раз как «кнопки») с понятными текстами показывают лучшие результаты, чем «творческие» варианты.
Довольно распространенная ошибка дизайнеров заключается в том, что они создают CTA-элемент, который отлично гармонирует с общим дизайном страницы, но при этом настолько мал, что не может оказать на конверсию положительного влияния. CTA-элемент должен быть достаточно большим и выделяться как основной интерактивный элемент лендинга. Однако в данном случае «больше» – не синоним «лучше».
Если размер кнопки будет слишком большим, такой элемент будет привлекать слишком много внимания, и пользователи сочтут его за форму психологической атаки. Очевидно, что в такой ситуации конверсия расти никак не сможет. Выбирая размер CTA-элемента, не отказывайтесь от тестов, так как они пойдут только на пользу.
Порядка 99% посетителей страницы читают в лендинге только заголовок самой страницы и текст на CTA-элементе. Следовательно, раз текст на кнопке входит в этот немногочисленный список читаемых строк, он должен быть составлен очень грамотно. Важно помнить, что тут мелочей не бывает.
Нужна конкретность, так как расплывчатые фразы «Послать», «Отправить» не найдут понимания у посетителя страницы. Для более четкого определения используйте фразы «Отправить заявку», «Заказать очередь», «Загрузить книгу», «Заказать обратный звонок» и т.д.
4 рекомендации, как сделать призыв к действию (фразы) эффектным
1. Не используйте раздражающие слова и выражения.
У профессиональных маркетологов такие слова имеют следующее определение: «выражения, которые люди ассоциируют с нелюбимой работой, потерями или принятием обязательств». Таким образом, в список попало то, что делать приходится весьма неохотно.
Задача специалиста по маркетингу заключается в том, чтобы потенциальный клиент проявил интерес к его текстам и материалам. Тогда внимание клиента будет захвачено и его можно будет увлечь предложением. Следовательно, очень важно выбирать формулировки своих CTA-элементов, ведь одной неудачной фразой можно разрушить все старания.
Посетитель скорее выберет тот ресурс, который не злоупотребляет фрикционными словами, где пользователь может чувствовать себя комфортно. Важно помнить, что более простой и ясный процесс конверсии имеет большую вероятность совершения действия посетителем (т.е. чем проще конверсионное действие, тем скорее оно произойдет).
Ниже будут примеры таких слов (список может быть дополнен):
2. Не забывайте делать акцент на выгодах.
После вашего предложения посетитель становится перед альтернативой – согласиться с предложением или отказаться. Чтобы сделать правильный выбор, он будет рассматривать ваше предложение с точки зрения полезности для себя, необходимости и ожидаемых затрат. Этот выбор не будет простым, и чтобы склонить потенциального клиента к положительному для вас выбору, обратите его внимание на преимущества и выгоду от вашего предложения.
Это можно сделать, указав выгоду в CTA-тексте. Таким образом, будет очевидной связь между действием (нажать кнопку) и получением выгоды (указанной в тексте), что положительно скажется на конверсии.
Мы рекомендуем завершать текст на CTA-элементе фразой «Я хочу. »:
При таком подходе призыв будет направлен на нужды посетителя страницы. Если ранее мы избавились от фрикционных слов, то теперь их нужно заменить более подходящими, которые будут усиливать мотивацию
Не нужно бояться узконаправленных призывов к действию. Более того, чем теснее будет выражена связь между вашим предложением и действием, тем ощутимее будет желание у пользователя получить выгоду от вашего оффера.
Экспериментируйте с новыми глаголами. Перед вами стоит задача в минимизации негатива от целевого действия и переключении внимания клиента на возможных выгодах. Если для этого вам нужны новые слова и выражения, не стесняйте себя.
3. Акцентируйтесь на клиенте.
Для более персонифицированного обращения к посетителям своего интернет-ресурса не нужно знать их имена. Таким образом, можно заменить призывы «Посмотреть чек-лист» и «Узнать больше» на «Посмотреть мой чек-лист» и «Расскажите мне больше».
Маркетинговое агентство IMPAC в 2014 году решило оптимизировать страницу своей самой успешной электронной книги. Длительное время наблюдалось отсутствие динамики конверсии, что побудило маркетологов пересмотреть подход. В результате долгих рассуждений было решено сменить на CTA-элементе надпись со «Скачать» на «Покажите мне, как привлечь больше покупателей». Такой прием увеличил конверсию на невероятные 78,5%.
Самое значительное отличие нового варианта от прежнего в демонстрации выгоды. Это не может оставить посетителя равнодушным и пробуждает в нем желание завладеть книгой и узнать все тонкости и нюансы эффективного маркетинга. В конечном счете посетители отнеслись к такому предложению не как к маркетинговому ходу, а как к дружественному жесту.
4. Прибегайте к визуальным подсказкам.
В этом разделе мы поговорим о графической составляющей CTA-элемента. Внешний вид кнопки призыва к действию сильно влияет на реакцию посетителя и его мотивацию к совершению ожидаемого действия.
Правила маркетинга говорят, что графическая часть CTA-элемента должна быть запоминающейся и бросаться в глаза пользователю. Лучше всего придумать что-то такое, что выйдет за границы привычного. Например, разместить яркий квадрат CTA-элемента на однотонной целевой странице или же среди элементов, выполненных в виде круга, разместить квадратную кнопку с призывом к действию.
Придумать эффективный CTA-элемент не очень сложно. Однако стоит понимать, что приемы интернет-маркетинга и конверсионной оптимизации могут помочь только до определенного момента. Главными помощниками будут логика, здравый смысл и обязательный сплит-тест. Применяя все это, вы наверняка сделаете отличный CTA-элемент.
А начать внедрение мы рекомендуем с аудита сайта, ведь при плохо работающем ресурсе не поможет даже самый суперэффективный СТА-элемент.
