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

CTA для предоставления покупателям информации о стоимости картин (Isabel Design).

Когда дело доходит до заключения сделки, эти приемы обычно связаны с использованием CTA (call-to-action = призыв к действию) — это кнопки, которые предлагают купить, кликнуть, скачать или зарегистрироваться.

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

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

Почему CTA так важны?

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

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

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

• Электронные письма, в которых применяются CTA, увеличивают количество просмотров на 371% и количество продаж на 1 617% [источник]

• Страницы на Facebook, где используются кнопки CTA, имеют в 2,85 раза больше просмотров [источник]

• Усовершенствовав дизайн CTA, фирма Brafton, которая занимается контент-маркетингом, всего за месяц увеличила доход на 83% [источник]

Все это покажется вполне закономерным, если поразмыслить над главной мыслью труда Стива Крага на тему дизайна «Не заставляйте меня думать». Будет нечестно по отношению к пользователям сказать, что им нравится, когда им указывают, что делать, но они скорее предпочтут пойти по уже протоптанной дорожке, чем проложат свою собственную.

5 видов CTA

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

Можно разбить CTA на пять основных категорий:

Навигация

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

Главная страница сайта Kvell акцентирует внимание пользователей на кнопке «Discover» (Узнать больше) — чтобы клик по ней стал первым действием на сайте . Но при этом, чтобы не ограничивать посетителей в выборе, в углу также разместили менее заметные иконки меню.

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

Локальные действия («Добавить в корзину», «Завершить покупку», «Заполнить опрос», и т.д.)

Помимо помощи в навигации по сайту, СТА могут также подтолкнуть пользователей к действиям, которых от них хотите вы. Обеспечение локального действия — это то, где кнопки СТА становятся стратегически важными, а их дизайн должен быть тщательно продуман.

Noble & Savage разместили СТА на закрепленном меню в нижней части страницы, которое появляется при просмотре фотографий товаров. Обратите внимание, как яркая синяя кнопка притягивает внимание — гораздо сильнее, чем остальные элементы страницы, и даже картинки.

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

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

Подписка

Vogue показывает недавно появившуюся тенденцию использовать всплывающие окна, которые предлагают подписаться на рассылку с помощью e-mail.

Самый распространенный вид кнопок СТА, который сейчас встречается на просторах Интернета — это предложение подписаться. Будь то новостная рассылка, специальные скидки или обмен на бесплатное скачивание — в современном цифровом мире адрес электронной почты стал весьма ценной валютой. Несмотря на то, что email получить гораздо проще, чем осуществить продажу, все еще нужно изловчиться для отделения самого человека от его контактной информации.

Репост в социальные сети

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

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

Вовлечение (комментарии, лайки, отзывы, и т.д.)

Даже Amazon прибегает к кнопкам СТА для получения отзывов.

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

Какими нужно создавать кнопки СТА

И теперь, обсудив основы СТА, мы можем перейти к продвинутым приемам дизайна, которые помогут увеличить конверсию.

Внешний вид

В первую очередь, ваши СТА-кнопки должны выглядеть как кнопки. И это не шутка. С первого взгляда должно быть понятно, что они кликабельны; и этот совет относится не только к «призывным» кнопкам, но и ко всему дизайну вообще.

И хотя обычно в зависимости от стиля и темы сайта внешний вид элементов может различаться, для нас «кнопки» — это продолговатые прямоугольники с закругленными краями. Несколько лет назад часто применяли затемнение и/или тени для достижения 3D-эффекта, но с тотальным переходом на плоский дизайн так делать перестали.

Затем вы должны убедиться, что ваши СТА привлекают внимание. Учитывая, что именно они создают конверсию, кнопка СТА должна быть самым заметным элементом на любой странице.

Huffington Post демонстрирует свои навыки дизайна с помощью визуализации СТА. Гибрид овала и прямоугольника идеально воплощает современные тенденции дизайна СТА, а цвет создает прекрасный контраст с фоновым изображением. Хорошо подобран и размер — от заголовка читатель переходит к тексту, а только потом к СТА.

Один из способов привлечения внимания — цвет. Контраст по сравнению с фоном гарантированно привлечет к кнопке внимание.Также неплохо было бы поиграть с цветом типографики в тексте. Таким образом, у вас будет минимум 3 цвета (фон сайта, фон кнопки, цвет текста на кнопке). Чтобы достигнуть максимального эффекта, заставьте их гармонировать между собой.

Другой визуальный прием — это размер: на экране объекты большего размера привлекают внимание в первую очередь. Однако нужно знать меру, поэтому после увеличения кнопки до определенного размера, вы уже просто впустую занимаете ценное пространство. Грубо говоря, ваши СТА должны быть больше остальных кнопок (не столь важных), но не быть громоздкими и не перевешивать все остальные элементы на странице.

Взаимосвязь с дизайном всего проекта.

Ваши СТА должны быть ясными и четкими, но они также должны гармонировать с остальной частью страницы. Не забывайте: эти кнопки должны призывать посетителей после просмотра страницы пойти и сделать то, что вы больше всего от них хотите. Представьте, что кнопки являются своеобразной «воронкой» для ваших продаж. Это не значит, что СТА обязаны перехватывать все внимание на себя — скорее, необходимо выстроить все остальные элементы так, чтобы они в итоге приводили пользователя к CTA.

Лучше всех это объяснил Нил Патель, который обнаружил, что размещение СТА на первом экране уменьшило уровень кликабельности на 17%. Он объяснил это тем, что контент веб-сайта должен плавно приводить к СТА, особенно в случае с деловым предложением (объясним ниже). Только подумайте, насколько безрезультатны будут действия продавца, который начнет уговаривать вас купить что-то, не объяснив до этого, зачем это вам нужно.

Для привлечения внимания лучше оставить вокруг кнопки достаточно пустого пространства. Негативное пространство — легкий способ сделать элементы заметнее: чем больше места вокруг «призывной» кнопки, тем значительнее она кажется.

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

Головная компания Red Bull — T.C. Pharmaceuticals — умело применяет приемы СТА. Цветовое решение для опции «Узнать больше» и применение «призрачной» кнопки «Посмотреть товары» показывает, что они предлагают пользователям нажать кнопки по порядку.

Текст

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

То есть формулируйте деловое предложение четко — вам нужно дать посетителю вескую причину для клика по СТА. Если они кликнут, смогут ли они скачать что-нибудь бесплатно? Если они подпишутся на новостную рассылку, получат ли они специальную скидку? Стимулы подобного рода обязательно стоит упомянуть в тексте внутри СТА или рядом.

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

На своем сайте QuickSprout Нил Пательумело подбирает слова: приведенный текст конкретно передает информацию о том, что может ожидать пользователя; также он, несмотря на краткость, не лишен юмора и живости.