Постарайтесь вспомнить, когда вы последний раз регистрировались на лендинге или сайте? Какой это был ресурс — Evernote, Dropbox, Instagram? Не исключено, что на ваше решение повлиял эффективный «призыв к действию», или CTA (сalls-to-action), а сам процесс регистрации был простым и удобным.
Призыв к действию — это чрезвычайно важный инструмент, который помогает посетителям сделать выбор в вашу пользу. В этом посте мы постараемся разобраться, какие СTA-элементы работают, а какие — нет, взяв за основу 17 впечатляющих примеров, разбитых на три категории:
1. Простой и эффективный дизайн
2. Интересный, необычный текст
3. Сочетание нескольких призывов к действию на одной странице
Простой и эффективный дизайн
1. Evernote
Этот веб-сервис для создания, хранения и обмена заметками — от планов проектов до конспектов встреч, призывает вас к действию простым, лаконичным сообщением: «Хотите помнить все? Регистрируйтесь на Evernote».
Вы мгновенно понимаете назначение сервиса, как только попадаете на страницу, дизайнерское решение которой также способствует процессу регистрации: салатовый цвет СTA-кнопки, повторяющий цвет заголовка и логотипа Evernote, бросается в глаза на фоне белой страницы.
Русскоязычная версия сайта аналогично выдержана в единой цветовой гамме: призыв к действию и логотип приятно сочетаются с другими элементами и задним фоном страницы. Однако сам оффер не столь очевиден:
Посетителям нужно догадаться, что речь идет о сервисе для создания заметок
2. Dropbox
Dropbox — сервис облачного хранения данных, позволяющий держать контент на серверах компании и делиться им с другими пользователями в интернете: «Ваши файлы всегда под рукой».
Дизайн сайта Dropbox минималистичен: даже графика едва заметна. Главная страница настолько проста, и на ней так много белого пространства, что синяя кнопка «Зарегистрироваться» легко доминирует над всеми остальными элементами. А поскольку CTA и логотип созвучны по цвету, то призыв подсознательно читается как «Зарегистрироваться на Dropbox». Можно даже назвать это решение единой кнопкой призыва к действию!
3. Spotify
Spotify — шведский музыкальный сервис, предлагающий решение по легальному прослушиванию музыки в сети: «Музыка для каждого. Теперь на мобильном, планшете и компьютере. Слушайте правильную музыку, где бы вы ни находились».
Несмотря на убедительный заголовок, на перегруженной деталями главной странице достаточно трудно заметить сам призыв к действию: на заднем плане представлена целевая аудитория сервиса и серия музыкальных альбомов, что отвлекает посетителей и снижает видимость СTA-элемента.
Однако Spotify все же находит выход из ситуации. Рано или поздно взгляд привлекает светло-зеленая кнопка по центру страницы, которая дублируется в верхнем правом углу черной навигационной панели. Благодаря контрасту и фирменному цвету вы понимаете, что от вас требуется:
Призыв к действию: «Скачать Spotify»
4. Square
Square, или мобильная платёжная система для i-устройств (iPhone, iPad, iPod Touch), а также Android, для создания эффективного призыва к действию использует весь дизайн сайта. В зоне внимания посетителя находится не только СTA-кнопка, но и такие детали, как цвет фона, окружающие графические элементы и текст.
С помощью этих дополнительных средств Square удается передать ощущение простоты использования сервиса: все, что нужно сделать — это нажать на кнопку «Начать» (Get Started), а так как цвет кредитной карты совпадает с цветом СTA-элемента, то эти два объекта соединяются в вашем восприятии, объясняя дальнейшие шаги:
5. Firefox
Призыв к действию на главной странице известного веб-браузера Firefox также заслуживает внимания. На русскоязычной версии сайта максимально простая CTA-кнопка размещена на странице с таким же простым дизайном, поэтому мгновенно притягивает к себе все внимание.
Вы достоверно знаете, что последует за ее нажатием, а именно — загрузка Firefox. Изображение окна браузера под кнопкой предельно ясно об этом сообщает:
Тем не менее, это решение — уже устаревшая версия англоязычной страницы загрузки. В настоящий момент дизайн официального сайта повторяет «плиточную концепцию» Windows10 и выглядит следующим образом:
Интересный, необычный текст
6. Oyster
Oyster — своеобразный аналог Netflix (стриминговый провайдер фильмов и сериалов), только в отношении книг. Заголовок на главной странице объясняет предназначение сервиса: «Читайте неограниченное количество книг, в любое время, в любом месте».
Звучит интригующе, не правда ли? Сразу хочется пойти дальше! Но сколько это стоит?
Бирюзовая СTA-кнопка «Начать бесплатно» (Start For Free) дает приблизительный ответ на этот вопрос. Нажав на нее, вы понимаете, что это лишь бесплатная пробная версия, но все равно приятно узнать, что можно начать пользоваться продуктом бесплатно и прямо сейчас.
7. Uber
Uber — компания из Сан-Франциско, разработавшая одноименное мобильное приложение для быстрого поиска и вызова такси или частных водителей. Главная страница соблазняет посетителей заголовком: «Появитесь эффектно», в сочетании с не менее провоцирующей фотографией*.
В нижней части сайта расположены 6 точек-переключателей, предлагающих на выбор сценарий о том, как вы можете использовать приложение. При прокручивании слайдов один элемент всегда остается неизменным — это голубая СTA-кнопка «Зарегистрировать аккаунт Uber»:
*Текущий дизайн сайта менее интересен
8. Impact Branding & Design
Компания IMPACT, специализирующаяся на услугах брендинга и дизайна в сфере входящего маркетинга, вместо назойливых призывов к действию применяет обучающий подход, мотивируя посетителей больше узнать о деятельности компании и причинах, по которым вам необходимо выбрать именно IMPACT.
Данный пример интересен тем, что в заголовках даже не используются повелительные глаголы, которые обычно призваны побудить посетителей нажать на СTA-кнопку:
Надпись на кнопках: «Что мы делаем» и «Почему мы?»
9. GoToMeeting
GoToMeeting — сервис компании Citrix Online, предназначенный для проведения веб-конференций и встреч в режиме реального времени.
Короткий и простой призыв к действию: «Начать совещание» демонстрирует, насколько легко начать пользоваться сервисом. Заголовок страницы включает в себя название компании «Пойти на встречу бесплатно» (Go to meeting free), что достаточно оригинально:
10. APPSTEMPLATES.com
Страница данного сервиса по созданию веб-шаблонов для мобильных приложений содержит уникальный призыв к действию, раскрывающий реальную стоимость регистрации.
Привлекательность такого СTA, помимо того, что посетителю сразу сообщается о возможности получения безлимитного доступа всего за $89 (при обычной стоимости — $149), дополняется интригующей надписью: «Присоединяйтесь сейчас» со стрелочкой, указывающей на кнопку. Это прекрасный пример эффективного триггера-указателя:
11. OKCupid
Призыв к действию на сайте онлайн-знакомств ОКСupid, на первый взгляд, не такой уж и впечатляющий. Но гениальность кроется в деталях: СTA-кнопка, которая отчетливо видна на светло-сером фоне, говорит нам «Продолжить», вселяя уверенность в том, что процесс регистрации не займет много времени. Такой подход в сочетании с мультяшным оформлением делает ресурс похожим на игру:
«Добро пожаловать на лучший сайт знакомств на Земле. Встречайте новых людей прямо сейчас!»
Сочетание нескольких призывов к действию
А теперь рассмотрим случаи, когда вам необходимо разместить на одной странице несколько призывов к действию, преследующих разные цели.
12. Treehouse
Treehouse — веб-ресурс, обучающий основам верстки, помогает людям освоить азы HTML и СSS, чтобы создавать свои сайты и приложения.
Некоторым посетителям могут быть известны эти инструменты, а некоторые совсем ничего о них не слышали. Для тех, кто осведомлен в вопросе, предназначена большая зеленая кнопка: «Бесплатная пробная версия». Те же, кто совсем не знаком с данной областью, но хотели бы узнать больше, могут воспользоваться другим СTA-элементом — его вторичное положение на сайте подчеркивается менее ярким цветом:
Серая кнопка: «Как это работает?»
13. Pinterest
Pinterest — социальный сервис публикации изображений, позволяющий помещать их в тематические коллекции и делиться с другими пользователями, дает возможность зарегистрироваться двумя способами: через Facebook или электронную почту.
Если у вас есть уже аккаунт на Facebook, то Pinterest предлагает вам воспользоваться им в первую очередь: синяя СTA-кнопка социальной сети стоит на первом месте и заметна благодаря логотипу и характерному цветовому решению. В этом есть смысл, так как при регистрации через Facebook, Pinterest может получить о вас больше информации, чем если бы вы зарегистрировались посредством электронной почты.
На странице присутствует еле заметная ссылка «Войти сейчас», предназначенная для уже создавших аккаунт на Pinterest. Таким образом, главная страница предназначена, прежде всего, для привлечения новых пользователей:
14. Instagram
Поскольку Instagram — это, прежде всего, мобильное приложение, то его ключевые СTA-элементы отличаются от тех, что используются на главной странице Pinterest. В нижней части сайта размещены две черные кнопки призыва к действию одинакового размера: одна предлагает загрузить Instagram через Apple's App Store, другая — посредством Google Play.
Равный размер СTA-кнопок говорит о том, что не имеет значения, каким образом вы загрузите приложение. Главная цель страницы Instagram — это загрузка приложения, и неважно, какой способ вы выберете. Если у пользователя уже есть Instagram, ему предлагается кнопка «Войти»:.
15. General Assembly
На сайте компании General Assembly вы найдете много СTA-кнопок, ведущих на различные обучающие программы для людей, желающих начать свой бизнес. Кроме того, в нижней части страницы расположен призыв к действию, предлагающий вам оформить подписку на обновления по электронной почте.
Хотя сначала этот призыв к действию может показаться второстепенным из-за своего местоположения, на самом деле он занимает главное место на ресурсе благодаря яркому цветовому решению по сравнению с серыми СTA-кнопками курсов:
16. Charity: water
Главная цель благотворительной организации Charity: water — сбор пожертвований для обеспечения чистой водой всех людей на планете. Однако далеко не каждому посетителю может быть удобно осуществлять взносы через какую-то одну платежную систему.
Поэтому на странице компании используется подход, предоставляющий возможность выбрать наиболее удобный метод оплаты: под полем с указанием примерной суммы взноса ($35.00) расположены две равнозначные СTA-кнопки, предлагающие сделать взнос кредитной карточкой или через систему PayPall.
Обратите внимание, что эти две кнопки одинаковы по размеру и дизайну. Это отражает суть благотворительного акта: не имеет значения, каким способом сделано пожертвование, главное — помочь решить проблему с чистой водой.
17. Hipmunk
Когда вы заходите на сайт Hipmunk, вам предлагаются на выбор две опции: «Поиск рейсов» (Search Flights) или «Поиск отелей» (Search Hotels), которые размещены в двух отдельных белых блоках. Когда вы наводите курсор на один из них, выбранный блок расширяется для внесения более детальной информации.
Внизу формы размещена яркая оранжевая СTA-кнопка с иконкой самолета и призывом: «Искать» — так вы точно уверены, что ищете рейс, а не отель.
Вместо заключения
Будем откровенны: хотя у нас нет научного подтверждения тому, что данные примеры являются наиболее успешными, можно с уверенностью сказать, что все они используют лучшие практики в области интернет-маркетинга.
Если вы решите воспользоваться похожим оформлением, CTA-элементами или призывами к действию у себя, обязательно протестируйте их на своей целевой аудитории.
Высоких вам конверсий!
По материалам blog.hubspot.com
