Примеры Call to action. Как писать call-to-action, которые повысят конверсию (с примерами)

Объединив научные исследования по психологии цвета с некоторыми принципами дизайна, вы сможете сделать отличную кнопку «Сall-to-action» (СТА) для вашего сайта отличную и существенно увеличить конверсию. Есть 4 инструмента, которые помогут этого достигнуть: расположение кнопки, форма (и размер), сообщение и цвет.

В этой статье я расскажу о цветовом аспекте.

Но давайте по-порядку...

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

Представьте, что ваш сайт — это цепочка действий, которые пользователям необходимо осуществить, чтобы найти то, за чем они пришли. Чтобы облегчить им жизнь, абсолютно необходимо сделать эту цепочку насколько простой (то есть user friendly ), насколько возможно, и вести их к желаемой странице без какого-либо вмешательства.

Так как некоторые из этих действий важнее других, они должны будут выделяться в интерфейсе. Вы хотите захватить внимание пользователей, пытаясь убедить их начать действовать (призыв к действию). Это чаще всего делается с помощь визуального маркера, элементов интерфейса с призывом к действию. Вот несколько примеров возможных действий: покупка продукта, подписка на рассылку, создание нового аккаунта, подача заявки, скачивание последней версии ПО,..

Но почему же цвета имеют такое значение?

Психология цвета

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

Как видите, цвета — очень мощные инструменты для поощрения или, наоборот, блокировки определенных чувств. То есть вы можете в некоторой степени вести пользователей через ваш интерфейс, давая им принимать те решения, которые вы хотите, чтобы они приняли, при помощи правильных цветов и цветовых комбинаций. Но не начинайте прямо сейчас собирать цветовые схемы. Есть еще одна-две вещи, которые вам необходимо знать.

Хотя восприятие цветов и субъективно, некоторые цветовые эффекты имеют универсальное значение. К примеру: голубой цвет — холодный, а красный — теплый.

Во-вторых, восприятие цветов основано на особенностях культуры. Возьмем чёрный (который с научной точки зрения не является цветом) в качестве примера. Хотя во многих культурах чёрный ассоциируется со смертью и трауром, в Древнем Египте он также символизировал жизнь и перерождение.

Сьюзан Уэйншенк (Susan Weinschenk ), доктор философских наук и автор книги «Интуитивный веб-дизайн: Что заставляет людей переходить по ссылкам», написала об этом интересную . Не забудьте посмотреть McCandless Color Wheel, который вы можете его загрузить внизу страницы.

Kissmetrics сделали отличную инфографику о том, как цвета влияют на покупку.

Немного теории цвета

Как я объясняю ниже, при разработке важных кнопок лучше использовать хороший контраст. Говоря о контрастных цветах, я на самом деле имею ввиду дополнительные (комплементарные) цвета. Комплементарные цвета расположены на цветовом круге друг напротив друга (см. картинку ниже). Если поместить их рядом, кажется, что они выглядят ярче.

Еще один пример использования комплементарных цветов — это одежда, которую надевают врачи во время работы в операционной. В большинстве случаев она зеленая или голубая. Эти два цвета позволяют докторам лучше воспринимать объекты красного цвета, а именно кровь и внутренности пациента, видеть их более чётко и замечать малейшие нюансы человеческого тела. Красный и зеленый — комплементарные цвета.

Так какой цвет мне выбрать для моей кнопки?

Как я отметил в начале статьи, СТА-кнопка представляет собой набор из 4 вещей: расположение, форма, сообщение и цвет. Если эти 4 аспекта хорошо соотносятся друг с другом, вы получаете отличную кнопку призыва к действию.

Имея это в виду, нужно также помнить о нескольких основных дизайнерских принципах и руководствах. Если вы хотите, чтобы элемент дизайна выделялся, вы можете окрасить его в комплементарный цвет по отношению к фону (вспомните о примере с The Resumator, который я приводил).

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

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

Ищете веб-студию, которая обеспечит вам качественную реализацию? Ознакомьтесь с результатами рейтинга креативности веб-студий.

Занимаемая в рейтинге креативности веб-студий строчка, зависит от количества побед и статуса конкурсов. Приглянулось сразу несколько команд? Нажав на зеленую кнопку, можно буквально в два клика пригласить их принять участие в вашем тендере.

Вопрос кажется довольно очевидным. Но что же такое Call-to-action или CTA? Очень часто мы не смотрим глубже в него и не рассматриваем его как потерянную возможность для привлечения читателей или слушателей глубже в ваш бренд.

Что же такое Call-to-action? Обычно это часть экрана, призывающая читателя кликнуть, чтобы вовлечь его дальше в процесс покупки/бренда. Иногда это может быть изображением, иногда просто кнопкой или просто поле содержащее какую-либо информацию, которая призывает к действию. Кстати Call-to-action в переводе означает – призыв к действию. По факту не только сайты имеют call-to-action, на самом деле любой тип контента может рассматриваться как призыв к действию.

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

