Кол ту экшн в верху страницы. Где разместить призывы к действию? Типы кнопок «Call To Action»

24.04.2019

Вопрос кажется довольно очевидным. Но что же такое 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 или Call to Action?

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

Целевое действие повышает конверсию, увеличивает продажи и облегчает продвижение товара.

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

Наиболее популярным элементом СТА являются кнопки, на которых нанесена надпись, которая поясняет, что будет после ее нажатия. К примеру: «Зарегистрироваться», «Скачать», «Получить скидку» или кнопка «Купить» т.д. Кол ту экшн может переадресовывать клиента на другую страницу, где он может получить более подробную информацию. Тогда уместна надпись «Узнать подробнее», «Получить информацию» и т.д.

Как правильно составить CTA

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

Как же правильно сформулировать призыв CTA, где разместить и как проверить его эффективность?

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

Для начала нужно определиться, к каким объектам вы будете делать колл-ту-экшн.

Это могут быть товары или продукты , эксклюзивные товары или уникальные услуги.

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

Напомнить о скидках и акциях можно дополнительно — например, при помощи .

Есть определенные правила, как разработать эффективный СТА:

Призыв должен быть понятным и кратким, призывать только к одному действию (купи, скачай, закажи и т.д.);
Призыв должен отличаться от остального содержания страницы и быть выделен яркой кнопкой, текстом, ссылкой или баннером.
СТА должен быть в поле зрения посетителя. Поэтому не рекомендуется размещать его внизу или справа;
Призыв должен соответствовать стадии покупки пользователя.

Важно грамотно составить текст СТА. Как это сделать?

Текст СТА должен указывать на ценность продукта и объяснять, зачем он нужен пользователю;
Текст должен быть «срочным», то есть указывать на сезонность, период окончания действия предложения. К примеру: «Только сегодня», «Только до конца декабря» и т.д.
В тексте напишите, сколько людей уже воспользовалось вашими услугами и включите отзывы довольных клиентов;
Одни призывы заменяйте другими. К примеру: пользователь зарегистрировался. Пришлите на e-mail письмо с благодарностью за регистрацию и возможностью скачать бесплатно что-либо;
Используйте новости, фотографии знаменитостей, светскую хронику и приводите это все в пример в СТА (проще продать джинсы, в которых на фото — идущая по улице Анджелина Джоли);
Пишите текст уважительно, не просите и не приказывайте. Вы даете человеку то, что ему необходимо.

Где разместить призывы к действию?

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

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

Если пользователь подписался на рассылку, скачал инструкцию или записался на курс – его взаимодействие с вашими СТА не должно на этом закончиться. Размещайте СТА во всех материалах, которые вы отправляете пользователю. Ваша активность — это залог успеха.

Основные правила

Чтобы CTA-кнопка привлекала к себе внимание, необходимо придерживаться определенных правил размещения:

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

Мало кто из пользователей скроллит страницу вниз, поэтому кнопку СТА нужно размещать на первом экране, иначе вы снизите конверсию.

Посмотрите, на каком пикселе вверху находится ваша кнопка, и сверьте ее с высотой экранов юзеров по Google Analytics. Если нижний край кнопки находится на 900-м пикселе, то треть юзеров получает ее на втором экране. Вы должны понимать, что, чем выше находится кнопка СТА, тем лучше. Учитывая, что большинство людей правши, кнопка должна находиться немного правее от центра экрана.

Правила эффективного CTA (+ примеры)

Факторы, которые влияют на эффективность СТА:

Расположение кнопки на странице, о чем шла речь выше.
Размер кнопки играет большую роль. Она не должна быть слишком маленького размера или огромного, не должна занимать пол экрана. Нужно, чтобы сразу было видно, что она на странице — главная. Кнопка должна быть информативной, большой, контрастной, содержать необходимую информацию для пользователя и иметь четкий призыв к действию.
СТА должна выделяться на фоне страницы, но не выпадать из общего дизайна. Хотя иногда, креативность самого дизайна и кнопки создает благоприятное впечатление, как на этом сайте.
Текст в кнопке должен быть конкретным, точно указывать на действие и содержать призыв.
Форма кнопки также играет важную роль. Она должна быть привычной для пользователя. Чаще всего кнопка имеет прямоугольную форму, но иногда дизайнеры делают ее круглой, овальной, продолговатой. В этом случае кнопка СТА должна четко подходить под дизайн страницы.
Тактильная кнопка работает более эффективно. Нужно сделать ее выпуклой, за счет тени.
В лидогенерации кнопку СТА лучше повторить, чтобы человеку не пришлось заново двигаться вверх по странице. Никогда не будет лишним еще раз напомнить пользователю, зачем он на этой странице.
Кнопка должна быть красивой, яркой, правильной формы. На такие кнопки нажимают чаще. Помните, что это лучше доверить опытному дизайнеру, чем программистам. Ниже – яркий пример неудачных кнопок:
Повышает эффективность прием изменяемости кнопки. К примеру, человек прокручивает страницу вниз, и в это время кнопка меняет цвет. Это помогает привлечь внимание пользователя.
Если на одной странице вы размещаете несколько кнопок СТА, то необходимо, чтобы они отличались друг от друга. Две похожие кнопки рядом снижают их CTR. Ниже – хороший пример отличающихся кнопок:

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

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

Здесь видно явный призыв, который показывает пользователю выгоду и говорит: «Зачем ждать? Начни прямо сейчас!».
Кнопка СТА, которая расположена в верхней части страницы в форме объемной классической кнопки. Сама надпись на кнопке указывает на конкретные указания к загрузке.

Основные особенности CTA

У всех призывов к действию есть обязательные общие черты.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2. Скачать

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

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

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

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

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

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

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

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

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

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

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

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

Размер и цвет

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

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

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

Текст

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

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

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

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

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

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

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

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

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

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

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

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

Приоритет

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

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

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

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

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

Примеры

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

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