Кнопки призыва к действию на лендинге: ТОП-7 ошибок + Инструкция по дизайну
Кнопка призыва к действию или cta-кнопка
Кнопка CTA (Call to action) — важный элемент лендинга, через который происходит первое взаимодействие посетителя с поставщиком. Ошибки с этим элементом могут привести к нулевой конверсии.
Формула cta-кнопки:
Активный глагол + Яркое оформление
На лендинге можно расположить несколько кнопок захвата с разной степенью стрессовости. Пользователи находятся на разных этапах готовности к покупке твоего продукта, поэтому для каждой категории покупателей, должен быть свой призыв к действию.
Шкала стрессовости действий
Из шкалы видно, что получить каталог это легкий шаг, на который среагирует большинство людей.
Оформить заказ — сложный шаг, так как человек ещё не готов оставлять свои контакты и находится на стадии принятия решения (кроме интернет-магазинов).
Закажи разработку
у меня
Сделай сам на конструкторе
Расположение кнопки
Располагай кнопку без прокрутки в видимой области первого экрана. Помни, на сканирование лендинга у пользователя уходит порядка 3-х секунд — за это время он решает уйти, или остаться. Подробнее об этом я рассказал здесь.
Текст кнопки
Текст на cta кнопке показывает пользователю, что произойдет после нажатии на неё. Убедительный призыв побуждает к действию: короткий, ёмкий, актуальный и соблазнительный (например, «Получить бесплатный доступ»).
Призыв — Получить расчет
Используя глагол: получить, рассчитать, забронировать, с конкретным уникальным предложением, конверсия будет выше, чем в словах: «подробнее», «больше».
Дизайн кнопки на посадочной странице
Цвет кнопки
Кнопка должна быть контрастной, заметной на общем фоне, гармонично сочетаться со стилем твоего лендинга, объёмной, с эффектом анимации, чтобы привлекать внимание, и вызывать желание нажать.
Привлекательная, заметнная кнопка
Размер кнопки
Сделай кнопку большой, чтобы на неё можно было легко нажать, в том числе и на мобильных устройствах. Длину делай не больше половины экрана контентной области лендинга.
Интерактивность кнопки
Кнопка при наведении и клике меняет состояние: заливка фона, цвет текста, тень, границы.
Дай понять пользователю, что с ней можно взаимодействовать, путём анимирования, бликов и моргания.
Форма кнопки
Пользователи привыкли к стандартным вариантам формы: прямоугольник, прямоугольник с закругленными углами и овал.
Еще есть вариант с использованием кнопки без заливки и границ с нижним подчеркиванием (как ссылка), но в этом случае пользователь предполагает, что при клике, он перейдет на другую страницу, а не будет заполнять форму.
Количество кнопок
На одном экране используй максимум 2 кнопки. Выделяй приоритетное действие ярким фоном или обводкой, направляя внимание пользователя на нужное целевое действие.
Приоритетное действие — получить консультацию, оформлено правильно, но только более целевым здесь было бы — заявка на расчет
Выбор более 2-х кнопок заставляет человека больше вчитываться, запутывает и уводит от нужного действия. В идеале, достаточно одной кнопки на экране.
Вставлять кнопки в каждый блок не нужно, но, если это уместно и вписывается в смысловой экран лендинга — дерзай.
Может быть интересно:
ТОП-7 ошибок при создании кнопки
Я первый раз зашёл на сайт и не готов покупать баню за 200 тыс.
Целый букет ошибок: cta сливается с фоном, с элементами дизайна
Кнопка и заголовок в желтом цвете, на что кликать непонятно
Нет контрастности, кнопку не видать
Полезные материалы раз в месяц, нужно лишь подписаться
Как повысить конверсию с помощью кнопки?
Получить скидку 15 000 или подарок — кухонную вытяжку на выбор
Одна история
Когда я работал интернет-маркетологом в компании, у нас был лендинг с желтыми кнопками. Руководитель побывав на диджитал семинаре, послушав спикера, предложил сменить цвет кнопки на конверсионно-зеленый. Таким образом предполагалось увеличить конверсию на n%.
Как думаешь, какой результат мы получили? Конверсия осталась на тех же показателях, а новые кнопки не сочетались с общим дизайном сайта и пестрили в глазах. На мой взгляд, ленд стал выглядеть дёшево, будто никто не запаривался над дизайном и подбором цветов.
К чему это я? К любому высказыванию нужно подходить со здравой логикой, что работает в одном случае/нише, совершенно не сработает в другой. В любом случае протестировав этот вариант, мы остались при своих, при своих жёлтых кнопках.
Коротко о главном
6 составляющих правильной кнопки:
Персональные кнопки
Если вы часто выполняете большое количество однотипных действий с письмами, вы можете добавить в верхнее меню почтового ящика дополнительные кнопки и выполнять действия в одно нажатие.
Чтобы открыть всплывающее окно с настройками:
Вы можете настроить следующие действия:
Чтобы отредактировать кнопку, нажмите значок в правом верхнем углу кнопки. Если вы хотите сбросить настройку кнопки, просто нажмите на нее.
Изменить настройки персональных кнопок можно в любой момент, нажав значок в верхнем меню почтового ящика.
Персональные кнопки
Если вы часто выполняете большое количество однотипных действий с письмами, вы можете добавить в верхнее меню почтового ящика дополнительные кнопки и выполнять действия в одно нажатие.
Чтобы открыть всплывающее окно с настройками:
Вы можете настроить следующие действия:
Чтобы отредактировать кнопку, нажмите значок 
в правом верхнем углу кнопки. Если вы хотите сбросить настройку кнопки, просто нажмите на нее.
Изменить настройки персональных кнопок можно в любой момент, нажав значок 
в верхнем меню почтового ящика.
Персональные кнопки
Если вы часто выполняете большое количество однотипных действий с письмами, вы можете добавить в верхнее меню почтового ящика дополнительные кнопки и выполнять действия в одно нажатие.
Чтобы открыть всплывающее окно с настройками:
Вы можете настроить следующие действия:
Чтобы отредактировать кнопку, нажмите значок в правом верхнем углу кнопки. Если вы хотите сбросить настройку кнопки, просто нажмите на нее.
Изменить настройки персональных кнопок можно в любой момент, нажав значок в верхнем меню почтового ящика.
Персональные кнопки
Если вы часто выполняете большое количество однотипных действий с письмами, вы можете добавить в верхнее меню почтового ящика дополнительные кнопки и выполнять действия в одно нажатие.
Чтобы открыть всплывающее окно с настройками:
Вы можете настроить следующие действия:
Чтобы отредактировать кнопку, нажмите значок 
в правом верхнем углу кнопки. Если вы хотите сбросить настройку кнопки, просто нажмите на нее.
Изменить настройки персональных кнопок можно в любой момент, нажав значок 
в верхнем меню почтового ящика.
Яндекс.Почта избавит от ненужных рассылок
Если вы не делаете из своего электронного адреса секрета, почти наверняка вам каждый день приходят разнообразные рассылки. Их шлют все, с кем вы так или иначе соприкасались: интернет-магазин, в котором вы три года назад купили футболку, супермаркет, в котором вы оформили дисконтную карту, сервис бронирования билетов, которым вы пользуетесь раз в год перед отпуском.
Подписаться на рассылку легко, а вот отказаться от неё — гораздо сложнее. Отправители заинтересованы в том, чтобы люди получали их письма, и порой специально усложняют механизм отписки. Одни просят вспомнить логин и пароль, другие задают лишние вопросы и заставляют писать сочинение на тему «Почему я больше не хочу получать эту рассылку». А иногда механизм вообще не работает: человек нажал на кнопку «Отписаться», а письма продолжают приходить.
Мы добавили в Яндекс.Почту инструмент для управления рассылками. С его помощью можно просмотреть все рассылки, на которые вы подписаны, — и решить, какие вы хотите получать, а какие нет. Для каждой рассылки доступен список последних писем — его стоит изучить, если есть сомнения. Бывает, что рассылка, которую никогда не открывали, в действительности оказывается весьма полезной.
Менеджер рассылок показывает все рассылки, на которые подписан пользователь
Чтобы отказаться от ненужных рассылок, достаточно отметить их в списке и нажать на кнопку «Скрыть». Всё — письма из этих рассылок вас больше не потревожат. Заодно можно убрать из ящика старые сообщения: новости о давно закончившихся распродажах, спецпредложения к позапрошлым новогодним праздникам и прочую неактуальную информацию — в общем, весь архив рассылки.
Можно не только отписаться от рассылки, но и удалить весь её архив — старые письма
Для выявления рассылок Яндекс.Почта использует классификатор на основе машинного обучения. Он умеет отличать важные письма от неважных. К примеру, если вы отказались от новостной рассылки интернет-магазина, вы продолжите получать сообщения о сделанных в нём заказах. Это касается и других значимых писем: авиабилетов, квитанций и так далее — все они будут приходить как обычно.
Cкрытые рассылки перемещаются в папку «Удалённые». Там письма хранятся 31 день и только после этого исчезают навсегда. Если вы скрыли рассылку, а потом передумали, её можно вернуть тем же способом — через менеджер рассылок.
Функция управления рассылками доступна в веб-версии Яндекс.Почты и в мобильных приложениях для iOS и Android. В обучении классификатора мы используем отзывы пользователей, поэтому иногда Почта будет спрашивать у вас, правильно ли она распознала тип письма. Ваши отклики — важный сигнал для системы: с их помощью классификатор проверяет себя и совершенствуется дальше.
Email + лендинг: внедряем и повышаем конверсию
Письмо и лендинг – отличная пара. Все оформлено в едином стиле, основная информация в рассылке, детали – на посадочной странице. Короче, эффектно и удобно.
Собрала в этой статье работы Mailigen и коллег. Делимся, как мы создаем письма и лендинги под конкретную цель.
1. Регистрация на событие
Вы проводите тренинг или мастер-класс? Сделайте информативный лендинг, а в рассылке поставьте ссылку на него. О событии пользователь узнает из письма, а детали уточнит на сайте. И никакие письма-лонгриды не нужны!
В идеале продумать триггерную цепочку. Это автоматическая серия писем. Рассылка приходит без вашего участия, если выполняются условия, которые вы заранее настроили в рассыльщике. Пример условий – регистрация на вебинар или приближение даты, когда он пройдет.
Поделюсь опытом Mailigen. К бизнес-завтраку для театров и музеев мы оформили лендинг с формой для регистрации.
Если пользователь регистрировался на бизнес-завтрак, запускалась триггерная цепочка из 4 писем:
Первое письмо – сигнал о том, что регистрация прошла успешно. Второе сообщение помогает установить контакт. Мы попросили участников бизнес-завтрака заранее прислать вопросы, ответы на которые они хотят услышать при встрече.
Третье письмо – организационное: место, время, стоимость. Последняя рассылка пришла после бизнес-завтрака. В ней мы отправили ссылку на материалы спикера, а также контакты на соцсети.
Цепочка писем поддерживает мотивацию и интерес участников до и после события. Она сопровождает пользователей: не дает забыть о событии и дублирует полезную информацию постфактум.
2. Акции и конкурсы
Еще один случай, когда письмо и лендинг работают в паре – акции, розыгрыши и прочие креативы.
Для своих подписчиков Mailigen придумал игру. Мы сделали письмо и лендинг с рандом-рулеткой к Хеллоуину. Что это?
Пользователям приходит рассылка с посылом «спасите, помогите». По сюжету письма зомби захватил офис Mailigen и не собирается уходить, пока не раздаст всем клиентам подарки. Мы просим подписчиков перейти по ссылке и прогнать нечистую силу.
Нажав на кнопку, пользователи попадают на лендинг с рулеткой. Надо кликнуть на крутящийся барабан, чтобы получить приз. Так можно выиграть прогрев домена, аудит сайта, дизайн шаблона, 2 выгодных тарифа Mailigen и «упс» – ничего.
Когда подписчик сыграл в рулетку, высвечивается описание приза. Потом появляется pop-up – всплывающее окно. Нужно оставить в этой форме свой номер телефона и email, чтобы с победителем связались менеджеры и объяснили, что делать дальше.
Креативы с играми и розыгрышами – шикарная штука. Отлично работают на вовлечение и лояльность аудитории и, конечно, могут стать прямым толчком к покупке. Чтобы эксперимент удался, нужно придумать интригующий заголовок рассылки. От темы письма зависит откроют его или нет. А там – прочитают ли лендинг, дойдут до розыгрыша, купят ли продукт.
3. Анонсы и программы
Расписание фестиваля, экскурсионного тура или программа авторского курса – выносите эту информацию в лендинг. В рассылке оставляйте анонс.
Конечно, можно полностью скопировать программу в письмо. Если она короткая – отлично: подписчику не придется открывать дополнительную страницу. Если длинная, то оставьте в письме самые сочные пункты, а о деталях расскажите в лендинге.
Посмотрите, как мы сделали письмо и лендинг с новогодними шоу-программами для клуба «Лачи».
В письме – коротко о новогодних тарифах и плюсах отдыха в «Лачи». Размещены фотографии счастливых клиентов и кнопка «Праздновать с “Лачи”». Она перебрасывает на посадочную страницу :
Тут уже подробная программа по каждому тарифу и дополнительная информация про акции. Есть фотогалерея и видео с прошлого праздника – для наглядности.
Формула «письмо + лендинг-анонс» хороша тем, что вы не будете перегружать рассылку текстом и картинками. Распишите подробности на посадочной, поставьте сюда яркие убеждающие фотографии, а письмо используйте как инструмент для привлечения внимания.
4. Опросы и тесты
Наконец, можно сделать письмо и лендинг в едином стиле, чтобы провести опрос или тест. Вот пример от Aviasales. На почту пришло письмо:
Озорной текст призывает нажать на кнопку и пройти шуточный тест про хоккей. Приз – билеты в города, где проходят хоккейные матчи. Кликнув на кнопку, пользователь попадает на лендинг. Здесь можно прочитать подробные правила акции и начать тест.
Идея с письмом и лендингом для теста – классная. Во-первых, функционал многих рассыльщиков не позволяет создавать письма с встроенными опросами. Делайте письмо с ссылкой на лендинг и не придется разбираться в HTML-редакторе, чтобы написать код письма с интегрированным опросом!
Во-вторых, оформить анкету на лендинге можно гораздо интереснее. Вы не будете зависеть от дизайн-шаблонов рассыльщика.
Подведем итоги
Используйте письмо как способ привести подписчика на продающий лендинг. Вряд ли пользователи ежедневно мониторят ваш сайт и знают обо всех акциях и мероприятиях. Зато почту многие проверяют несколько раз в день – вашу новость, скорее всего, заметят именно в ящике.
Не жалейте сил на дизайн и 100 раз перечитайте текст письма. Вы должны прислать креативную рассылку и так презентовать свой продукт, чтобы пользователь тут же захотел узнать подробности в лендинге.
Рекомендуемые статьи
16 октября с 21.30 до 22.30. Бесплатная Интернет-конференция. Вы узнаете 10 эффективных способов повысить конверсию…
Программное обеспечение email маркетинга доступно по приемлемым ценам и позволяет качественно отслеживать расходы. Вы будете…
