Как дизайн cta-кнопки может увеличить конверсию?

Posted on by riasevastopol

Если вы уже соскучились по практическим примерам, касающихся проектирования действенно трудящихся кнопок призыва к действию на целевых страницах, то вашему вниманию предлагается статья из серии уже опубликованных нами постов на эту тему, среди которых: Элементы призыва к действию от известных брендов, CTA-элемент «выше линии сгиба»: миф либо действительность? и 99 примеров действенных элементов призыва к действию.

Эта информация рекомендована всем. Она значительно расширит ваше познание практики оптимизации конверсии и лидогенерации. Отметим, что кнопкой призыва к действию, либо CTA-кнопкой (call-to-action button), мы именуем ссылку, довольно часто оформленную в виде кнопки, нажатие на которую ведет к отправке данных лид-формы либо выпонению любого другого целевого действия.

Что вы должны знать и не забывать oб CTA-кнопках

Для целевой страницы призыв к действию олицетворяет собой переломный момент между конверсией (Conversion) и отказом от нее (Bounce). Если вы просите пользователя сделать что-либо на вашем лендинге, то чтобы выполнить желаемое воздействие, он обязан воспользоваться вашим CTA-элементом — независимо от того, что вы конкретно предлагаете: загрузить eBook, заполнить лид-форму, приобрести товар/услугу либо на другую страницу.

Как дизайн cta-кнопки может увеличить конверсию?

CTA: Переломный момент между отказом и конверсией от нее

Кнопки призыва к действию складываются из двух главных элементов: фактически дизайна (цвет, форма, шрифт) и текста. Они оба имеют яркое влияние на конверсию, но играются различные роли в ходе преобразования:

  • Дизайн кнопки отправляет визуальный сигнал, помогающий привлечь интерес потенциальных клиентов к действию. Иначе говоря дизайн (внешний вид) отвечает на вопрос: «Куда я обязан надавить?».
  • Текст, со своей стороны, оказывает помощь пользователю заметить возможность его действий и отвечает на вопрос: «Из-за чего я обязан надавить на эту кнопку?».

В данной статье мы сосредоточимся именно на дизайне кнопки, но если вы желаете взять дополнительные советы по текстам призыва к действию, вы имеете возможность почитать об этом в других постах отечественного блога, к примеру, тут:

Просматривайте кроме этого: 4 уловки увеличения эффективности призывов к действию

Начнем с примера из настоящей судьбы

на данный момент обращение отправится о большом европейском сайте электронной торговли, реализовывающем фарфор, расписанный вручную (по данным сайта contentverve.com). Изменяя цвет и форму кнопки призыва к действию, маркетологам удалось повысить продажи продукта – не только рейтинг кликабельности (CTR) – на 35,81%.

Это пример замечательно иллюстрирует, какое влияние на конверсию может оказывать дизайн CTA-кнопок.

теория оптимизации и Современный дизайн конверсии уже фактически отказались от квадратных плоских кнопок в принципе. В случае если ваш главный ресурс еще изобилует таковыми, то рекомендуем срочно поменять это.

Нет универсальной формулы «безотносительной CTA-кнопки», срабатывающей любой раз

Твитнуть цитату:

Кнопки бывают самых различных размеров, цветов и форм, единственное, чего для них совершенно верно нет – это универсального, подходящего на все случая решения, срабатывающего любой раз наилучшим образом. Разные «эксперты» обожают утверждать кажущиеся им незыблемыми истины типа: «Вы ни при каких обстоятельствах не должны применять красные кнопки, потому, что красный – это запрещающий цвет» либо «Зеленая кнопка лучше каждый!».

Подобные обобщения звучат, само собой разумеется, со знанием дела, но они редко отражают настоящее положение дел – на практике результаты применения одного решения в различных условиях будут различаться в зависимости от контекста, массы и общего дизайна страницы разнообразнейших дополнительных событий и переменных. В продемонстрированном нами выше примере зеленая кнопка показала себя лучше, чем светло синий, но это не означает, что «зеленый – лучший окончательно», потому, что мы можем отыскать множество примеров сплит-тестирований, где светло синий либо красные кнопки преобразовали лучше, чем зеленые.

Основное – выделить кнопку

Фундаментальный принцип оптимизации CTA-элемента – его визуальное выделение на фоне неспециализированного макета лендинга так, дабы пользователь сходу имел возможность отыскать его взором, решив выполнить поставленные вами цели конверсии. В случае если ваша целевая страница по большей части зеленая, то зеленая кнопка вполне возможно не будет прекрасно преобразовать, и без того будет как раз вследствие того что визитёру будет весьма тяжело отделить взором CTA-элемент от другой части. Лучшим методом определить, какой «рецепт» трудится на конкретной целевой странице, был и остается сплит-тест.

Миллионов цветов на выбор, и с какого именно мне начать?

Лучший совет – руководствоваться здравым смыслом и применять контрастные цвета. Ветхий хороший «тест на косоглазие» постоянно придёт на помощь – соберите вашу страницу, отойдите на пара шагов назад от монитора, скосите глаза, и посмотрите, выделяется ли ваша кнопка.

Еще пример из настоящей практики

