Кол ту экшн примеры. Что такое 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?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Расположение кнопки на странице, о чем шла речь выше.
2. Размер кнопки играет большую роль. Она не должна быть слишком маленького размера или огромного, не должна занимать пол экрана. Нужно, чтобы сразу было видно, что она на странице — главная. Кнопка должна быть информативной, большой, контрастной, содержать необходимую информацию для пользователя и иметь четкий призыв к действию.
3. СТА должна выделяться на фоне страницы, но не выпадать из общего дизайна. Хотя иногда, креативность самого дизайна и кнопки создает благоприятное впечатление, как на этом сайте.
   
   
4. Текст в кнопке должен быть конкретным, точно указывать на действие и содержать призыв.
   
   
5. Форма кнопки также играет важную роль. Она должна быть привычной для пользователя. Чаще всего кнопка имеет прямоугольную форму, но иногда дизайнеры делают ее круглой, овальной, продолговатой. В этом случае кнопка СТА должна четко подходить под дизайн страницы.
   
   
6. Тактильная кнопка работает более эффективно. Нужно сделать ее выпуклой, за счет тени.
   
   
7. В лидогенерации кнопку СТА лучше повторить, чтобы человеку не пришлось заново двигаться вверх по странице. Никогда не будет лишним еще раз напомнить пользователю, зачем он на этой странице.
   
   
8. Кнопка должна быть красивой, яркой, правильной формы. На такие кнопки нажимают чаще. Помните, что это лучше доверить опытному дизайнеру, чем программистам. Ниже – яркий пример неудачных кнопок:
   
   
9. Повышает эффективность прием изменяемости кнопки. К примеру, человек прокручивает страницу вниз, и в это время кнопка меняет цвет. Это помогает привлечь внимание пользователя.
10. Если на одной странице вы размещаете несколько кнопок СТА, то необходимо, чтобы они отличались друг от друга. Две похожие кнопки рядом снижают их CTR. Ниже – хороший пример отличающихся кнопок:
    
    
    Все эти основные факторы очень влияют на конверсию, поэтому, прежде чем размещать кнопки СТА, следует тщательно все продумать.
11. Кнопка СТА с призывом «общего характера», такими как «Скачать», «Загрузить». Такая кнопка не подойдет для целевых страниц, так как может вызвать недоверие у пользователя.
    
    На сайте wincdemu кнопка яркая, вписывается в гамму сайта. Это допустимо для раскрученного бренда, когда не нужно дополнительной информации и рекламы.
12. СТА-кнопка, которая подчеркивает уникальность и выгодность предложения, например, скидок.
    
    
    Здесь видно явный призыв, который показывает пользователю выгоду и говорит: «Зачем ждать? Начни прямо сейчас!».
13. Кнопка СТА, которая расположена в верхней части страницы в форме объемной классической кнопки. Сама надпись на кнопке указывает на конкретные указания к загрузке.
    
    

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

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

Элементы 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

Мастера домашней автоматизации Nest отметили День Земли, призвав к экономии энергии. Это послание было изображено при помощи энергосберегающего термостата.

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

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

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

Изображение большое и привлекательное. От него веет дикой природой. Это идеально вписывается в целевую аудиторию.

CTA для кликов

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

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

Перевод — Дежурка

Постоянным читателям нашего блога хорошо известно, что такое “элемент призыва к действию” (Call to Action Button) целевой страницы, и насколько велика роль этого элемента веб-интерфейса в деле .

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

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

Метод 1: привлекайте внимание пользователя, увеличивая размер CTA-кнопки.

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

Пример 1: кнопка призыва к действию превышает размером окружающие элементы.

Продемонстрируем этот способ привлечения внимания пользователя на примере целевой страницы компании Lifetree Creative.

Итак, сравним размер CTA-кнопки с размером другого важного элемента страницы - логотипом компании. Чтобы привлечь внимание посетителей, разработчики сделали кнопку на 20% шире, чем логотип. Таким образом, дизайнеры добились похвального результата: несмотря на то, что логотип находится выше, чем CTA-элемент, глаза посетителей как магнитом притягиваются кнопкой призыва к действию, заметно выделяющейся своими размерами среди прочих элементов целевой страницы.

Пример 2: если на целевой странице есть несколько кнопок призыва к действию - более важная кнопка должна быть больше по размерам.

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

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

Метод 2: завладейте вниманием пользователя, используя общеизвестные правила размещения CTA-элемента на веб-странице.

Место размещения CTA на целевой странице имеет решающее значение для привлечения внимания посетителей.

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

Пример 1: разместите призыв к действию «на уровень выше», чем все остальное содержимое целевой страницы.

Несложный, но крайне эффективный способ выделить CTA-элемент - поместить его «над поверхностью» страницы. Вы можете видеть эту идею воплощенной на практике на сайте dailymile, где кнопка призыва к действию как бы «летит» над другими элементами страницы (диаграммами). Подобный эффект легко может быть достигнут при верстке страницы с использованием каскадных таблиц стилей (CSS).