Так ли нужно всему иметь Call-to-action? Вы найдете не так много контента, который имеет свои Call-to-action и вообще его не очень много в сети. Не всё, что вы делаете должно пытаться продавать, некоторое из вашего контента всё-таки должно выстраивать доверие и авторитет с лидами и покупателями. Всегда продавать – может быть мантрой в многих продающих и маркетинговых компаниях, но именно акцент на продажах может отбивать охоту конвертироваться у многих пользователей. Главное правило – всегда иметь Call-to-action, когда ваша цель мотивировать посетителя пойти дальше в вовлеченности в ваш продукт.

Как создавать эффективные призывы к действию?

Существуют доказанные методы эффективного использования CTA стратегии. Вот некоторые из них.

Всегда держите Call-to-action на виду. Расположение CTA должно быть рядом или на одной линии с местом, где фокусируется читатель. Чаще всего призывы к действию вставляют в правую часть контента, таким образов естественное движение глаз пользователя по странице зацепляет его. Некоторые сайты делают плавающие CTA, так что когда пользователь скроллит, само CTA остается с ним.

Оставляйте свои Call-to-action простыми. Не важно, изображение это или предложение в вашей речи, убедитесь в том, что детали объясняются очень доступно. Чем проще и понятнее вы объясните суть пользователю, тем выше будет число тех, кто кликнет или позвонит, в общем сконвертится на вашей CTA.

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

Добавьте чувство неотложности. Время уходит? Предложение истекает? Осталось ограниченное количество мест? Всё что поможет убедить читателя выполнить действие прямо сейчас, вместо «потом», повысит ваши показатели конверсий. Добавление чувства неотложности критически важный компонент каждой CTA.

Делайте акцент на выгоде, вместо функционала. Множество компаний гордятся тем, что они делают, за место того, чтобы приносить выгоду своим клиентам. Это не то, что продаёт, выгода - это то, что соблазняет клиента купить. Вы предлагаете возможность упрощать вещи? Получить мгновенные результаты? Получить бесплатный совет?

Планируйте путь к конверсиям. К примеру, для постов в блоге, путь часто прост. Читать -> увидеть CTA -> зарегистрироваться на landing page -> Конверсия. Ваш путь к конверсии может отличаться, но визуализация и планирование пути, который должен пройти пользователь по вашему контенту помогут вам лучше представить ситуацию и увеличить конверсии посредством Call-to-action стратегии.

Тестируйте свои CTA. Разрабатывайте несколько версий своих CTA, чтобы идентифицировать ту, которая приносит лучшие бизнес результаты. Одной версии вовсе не достаточно, множество компаний не тратят время на разработку альтернативных дизайнов, слоганов, применение различных цветов и размеров. Иногда простота - это идеал, а иногда яркий анимированный gif может быть лучшим решением.

Тестируйте свои предложения. Free trial, бесплатная доставка, 100% удовлетворенности гарантируется, скидка и т.п. Вам всегда следует пробовать несколько разных соблазнительных предложений, которые увеличат ваши конверсии. Убедитесь, что вы можете измерять всю эффективность каждого предложения, с учетом удержания покупателя и его последующих конверсий. Множество компаний предлагают невероятную скидку прямо с первых страниц, чтобы затем потерять покупателя в конце всего пути покупки. На такой подход часто рассчитывают неопытные маркетологи, полагающие, что хоть какой-то, но процент покупателей будет сконвертирован в покупки. Однако такое мнение ошибочно, площадка мало того, что потеряет покупателя на стадии конверсии. Он больше никогда не вернется на неё. Это просто убивает репутацию и траст к ресурсу.

Представляем вам наглядную инфографику о том, что делать и не делать в целях эффективности создания Call-to-action.

Сегодня мы поговорим о кнопках «Call to action» далее CTA. Элементы CTA, как понятно из названия, призывают пользователя совершить какое-либо действие на сайте. Однако дизайнеры часто относятся к ним с пренебрежением. В то время как понимание принципов в данном вопросе повысит эффективность готового продукта. Из этого материала вы узнаете как правильно создать кнопку CTA.

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

Цель кнопок «Call To Action»

Кнопки CTA могут нести различные функции. В конце концов «призыв к действию» может означать что угодно. Но главный принцип кнопок заставить пользователя, который зашел на ваш сайт совершить действие. Например, добавить товар в корзину, скачать что-то , предоставить информацию, и т. д.

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

Типы кнопок «Call To Action»

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

1. Добавить в корзину