CTR коммерческого сайта, торгующего недвижимостью, был увеличен более чем в 2 раза посредством радикальной реконструкции основной CTA-кнопки – тускло-коричневатая кнопка была заменена на значительно более броскую оранжевую.

При исполнении «теста на косоглазие» этих двух вариантов кнопки, сходу ясно, какая выделяется больше.

Эксперты в большинстве случаев советуют затевать экспериментировать с оранжевой либо зеленой кнопкой легко вследствие того что эти цвета довольно часто показывают прекрасные результаты в тестах. Тут нет никаких очень глубоких психотерапевтических обоснований – легко они прекрасно выделяются на большинстве «среднестатистических» целевых страниц. Но тут, как мы уже говорили, все зависит от конкретных событий – быть может, спасительной для вас окажется фиолетовая кнопка.

Измените цвет и в обязательном порядке совершите сплит-тестирование.

Просматривайте кроме этого: Мастерство сочетания цветов — броский путь к высокой конверсии

Зрительные эффекты

Зрительные эффекты смогут иметь влияние на кликабельность (CTR) вашей кнопки, но использовать их нужно с особенной осторожностью! Кроме того довольно малый эффект может оказать страно громадное влияние – и нет никаких обеспечений, что оно в обязательном порядке будет хорошим.

Разглядим пара примеров

В прошлом примере (сайт для торговли недвижимостью) оранжевая кнопка с зеленой стрелкой преобразовала существенно лучше, чем неинтересный коричневатый оригинал. Дизайнеру не понравилась новая кнопка, не обращая внимания на хорошее влияние, оказанное ей на конверсию – его основное возражение сводилось к тому, что сочетание оранжевой кнопки с зеленой стрелкой думается ему «некрасивым». Эксперт по оптимизации приводил собственный аргумент: зеленая стрелка делает кнопку более заметной, а следовательно – более деятельно взаимодействующей с пользователем.

Спор разрешило простое А/Б-тестирование. Дизайнер был неправ: кнопка без стрелки понизила конверсию на 12,29%.

А вот противоположный пример: специалист по оптимизации высказал предположение, что, поменяв цвет надписи на зеленой кнопке с тёмного на желтый, он еще больше выделит кнопку на странице и увеличит CTR. Увы, последствия были самыми неприятными: изменение цвета надписи снизило кликабельность 18,01%.

Так что в этом случае зрительный эффект оказал негативное влияние на конверсию – стало известно, что менее контрастное ответ трудится большое количество лучше. По большому счету, как правило возможно быть уверенным, что простые кнопки (каковые пользователь легко выявит как как раз «кнопки») с конкретными текстами, обрисовывающими воздействие, будут трудиться лучше, чем разные «креативные» варианты.

Несложная зеленая кнопка с описательным текстом превзошла «креативную» на 10,94%.

Размер имеет значение, но «больше» не всегда значит «лучше»

Многие дизайнеры делают неточность, создавая CTA кнопки, идеально вписывающиеся в дизайн целевой страницы, но через чур незаметные чтобы положительно оказывать влияние на конверсию. Принципиально важно, дабы ваша кнопка была большой, дабы четко выделяться в качестве главного интерактивного элемента лендинга, но это отнюдь не свидетельствует, что «больше» машинально свидетельствует «лучше».

Вот пример, в котором повышение размера графического элемента стало причиной понижению конверсии на 10%:

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

Уважайте текст на CTA-кнопке!

Кроме заголовка вашей страницы, текст на CTA-кнопке есть одной из тех немногих строчков на вашем лендинге, о которых возможно сообщить с 99% уверенностью, что они будут прочтены визитёрами. Пристально отнеситесь к составлению текста, и не забывайте, что в этом деле нет мелочей.

Будьте конкретны: тексты «послать» и «отправить» ни о чем не говорят вашему потенциальному клиенту. То, что он осознает, именуется приблизительно так: «послать заявку», «заказать обратный звонок», «взять консультацию», «заказать расчет», «заказать очередь», «обеспечивать участие», «получить доступ к урокам», «загрузить книгу» и т. д.

Просматривайте кроме этого: Контурные кнопки: 15 примеров призывов к действию на посадочных страницах

Что вы должны сделать прямо на данный момент

Перейдите на ваши целевые страницы и пристально изучите кнопки призыва к действию. Они выделяются на странице? Легко ли их опознать как раз в качестве кнопки? Либо это легко часть стильного, но ненужного для конверсии дизайна?

Выполните «тест на косоглазие» и поразмыслите, возможно ли поменять цвет, размер, шрифт либо применить какой-либо зрительный эффект? Решившись на трансформации, не забудьте проверить их целесообразность посредством сплит-теста.

Команда LPgenerator с удовольствием создаст для вас неповторимый дизайн лендинга, либо же вы имеете возможность создать собственную посадочную страницу самостоятельно в отечественном онлайн-конструкторе!

Высоких вам конверсий!

По данным: unbounce.com

Случайные статьи:

Как повысить конверсию на сайте. Виджеты для увеличения конверсии сайта. Алексей Молчанов


Подборка похожих статей:

riasevastopol

More Posts