Пример 2: CTA в верхней части целевой страницы.

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

Пример 3: CTA в визуальном центре.

Еще одно подходящее место для размещения CTA-кнопки - условный «визуальный центр». Для привлечения внимания к кнопке - расположенной ровно посередине горизонтального измерения страницы - можно использовать расположенные по бокам от нее другие элементы дизайна.

Этот способ отлично сработал для страницы PicsEngine, однако помните, что выбранное вами место расположения не должно находиться слишком далеко от верхней части (header) веб-страницы.

Метод 3: используйте пустое пространство.

Использование пробелов (пустого, или «мертвого» пространства) отлично работает на таких целевых страницах, где поблизости от CTA-кнопки расположено много других элементов.

Пример 1: используйте пробелы для визуального выделения призыва к действию.

На примере целевой страницы сервиса IconDock легко убедиться, насколько эффективен этот способ: небольшая кнопка скромного светло-серого цвета прочно привлекает к себе внимание.

Пример 2: уменьшайте размер пробела для обозначения логической связи между двумя элементами страницы.

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

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

Метод 4: используйте высококонтрастные цвета для создания и выделения CTA.

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

Пример 1: используйте цвета, контрастирующие с окружающими элементами страницы.

Вот отличный пример использования такого приема на целевой странице сервиса Notepod: все окружающие элементы страницы имеют черный цвет, в то время как призыв к действию - ярко-синего цвета. Самый невнимательный пользователь не промахнется мимо нужной кнопки. :)

Пример 2: используйте контраст между цветом кнопки и цветом окружающего ее фона.

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

Метод 5: предложите посетителю воспользоваться дополнительной /альтернативной кнопкой призыва к действию.

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

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

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

Предоставьте ему такую возможность, установив на странице еще одну CTA-кнопку, позволяющую посетителю, например, просмотреть видеоролик, разъясняющий ценовую политику данного сервиса.

Пример 1: размещение вторичного элемента рядом с основной CTA-кнопкой.

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

Обратите внимание: здесь кнопка главного желаемого действия расположена в соответствии с классическим правилом восприятия информации - строка читается пользователем слева направо, что означает, что первому слову в строке (в нашем случае - кнопке) достанется максимум внимания посетителя.

На целевой странице программы Transmissions был применен другой способ горизонтального размещения 2 элементов призыва к действию. Кнопка основного действия - выделенная контрастным цветом - расположена позади дополнительного CTA-элемента. Однако такое расположение элементов полностью оправдано: дополнительное действие (загрузка бесплатной пробной версии приложения), если оно будет выполнено в первую очередь, вполне может подтолкнуть посетителя к совершению основного действия, предложенного на странице - оплате полнофункциональной версии опробованной программы.

Пример 2: размещение вторичного CTA-элемента под главной кнопкой призыва к действию.

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

Обратите внимание: дополнительное действие выделяется еще и применением «затемненного» (по сравнению с остальным пространством страницы) фона.

Метод 6: поторопите посетителя вашей страницы.

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

Например, на странице tap tap tap.com идею «поторопить пользователя» реализовали весьма остроумным способом: размещенное в непосредственной близости от CTA-кнопки с призывом «купите сейчас», объявление гласит, что на товары действует некая «начальная цена».

Тут задействован довольно тонкий механизм создания «тревожного ожидания»: сопоставляя слова «сейчас» и «начальная цена», пользователь начинает подозревать, что он рискует заплатить больше, если заплатит за товар позже, когда «начальные цены» (которые покупатель подсознательно ассоциирует с началом самого простого отсчета от малых к большим числам: 1, 2, 3…) непременно изменятся в сторону увеличения. ;)

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

Метод 7: сообщите пользователям, что предложенное вами действие выполняется легко и просто.

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

Например, на целевой странице Basecamp текст на кнопке призыва к действию четко определяет время, требующееся пользователю для регистрации (60 секунд), и объясняет, что пробная подписка на 30 дней предоставляется бесплатно.

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

Метод 8: открыто и подробно объясните пользователям, что они получат, воспользовавшись вашей CTA-кнопкой.

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

Специалисты Mozilla Firefox, например, смогли поместить всю самую необходимую для пользователей информацию на поверхности кнопки для загрузки приложения: информацию о стоимости продукта (бесплатно), сведения о версии предлагаемого продукта (веб-браузер версии 3.5.3, предназначенный для ОС Windows с англоязычным интерфейсом) и размер загружаемого установочного файла (7.7 Мб).

Вот так, примерно, выглядит подлинная забота о посетителе вашей целевой страницы.

И не забывайте о главном: тестируйте каждое изменение, произведенное вами.

Известно, что все более или менее известные бренды американского рынка просто «помешаны» на тестировании своих интернет-ресурсов. Понимание того, что увеличение конверсии на 0.5% может принести дополнительные тысячи долларов годовой прибыли, служит прекрасной мотивацией для оптимизации конверсии целевой страницы/сайта.