Интернет-магазины, как правило, используют целый ряд кнопок CTA, но самые популярные из них — кнопки «Добавить в корзину». Эти кнопки обычно размещаются на страницах с продуктом, и призывают пользователя приобрести тот или иной товар. Обычно их оформляют коротким текстом с призывом «Купить» или «Добавить в корзину» и иконкой банковской карточки или корзины.

2. Скачать

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

3. Пробная версия

На некоторых сайтах клиента пытаются заинтересовать, предложив ему пробную версию продукта. Это может быть бесплатная загрузка или бесплатный аккаунт, в зависимости от типа предлагаемой услуги или товара. Некоторые дизайнеры стараются быть лаконичными в оформление СТА-кнопок такого типа, кто-то же наоборот щедро наделяет кнопку дополнительной информацией.

4. Узнать больше

Кнопки «Узнать больше» часто располагают в конце тизерного блока информации. Обычно это простые кнопки, однако достаточно большого размера, чтобы привлечь внимание пользователя.

5. Регистрация

Кнопки регистрации чаще всего встречаются в двух версиях. В первом случае кнопка ведет на форму регистрации, во втором исполняет роль кнопки «Добавить в корзину», предлагая оплатить аккаунт и пользоваться им в дальнейшем.

Существуют и СТА-кнопки других типов, но большинство из них схожи с вышеперечисленными. А принципы, которые применимы к описанным выше кнопкам скорее всего подойдут и к большинству остальных.

Работа с негативным пространством

Вы наверняка хотите, чтобы кнопки СТА на вашем сайте выделялись на фоне остального контента и привлекали внимание пользователя. Для этого используйте негативное пространство вокруг кнопок. Создайте воздух между контентом и СТА-кнопками. В некоторых случаях (как с кнопками «Добавить в корзину») этим правилом можно пренебречь, но чаще всего оно добавит эффективности вашему дизайну.

Важно при этом не забывать о балансе. Нужно рассчитать негативное пространство так, чтобы оно выглядело пропорционально размеру кнопок. Мы хотим, чтобы кнопки и контент выглядели как единая композиция, несмотря на то, что мы отделяем их друг от друга. Так что иногда вам возможно придется повозиться, экспериментируя с расстоянием.

• Убедитесь что вокруг кнопки достаточно свободного места и в дизайне нет места нагромождению.
• Попробуйте использовать правило третей или золотого сечения, определяя размер негативного пространства.
• Следите чтобы негативное пространство позволяло кнопке выделиться на фоне остального контента и отделиться от него.

Размер и цвет

Размер кнопки СТА очень важен. Очень большая кнопка затмит остальное содержание, слишком маленькая затеряется среди окружающего контента. Нам же нужно, чтобы наша кнопка выделялась на фоне других элементов, но при этом не подавляла их визуально.

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

• Кнопки СТА в идеале должны быть самыми крупными кнопками на странице.
• Используйте контрастные цвета, чтобы выделить маленькую кнопку.
• Используйте цвета меньше контрастирующие с основным цветом, чтобы визуально притушить большую кнопку.
• Кнопки СТА должны привлекать внимание, но не перегружать дизайн.

Текст

Точная формулировка, которую вы используете в тексте кнопок может сыграть важную роль. Сравните призыв «Купить сейчас» с призывом «Добавить в корзину». Первый вариант выглядит куда более срочным и даже навязчивым. Также важен размер текста. К примеру, при необходимости текст «Попробовать услугу бесплатно» можно заменить более коротким вариантом «Пробная версия».

Текст, который вы используете для оформления кнопок должен быть максимально прост и понятен. Необходимо, чтобы пользователь с первого взгляда понимал что его ждет, после нажатия на кнопку. Если у него возникают сомнения из-за неясности, вы вполне можете потерять в конверсии.

Не забывайте и о размере текста. Шрифт должен быть большим и заметным, но конечно сочетаться с размерами самой кнопки. Убедитесь, что текст достаточно контрастен и легко читаем.

• Используйте просто, понятный язык.
• Используйте большой, заметный шрифт.
• Убедитесь что текст действительно призывает к действию.

Создайте срочность

Мы хотим, чтобы посетители на нашем сайте совершили желаемое нами действие как можно скорее. И хотя никто не собирается дурачить посетителя, чем больше возможностей для раздумий и сравнений вы им предоставляете, тем выше вероятность получить негативный ответ.

Наша задача произвести на пользователя впечатление, что нужно действовать прямо сейчас. Вам нужно побудить их действовать незамедлительно, экспромтом. И пусть не все СТА-кнопки будут работать так (особенно если речь идет о покупке дорогостоящего товара), дешевые или бесплатные действия должны в идеале производится пользователем без раздумий.

• Побудите пользователя действовать немедленно
• Не давайте пользователю повода для раздумий.
• Несмотря на то, что эффект срочности важен, ни в коем случае не вводите пользователя в заблуждение.

