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

Это действительно важно для того, чтобы провести ваших посетителей через процесс покупки, где главную роль играет эффективный призыв к действию (СTA — от англ. call to action). Чтобы помочь разобраться, что является эффективным призывом, а что нет, предлагаем вашему вниманию 17 примеров CTA успешных с точки зрения конверсии ресурсов. Эти примеры CTA разбиты на три категории: простой и эффективный дизайн, достойный клика призыв и сбалансированное использование нескольких CTA на одной странице.

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

Простой и эффективный дизайн

1. Evernote

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

2. Dropbox

Целевая страница Dropbox, возможно, самая простая по дизайну из рассматриваемых нами. Даже графические элементы на странице являются настолько тонкими, что их едва заметно. Дизайн настолько минималистичен, а количество белого пространства столь велико, что синюю кнопку Sign up трудно не заметить. Так как CTA и логотип Dropbox одного и того же цвета и расположены рядом, посетитель подсознательно читает CTA как «Подпишитесь на Dropbox». Возможно, это один из самых эффективных призывов к действию.

3. Spotify

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

4. Square

Для достижения эффективного дизайна CTA необходимо учитывать не только вид самой кнопки. Также очень важно уделять внимание таким элементам, как цвет фона, прилегающие изображения и окружающий текст. Помня об этих дополнительных компонентах дизайна, Square одним изображением демонстрирует простоту использования своего продукта, где призыв Get started («Начать») как бы ожидает лишь клика. Цвет кредитной карты на рисунке соответствует цвету кнопки CTA, помогая посетителю сделать умозаключение о том, что они получат после нажатия на кнопку.

5. Firefox

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

Призыв к действию, достойный клика

6. Oyster

Oyster — это что-то вроде Netflix для книг. На домашней странице сервиса находится призыв к действию, который объясняет выгоду от его использования, — Read unlimited books, anytime, anywhere («Читай книги без ограничений, в любое время, в любом месте»). Звучит, как выгодное предложение, не так ли? Но сколько это будет стоить? Синяя кнопка СТА с надписью Start for free («Начните бесплатно») сразу же дает ответ на этот вопрос. Конечно, это просто бесплатная пробная версия, но приятно знать, что вы можете начать использовать продукт немедленно и без затрат.

7. Uber

Видите эти шесть точек в нижней части сайта Uber? Каждая из них показывает различные черно-белые сценарии использования Uber. Сценарии меняют друг друга, но единственная вещь, которая остается неизменной, это кнопка синего цвета с призывом к действию — Sign up for Uber («Зарегистрироваться в Uber»). Призыв удачный, потому что дает понять, что пользователь сможет подписаться на сервис Uber, как только нажмет эту синюю кнопку, — никаких неожиданностей.

8. Impact Branding & Design

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

9. GoToMeeting

«Начать совещание»? Неужели это так просто? Вот это да! Этот призыв к действию подчеркивает новый «бесплатный» продукт GoToMeeting и то, как просто начать им пользоваться. Этому CTA действительно достаточно лишь два слова — Start Meeting. Не «Бесплатный старт» или «Начни совещание бесплатно», потому что слово «бесплатно» уже упомянуто в заголовке — GoToMeeting free.

10. APPSTEMPLATES.com

Этот сайт имеет уникальный призыв к действию со слоганом, который сообщает реальную выгоду от его использования, выраженную в долларах. Мало того, что эта кнопка обещает получение неограниченного доступа за $89 (при стоимости услуги $149), но и говорит о том, что подписавшись, вы станете членом некоего клуба (Join the club now — «Присоединяйтесь к клубу сейчас»). Эффективность этого CTA также повышает стрелка, указывающая на него.

11. OKCupid

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

Сбалансированное использование нескольких CTA на одной странице

12. Treehouse

Treehouse обучает основам HTML-верстки и программирования. Но есть пользователи, которые, возможно, и не слышали о нем. Для таких посетителей существует большая зеленая кнопка, рассказывающая о бесплатной пробной версии доступа к сайту. Если же посетитель понятия не имеет о том, что из себя представляет Treehouse, но хочет узнать о нем больше, есть вторичный призыв к действию, который обещает просветить пользователя по неясным вопросам (How it works). Хотя эта кнопка CTA имеет такой же размер, о ее вторичности говорит менее насыщенный цвет.

13. Pinterest

Хотите подписаться на Pinterest? У вас есть несколько вариантов для этого — зарегистрироваться через Facebook или с помощью электронной почты. Pinterest поощряет регистрацию при помощи аккаунта в этой соцсети. Из чего можно сделать такой вывод? В первую очередь, с точки зрения эстетики, поскольку синяя кнопка, призывающая подписаться через Facebook, находится на первом месте и гораздо более заметна, красочна и отличается узнаваемыми фирменными цветами и эмблемой соцсети. И это логично, поскольку пользователь, зарегистрировавшись через Facebook, дает Pinterest возможность изучать себя, благодаря доступу к его данным. Кроме этого, есть еще малозаметный СТА, предлагающий пользователю, который уже подписан на сервис, войти в свой Pinterest-аккаунт. Таким образом, эта домашняя страница является оптимизированной как для новых посетителей, так и для членов сообщества.

14. Instagram

Так как Instagram, в основном, ориентирован на мобильных пользователей, его СТА отличается от домашней страницы Pinterest. В нижней части страницы размещены две черные кнопки СТА одинакового размера — одна для загрузки Instagram из iTunes App Store, а другая — из Google Play. Причина, по которой эти кнопки являются практически «близнецами», состоит в том, что для Instagram не имеет значения, какую из версий приложения скачал посетитель — главной целью, под которую оптимизирована страница, является загрузка программы из App Store или Google Play. Существующие пользователи сервиса также могут войти в свои аккаунты в Instagram, нажав CTA Log in («Войти»).

15. General Assembly

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

16. Сharity: water

Главная цель сайта charity: water — сделать так, чтобы люди пожертвовали свои деньги на решение проблемы чистой воды. Но не все могут и хотят платить одинаково. В призывах к действию, размещенных на целевой странице сайта, использован уникальный подход, предлагающий различные способы оплаты с предварительным указанием суммы пожертвования. Два одинаковых по важности СТА предлагают оплатить взнос с помощью кредитной карты или системы электронных платежей PayPal. Одинаковый размер и дизайн кнопок СТА говорит о том, что для charity: water неважно, каким образом будет осуществлен взнос. Присутствует здесь и еще один призыв к действию, позволяющий реализовать благородный порыв путем отправки чека.

17. Hipmunk

У посетителей целевой страницы сайта Hipmunk есть два основных варианта, представляющие собой два белых поля, — Search Flights («Найти рейсы») и Search Hotels («Найти гостиницы»). Если поместить курсор мыши в поле одного из этих вариантов, белый прямоугольник расширится и превратится в форму заказа, куда можно ввести информацию относительно бронирования. Убедившись в том, что введенная информация соответствует критериям поиска, пользователь может нажать на ярко-оранжевую кнопку CTA, находящуюся в нижней части формы со словом Search(«Поиск»). Кроме того, на кнопке изображена миниатюра иконки, соответствующей объекту поиска — авиарейсу или отелю.

Источник: HubSpot