Call To Action (CTA) — кнопка, которая призывает посетителей лендинга к действиям. Целевую страницу составляют таким образом, чтобы человек увидел CTA и захотел на него нажать. Но как убедиться, что призыв работает?

Важные правила оформления кнопки CTA

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

Источник изображения mailerlite.com

1. Соблюдайте контрастность цветов
В A/B тесте всплывающего окна с информацией о бесплатной подарочной книге (см. скриншот далее) выяснилось, что оранжевая кнопка эффективнее зеленой. Её конверсия составила +86%. Потому что оранжевая кнопка больше контрастировала с текстом над ней.

продающая cta кнопка

2. Выберите подходящую форму кнопки

Дизайнеры интерфейсов изучают визуальное восприятие и выяснили, что округлые объекты приятнее нашему глазу — их легче воспринимать. Но при этом простые прямоугольные формы проще реализовывать в дизайне.

Кнопки CTA с прямыми и закругленными углами

Кнопки CTA с прямыми и закругленными углами.

3. Увеличивайте размер

CTA-кнопка — главный элемент лендинга. Чем больше людей на нее нажмут, тем больше людей купит продукт, оставит персональные данные или подпишется на рассылку.

Правило простое — размер кнопки должен быть большой, чтобы посетитель мог без труда её найти. Но не переборщите. CTA-кнопка не должна выбиваться из общего дизайна. Гармонично и красиво призыв к действию выглядит у издательства МИФ.

Большой размер cta кнопки

Как правильно расположить CTA-элемент на лендинге

1. Чем выше кнопка, тем проще ее найти

Посетители часто не до конца листают лендинг: это можно увидеть через Вебвизор Яндекса.

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

cta кнопку должно быть видно

2. Традиционное расположение CTA-элемента — в правой части экрана

Это обусловлено тем, что большинство людей правши. Но в последнее время кнопку ставят слева. Есть теория UX-дизайнеров о том, что расположение элементов не там, где все привыкли видеть, успешно сказывается на конверсии. Но точно узнать, работает ли эта гипотеза для вашего бизнеса, можно только с помощью тестов.

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

Кнопка расположена слева.

Как создать привлекающий внимание призыв к действию

эффективный призыв к действию

Источник изображения a1webdesignteam.com

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

1. Что такое прямой призыв к действию

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

«Бесплатная проба» — пассивная фраза, просто констатирует факт.
«Попробовать бесплатно» — глагол побуждает к действию.

2. Всё ясно, если выбора нет

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