Дополнительная информация

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

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

• Добавляйте на кнопки только ту информацию, которая будет пользователю однозначно полезна.
• Дополнительная информация уместна лишь на некоторых типах СТА-кнопок (например, «Пробная версия» и «Скачать»).
• Убедитесь что сам призыв к действию до сих пор является самым заметным текстом на вашей кнопке.

Приоритет

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

Используйте цвет, контрастирующий с основным цветом дизайна, чтобы подчеркнуть важность кнопки. Менее контрастные цвета используйте для того, чтобы визуально снизить важность кнопки. Та же история с размером. Выделите важность кнопки, сделав ее больше и уменьшите ее, чтобы понизить в приоритете.

Иконки и изображения

Оформление кнопок СТА иконками также может сыграть на увеличение конверсии. Примером могут служить иконка корзины на кнопке «Купить» или стрелка на кнопке «Скачать». Вы также можете использовать и уникальные иконки и изображения, но убедитесь что они в точности передают предназначение кнопки и не вводят в заблуждение пользователя.

• Убедитесь что изображение, размещенное на кнопке помогает понять ее предназначение и не путает пользователя.
• Легко узнаваемые иконки могут моментально донести до пользователя значение кнопки.
• Не бойтесь использовать менее популярные иконки, но убедитесь что их смысл предельно ясен.

Примеры

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

Logbook
Использование разных цветов для кнопок «Скачать» и «Купить» отделяют их друг от друга и подчеркивают важность кнопки «Купить».

CTA (Call to Action) - это призыв, мотивирующий пользователя к совершению того или иного действия (перейти, заполнить форму, позвонить, купить, узнать и т. д.). Call to Action является заключительным этапом в классической модели AIDA. Грамотно выстроенный CTA должен привлечь внимание, заинтересовать и побудить человека совершить действие. Эффективность CTA-элемента - это важный показатель, который необходимо постоянно отслеживать. Наблюдайте за тем, сколько людей пришло на целевую страницу и сколько из них совершило действие. Если данное значение слишком низкое, значит что-то не так с CTA-элементом.

В качестве элемента CTA может выступать кнопка, изображение, форма или даже текст, призывающий к какому-либо действию. Его можно использовать везде, в любом контенте, например в тех же презентациях, вебинарах, на баннерах и т. д. Даже голос по радио, призывающий позвонить или зайти на сайт радиостанции, является Call to Action.

Как повысить эффективность CTA

Существует несколько техник, способных увеличить эффективность CTA.

1. Призыв к действию должен быть всегда на виду. Иногда имеет смысл расположить его на главной странице сайта (в месте, где фокусируется посетитель), чтобы при переходе человек мог сразу же приступить к покупке, оформлению заказа, заполнению формы и т. д.
2. CTA должен быть максимально простым. Чем проще и яснее вы объясните суть, тем лучше будет результат. Можно расписать на всю страницу, почему человек должен нажать эту кнопку, а можно написать одну фразу. Вероятнее, во втором случае переходов будет больше.
3. Цвет – это то, что позволяет вашему призыву к действию привлекать внимание. Используйте цвета, которые будут выделяться на фоне остальных элементов сайта, но при этом вписывающихся в общий дизайн страницы и стиль компании.
4. Привлекайте больше внимания за счет увеличения размеров CTA-кнопки. Сделайте ее шире, больше остальных элементов, чтобы она выделялась. Главное – вписать ее в общий дизайн сайта, чтобы она не смотрелась нелепо.
5. Пробелы помогают выделить кнопку или же привязать ее к какому-либо элементу (например, к тексту, который раскрывает суть кнопки).
6. Всегда используйте такие слова, как «позвонить», «скачать», «заказать», «купить», «узнать», «читать подробнее» и т. д. У пользователя должно возникнуть чувство ясности. Никаких сомнений. Он должен точно знать, что произойдет при нажатии на кнопку.
7. Расскажите клиенту, что он получит, в чем его выгода, вместо того, чтобы расписывать свои плюсы и функционал. Ведь людей всегда привлекала возможность получить выгоду, скидку и т. д.
8. Используйте дедлайн. Call to Action должен побудить сделать что-либо сейчас, а не потом. Покажите, что время акции ограниченно, предложение действует до определенного времени. Дедлайн является важной составляющей практически любого CTA.
9. Тестируйте различные варианты Call to Action. Используйте различные стратегии, предложения, дизайн, расположение и т. д. Отслеживайте эффективность каждого CTA и выбирайте наиболее конверсионные.

Call to Action – это триггер, побуждающий пользователя совершить то или иное действие. И чем оригинальнее и интереснее будет данный триггер, тем больше людей по нему кликнут.