Призыв к действию call to action. CTA: что это и как повысить его эффективность. Основные особенности CTA

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 – это триггер, побуждающий пользователя совершить то или иное действие. И чем оригинальнее и интереснее будет данный триггер, тем больше людей по нему кликнут.

1. Наши клиенты это ценят, теперь выбор за вами!

2. Оставь заявку прямо сейчас и получи (что-то) бесплатно!

3. Получите (что-то) с помощью (ваш продукт) прямо сейчас!

4. Получите (что-то) сейчас.

5. Открой для себя (что-то).

6. Предложение ограничено по времени!

7. Закажите бесплатный расчет прямой сейчас и получите (что-то) в подарок.

8. Получи (товар) со скидкой в 30%. Для этого, прямо сейчас оставь заявку на нашем сайте и мы вышлем тебе персональный купон.

9. Зарегистрируйтесь и получите шанс выиграть (что-то).

11. Сделайте репост и получите шанс выиграть (что-то)

12. Есть вопросы? Задавайте!

13. Получите бесплатную консультацию у нашего эксперта.

14. Остались вопросы? Оставьте заявку, мы перезвоним.

15. Тестируйте (что-то) совершенно бесплатно.

16. Хотите убедиться, что нам можно доверять? Протестируйте наши услуги в течение пробного периода.

17. Купите у нас (что-то) и получите в подарок (что-то).

18. Торопитесь, пока действует акция.

19. Купите (что-то) и вы забудете, что такое (__).

Управление репутаций бренда

ORM – один из самых быстро растущих сегментов digital-рынка. Стань экспертом в области управления репутацией вместе с новым курсом Skillbox и Sidorin.Lab (агентством №1 по профильному рейтингу Рувард).

3 месяца онлайн-обучения, работа с наставником, дипломная работа, трудоустройство для лучших в группе. Следующий поток обучения стартует уже 15 марта . Cossa рекомендует!

20. Будь первым кто узнает!

21. Доверьтесь (вашей компании)

22. Узнай сейчас, как увеличить трафик на 30% за 60 дней.

23. Присоединяйтесь к 675 нашим клиентам, кто уже оценил (ваш продукт)

24. Теперь вы знаете, как правильно выбирать (что-то). Если у вас остались вопросы, закажите звонок и консультант перезвонит в ближайшее время.

25. Хотите помнить все? Зарегистрируйтесь в Evernote.

26. Проверьте сейчас, насколько полезен данный инструмент на практике!

Список постоянно пополняется. Оставляйте свои варианты в комментариях!

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

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

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

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

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

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

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

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

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

2. Скачать

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

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

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

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

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

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

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

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

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

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

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

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

Размер и цвет

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

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

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

Текст

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

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

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

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

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

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

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

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

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

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

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

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

Приоритет

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

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

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

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

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

Примеры

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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