Форма и цвет - важные визуальные сигналы, они помогают привлечь внимание к расположению кнопки. Но в тот последний критический момент, когда клиент должен принять решение, он будет взаимодействовать именно с текстом кнопки.
Вот пример из исследования кейса, где изменение одного слова в CTA на B2B (wiki) сайте привело к 38.26% повышению конверсии.
У заказчика был портал, через который бизнесмены находили офисы под аренду. Сайт предоставлял тысячи офисов, которые потенциальные покупатели могли посмотреть. Когда клиенты находили подходящий офис, они должны были нажать на главный CTA (находившийся на всех страницах) чтобы получить на e-mail больше информации об арендном предложении.
Это значит, что нажатия на CTA это критически важная цель для конверсии и каждый дополнительный клик потенциально значит больше денег на счету.
Ответ в посыле кнопки. «Закажите» («Order») подчёркивает что вам нужно сделать - а не то, что вы собираетесь получить. При этом «Получить» («Get») подчёркивает что вы собираетесь получить, нежели то, что вам нужно сделать для этого. Другими словами трактовка текста отражает смысл.
Но отражения смысла не всегда достаточно. Чтобы достичь полного эффекта, текст вашей кнопки должен еще обоснован спецификой сценария конверсии, в котором окажется клиент, если нажмёт кнопку.
Чтобы показать это, посмотрите на пример, где CTA, отражающее только смысл, действует существенно хуже, чем кнопка, которая отражает и смысл и его уместность.
Здесь заказчик - популярный сайт эссе. Их лендинг пейджи (wiki) включают анонс эссе, и их цель - добиться от потенциальных клиентов перехода на страницу подписки.
Несмотря на тот факт, что «Получить мгновенный доступ сейчас» («Get Instant Access Now») передаёт смысл (можно было бы сказать «Купить доступ»), оно не сравнимо с «Читать полное эссе сейчас» («Read Full Essay Now»).
Этот CTA размещён на 120.000+ лендинг пейджах, поэтому правильное его использование имеет важнейшее значение для общей конверсии сайта.
Выше еще один пример, который показывает, как добавление уместности в CTA имеет впечатляющий эффект на конверсию - в этом случае, повышение на 68%.
Заказчик пожелал остаться анонимным, но я могу сказать, что это крупная сеть спортзалов в Скандинавии. Пример взят из PPC (wiki) лендинг пейджа, где цель - добиться от потенциального клиента кликов по процессу оформления заказа, в котором они смогут выбратьспортзал и подписаться на членство в нём.
Контроль-версия уже вполне хороша, потому что она отражает смысл и фокусирует на том, что вы собираетесь получать - а не то, что вам нужно сделать для этого. Тем не менее, это очень обобщённо, «Получи членство» («Get membership») можно применить к любой ситуации, где подразумевается членство.
Я сделал небольшое исследование и обнаружил, что местонахождение это очень важный фактор, влияющий на решение о вступлении в состав чего-нибудь. Поэтому, в этом случае, можно сделать CTA более уместным в конкретном сценарии конверсии и повысить конверсию добавлением «Найди спортзал» («Find gym») (Первый шаг в процессе оформления включает полный список местонахождений спортзалов).
Все исследования, которые я сделал, можно сжать в один простой оптимизационный принцип:
Смысл + Уместность = Больше Конверсии
Это правда очень просто. Чем больше смысла и уместности вы можете передать через ваш CTA, тем больше конверсии вы скорее всего получите. Конечно, важно не разочаровывать ваших потенциальных клиентов созданием вопиющих заявлений, которые вы не сможете подтвердить. Поэтому делайте ваши тексты уместными и фокусируйтесь на пользе от нажатия - но не преувеличевайте её.
Когда вы найдете CTA, который вы хотите оптимизировать, задайте себе два вопроса:
- Какая мотивация у клиента нажать эту кнопку?
- Что клиент получит, если нажмёт её?
Ответы на эти два вопроса будут основой нового текста кнопки. Конечно, вы потратите время, улучшая и оттачивая его, прежде чем он будет готов к тестам, но эти вопросы являются отличным способом начать.
Возьмём пример с членством в спорклуб:
- Мотивация клиента - стать членом-участником местного спортзала.
- Когда он нажмёт на кнопку, он получит возможность найти спортзал и вступить в его состав.
Текст кнопки: «Найди зал и получи членство»
CTA (Call to Action) - это призыв, мотивирующий пользователя к совершению того или иного действия (перейти, заполнить форму, позвонить, купить, узнать и т. д.). Call to Action является заключительным этапом в классической модели AIDA. Грамотно выстроенный CTA должен привлечь внимание, заинтересовать и побудить человека совершить действие. Эффективность CTA-элемента - это важный показатель, который необходимо постоянно отслеживать. Наблюдайте за тем, сколько людей пришло на целевую страницу и сколько из них совершило действие. Если данное значение слишком низкое, значит что-то не так с CTA-элементом.
В качестве элемента CTA может выступать кнопка, изображение, форма или даже текст, призывающий к какому-либо действию. Его можно использовать везде, в любом контенте, например в тех же презентациях, вебинарах, на баннерах и т. д. Даже голос по радио, призывающий позвонить или зайти на сайт радиостанции, является Call to Action.
Существует несколько техник, способных увеличить эффективность CTA.
Call to Action – это триггер, побуждающий пользователя совершить то или иное действие. И чем оригинальнее и интереснее будет данный триггер, тем больше людей по нему кликнут.
Сегодня мы поговорим о кнопках «Call to action» далее CTA. Элементы CTA, как понятно из названия, призывают пользователя совершить какое-либо действие на сайте. Однако дизайнеры часто относятся к ним с пренебрежением. В то время как понимание принципов в данном вопросе повысит эффективность готового продукта. Из этого материала вы узнаете как правильно создать кнопку CTA.
Важно иметь хотя бы общее представление о том, как цвет, размер, содержание и другие факторы влияют на конверсию кнопки CTA. Сами принципы довольно просты, но применять их нужно еще на этапе планирования конструкции сайта.
Кнопки CTA могут нести различные функции. В конце концов «призыв к действию» может означать что угодно. Но главный принцип кнопок заставить пользователя, который зашел на ваш сайт совершить действие. Например, добавить товар в корзину, скачать что-то , предоставить информацию, и т. д.
Так как призыв может быть к любому действию, при создании кнопки нужно учитывать как само действие, так и тип сайта и целевую аудиторию.
Существуют различные типа кнопок CTA. Ниже вы найдете наиболее распространенные типы, рассортированные по типу действия, к которому они призывают пользователя.
Интернет-магазины, как правило, используют целый ряд кнопок CTA, но самые популярные из них — кнопки «Добавить в корзину». Эти кнопки обычно размещаются на страницах с продуктом, и призывают пользователя приобрести тот или иной товар. Обычно их оформляют коротким текстом с призывом «Купить» или «Добавить в корзину» и иконкой банковской карточки или корзины.
Кнопки «Скачать» походи на предыдущий тип тем, что они предлагают пользователю завладеть предлагаемым предметом, то есть скачать его. В случае с этим типом кнопок, дизайнеры также предпочитают давать пользователю больше информации, добавляя, например, версию продукта и размер файла.
На некоторых сайтах клиента пытаются заинтересовать, предложив ему пробную версию продукта. Это может быть бесплатная загрузка или бесплатный аккаунт, в зависимости от типа предлагаемой услуги или товара. Некоторые дизайнеры стараются быть лаконичными в оформление СТА-кнопок такого типа, кто-то же наоборот щедро наделяет кнопку дополнительной информацией.
Кнопки «Узнать больше» часто располагают в конце тизерного блока информации. Обычно это простые кнопки, однако достаточно большого размера, чтобы привлечь внимание пользователя.
Кнопки регистрации чаще всего встречаются в двух версиях. В первом случае кнопка ведет на форму регистрации, во втором исполняет роль кнопки «Добавить в корзину», предлагая оплатить аккаунт и пользоваться им в дальнейшем.
Существуют и СТА-кнопки других типов, но большинство из них схожи с вышеперечисленными. А принципы, которые применимы к описанным выше кнопкам скорее всего подойдут и к большинству остальных.
Вы наверняка хотите, чтобы кнопки СТА на вашем сайте выделялись на фоне остального контента и привлекали внимание пользователя. Для этого используйте негативное пространство вокруг кнопок. Создайте воздух между контентом и СТА-кнопками. В некоторых случаях (как с кнопками «Добавить в корзину») этим правилом можно пренебречь, но чаще всего оно добавит эффективности вашему дизайну.
Важно при этом не забывать о балансе. Нужно рассчитать негативное пространство так, чтобы оно выглядело пропорционально размеру кнопок. Мы хотим, чтобы кнопки и контент выглядели как единая композиция, несмотря на то, что мы отделяем их друг от друга. Так что иногда вам возможно придется повозиться, экспериментируя с расстоянием.
Размер кнопки СТА очень важен. Очень большая кнопка затмит остальное содержание, слишком маленькая затеряется среди окружающего контента. Нам же нужно, чтобы наша кнопка выделялась на фоне других элементов, но при этом не подавляла их визуально.
Цвет нужно использовать в паре с размером. Для больших кнопок выбирайте цвет, который в меньшей степени отличается от основного цвета вашего дизайна, но он все же должен отличаться от фона. Для кнопок меньшего размера используйте яркие тона, контрастирующие с основным цветом. Но убедитесь, что в любом случае цвет кнопки вписывается в общий дизайн и сочетается с остальными элементами.
Точная формулировка, которую вы используете в тексте кнопок может сыграть важную роль. Сравните призыв «Купить сейчас» с призывом «Добавить в корзину». Первый вариант выглядит куда более срочным и даже навязчивым. Также важен размер текста. К примеру, при необходимости текст «Попробовать услугу бесплатно» можно заменить более коротким вариантом «Пробная версия».
Текст, который вы используете для оформления кнопок должен быть максимально прост и понятен. Необходимо, чтобы пользователь с первого взгляда понимал что его ждет, после нажатия на кнопку. Если у него возникают сомнения из-за неясности, вы вполне можете потерять в конверсии.
Не забывайте и о размере текста. Шрифт должен быть большим и заметным, но конечно сочетаться с размерами самой кнопки. Убедитесь, что текст достаточно контрастен и легко читаем.
Мы хотим, чтобы посетители на нашем сайте совершили желаемое нами действие как можно скорее. И хотя никто не собирается дурачить посетителя, чем больше возможностей для раздумий и сравнений вы им предоставляете, тем выше вероятность получить негативный ответ.
Наша задача произвести на пользователя впечатление, что нужно действовать прямо сейчас. Вам нужно побудить их действовать незамедлительно, экспромтом. И пусть не все СТА-кнопки будут работать так (особенно если речь идет о покупке дорогостоящего товара), дешевые или бесплатные действия должны в идеале производится пользователем без раздумий.
В случае необходимости, дайте пользователю дополнительную информацию о том, что он получит, нажав на СТА-кнопку. Чаще всего это относится к кнопкам «Пробная версия» или «Скачать». Обычно в этих случаях размещается информация о том, как долго действует пробная версия, сколько весит файл, который вы собираетесь скачать или какая версия программы будет вами скачана.
Когда вы размещаете на кнопке дополнительную информацию, убедитесь что в центре внимания остается все же сам призыв к действию. Сделайте текст призыва больше, а дополнительную информацию — менее заметной.
Необходимо расставить приоритет кнопок, когда на странице их больше одной штуки. Подчеркнуть важность элемента можно различными способами, но чаще всего это делают при помощи цвета и размера.
Используйте цвет, контрастирующий с основным цветом дизайна, чтобы подчеркнуть важность кнопки. Менее контрастные цвета используйте для того, чтобы визуально снизить важность кнопки. Та же история с размером. Выделите важность кнопки, сделав ее больше и уменьшите ее, чтобы понизить в приоритете.
Оформление кнопок СТА иконками также может сыграть на увеличение конверсии. Примером могут служить иконка корзины на кнопке «Купить» или стрелка на кнопке «Скачать». Вы также можете использовать и уникальные иконки и изображения, но убедитесь что они в точности передают предназначение кнопки и не вводят в заблуждение пользователя.
Ниже вы найдете примеры удачного дизайна кнопок СТА. И пусть некоторые из них спроектированы не по всем вышеупомянутым принципам, большая часть правил все же соблюдена и кнопки работают эффективно.
Logbook
Использование разных цветов для кнопок «Скачать» и «Купить» отделяют их друг от друга и подчеркивают важность кнопки «Купить».
Несмотря на то, что многие не знают этого, кнопки «призыв к действию» являются мощным инструментом маркетолога.
«Призыв к действию» – это слово или картинка, благодаря которым люди делают то, чего от них хотят владельцы сайта. То, как вы оформляете и размещаете их, является очень важным.
Неважно, хотите ли вы, чтобы люди подписались, скачали или же купили что-то, кнопка должна всегда выглядеть убедительно.
Изучение более 200 малых предприятий, базирующихся в США, показало, что более 70% из них не имеют четких и понятных кнопок «призыва к действию».
Исследователи также обнаружили некоторые интересные факты, приведенные ниже:
Как видите, многие предприятия пренебрегали убедительными «призывами к действию». Это означает, что они не дают посетителям достаточно указаний о том, что делать дальше. В результате этого посетители покидают сайт.
Так как именно вы будете создавать убедительные кнопки на вашем сайте?
Посмотрите на эти 24 простых совета по улучшению вашего «призыва к действию», в результате чего вы получите больше кликов по нему:
Выбор подходящего цвета играет огромную роль. Некоторые цвета, как известно, привлекают внимание больше, чем другие. На сайте компании SAP оранжевый цвет увеличил количество переходов по кнопкам на 32.5%.
Зеленый и оранжевый являются одними из лучших в этом деле цветов. Тем не менее, нужно подбирать цвета в соответствии с главным дизайном сайта. Всегда выбирайте те цвета, которые выделяются и привлекают внимание.
Убедитесь, что текст на кнопке достаточно большой для того, чтобы посетители его заметили. В то же время, не делайте его слишком большим, потому что он может выглядеть отталкивающим.
Тексты, в которых указаны явные преимущества, помощь и другая важная информация, соберут больше кликов.
Hubspot является хорошим примером этого:
Текст на вашей кнопке не должен быть длинным. Сделайте текст кратким и понятным. Используйте от двух до четырех слов.
Каждая кнопка «призыва к действию» должны заинтриговать и побудить посетителей сайта к действию. Попробуйте заменить слишком частое использование таких слов, как “войдите” и “подтвердите” словами “присоединитесь” и “согласитесь”. Выбирайте слова, которые относятся к вашему предложению, например “получить бесплатную пробную версию” или “скачать бесплатный образец”.
Дополнительные эффекты могут быть отличным способом для того, чтобы привлечь внимание пользователя. Например, можно создать кнопку, которая шевелится, когда посетители нажимают на нее.
Старайтесь не добавлять слишком много элементов вокруг вашей кнопки. Оставляя пустое место возле «призыва к действию», вы автоматически выделяете его.
Эффект лимита заставит посетителей принимать срочные решения: «первые 100 подписчиков получат бесплатную электронную книгу».
Не путайте посетителя кнопкой, которая не содержит важную информацию. Постарайтесь быть более конкретными, указывайте важные детали вашего предложения.
Ваша кнопка «призыва к действию» должна быть достаточно большой для того, чтобы посетители без труда могли найти ее. Однако не делайте ее слишком большой, потому что это может отпугнуть посетителя.
В основном используются прямоугольные кнопки, но не стоит забывать, что округлая форма тоже может быть эффективной. Если кнопка как бы вогнута внутрь, то посетители обратят больше внимания на ее текст.
Сделайте кнопку «призыва к действию» актуальной, покажите, почему именно ее должен нажать пользователь. Вместо того, чтобы использовать общий текст («увидеть больше»), 9gag использует фразу «Хочу больше веселья». Это заставляет пользователей нажимать на кнопку, если они хотят увидеть больше забавных фотографий.
Заставьте посетителя думать, что нажать на кнопку – в его интересах. Покажите это на конкретном примере. Консультант по маркетингу может привести в пример выгоду, которую получил покупатель, воспользовавшийся его услугами. Это убедит большее количество людей нажать эту кнопку.
Не перекладывайте все на технику, потому что пользователи хотят взаимодействовать с реальными людьми. Попробуйте разобраться в мыслях своих посетителей, это поможет достучаться до их чувств. Например, сайт по недвижимости может использовать такие слова, как «Начните свой виртуальный тур» или «Отправьтесь в тур сегодня»
В то время как на большинстве сайтов написано “нажать здесь”, вы можете получить больше кликов, написав, чтобы они не нажимали кнопку. Эта стратегия была реализована фирмой TimothySykes, на сайте которой было написано “не нажимайте, если вы ленивы”. В результате этого переходы по этой ссылке увеличились на 39%
. 
Ваши «призывы к действию» не обязательно должны быть кнопками. Подумайте над другими вариантами, которые могли бы заставить людей перейти по ссылке. Вы можете попробовать сделать ссылку в видео, что привлечет внимание посетителей.
Вы можете разместить «призыв к действию» внизу, чтобы пользователь нажал его после того, как получит точное представление о том, что Вы предлагаете. Пользователи чувствуют, что вынуждены нажать кнопку, если она появляется перед главной информацией, именно это может оттолкнуть их.
То, как вы оформляете вашу кнопку, может сильно повлиять на количество нажатий на нее. Добавление картинок поможет пользователю получить лучшее представление о том, что он покупает.
Исследования, проведенные Майклом Аагордом из Content Verve, показали, что переход от второго лица к первому увеличивает количество кликов на 90% в среднем. Используйте личные местоимения для того, чтобы показать, что посетитель общается с реальным человеком.
У вас могут быть другие кнопки на вашем сайте, которые не являются основными кнопками «призыва к действию». Убедитесь, что ваш главный «призыв к действию» привлекает больше внимания, чем другие вторичные кнопки.
Добавление привлекательной графики имеет большое значение. Однако важно, чтобы картинки, которые вы добавляете, имели непосредственное отношение к информации, которую вы хотите донести.
Нет универсального образца кнопки, который бы подходил ко всем «призывам к действию». Поэтому важно создавать опросы для понимания, какой цвет, форма и текст больше всего подходят для вашей компании.
Помните о старой пословице, что меньше значит больше. Ваш «призыв к действию» должен быть короткими, чтобы не вводить пользователей в заблуждение многовариантностью. Если вы хотите добавить несколько вариантов, ограничьте их до трех или четырех.
Место размещения – это один из самых важных элементов, который влияет на количество кликов. Есть много мест, где вы можете добавить вашу кнопку «призыва к действию» в зависимости от ее типа. Попробуйте разместить ее в разных местах, чтобы понять, где она функционирует лучше.
Как уже говорилось в последнем пункте, позиционирование вашей кнопки может оказать огромное влияние на количество кликов. Расположение кнопок должно зависеть от контента и информации, а также дизайна Вашего сайта.
Тесты, проведенные Content Verve, показали, что кнопки, размещенные ближе к концу страницы, получили на 304% больше переходов, чем те, что размещены вверху страницы.
В случаях, когда предложение или продукт являются многовариантными, пользователям нужно изучить много информации, чтобы принять обоснованное решение. Именно в этом случае, кнопку следует разместить снизу. Для единичных предложений лучше поместить кнопку сверху.
В целом, видное расположение вашего «призыва к действию» играет ключевую роль в количестве переходов по нему.
Элементы Call-to-Action (CTA, призывы к действию) стали важной частью веба. Они находятся повсюду, чтобы рассказать нам что конкретно делать: купите книгу, скачайте бесплатное руководство, свяжитесь с нами для более подробной информации и т. д. Иногда это выглядит как дешевый маркетинг, написанный и спроектированный людьми оторванными от реальности. Такие примеры чаще всего имеют обратный эффект. Но что делает элемент CTA хорошим, эффективным? Мы собрали 10 примеров призывов к действию с классным дизайном, правильным текстом или просто разработанные с умом.
На первом месте в нашем списке , которые справились с работой по созданию классного CTA хорошо как никто другой. У них на сайте ни один хороший элемент призыва к действию, но лидером стало диалоговое окно “Prepare for Launch” (подготовьтесь к запуску). Которое подписывает вас на e-mail-кампанию.
Даже если бы окно было полностью лишено текста, анимированное изображение нависшего над кнопкой пальца недвусмысленно подсказывает нам что делать. Это просто, увлекательно, и нажав на кнопку “Send Now”, вы испытаете чувство завершенности.
Превратили в CTA большую часть своей домашней странички. Заголовок и описание четко и емко описывают род деятельности компании, и просто просят оставить свой e-mail, чтобы начать. Визуальная часть интересна, и контент бьет прямо в точку.
Сайт по сути состоит из целой серии CTA. Этот ряд разделов в простой и хорошо читабельной форме рассказывают о том, что предлагают и сколько это стоит.
Вишенкой на торте стала милая иконка бесплатной доставки. Ну и конечно свою роль играет фон из свежей еды и аппетитных ингредиентов.
Так же как и Blue Apron, выделили для CTA весь главный блок на своей странице. Однако в этом случае дизайнеры решили максимально все упростить.
Получился слайдер, который освещает несколько самых важных вещей о стриминговом музыкальном сервисе. Призывы к действию подталкивают вас проскролиться или нажать кнопку для получения более подробных деталей. Spotify не пытаются вас удивить, просто делают так, чтобы залогиниться и прочесть больше было как можно проще.
Это место, созданное для поиска, аренды и сдачи в аренду недвижимости. На первой странице сайта вы найдете область CTA, которая позволит вам делать все вышеописанное. Прямо со стартовой страницы, без необходимости куда-то идти и что-то искать. Это самый полезный вариант применения призывов к действию.
Ответвление Bang and Olufsen, сайт продолжает минималистичный дизайн и стиль брендинга родительского сайта. Элементы Call-to-Action — отличный тому пример. Сайт богат красивым промышленным дизайном, а призывы к действию предлагают посмотреть всю коллекцию этих замечательных наушников, или приобрести эту пару.
Возможно у вас возникнет мысль: «Это выглядит неплохо, но что в этом особенного?». Главная идея, которую мы хотим подчеркнуть в этом примере следующая: CTA — важная часть вашего дизайна и бренда в целом, и они должны отражать то что вы делаете и то как вы это делаете.
Когда речь идет о важных и сложных ситуациях, нет времени ждать. создали атмосферу срочности при помощи элементов CTA. Фотография, подкрепленная серьезным, броским заголовком подчеркивает важность и тяжесть ситуации.
Дизайн помогает увидеть людей в беде и побуждает к действиям.
Мастера домашней автоматизации Nest отметили День Земли, призвав к экономии энергии. Это послание было изображено при помощи энергосберегающего термостата.
На фоне звездного неба дизайнеры расположили огромное изображение продукта. Это производит впечатление и напоминает планету, плывущую в космосе. К слову, звездный фон отлично создает эффект воздуха и пространства.
Датская компания, продающая минималистичные часы и другие аксессуары. CTA на их сайте выполнены в отличной цветовой гамме, и подчеркивают простой стиль продукта. Это учит нас вот чему: если у вас уникальный продукт, позвольте ему говорить за себя.
Сайт о путешествиях. На главной странице вас встретит слайдер, который собрал продукты и истории в тему. Например, скриншот ниже предлагает посмотреть фильм о природе.
Изображение большое и привлекательное. От него веет дикой природой. Это идеально вписывается в целевую аудиторию.
Хорошие элементы CTA должны учитывать специфику аудитории и интересы пользователя. Цвета и изображения должны отражать ваш бренд и нести смысл. Анимация работает здесь отлично, только если она уместна. Текст должен быть емким, коротким и строго по делу.
Приведенные выше примеры призыва к действию делают свое дело просто и эффективно. Они доказывают, что вам не нужно нечто многословное или сложное, чтобы подтолкнуть пользователей к действию.
Перевод — Дежурка
