Кол ту экшн в верху страницы. Призыв к действию (CTA) - примеры, взятые из практики. Что вам делать сейчас
Испытывали ли вы трудность с тем, чтобы убедить посетителей вашего сайта совершить необходимое вам действие? Возможно, вы бы хотели, чтобы они оформили подписку на вашу новостную рассылку или оставили запрос на демо-версию продукта, но отчего-то все ваши старания не приводили к желаемому результату.
Причин, объясняющих такое поведение посетителей, можно найти несколько и даже написать об этом целую книгу, но в этой статье будет рассмотрена, пожалуй, одна из самых распространенных: неэффективные призывы к действию.
Но вместо «голой» теории вашему вниманию будут предложены 15 вдохновляющих и эффективных призывов к действию, которые на своем примере покажут, как следует генерировать лиды.
Напомним, что призыв к действию (CTA, call-to-action) — это кнопка или ссылка, размещенная на странице, предназначение которой — указать целевому посетителю, какое действие ему необходимо совершить далее на следующем этапе взаимодействия с ресурсом.
Во входящем маркетинге CTA-кнопки, как правило, ведут на посадочные страницы, где пользователь может заполнить веб-форму и стать лидом.
Как использовать CTA в лидогенерации
Вы можете разместить кнопки призыва к действию где угодно на вашем сайте, но важно сделать это правильно.
Главное, чтобы призыв по-настоящему захватывал внимание посетителей и был настолько убедительным, что мало кто мог бы устоять и не кликнуть по заветной кнопке.
Сделайте вашим посетителям предложение, от которого они будут не в силах отказаться. Оно должно быть не только визуально привлекательным, но и достаточно убедительным по смыслу.
Чтобы призывы справлялись с возложенной на них задачей, вам не следует забывать и о таком факторе, как (buyer"s journey — тот маршрут, которым следует потенциальный клиент до совершения сделки).
Если призыв, который вы планируете добавить на страницу, не удовлетворяет потребность на определенном этапе путешествия, то никакой магии не случится и человек не совершит ожидаемое от него действие.
Чтобы ваши призывы были эффективными в деле генерации лидов, следуете следующим проверенным практикой принципам:
1. Призывы должны ориентировать на действие.
2. Текст должен быть убедительным.
3. Призыв должен быть визуально привлекательным.
4. Используйте фактор срочности (ограничьте время принятия решения).
5. CTA должен быть хорошо заметен на странице.
Предлагаем вам ознакомиться с 15 образцовыми призывами к действию, которые обязательно вдохновят вас на создание собственных шедевров.
Текст призыва сервиса Netflix мало назвать просто убедительным. Вам не только предлагают месяц бесплатного просмотра фильмов и сериалов, но и дают возможность пользоваться сервисом на любых устройствах и отменить подписку, когда вам захочется, если вы вдруг не будете удовлетворены качеством услуг.
Заголовок: «40 часов PPC-анализа за 60 секунд. Быстро. Безопасно. Бесплатно».
CTA: «Получи свой бесплатный отчет сегодня»
WordStream использует контрастные цвета, чтобы сделать свой призыв к действию на светло-голубом фоне еще более заметным. Они дважды повторяют, что их продукт бесплатен, чтобы пробудить в вас желание опробовать их сервис.
Заголовок: «Комплексное решение для аналитики сайта и сбора обратной связи. Hotjar — это новый и простой способ обрести истинное понимание посетителей ваших десктопных и мобильных сайтов. Откройте лучшие возможности для роста уже сегодня. Кредитная карта не требуется».
Надпись на CTA: «Попробуй бесплатно».
Главная страница сервиса Hotjar отличается тем, что на ней расположены два одинаковых призыва к действию, ведущие на одну и ту же страницу. Благодаря удачному цветовому решению и расположению кнопок их довольно легко обнаружить даже при беглом просмотре сайта.
Заголовок: «Мощные инструменты, которые прокачают каждый этап вашего процесса продаж».
CTA: «Начни бесплатно».
Хитрость сервиса HubSpot заключается в том, что довольно привлекательное торговое предложение и призыв к действию он расположил на фоне изображения парня-консультанта, чтобы у посетителей мгновенно возникало желание испытать их инструменты для продаж в действии.
Демонстрация релевантных офферу изображений позади CTA помогает людям представить себя использующими продукт и делает клик по кнопке более привлекательным действием.
HubSpot также использует лишенный любых возражений текст на кнопке призыва, делая ее своего рода приглашением к началу использования их продуктом.
Заголовок: «Отправляйте письма, которые ваши покупатели не смогут проигнорировать. Простой в использовании, профессиональный инструмент email-маркетинга и автоматизации для современных быстрорастущих бизнесов».
CTA: «Начни бесплатно»
CTA-кнопка сервиса Campaign Monitor расположена поверх фонового видео и окрашена в яркий цвет, так что ее трудно не заметить. Разместив в углу страницы иконку live-чата, компания дает знать, что помощь находится на расстоянии одного клика, если у вас возникнут какие-либо вопросы или опасения.
Заголовок: «Самый мощный аналитический инструмент, который поможет вам понять поведение покупателей и добиться роста бизнеса».
CTA: «Попробуй Kissmetrics».
Хотите, чтобы ваш призыв был действительно мотивирующим? Добавьте рядом с кнопкой поле для ввода email, чтобы никто из посетителей не покинул страницу, не оставив свой контакт! Пример Kissmetrics в этом плане особенно удачен.
Заголовок: «Музыка для каждого».
CTA: «Используй Spotify бесплатно», «Подключи Spotify-премиум».
Spotify весьма изобретательна в деле проектирования CTA. На странице размещены сразу два призыва, соперничающие друг с другом — один ведет на бесплатный вариант сервиса, а другой — на платный.
Сервис Spotify делает предельно ясным посыл, что их сервис может использоваться платно (это их конечная цель), при этом понимая, что более платежеспособными клиентами становятся те, кто сначала попробует сервис бесплатно. Поэтому оба призыва расположены на одной и той же странице.
Заголовок: «Trello поможет наладить совместную работу и завершить больше задач. Рабочие столы, списки и карты позволят легко организовать и приоритезировать работу над проектами».
CTA: «Подпишись. Это бесплатно».
Сохраняя страницу не перегруженной контентом и используя контрастные цвета, сервис Trello добивается того, что их убедительный текст призыва к действию и сама кнопка не останется незамеченной пользователями. Нет ничего, что могло бы отвлечь вас от совершения следующего действия — оформить подписку.
9. Lyft
Заголовок для пассажиров: «Поездка в считанные минуты». CTA: «Оформи подписку сейчас».
Заголовок для водителей: «Садись за руль». CTA: «Стань водителем с Lyft».
Когда ваша компания предлагает сразу две услуги, как, например, в случае с Lyft, важно добиться того, чтобы офферы и призывы не отвлекали друг от друга. Разные тексты на кнопках («Оформи подписку сейчас» и «Стань водителем с Lyft») указывают посетителям, какое действие им следует совершить далее. Ярко-розовый цвет CTA-кнопки мгновенно привлекает внимание пользователей, делая невозможным не заметить ее.
Заголовок: «Покажи работе, кто здесь главный. Возможность быстро наладить совместную работу благодаря бесплатному доступу к удаленному рабочему столу, неограниченной записи аудио, проведению видеоконференций. Регистрация не требуется».
CTA: «Начать совещание».
Текст на кнопке призыва сервиса Join.Me сообщает, что начать пользоваться сервисом можно в считанные секунды. Нет ничего хуже, чем быть на работе и проводить в ожидании начала совещания несколько часов кряду. Join.Me понимает, как это неудобно, и предлагает решение. Ярко-оранжевый цвет кнопки делает этот призыв CTA еще более эффективным.
11. IKEA
Призывы к действию в формате popup-окон отличаются фантастической результативностью. Обычно это приглашение оформить подписку на рассылку или блог компании, скачать какие-либо материалы. Именно такая ситуация на сайте мебельного гиганта IKEA. Для оформления кнопок выбраны фирменные цвета компании, а сопроводительный текст даст вам понять, что случится после введения вами запрашиваемой информации.
Заголовок: «Мы читаем. Вы узнаете самое главное. theSkimm предлагает более простой способ стать умнее. Попробуем проснуться вместе».
CTA: «Присоединитесь к миллионам других».
В своем всплывающем призыве к действию theSkimm четко обозначает, в чем заключается смысл их предложения. Помимо этого они подкрепляют призыв сильным социальным доказательством, убеждая людей присоединиться к сервису, как это сделали уже миллионы других.
13. COOLS
Заголовок: «Давай. Оформи подписку, чтобы открыть доступ к выгодным предложениям от ведущих ритейлеров одежды».
CTA: «Присоединиться».
В своем призыве к действию COOLS полагается по большей части на визуальные элементы. Живописная фотография стильно одетой пары, целующейся посередине улицы, наряду с предельно выразительным заголовком «GET IT» (Возьми это), без сомнения, привлекут ваше внимание.
Заголовок: «Мы гордимся своими товарами и хотим, чтобы вы обязательно их оценили лично. 10%-ная скидка на первую покупку. Доступна в течение 48 часов».
CTA: «Да, пожалуйста. Пришлите мне купон». «Нет, спасибо. Мне не интересно».
В своей попытке конвертировать посетителей сервис Ugmonk использует , которое выскакивает перед пользователем в тот момент, когда он пытается закрыть страницу. Как правило, это последний шанс компании убедить человека остаться и совершить покупку, поэтому предложение должно быть по-настоящему выгодным. В этом примере Ugmonk дарит потенциальному клиенту 10%-ную скидку на первый заказ, которая, однако, действует в течение определенного промежутка времени, что создает чувство срочности.
Еще одна примечательная сторона этого CTA в том, что он ставит пользователя перед выбором: согласиться с предложением и нажать «Да» или отказаться и выбрать «Нет». Оставляя людям возможность отказаться от предложения, Ugmonk заставляет людей дважды подумать, действительно ли они хотят отказаться от сделки. Очевидно, что сама компания хочет, чтобы вы выбрали первый вариант, намекая на это тем, что цвет текста оффера и кнопки «Да» один и тот же.
Заголовок: «Изучай. Обозревай. Делись с другими. Присоединись к сервису прямо сейчас, чтобы открыть доступ к миллиону обзоров на товары и новостям потребительского рынка».
CTA: «Присоединись сейчас».
Призыв Influenster несколько отличается от всего списка.
При первом посещении сайта в верхнем углу сайта вы заметите только небольшую кнопку с текстом «Join Now» (Присоединись сейчас), но спустя 30 секунд появляется более крупный CTA, из которого ясно, что компания очень хочет, чтобы вы все-таки присоединились к сервису.
Заключение
При разработке призыва к действию все перечисленные компании следовали лучшим техникам и приемам, в силу чего их призывы действительно эффективны и генерируют лиды. Если вы хотите получить такой же результат — вы знаете, что делать.
Ваш верный помощник в завоевании клиента - меткий call to action (призыв к действию). В этой статье собрано 100 действенных примеров.
7 примеров call to action с одним целевым действием
Не перегружайте людей множеством звонких призывов к действию. Избегайте двух call to action рядом, например «напишите нам» и «закажите звонок». Выберите один, а второй разместите несколькими экранами ниже.
- День принадлежит вам. Начните пользоваться Uber. Скачайте приложение .
2. Мгновенный доступ к миллионам песен - от старых фаворитов до последних хитов. Просто нажмите play , чтобы начать слушать все, что вам нравится.
3. У вас есть видение. У нас - способ создать желаемое. Посмотрите , как мы можем вам помочь.
4. Прокачайте ваш маркетинг с помощью функционала GetResponse.
5. Бронируйте уникальное жилье и смотрите на город глазами местных.
6. Добавьте статью в закладки , чтобы сократить время на поиски нужной информации.
7. Узнайте первыми новые стратегии продвижения вашего бизнеса в интернет, удвойте продажи и станьте лидером в нише.
Призыв к действию с лендинга, который мы делали для услуги «Туры в Египет»
10 примеров call to action со словом «бесплатный»
Это слово притягивает новых подписчиков. Оно работает всегда, несмотря на то, что в сети много таких предложений. Или на то, что их количество с каждым днем увеличивается. Бесплатный - значит ни к чему не обязывающий . И это привлекает людей кликать по кнопке.
Примеры сильных call to action:
8. Бесплатный тест-драйв беспроводной мыши для ноутбука в течение 30 дней. Оцените свойства товара до покупки.
9. Достигайте большего ежедневно. Миллионы людей доверяют нам и реализуют свои цели. Начните сейчас - это бесплатно .
10. Поднимите уровень вашего общения с клиентами, проведите вебинар, который невозможно пропустить, на нашей платформе. Настройте отправку приглашений, напоминаний и серий писем для роста конверсии и продаж. Первый месяц - бесплатно.
11. Уроки рисования акварелью в Москве! Запишитесь на первое занятиебесплатно . Все, что вам нужно - это 1 час свободного времени и желание творить.
12. Онлайн-встречи - это просто: простой старт, простота в использовании. Оцените все выгодами нашего сервиса уже сегодня. Начните 14-дневныйбесплатный пробный период .
13. Стартуйте сегодня. Откройте для себя новый подход к ведению заметок. Зарегистрируйтесь бесплатно .
14. Закажите бесплатный анализ вашего сайта и получите перечень SEO-фишек, которые вам срочно нужно внедрить на вашем сайте. До конца акции осталось [время].
15. Это стоит [цена], но сегодня вы можете приобрести его бесплатно . Спешите оформить заказ.
16. Первые 10 покупателей получат личную 60-минутную консультацию со мной бесплатно .
17. Помните все. Лучшие идеи приходят в голову неожиданно. Evernote позволяет сохранять, развивать и делиться идеями на всех устройствах.
Пример УТП для услуги «коронки». В призыве к действию на форме есть слово «б»
В) 10 примеров call to action с одним предложением
Наверное, вы слышали это и не раз: чем больше вариантов выбора имеет человек, тем чаще посетитель ничего не делает. К примеру, вы предлагаете три продукта: статья в блоге, видео на YouTube и платный курс. Как вы думаете, что выберет ваш потенциальный клиент? Скорее всего вариант № 4 - закрыть страницу.
Запомните: 1 страница / письмо / пост - 1 предложение - 1 call to action .
18. Ищете, где остановиться? Снимайте жилье у реальных людей в 25 000 городах и 190 странах.
19. Забронируйте ваше участие по лучшей цене и получите одно из мощнейших выступлений на почту.
20. Дайте нам 3 дня - и мы научим вас, как легко и просто взорвать продажи с помощью email-кампаний, которые вам срочно нужно внедрить в свой бизнес!
21. Узнайте 5 наиболее ценных советов, как подобрать одежду для важного мероприятия: быстро, эффективно и стильно.
22. Внедрите эти тактики и решения, которые помогут вам и вашему бизнесу выделиться среди конкурентов.
23. За 90 минут узнайте пошаговый план, как внедрить эффективный и продающий email-маркетинг в ваш бизнес.
24. Прокачайте ваши навыки копирайтинга и узнайте проверенные стратегии, которые вовлекут и удержат читателя до последней буквы.
25. Узнайте, как повысить посещаемость вашего блога на 130%. Подпишитесь, чтобы получить инструкцию на почту.
26. Отправляйтесь с нами в путешествие. 7 дней приключений, общения, драйва и эмоций, которые навсегда останутся в вашем сердце.
27. Яхтинг для предпринимателей от Yachting Club. Профессиональный отпуск на одной волне.
3 примера call to action, которые выделены с помощью контраста
Кроме цепляющего текста подберите правильную цветовую гамму, чтобы выделить призыв. Ваше предложение должно четко читаться в первые 3-15 секунд. Когда человек просматривает сайты на скорости 200 км/час, именно сочный дизайн заставит его задержаться на странице и оставить контакты.
28. Один из популярных цветов для кнопки - красный. Его сложно не заметить. Но Wunderlist ломает стереотипы. На их странице фон - красный, а кнопка - белая. За счет того, что текст и кнопка одного цвета, призыв к действию хорошо выделяется.
29. Еще один выигрышный вариант - сделать фон белым, а кнопку цветной. Наглядный пример - страница Trello. Зеленая кнопка в центре - магнит для новых посетителей. Особенно в комбинации со словом «бесплатно»:
Если вы решили разместить 2 кнопки (например, «купить» и «узнать больше») на одном экране, сделайте одну из них менее заметной (например, прозрачной), а вторую выделите цветом.
12 примеров call to action с ограничениями
Один из самых мощных триггеров - срочность. Посетитель заходит на страницу, видит, что срок действия предложения вот-вот истечет, и… задерживается, даже если он не был настроен на подписку или покупку. Добавьте слова: «акция действует еще…», «успейте забрать ценные бонусы», «спешите» и другие.
Ловите несколько наглядных примеров:
31. Если вы оставите заявку сегодня , получите [ценный подарок].
32. Осталось всего 3 места . Торопитесь - они могут закончиться в любой момент.
33. Только до 20:00 вы можете приобрести этот товар по супернизкой цене - всего за [цена].
34. Получите дополнительные подарки стоимостью [суммарная цена бонусов] при регистрации в течение 30 минут . Спешите - осталось [таймер].
35. Почувствуйте разницу сегодня. Успейте заказать до 00:00 .
36. Закажите [товар / услугу / продукт] в ближайшие 36 часов и получите скидку до 90%.
37. Вы готовы к активным действиям? Спешите - это предложение в силе еще [таймер] .
38. Кликайте сейчас, пока вас не опередил другой счастливчик и не забрал последний [ваш продукт].
39. Предложение действует только 12 часов . Только для моих друзей! Торопитесь!
40. Количество мест ограничено . Забронируйте ваше участие в мероприятии прямо сейчас.
41. Финальный день распродажи. Скидка 15% на все. Спешите.
42. Получите немедленный доступ к GM Бизнес Академии. Доступно еще: [таймер].
9 примеров call to action с простым следующим шагом
Покажите посетителям, что ваш продукт доступен всем, а процесс регистрации занимает считанные минуты (а лучше даже секунды). Используйте фразы: «вам не нужно быть профессиональным маркетологом / гением SEO-оптимизации / копирайтером с 5-летним стажем”, «если вы впервые…», «за … секунд/минут», «мгновенно».
Простота добавляет вашему предложению соблазнительности, и посетитель даже сам не замечает, как нажимает заветную кнопку:
44. Скажите «Прощай» комментариям со спамом. Всего 3 шага, чтобы начать использовать сервис.
45. Узнайте, как мы можем повысить продажи вашего бизнеса. Заполните форму - все остальное мы сделаем сами.
46. Зарегистрируйтесь в нашей программе за несколько секунд.
48. Скачайте за 15 секунд «Проверенный план успешного продвижения в соцсетях». Платите 1 раз - используйте бесконечно.
49. Узнайте, как уже завтра заработать первую $1.000! Я живу, дышу и доказываю, что это работает…
50. Хотите [крутая цель]? Звучит идеально, но слишком хорошо, чтобы быть правдой? Докажите, что это не так.
51. Вы еще не участник Marketing Monsters Club? Серьезно? Получите доступ к материалам клуба на 7 дней за 1 рубль.
6 примеров call to action для лид-магнита (добавляйте их на финальную страничку книги, отчета или чек-листа)
52. Станьте обладателем малоизвестных стратегий, которые повысят ваши продажи на 25%.
53. Узнайте, как вы можете начать зарабатывать реальные деньги в своей нише.
54. Каждую неделю в течение года вы будете наблюдать рост прибыли. Внедрите эти 48 новейших моделей масштабирования и продвижения и станьте лидером в нише. Принять участие.
55. Хотите зарабатывать от $5.000 в месяц? Создайте автоматизированную воронку продаж вашей экспертности. Узнайте больше о курсе.
56. Включитесь первыми в наш новый проект. Это сердце сообщества. Мы вкладываем в него всю нашу любовь к вам и огромный заряд энергии. Присоединяйтесь - и мы поможем вам реально увеличить доход.
57. Запустите успешный онлайн-бизнес уже сегодня. Включайтесь в ранний список и узнавайте о самых выгодных условиях участия в нашем курсе.
Лид-магнит на странице 5-дневного интенсива по привлечению трафика от Convert Monster
7 примеров call to action для видео
58. Досмотрите это видео до конца, чтобы узнать о специальном предложении.
59. Вы хотите стабильно зарабатывать на любимом деле? Узнайте, как - смотрите это видео.
60. Как повысить входящий трафик на ваш сайт. Внедрите эти лучшие трафик-стратегии тактики, о которых я рассказываю в видео.
61. Было полезно? Ставьте пальцы вверх.
62. Расскажите друзьям. Пусть они тоже внедрят эти советы в свой бизнес.
63. Дочитали описание до конца? У меня есть для вас подарок. Кликайте по ссылке, чтобы его получить.
64. Как именно ведет себя девушка, что говорит и почему ей удается получить работу мечты? Смотрите в видео!
12 примеров call to action с общим врагом
Это то, что создает препятствие на пути к заветной цели. А вы тот самый волшебник в голубом вертолете, который решает эти проблемы на раз-два:
65. 10 эффективных способов, как справиться с ленью. Найдите свой рецепт и навсегда забудьте о нереализованных желаниях!
66. Худеть, наводить порядок, экономить… Ищите мотивацию вместе с нами!
67. Спланируйте свое вкусное и полезное утро на июль - узнайте, как создать сильную команду. Регистрируйтесь на секретную встречу.
68. Вы готовы действовать быстро? Марафон по повышению продуктивности стартует уже завтра. Успейте занять свое место.
69. Как повысить эффективность в разы. 3-дневный интенсив, который изменит ваш подход к работе.
71. Ваше время под контролем. Новая эффективная методика, которая поможет вести параллельно 3 и больше проектов.
72. Как создать команду мечты. Узнайте, где искать А-игроков и как заполучить их для своей компании.
73. Путь ленивого человека к лидерству в [ниша]. Разбор реального кейса.
74. Изучить [ниша] действительно легко, если за вашей спиной стоит эксперт. Я стану вашим проводником на пути к успеху.
75. Как вы можете получить [все, что угодно] менее чем за 72 часа.
76. Как я купил машину своей мечты за 6 месяцев.
Анонс нашего вебинара, который помогает специалистам по контексту тратить меньше времени на отчеты
6 примеров call to action с персонализацией
77. [Имя], избавьтесь от проблем поиска новых клиентов в одно мгновение.
78. Если вы внимательно вычитаете каждое слово на этой странице, откроете новый революционный метод, как получить клиентов, не вложив ни единого цента в рекламу. Проверьте себя на внимательность.
79. [Имя], только для вас я сегодня проведу сессию «Вопрос - ответ», как настроить автоматическую email-рассылку в нашем сервисе.
80. Скажите «Да», и я отправлю вам одну из самых обсуждаемых мини-книг, которые когда-либо писали.
81. Закрытый мастер-класс только для своих. Получите секретную ссылку.
82. Rozetka, например, напоминает о том, что вы добавили товар в корзину и не оплатили его. Очень удобный способ возвращения заблудших клиентов:
10 примеров call to action с любопытством
Человек очень любопытен. И если вы сможете несколькими предложениями призыва к действию сыграть на этом качестве, успех вам гарантирован.
83. Может ли лишняя $1.000 улучшить вашу жизнь?
84. Хотите, я сделаю всю работу за вас?
85. Вы, наверное, и не думали, что это будет так просто.
86. Сделайте нас частью вашей истории успеха.
87. До недавних пор я держал это в тайне. Никто не знает, как привлекать клиентов с помощью прямых трансляций. Узнайте об этом первыми.
88. Откажитесь от 2-го места, используйте только лучшие материалы.
89. Хотите узнать наиболее действенные и мощные стратегии в [ниша]?
90. Ваша жизнь уже никогда не будет прежней, когда вы узнаете, как получать максимальную отдачу от каждого вашего действия.
91. Итак, чего вы ждете? Вы всего в нескольких секундах от [цель]!
92. Как ежедневный бег может изменить вашу жизнь, или 30 минут, которые работают на вас.
8 примеров call to action с социальными доказательствами
93. Сделайте это в 20% быстрее. 9 из 10 наших клиентов оформляют покупку в 20% быстрее, чем с другими сервисами.
94. Забудьте о стикерах, таблицах и других неуклюжих программах. Начните управлять проектами эффективно и станьте одним из миллионов людей, влюбившихся в Trello . Добавляйте неограниченное количество досок и людей в бесплатном аккаунте.
95. 97,4% участников программы считают ее самым сильным образовательным бизнес-продуктом на рынке.
96. ВАЖНО: 300+ предпринимателей уже используют эти фишки и выходят в ТОП-3 поисковой выдачи. Не отставайте!
97. Ваш первый массовый поток клиентов из интернета. 2.000+ наших учеников уже внедрили эти тактики и получили результат.
98. Вы с нами. 2.500+ людей уже подключились к прямому эфиру в нашей группе в Faceboook. Мы ждем только вас. Присоединяйтесь.
99. Нас выбирают бизнесмены со страниц Fobes . Вступите в элитный клуб уже сегодня.
100. Простое доказательство на лендинге 5-дневного интенсива «Мощный поток целевых клиентов Яндекс.Директ, Facebook и Instagram»
Не ограничивайтесь только этими примерами. Создавайте собственные взрывные призывы к действию. Это легко. Практикуйтесь, отслеживайте конверсию, изучайте страницы конкурентов и лидеров рынка и учитесь на своих ошибках.
Главное, помните:
четко прописывайте выгоду и выделяйте ключевые слова;
используйте активные глаголы, которые подталкивают читателей к действиям, а к не пролистыванию страницы;
не ставьте 2 призыва к действию рядом, лучше разделите их несколькими экранами;
выделите кнопку с помощью цвета, формы, места расположения.
Сегодня мы поговорим о кнопках «Call to action» далее CTA. Элементы CTA, как понятно из названия, призывают пользователя совершить какое-либо действие на сайте. Однако дизайнеры часто относятся к ним с пренебрежением. В то время как понимание принципов в данном вопросе повысит эффективность готового продукта. Из этого материала вы узнаете как правильно создать кнопку CTA.
Важно иметь хотя бы общее представление о том, как цвет, размер, содержание и другие факторы влияют на конверсию кнопки CTA. Сами принципы довольно просты, но применять их нужно еще на этапе планирования конструкции сайта.
Цель кнопок «Call To Action»
Кнопки CTA могут нести различные функции. В конце концов «призыв к действию» может означать что угодно. Но главный принцип кнопок заставить пользователя, который зашел на ваш сайт совершить действие. Например, добавить товар в корзину, скачать что-то , предоставить информацию, и т. д.
Так как призыв может быть к любому действию, при создании кнопки нужно учитывать как само действие, так и тип сайта и целевую аудиторию.
Типы кнопок «Call To Action»
Существуют различные типа кнопок CTA. Ниже вы найдете наиболее распространенные типы, рассортированные по типу действия, к которому они призывают пользователя.
1. Добавить в корзину
Интернет-магазины, как правило, используют целый ряд кнопок CTA, но самые популярные из них — кнопки «Добавить в корзину». Эти кнопки обычно размещаются на страницах с продуктом, и призывают пользователя приобрести тот или иной товар. Обычно их оформляют коротким текстом с призывом «Купить» или «Добавить в корзину» и иконкой банковской карточки или корзины.
2. Скачать
Кнопки «Скачать» походи на предыдущий тип тем, что они предлагают пользователю завладеть предлагаемым предметом, то есть скачать его. В случае с этим типом кнопок, дизайнеры также предпочитают давать пользователю больше информации, добавляя, например, версию продукта и размер файла.
3. Пробная версия
На некоторых сайтах клиента пытаются заинтересовать, предложив ему пробную версию продукта. Это может быть бесплатная загрузка или бесплатный аккаунт, в зависимости от типа предлагаемой услуги или товара. Некоторые дизайнеры стараются быть лаконичными в оформление СТА-кнопок такого типа, кто-то же наоборот щедро наделяет кнопку дополнительной информацией.
4. Узнать больше
Кнопки «Узнать больше» часто располагают в конце тизерного блока информации. Обычно это простые кнопки, однако достаточно большого размера, чтобы привлечь внимание пользователя.
5. Регистрация
Кнопки регистрации чаще всего встречаются в двух версиях. В первом случае кнопка ведет на форму регистрации, во втором исполняет роль кнопки «Добавить в корзину», предлагая оплатить аккаунт и пользоваться им в дальнейшем.
Существуют и СТА-кнопки других типов, но большинство из них схожи с вышеперечисленными. А принципы, которые применимы к описанным выше кнопкам скорее всего подойдут и к большинству остальных.
Работа с негативным пространством
Вы наверняка хотите, чтобы кнопки СТА на вашем сайте выделялись на фоне остального контента и привлекали внимание пользователя. Для этого используйте негативное пространство вокруг кнопок. Создайте воздух между контентом и СТА-кнопками. В некоторых случаях (как с кнопками «Добавить в корзину») этим правилом можно пренебречь, но чаще всего оно добавит эффективности вашему дизайну.
Важно при этом не забывать о балансе. Нужно рассчитать негативное пространство так, чтобы оно выглядело пропорционально размеру кнопок. Мы хотим, чтобы кнопки и контент выглядели как единая композиция, несмотря на то, что мы отделяем их друг от друга. Так что иногда вам возможно придется повозиться, экспериментируя с расстоянием.
- Убедитесь что вокруг кнопки достаточно свободного места и в дизайне нет места нагромождению.
- Попробуйте использовать правило третей или золотого сечения, определяя размер негативного пространства.
- Следите чтобы негативное пространство позволяло кнопке выделиться на фоне остального контента и отделиться от него.
Размер и цвет
Размер кнопки СТА очень важен. Очень большая кнопка затмит остальное содержание, слишком маленькая затеряется среди окружающего контента. Нам же нужно, чтобы наша кнопка выделялась на фоне других элементов, но при этом не подавляла их визуально.
Цвет нужно использовать в паре с размером. Для больших кнопок выбирайте цвет, который в меньшей степени отличается от основного цвета вашего дизайна, но он все же должен отличаться от фона. Для кнопок меньшего размера используйте яркие тона, контрастирующие с основным цветом. Но убедитесь, что в любом случае цвет кнопки вписывается в общий дизайн и сочетается с остальными элементами.
- Кнопки СТА в идеале должны быть самыми крупными кнопками на странице.
- Используйте контрастные цвета, чтобы выделить маленькую кнопку.
- Используйте цвета меньше контрастирующие с основным цветом, чтобы визуально притушить большую кнопку.
- Кнопки СТА должны привлекать внимание, но не перегружать дизайн.
Текст
Точная формулировка, которую вы используете в тексте кнопок может сыграть важную роль. Сравните призыв «Купить сейчас» с призывом «Добавить в корзину». Первый вариант выглядит куда более срочным и даже навязчивым. Также важен размер текста. К примеру, при необходимости текст «Попробовать услугу бесплатно» можно заменить более коротким вариантом «Пробная версия».
Текст, который вы используете для оформления кнопок должен быть максимально прост и понятен. Необходимо, чтобы пользователь с первого взгляда понимал что его ждет, после нажатия на кнопку. Если у него возникают сомнения из-за неясности, вы вполне можете потерять в конверсии.
Не забывайте и о размере текста. Шрифт должен быть большим и заметным, но конечно сочетаться с размерами самой кнопки. Убедитесь, что текст достаточно контрастен и легко читаем.
- Используйте просто, понятный язык.
- Используйте большой, заметный шрифт.
- Убедитесь что текст действительно призывает к действию.
Создайте срочность
Мы хотим, чтобы посетители на нашем сайте совершили желаемое нами действие как можно скорее. И хотя никто не собирается дурачить посетителя, чем больше возможностей для раздумий и сравнений вы им предоставляете, тем выше вероятность получить негативный ответ.
Наша задача произвести на пользователя впечатление, что нужно действовать прямо сейчас. Вам нужно побудить их действовать незамедлительно, экспромтом. И пусть не все СТА-кнопки будут работать так (особенно если речь идет о покупке дорогостоящего товара), дешевые или бесплатные действия должны в идеале производится пользователем без раздумий.
- Побудите пользователя действовать немедленно
- Не давайте пользователю повода для раздумий.
- Несмотря на то, что эффект срочности важен, ни в коем случае не вводите пользователя в заблуждение.
Дополнительная информация
В случае необходимости, дайте пользователю дополнительную информацию о том, что он получит, нажав на СТА-кнопку. Чаще всего это относится к кнопкам «Пробная версия» или «Скачать». Обычно в этих случаях размещается информация о том, как долго действует пробная версия, сколько весит файл, который вы собираетесь скачать или какая версия программы будет вами скачана.
Когда вы размещаете на кнопке дополнительную информацию, убедитесь что в центре внимания остается все же сам призыв к действию. Сделайте текст призыва больше, а дополнительную информацию — менее заметной.
- Добавляйте на кнопки только ту информацию, которая будет пользователю однозначно полезна.
- Дополнительная информация уместна лишь на некоторых типах СТА-кнопок (например, «Пробная версия» и «Скачать»).
- Убедитесь что сам призыв к действию до сих пор является самым заметным текстом на вашей кнопке.
Приоритет
Необходимо расставить приоритет кнопок, когда на странице их больше одной штуки. Подчеркнуть важность элемента можно различными способами, но чаще всего это делают при помощи цвета и размера.
Используйте цвет, контрастирующий с основным цветом дизайна, чтобы подчеркнуть важность кнопки. Менее контрастные цвета используйте для того, чтобы визуально снизить важность кнопки. Та же история с размером. Выделите важность кнопки, сделав ее больше и уменьшите ее, чтобы понизить в приоритете.
Иконки и изображения
Оформление кнопок СТА иконками также может сыграть на увеличение конверсии. Примером могут служить иконка корзины на кнопке «Купить» или стрелка на кнопке «Скачать». Вы также можете использовать и уникальные иконки и изображения, но убедитесь что они в точности передают предназначение кнопки и не вводят в заблуждение пользователя.
- Убедитесь что изображение, размещенное на кнопке помогает понять ее предназначение и не путает пользователя.
- Легко узнаваемые иконки могут моментально донести до пользователя значение кнопки.
- Не бойтесь использовать менее популярные иконки, но убедитесь что их смысл предельно ясен.
Примеры
Ниже вы найдете примеры удачного дизайна кнопок СТА. И пусть некоторые из них спроектированы не по всем вышеупомянутым принципам, большая часть правил все же соблюдена и кнопки работают эффективно.
Logbook
Использование разных цветов для кнопок «Скачать» и «Купить» отделяют их друг от друга и подчеркивают важность кнопки «Купить».
Постоянным читателям нашего блога хорошо известно, что такое “элемент призыва к действию” (Call to Action Button) целевой страницы, и насколько велика роль этого элемента веб-интерфейса в деле .
В нашей новой статье мы расскажем о том, как создать высокоэффективную кнопку призыва к действию - гарантированно привлекающую внимание посетителей и максимально способствующую увеличению коэффициента конверсии и .
Помните! Кнопка CTA должна выглядеть полноправным, естественным и гармоничным элементом архитектуры вашей целевой страницы. CTA-элемент, который выглядит «прикрученным в спешке», невольно укажет посетителю на непрофессионализм ее разработчиков.
Метод 1: привлекайте внимание пользователя, увеличивая размер CTA-кнопки.
В веб-дизайне действует неписаное правило: размер элемента страницы прямо пропорционален его важности, другими словами - чем больше элемент по размеру, тем значительней его роль на странице.
Пример 1: кнопка призыва к действию превышает размером окружающие элементы.
Продемонстрируем этот способ привлечения внимания пользователя на примере целевой страницы компании Lifetree Creative.
Итак, сравним размер CTA-кнопки с размером другого важного элемента страницы - логотипом компании. Чтобы привлечь внимание посетителей, разработчики сделали кнопку на 20% шире, чем логотип. Таким образом, дизайнеры добились похвального результата: несмотря на то, что логотип находится выше, чем CTA-элемент, глаза посетителей как магнитом притягиваются кнопкой призыва к действию, заметно выделяющейся своими размерами среди прочих элементов целевой страницы.
Пример 2: если на целевой странице есть несколько кнопок призыва к действию - более важная кнопка должна быть больше по размерам.
На целевой странице может размещаться несколько элементов призыва к действию. Чтобы указать относительную важность некоего призыва к действию по отношению к другим, вы можете изменять размеры соответствующих кнопок.
Вот как эта концепция была воплощена в жизнь на сайте paramore|redd - кнопка, предлагающая посетителю подписаться на рассылку, значительно больше размером, чем кнопка, «разрешающая» пользователю продолжать чтение блога. Цель конверсии этой страницы понятна и ясна - подписка!
Метод 2: завладейте вниманием пользователя, используя общеизвестные правила размещения CTA-элемента на веб-странице.
Место размещения CTA на целевой странице имеет решающее значение для привлечения внимания посетителей.
Размещение CTA-кнопок на видных местах, таких, как верхняя часть веб-страницы, может привести к увеличению конверсии, так как пользователи, скорее всего, непременно заметят этот элемент дизайна и примут меры, способствующие конвертации.
Пример 1: разместите призыв к действию «на уровень выше», чем все остальное содержимое целевой страницы.
Несложный, но крайне эффективный способ выделить CTA-элемент - поместить его «над поверхностью» страницы. Вы можете видеть эту идею воплощенной на практике на сайте dailymile, где кнопка призыва к действию как бы «летит» над другими элементами страницы (диаграммами). Подобный эффект легко может быть достигнут при верстке страницы с использованием каскадных таблиц стилей (CSS).
Пример 2: CTA в верхней части целевой страницы.
Проверенный, простой, но очень действенный способ привлечь внимание пользователя - поместить CTA-элемент в самом верху страницы, так, чтобы он обязательно попал в поле зрения посетителя.
Пример 3: CTA в визуальном центре.
Еще одно подходящее место для размещения CTA-кнопки - условный «визуальный центр». Для привлечения внимания к кнопке - расположенной ровно посередине горизонтального измерения страницы - можно использовать расположенные по бокам от нее другие элементы дизайна.
Этот способ отлично сработал для страницы PicsEngine, однако помните, что выбранное вами место расположения не должно находиться слишком далеко от верхней части (header) веб-страницы.
Метод 3: используйте пустое пространство.
Использование пробелов (пустого, или «мертвого» пространства) отлично работает на таких целевых страницах, где поблизости от CTA-кнопки расположено много других элементов.
Пример 1: используйте пробелы для визуального выделения призыва к действию.
На примере целевой страницы сервиса IconDock легко убедиться, насколько эффективен этот способ: небольшая кнопка скромного светло-серого цвета прочно привлекает к себе внимание.
Пример 2: уменьшайте размер пробела для обозначения логической связи между двумя элементами страницы.
Чем больше пробел, существующий между кнопкой призыва к действию и каким-либо из окружающих элементов страницы, тем менее заметна логическая связь между ними. Если вы используете другие элементы целевой страницы для того, чтобы убедить пользователя предпринять нужное вам действие, разумным решением будет уменьшение пустого пространства этими элементами и CTA-кнопкой.
Например, на странице компании Donor Tools рядом с кнопкой призыва к действию расположен список преимуществ, получаемых подписчиком. За счет уменьшения пробела между списком преимуществ и CTA, два этих элемента соединяются в визуальную группу, усиливающую воздействие призыва за счет понятной логической связки «действие - получаемые преимущества».
Метод 4: используйте высококонтрастные цвета для создания и выделения CTA.
Обязательно решите для себя, какие цвета вы будете использовать - это очень важно. Самый надежный способ привлечь внимание - использовать цвета, которые явно контрастируют с окружающими CTA-кнопку элементами и фоном страницы.
Пример 1: используйте цвета, контрастирующие с окружающими элементами страницы.
Вот отличный пример использования такого приема на целевой странице сервиса Notepod: все окружающие элементы страницы имеют черный цвет, в то время как призыв к действию - ярко-синего цвета. Самый невнимательный пользователь не промахнется мимо нужной кнопки. :)
Пример 2: используйте контраст между цветом кнопки и цветом окружающего ее фона.
Этот способ прост и эффективен: поместите кнопку подчеркнуто яркого цвета (например, спектрально-желтого) над черно-белым или монохромным фоновым изображением, как, например, это сделали создатели данной страницы.
Метод 5: предложите посетителю воспользоваться дополнительной /альтернативной кнопкой призыва к действию.
На веб-странице могут мирно соседствовать несколько элементов призыва к действию. На практике может случиться так, что вам понадобится предложить посетителю еще одно, дополнительное действие, чтобы убедить его позже выполнить основное желаемое действие.
Такой прием, в основном, используется на веб-сайтах. При создании целевых страниц лучше придерживаться проверенного принципа: «Одна целевая страница - один элемент призыва к действию».
Например, пользователь перед оформлением подписки на услуги какого-то веб-сервиса может захотеть получить более подробную информацию о существующих ценах и способах оплаты услуг.
Предоставьте ему такую возможность, установив на странице еще одну CTA-кнопку, позволяющую посетителю, например, просмотреть видеоролик, разъясняющий ценовую политику данного сервиса.
Пример 1: размещение вторичного элемента рядом с основной CTA-кнопкой.
На сайте компании OfficeVP отображаются две кнопки призыва к действию, расположенные рядом друг с другом. Кнопки выполнены в контрастных цветах, что позволяет посетителю легко понять, что им предлагают два различных способа действия: либо зарегистрироваться прямо сейчас, либо совершить вторичное действие - получить дополнительные сведения в ходе бесплатного обучающего тура.
Обратите внимание: здесь кнопка главного желаемого действия расположена в соответствии с классическим правилом восприятия информации - строка читается пользователем слева направо, что означает, что первому слову в строке (в нашем случае - кнопке) достанется максимум внимания посетителя.
На целевой странице программы Transmissions был применен другой способ горизонтального размещения 2 элементов призыва к действию. Кнопка основного действия - выделенная контрастным цветом - расположена позади дополнительного CTA-элемента. Однако такое расположение элементов полностью оправдано: дополнительное действие (загрузка бесплатной пробной версии приложения), если оно будет выполнено в первую очередь, вполне может подтолкнуть посетителя к совершению основного действия, предложенного на странице - оплате полнофункциональной версии опробованной программы.
Пример 2: размещение вторичного CTA-элемента под главной кнопкой призыва к действию.
Такой способ размещения может вам пригодиться, если вы захотите усилить визуальное разделение основного и дополнительного призывов к действию.
Обратите внимание: дополнительное действие выделяется еще и применением «затемненного» (по сравнению с остальным пространством страницы) фона.
Метод 6: поторопите посетителя вашей страницы.
Пусть ваши кнопки призыва к действию «заговорят» уверенным, безапелляционным «командирским тоном». Пользователь должен думать, что если он немедленно не отреагирует на ваш призыв, он потеряет уникальную возможность воспользоваться вашим предложением.
Например, на странице tap tap tap.com идею «поторопить пользователя» реализовали весьма остроумным способом: размещенное в непосредственной близости от CTA-кнопки с призывом «купите сейчас», объявление гласит, что на товары действует некая «начальная цена».
Тут задействован довольно тонкий механизм создания «тревожного ожидания»: сопоставляя слова «сейчас» и «начальная цена», пользователь начинает подозревать, что он рискует заплатить больше, если заплатит за товар позже, когда «начальные цены» (которые покупатель подсознательно ассоциирует с началом самого простого отсчета от малых к большим числам: 1, 2, 3…) непременно изменятся в сторону увеличения. ;)
И, конечно, придумывая надпись для размещения на кнопке призыва к действию, не забывайте про сильные «принуждающие» слова: «сейчас», «немедленно», «прямо сейчас» и т. д.
Метод 7: сообщите пользователям, что предложенное вами действие выполняется легко и просто.
Часто неуверенность пользователей - принять ваше предложение или нет - проистекает из того, что они предполагают, что предложенное вами действие обернется для них тратой времени, усилий и денег. Однако, вы можете решить эту проблему, разместив на CTA-кнопке текст, который создаст среди ваших посетителей уверенность в том, что предложенное вами действие выполнить будет легко и просто.
Например, на целевой странице Basecamp текст на кнопке призыва к действию четко определяет время, требующееся пользователю для регистрации (60 секунд), и объясняет, что пробная подписка на 30 дней предоставляется бесплатно.
Это очень важный момент, постарайтесь не забывать о нем: «конструируя» надпись для своего CTA-элемента, не забудьте упомянуть о бесплатных версиях продуктов или сроках регистрации, если таковые существуют, и убедите пользователя в том, что регистрация на вашем ресурсе не отнимет у него много времени.
Метод 8: открыто и подробно объясните пользователям, что они получат, воспользовавшись вашей CTA-кнопкой.
Вот, наконец, заключительный совет, последний по номеру в списке, но не последний по важности: завоюйте доверие ваших посетителей, подробно и открыто рассказав им о том, что они получат, откликнувшись на ваше предложение.
Специалисты Mozilla Firefox, например, смогли поместить всю самую необходимую для пользователей информацию на поверхности кнопки для загрузки приложения: информацию о стоимости продукта (бесплатно), сведения о версии предлагаемого продукта (веб-браузер версии 3.5.3, предназначенный для ОС Windows с англоязычным интерфейсом) и размер загружаемого установочного файла (7.7 Мб).
Вот так, примерно, выглядит подлинная забота о посетителе вашей целевой страницы.
И не забывайте о главном: тестируйте каждое изменение, произведенное вами.
Известно, что все более или менее известные бренды американского рынка просто «помешаны» на тестировании своих интернет-ресурсов. Понимание того, что увеличение конверсии на 0.5% может принести дополнительные тысячи долларов годовой прибыли, служит прекрасной мотивацией для оптимизации конверсии целевой страницы/сайта.
