ста кнопка что это
CTA-кнопка: 10 столпов эффективности
Расскажу о первых факторах которые, по моему мнению, влияют на эффективность CTA (call to action) кнопки, она же «купить» в икоммерц-проектах.
Никаких советов и кейсов, скриншоты только для иллюстрации текста. Гипотезы каждый может построить сам и проверить их сплит-тестами.
1) Расположение
Первый экран наше всё. В зависимости от проекта, до 50% пользователей не скроллят страницу вниз. То есть, если мы располагаем главную кнопку на втором экране — то сами, своими руками, снижаем конверсию.
Проверить легко: Смотрим на каком пикселе сверху кнопка и сверяем с высотой экранов юзеров по ГА. Например, если нижний край кнопки 900-й пиксел, то 30% юзеров получают ее (или ее часть) на втором экране.
То есть, в общем случае, чем выше CTA-кнопка, тем лучше. Традиционно ее место справа т.к. пользователи правши, а контент на большинстве сайтов слева.
Пример: На сайте Ламоды сапог в первом экране виден не весь, но кнопка на месте.
2) Размер
Размер это акцент, акцент это приоритет, приоритет это что? Да — кто здесь главный. Если мы хотим продавать, то СТА-кнопка должна быть главной, то есть большого размера.
Но, не слишком большого, чтобы не выпадать из дизайна и не занимать половину экрана.
На сайте Yoox нет сомнений какой элемент интерфейса главный.
3) Цвет
Что мы имеем здесь. Хорошо, если он контрастный, то есть отличается от цвета основных элементов сайта. Но, выпадение его из дизайна создает ощущение кичливости. Именно поэтому я не считаю универсальными и лучшими оттенки красного/оранжевого (что принято в среде юзабилистов). Но, в некоторых случаях, они действительно работают, все зависит от дизайна сайта.
На сайте Вайлберрис кнопка контрастирует с дизайном и не случайно оранжевая.
4) Текст (содержание)
На сайте Утконос решили вообще обойтись без текста. Хорошее решение? Не думаю.
5) Форма
В этом пункте сильная привязка к дизайну сайта, но в общем случае прямоугольную форму можно считать предпочтительной, она наиболее распространена и комфортна для пользователей.
На сайте Боско кнопка круглая, это непривычно. Я бы проверил ее на эффективность.
6) Интерактивность / тактильность
Как хорошо порой поиграть с кнопкой наведением мыши. Раз, два, три навел и вот — ты ее уже нажал. Редкий случай? Нет, это работает. Поэтому по оверлею меняем цвет, увеличиваем шрифт или еще каким-то образом меняем кнопку. И это правильно!
Еще можно по дать всплывающую подсказку, это тоже интерактивность.
Букинг.ком по наведению предлагает нажатием на кнопку перейти к новому шагу.
И, конечно, если кнопка выпуклая, то при нажатии ее лучше вдавливать, это и есть тактильность. Поэтому объемная кнопка с тенью обычно предпочтительней плоской.
7) Повторение
Если у нас простыня контента (например, лендинг), то кнопку хорошо повторить. Почему? Чтобы для ее нажатия не надо было много скроллить вверх. И еще, чтобы напомнить пользователю зачем мы все это на странице ему показываем — чтобы он купил.
На сайте Онлайнтурс вверху страницы кнопка и внизу такая же.
8) Качество исполнения
Отдельный пункт, который и так понятен, но не всегда реализован. Некрасивая, кривая кнопка нажимается реже, даже если весь сайт еще ничего. Это барьер, который никому не нужен и убирается легко любым толковым дизайнером.
Кроме того, хорошая кнопка вокруг имеет отступ, это увеличивает ее самостоятельность и выделяет из всего контента. Плохая — липнет к краям и другим объектам.
Блёклые, шаблонные кнопки из 90-х на сайте Никса, сразу видно делали программисты.
9) Изменяемость
При перезагрузке или скроллинге вниз и кнопа меняет цвет. В какой-то момент она цепляется за экран. Кому от этого плохо? — Никому. Привлекает внимание? — Да.
Прием для сплит-теста годится, пробуем.
10) Взаимосвязь с другими CTA-кнопками
Самый сложный момент. Не могу дать правил, но если у нас рядом с основной кнопкой другие, то они друг на друга влияют и это надо учитывать. Нет ничего хуже двух похожих рядом, это пессимизирует обе, снижая их CTR.
На сайте BEBAKIDS они чуть разные по размеру, но уж очень похожи.
Заключение
Факторов много (описал основные), все влияют по отдельности, а их комбинация влияет вместе. Думаю, что каждый понимает как это отражается на конверсии — прямо и непосредственно. Я повышал за счет этого продуктивность в 1,5 раза и больше. В любом случае, над ней стоит хорошенько поработать.
130+ формулировок CTA
| Активный глагол + Яркое оформление |
СТА может быть в виде креативного словосочетания, также, для усиления, перед призывом, может быть ценностное предложение. Вот пример продающего блока из письма магазина Citrus:
Чтобы помочь вам подобрать ключ к высоким конверсиям email-маркетинга, мы собрали 130+ примеров СТА в зависимости от типа оформления и места размещения в письме.
50 универсальных СТА для eCommerce
1. Смотреть обзор.
2. Просмотреть товары.
3. Открыть товары.
4. Перейти.
5. Смотреть коллекцию.
6. Выбрать товары.
7. Напишите нам.
8. Вперед.
9. За скидками.
10. За [ночными/праздничными/летними/звездными] скидками.
11. К товарам со скидкой.
12. Получить секретную скидку.
13. К акционным товарам.
14. Поймать растаявшие цены.
15. Все акционные товары.
16. Узнать больше акций.
17. За покупками.
18. Найти ближайший магазин.
19. Купить в рассрочку.
20. Оформить заказ.
21. Заказать.
22. Выбрать другой товар.
23. Выбрать свой гаджет.
24. Стать обладателем [Apple Iphone XR 64 Gb].
25. Выбрать [конструктор].
26. Хочу.
27. Выбрать и купить.
28. Примерить онлайн.
29. Узнать, что сегодня.
30. Просмотреть.
31. Больше [товар/ТМ] для [детей/женщин/мужчин] (например, INTERTOP: Больше Geox для детей).
32. Оформить заказ.
33. Просмотреть всю витрину.
34. Купить для нее/Купить для него.
35. Больше предложений.
36. Успейте купить.
37. Участвовать в розыгрыше.
38. Заглянуть в другие категории.
39. Начать поиск подарков.
40. Порадовать деток.
41. Найти свои [L.A.P.T.I.]
42. Оформить заказ/предзаказ.
43. Начать шоппинг.
44. Скорее купить новинки.
45. Выбрать образ.
46. Купите образ.
47. Беру!
48. Подобрать варианты.
49. Нужно брать.
50. Купите стили с Instagram.
Рассылки с тестированием CTA
Гармоничное оформление
Линия шоколадной диеты выдержана во всех блоках письма:
Кроме прямого призыва “Начать…”, в письме использован триггер любопытства, специально для тех, кто так и не решился его приобрести после блока с доказательствами пользы шоколада.
Учимся у Ив Роше
Открываем 10 писем подряд и видим, что они всё время используют разные призывы. Нет никаких навязчивых “Купи”.
Примеры формулировок СТА:
50 СТА для продажи услуг
1. Получить скидку.
2. Забрать свою скидку.
3. Использовать промокод на 20% скидки.
4. Хочу с подарками.
5. Присоединиться.
6. Узнать цену.
7. Получить доступ.
8. Узнать больше.
9. Смотреть сейчас.
10. Забронировать место.
11. Оставить заявку.
12. Подобрать самостоятельно.
13. Спросить на Facebook.
14. Хочу стать участником [тренинга/розыгрыша].
15. Хочу участвовать.
16. Выбрать лучший пакет для участия со скидкой 30%.
17. Оформить участие в тренинге прямо сейчас!
18. Забрать билет за 2019 грн!
19. Зайти в комнату вебинара.
20. Хочу [ставить цели правильно/овладеть ораторским искусством/…].
21. Нажмите, чтобы узнать больше.
22. Принять участие.
23. Прокачать свои знания.
24. Довериться профессионалам.
25. Мгновенный доступ к материалам.
26. Принять участие в online-встрече.
27. Присоединиться к [трансляции/группе].
28. Протестировать платформу в деле.
29. Получить консультацию эксперта.
30. Я буду участвовать!
31. Открыть для себя [. ].
32. Оставить заявку.
33. Найти свой идеальный [тур/тариф].
34. Подобрать [тур/тариф].
35. Больше информации.
36. Узнать больше.
37. Изучить программу [тура/встречи].
38. Воспользоваться возможностью.
39. Действовать!
40. Торопитесь, предложение заканчивается через [таймер].
41. Оформить [заявку/кредит/. ] за 20 секунд.
42. Заказать [выезд мастера/консультацию эндокринолога].
43. Послушать подкаст.
44. Перейти к кейсу.
45. Заполнить опрос.
46. Поделиться мнением.
47. Стартовать вместе с [. ].
48. Выбрать время приема.
49. Записаться на [. ].
50. Провести время в [. ]
Оформление СТА
Примеры гифок мы обязательно добавим в конце статьи как бонус к материалу. А пока пойдем по порядку.
1) Текст-ссылка
Примеры такого оформления стали встречаться реже, но при удачном дизайне они не теряют свою эффективность по сравнению с альтернативными способами оформления.
2) СТА-кнопка
Позволю себе ошибиться в статистике, но хотя бы одна кнопка есть в 99,9% рассылок моего почтового ящика. Кто-то призывает просто “Посмотреть” или “Купить”, кто-то подходит к задаче более творчески.
Например, письмо в стиле “вечеринки” от интернет-магазина Киевстар. Маркетологи обыграли идею с ожиданиями Черной пятницы и единой тематической линией соединили текст письма, иллюстрации и призывы на кнопках. СТА умышленно продублировано, чтобы повысить число конверсий.
Прогрев аудитории к черной пятнице также сделал Фокстрот. Призыв “Подготовиться к шопингу” мягко переводит читателей на сайт, где каждый может что-то присмотреть для себя.
Является ли креатив стопроцентным залогом достижением цели? Нет, конечно. В рассылке издательства МИФ используется обычный СТА “Купить”, но альтернативность вариантов осуществления покупки повышает вероятность продаж.
Не стоит пренебрегать привычными для пользователя кнопками. К ним относятся пиктограммы соцсетей и визуализация ссылок на скачивание приложений. Эти элементы настолько узнаваемы, что не вызывают сомнений о том, какие ссылки стоят за знакомыми картинками.
3) Призыв-баннер
Пара примеров из рассылки магазина “Антошка”:
Или другой пример от Citrus с баннером-призывом: “Выбери своего робота!”
Пример из рассылки интернет-магазина Sea-tools:
4) Гиф+Баннер с СТА
А вот и обещанные гифки. Динамичность и креативность gif-изображений способствуют повышению вовлеченности читателей. Такие рассылки выглядят ярко и современно.
В этом блоке не обойтись без примеров от Цитруса:
Как всегда, яркими и интересными рассылками радует Антошка:
Gif-СТА от европейского интернет-магазина:
Оригинальных идей можно подсмотреть в письмах Comfy:
5) Gif+кнопка
К яркому оформлению призыва к действию относится и следующий пример:
Двигающийся курсор вдвойне привлекает внимание к кнопке СТА и стимулирует читателя выполнить нужное действие.
Вместо выводов оставляем мини чек-лист по добавлению СТА в email, чтобы повысить их эффективность:
Чтобы каждый ваш призыв был услышан читайте также статью: CTA: 10 лучших практик, которые не подведут. Конверсий вам, да побольше!)
CTA кнопка: она провоцирует меня!
Под понятием «СТА-кнопка» подразумевают кнопку действия на странице сайта или рекламного поста, которую пользователь должен нажать по мнению создателей. Обычно это такие кнопки как «купить», «заказать», «узнать подробнее» и так далее.
СТА элементы – это элементы, сопутствующие последовательности действий, которые ведут к целевой конверсии. Поля для ввода, выбора значения, сама форма сбора контактных данных – примеры таких элементов.
Представим: вы закупаете трафик и направляете его на лендинг.
В данном случае лендинг выполняет три самых важных функции:
СТА-кнопка нужна, чтобы повысить эффективность третьего пункта. Именно нажатие на нее приводит к конверсии. Странно, что многие арбитраны не уделяют ей такого же внимания, как тексту лендинга или заголовку формы обратной связи.
Заголовки лендинга привлекают внимание аудитории. Текст разъясняет особенности вашего продукта. Форма обратной связи помогает получить информацию о посетителях. Но именно СТА кнопка дает конверсии.
Дело в том, что ваши посетители не будут кликать на любую первую попавшуюся кнопку. Они нажмут лишь на эффективную СТА кнопку. Эта кнопка должна не просто привлекать внимание — она должна сообщать точно, что именно получит клиент, если нажмет на нее.
Кнопки СТА могут быть не только на лендингах, но и в рекламных постах таких социальных сетей как Facebook, Instagram, с недавних пор ВКонтакте и рекламной платформе MyTarget.
Работать с ними достаточно просто. Вы выбираете нужный вариант, в зависимости от преследуемой цели и включаете кнопку действия в свой рекламный пост:
Не заставляйте их задумываться, изучать ваши материалы без должной на то необходимости, сокращайте время на принятие решения и получайте гораздо больше лидов: подписчиков, звонков, контактных данных или мгновенных продаж.
Определитесь с целью и подобирайте под нее нужную кнопку, не забывая тестировать различные варианты.
Другое дело кнопка действия на собственном сайте, когда у вас в руках полный контроль над созданием и с расположением данной кнопки. В этом случае малейшие изменения, и манипуляции с СТА кнопкой могут существенно повысить конверсию или обвалить ее полностью.
Рассмотрим основные рекомендации по правильной работе с СТА кнопками на ваших сайтах/лендингах.
Представим среднестатистического посетителя сайта. Его интересует решение своей проблемы и он находится в поисках идеального предложения. Когда клиент оказывается на сайте, нужно успеть направить его в «правильное русло» как можно скорее. Не надо заставлять его разгадывать ментальные ребусы, чтобы понять где и как осуществить заказ.
Казалось бы, это очевидно. Если вы создаете страницу сайта и хотите, чтобы пользователь после ее просмотра нажал определенную кнопку, то стоит ли делать её яркой и контрастной к остальному содержимому, чтобы она была хорошо заметна? Но на самом деле, не все так просто и есть еще ряд моментов, которые необходимо понимать, чтоб СТА кнопка работала действительно эффективно.
Расположение кнопки
Согласно статистике, до 50% пользователей сайта не скроллят страницу вниз. Они могут изучить «первый экран» и сразу закрыть окно. Располагая кнопку действия на втором экране, мы увеличиваем шансы на ее неэффективность. Дайте возможность своим клиентам увидеть кнопку и совершить целевое действие при первом контакте с сайтом.
Традиционно, место CTA кнопки справа, потому как люди обычно читают информацию слева направо.
На сайте Nike с расположением кнопки СТA все в порядке
Размер и цвет кнопки
Если мы хотим успешно продавать, то СТА кнопка должна быть главной! Не дайте ей затеряться среди остальных кнопок сайта. Сделайте ее большой, но не настолько, чтобы выпадать из общего дизайна страницы и занимать половину экрана.
Хорошо, если цвет кнопки будет контрастным и отличаться от других элементов сайта. Только не стоит использовать слишком вызывающие цвета. Главное, чтобы все гармонично сочеталось.
Контрастный цвет СТА кнопки сразу дает понять кто здесь главный!
Текст кнопки
Правильный текст в СТА кнопке должен отражать и конкретизировать действие. А также содержать призыв, не быть нейтральным. И по возможности, включать эмпатию (положить в мою корзину, купи меня и тд.)
Сомнительный призыв к действию.
Форма
Более предпочтительной и распространенной является прямоугольная форма. Но главное, чтобы была привязка к дизайну страницы.
Интерактивность кнопки
Различные красивые эффекты с кнопкой, дополнительная анимация и всплывающие подсказки – все это действительно работает. Если кнопка выпуклая, при нажатии на нее можно показать, как она красиво «вдавливается», и этот маленький нюанс также повышает ее эффективность. Поэтому, объемные кнопки с тенью, обычно предпочтительнее плоских.
Нет текста с призывом, сомнительные форма и расположение
Повторение кнопки
Если мы используем лендинг, то на одной странице как правило, размещается огромное количество контента. Если пользователь, в ходе ознакомления не «отвалился» то, лучше будет повторить кнопку в завершающем блоке страницы. Этим самым мы напоминаем, зачем он здесь и какой цели нам нужно достигнуть. В противном случае, найдутся лентяи, которые не захотят скролить страницу вверх и просто закроют ее.
Повторная форма заявки и кнопка СТА в последнем блоке лендинга
Качество исполнения
Пункт, который и так понятен, но не всегда реализован. Кривые, некрасивые кнопки, будут нажиматься реже, даже если сам сайт сделан нормально. Качественно сделанная кнопка имеет небольшой отступ вокруг себя, что прибавляет ей самостоятельности. Плохая – будет липнуть к краям других элементов сайта, что поможет ей остаться незамеченной.
Качество дизайна и исполнение кнопок вызывают подозрение, что на дизайнере сэкономили
Взаимосвязь с другими кнопками и сайтом
Если ваша кнопка цепляется за край страницы при скроллинге или меняет цвет, шрифт и т.д. – это привлекает дополнительное внимание пользователей. Такой прием можно взять на вооружение. Но если кнопок две, и они находятся рядом с друг другом, это только снижает их CTR. Лучше избежать использование двух похожих кнопок.
Добавить в корзину или купить в 1 клик? Сомнения по поводу спеццены и расхождения с суммой возле кнопки. Пойду поищу куртку там, где все однозначно
Вывод:
Факторов, которые влияют на кликабельность и конверсию кнопки CTA, достаточно много. Каждый из них влияет по-своему, не говоря уже об их совокупности. Какие будут работать на вашем сайте – покажут тесты. Не ленитесь проводить сплит тестирование кнопки, постепенно внося коррективы и тестируя различные варианты цветов, оформления, текста, расположения и т.д.
Используйте кнопку призыва к действию – не оставьте потенциальным клиентам шансов сбежать.
Всем успехов в работе! Не забудьте сохранить эту ссылку у себя на странице или в закладках.
С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-элемент.
А начать внедрение мы рекомендуем с аудита сайта, ведь при плохо работающем ресурсе не поможет даже самый суперэффективный СТА-элемент.