Кнопкой «Призыв к действию» или CTA (Call To Action) называют элемент графики целевой страницы, который мотивирует посетителей к определенным действиям, которые ожидает от них владелец страницы (регистрации, покупке, подписке на рассылки и т.д.)
Действия посетителя ведут к конверсии, а уже конверсия будет определять успех продаж и дальнейшее продвижение вашей услуги или товара.
Самый широко распространенный тип элемента СТА — хорошо выделяющаяся на экране интерактивная кнопка, снабженная надписью, поясняющей посетителям, что произойдет после нажатия на нее.
К примеру, «Получить скидку», или «Зарегистрироваться сейчас», или «Скачать бесплатно» и т. д.
Также возможен вариант, когда результатом нажатия на CTA-элемент окажется переадресация посетителя на страницу с какой-то дополнительной информацией о предлагаемом товаре или услуге. В этом случае, обычно используют кнопку с надписью «Узнать подробнее», или «Узнать сейчас», или «Получить информацию» и т.п.
Обсудим способы, которыми можно выделить Call to Action — кнопку «призыва к действию»
Имеются проверенные способы по созданию кнопок СТА, которые гарантированно будут привлекать внимание посетителей и стимулировать их на совершение какого-либо действия.
Мы постараемся познакомить вас с некоторыми, наиболее эффективными, методами разработки элементов СТА на примерах нескольких хорошо всем известных брендов в Интернете.
Главное, всегда помните, что кнопка «призыва к действию» должна всегда быть в соответствии с общим дизайном вашего сайта или дизайном целевой страницы, на которых, выделяясь на фоне прочих графических элементов, продолжать оставаться составной частью общего композиционного решения.
Вариант № 1:
Кнопка, которая предоставляет максимум информации, что должен получить посетитель, нажав на нее.
Всем хорошо известными и лучшими примерами, наверное, можно назвать CTA-элементы сайтов хорошо известных браузеров Opera и Mozilla FireFox.
Если бы даже на страницах не было бы больше никакой графической и текстовой информации, пользователи получили бы все для них необходимое, только изучив предложенную кнопку.
Рассмотрим подробнее кнопку Firefox, которая имеет довольно крупный размер и имеет цветовое решение, отличное от всей остальной цветовой гаммы страницы (если начать углубляться, то можно заметить и психологическую сторону выбора цвета кнопки — зеленый цвет относят к «спокойным», совершенно «безопасным» цветам, вызывающим наибольшее доверие пользователей).
На кнопке есть абсолютно вся необходимая пользователю информация — логотип, наименование, операционная система, язык. А также четкий призыв действовать — «Загрузить бесплатно» (который говорит также и о том, что данное предложение выгодно с экономической точки зрения), а еще пиктограмма загрузки в виде стрелки.
Фактически это же самое можно видеть при рассматривании CTA-элемента сайта браузера Opera. Но, есть некоторые отличия.
Здесь мы видим кнопку в гамме главного меню сайта (что, как можно видеть, делает кнопку менее заметной, однако, более «стильной»), логически она увязана в общую композицию.
В нашем случае это фотография девушки с мобильным устройством и призывом скачать себе мобильную версию этого распространенного браузера (что нельзя никак сказать о загадочных существах буквально вгрызающихся в браузерное окно сайта Mozilla).
На этой кнопке информации предоставлено несколько меньше: пиктограмма, логотип и версия браузера. Призыв же к действию «Загрузить» здесь имеет более общий характер.
Если говорить грубо, то не указывается «выгода», хотя также как и продукт из предыдущего примера, браузер распространяется совершенно бесплатно.
Вариант № 2
Кнопка и призывы «общего характера».
Обратите внимание, такие призывы («Загрузить», «Скачать» и тому подобное) не подходят для целевых страниц. Они предлагают скачать программное обеспечение, не предоставляя достаточной информации о его разработчиках.
А это может вызвать некоторое недоверие посетителей и, как следствие, увеличится количество «отказов». Здесь давайте вновь обратимся к известным всем продуктам — к страницам загрузок браузера Internet Explorer от Microsoft, а также проигрывателя iTunes компании Apple.
Call to Action IE, с призывом «общего характера» очень яркая, она контрастирует с цветом области, где находится.
Несмотря на это, она превосходно вписывается в общую цветовую гамму всего сайта, лишь обладает более насыщенным оттенком голубого цвета, чем базовый фон и тон «фирменного» цвета логотипа браузера.
На этой кнопке нет никакой излишней информации, только «общий» призыв действовать, так как в данном случае все компенсируется большой «раскрученностью» этого бренда, а элемент CTA имеет здесь сугубо функциональное значение.
То же самое относится и к кнопке скачивания, находящейся на сайте Apple. На белом фоне расположен синий элемент. При этом оттенок синего цвета также «фирменный». Кнопка имеет «простую» форму.
Призыв к действию «общего характера» (в отличие от предшествующего примера здесь есть пиктограмма загрузки). Цвет текста одинаков с цветом фона. Использован тот же самый шрифт, что и для прочего контента страницы.
Стоит обратить внимание, что в связи с тем, что это программное обеспечение относится к коммерческим (проприетарным), по соседству с кнопкой есть указания о принятии «Условий лицензионного соглашения», а также ссылки на страницы с «Заявлением о конфиденциальности».
Вариант №3
Элемент Call to Action содержит призыв, который подчеркивает выгоду и уникальность предложения.
Давайте рассмотрим данный вариант на примерах брендов Skype и Groupon (сервис коллективных скидок). Итак, что можно сказать о кнопке сайта Skype?
CTA-элемент здесь подчеркивает выгоду и уникальность предложения. Кнопка обладает продолговатой формой с несколько закругленными боками (форма кнопки повторяет контуры главного меню сайта, она является как бы его «проекцией», не создающей дисбаланса в композиции всей страницы, имеет ярко-зеленый цвет, который также уравновешен мелким элементом прочего оформления графики сайта).
В призыве содержится информация о получении явной материальной выгоды, призыв буквально «кричит» нам: «Зачем еще ждать? Начинай прямо сейчас!». Шрифт здесь использован стандартный, символы окрашены в тот же цвета, что и остальной текст на этой странице.
Здесь обратите внимание на то, что на данной странице имеется «вспомогательный» элемент, с которым и увязан призыв — находящийся по центру страницы круг с указанием на нем размера «выгоды», выделенный отдельным цветом (а их здесь использовано всего 4, что сильно упрощает общее восприятие).
Он фокусирует наше внимание и, увидев заманчивое предложение, предлагающее скидку, пользователь уже начинает искать взглядом, как можно скорее ее заполучить. Кнопка непременно сработает — здесь она является логическим завершением посещения страницы. В этом примере формула AIDA оказалась реализованной на все сто процентов.
А, вот, на сайте Groupon использован несколько другой прием, так называемая «проекционная» кнопка. Центром внимания и призывом к действию здесь является заголовок, а сама кнопка логическим завершением действия, как и в предыдущем примере.
Здесь безотказно работает принцип: «Пришел. Увидел. Победил.». Продолговатый, яркий CTA-элемент выполнен в совершенно нестандартном для прочей гаммы всего сайта цвете.
Обратите внимание, что здесь избежать дисбаланса цветов помогают крайне пестрые изображения, имеющие явно декоративное предназначение, которые несколько «разбавляют» строгую цветовую гамму всего из 4 цветов.
Имеющийся призыв имеет тесную связь с содержанием предложения, он является «заключительным словом». Поэтому на данной странице допускается «общая» формулировка «Зарегистрироваться». Текст контрастного цвета и выполнен выделенным шрифтом, аналогичным шрифту заголовка (что для восприятия является как бы «связующим» моментом).
Вариант № 4
Кнопка, призывающая к действию, располагается в верхней части страницы.
Возьмем в качестве примера 2 продукта хорошо известной многим компании Google — их программу Picasa для обработки и просмотра изображений и браузер Chrome.
В действительности оформление CTA-элемента на обеих страницах весьма похоже, как это зачастую бывает у компаний, которые занимаются распространением сразу нескольких своих продуктов.
И в том, и в другом случае кнопка находится в верхней части страницы. Синий, несколько «аскетичный» CTA-элемент, выполнен в виде «классической» кнопки (тень, эффект объема).
Чтобы кнопка не «потерялась» на белом фоне, разработчиками сделана под ней небольшая прямоугольная «подкладка» промежуточного оттенка (там же размещается информация о требованиях к операционной системе, а для Chrome еще и призыв к действию, который указывает на положительные стороны данного предложения).
Надпись, находящаяся на самой кнопке, дает нам конкретное указание на загрузку продукта, самой последней на текущий момент версии. То есть надпись имеет чисто функциональную нагрузку.
Использован один шрифт (изменяются только его начертания — обычное или выделенное), цвет символов контрастирует с цветом кнопки и соответствует цвету фона страницы.
Обратите внимание на факт, что строгое, несколько скудное в отношении цвета оформление страниц в этом случае является неким психологическим фактором — пользователь воспринимает увиденное как нечто крайне надежное, поскольку разработчики явно не старались «напустить пыли в глаза» какой-нибудь яркой оберткой.
Для облегчения восприятия всей информации страница содержит изображения, которые в действии демонстрируют сервисы.
Так, все-таки, каким должен быть правильный CTA-элемент?
Начав создавать целевую страницу не нужно забывать, что главный на ней элемент — это кнопка, призывающая к действию. Необходимо именно на ней сконцентрировать все внимание посетителей.
Если страница перегружена текстом и иллюстрациями, а сама кнопка невзрачна, теряется среди остального содержимого страницы, то такая страница не способна принести вам конверсии (лишь разочарование вам и, вполне возможно, потенциальным вашим клиентам, так и не сумевшим ее отыскать).
Разрабатывая целевую страницу, следует соблюдать несколько главных правил:
- кнопка должна напоминать именно кнопку, должна выглядеть для пользователей привычной;
- кнопка не должна быть слишком маленькой относительно остальных объектов (блоков текста, изображений, заголовка и прочего);
- цвет CTA-элемента выбирайте яркий, но при этом необходимо согласовывать его с общим дизайнерским решением и цветовой гаммой сайта. В противном случае цвет будет «потерян» (станет восприниматься неадекватно);
- используйте стрелочки, указывающие на кнопку (в случаях, если пользователю предлагается что-то закачать, непосредственно на элементе). Это поможет «подвести» к ней пользователей;
- необходимо тщательно продумать призыв к действию и согласовать его с контекстом вашего предложения;
- используйте контрастные тона (темный на светлом и наоборот) и цвета для надписей на элементе Call to Action;
- пользуйтесь шрифтом, который уже есть на странице. В случае необходимости можно его выделить (жирное начертание);
- следующее правило общего характера, но это нисколько не снижает его важность — при оформлении страницы постарайтесь пользоваться не более чем 4 цветами. От профессиональных кулинаров можно услышать: «Если в салате, более четырех компонентов — перед вами уже силос.
Кажется это все, дерзайте, экспериментируйте! Начните тестировать самые разные варианты CTA-элементов, чтобы определиться, какой из них окажется наиболее эффективным.
