Призыв к действию (cta) — примеры, взятые из практики

Posted on by riasevastopol

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

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

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

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

  • CTA: Элементы призыва к действию от известных брендов
  • Анатомия совершенной целевой страницы

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

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

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

Покажем данный метод привлечения внимания пользователя на примере целевой страницы компании 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 Мб).

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

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

  • 6 шагов к совершенной целевой странице
  • Делаем сплит-тест целевых страниц на практике

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

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

Всем заинтересованным в оптимизации конверсии сайта мы предлагаем заполнить форму заказа.

Высоких Вам конверсий!

По данным www.smashingmagazine.com

Случайные статьи:

Основы копирайтинга. Урок 8. Призыв к действию


Подборка похожих статей:

riasevastopol

More Posts