При посещении большинства веб-сайтов, чтобы достичь какой-то цели, обычно нужно выполнить несколько шагов, и первый из них начинается с нажатия кнопки Call To Action (CTA) — призыва к действию. Вспомните, когда в последний раз вы подписывались на услугу или загружали приложение? Этот процесс, скорее всего, включал взаимодействие с кнопкой «призыв к действию».
Кнопки CTA призваны направлять пользователей к вашей цели. Весь смысл их использования – заставить посетителя сделать желаемое для вас действие.
Основные примеры CTA включают:
- «Начать использовать»
- «Загрузите приложение / книгу / руководство»
- «Зарегистрируйтесь для получения обновлений»
- «Получить консультацию»
Сегодня мы обсудим 5 лучших практик для разработки кнопок CTA на реальных примерах, которые помогут вам получить наибольшее количество кликов на целевой странице.
1. КНОПКА ВИЗУАЛЬНОГО ВКЛЮЧЕНИЯ
Цвет вашей кнопки имеет значение. Коротко эта наша рекомендация должна звучать так: «Рассмотрим цвет кнопки CTA». Используя цвет, вы можете выделить некоторые кнопки больше других, придав им большее визуальное видение.
ИСПОЛЬЗОВАНИЕ КОНТРАСТНЫХ ЦВЕТОВ
Контрастные цвета лучше всего подходят для кнопок CTA. Их лучше выбирать из основной цветовой схемы веб-страницы, чтобы кнопки вписывались в общий дизайн. Рассмотрим ниже пример Firefox. Зеленый цвет кнопки CTA на странице Firefox сразу же привлекает внимание пользователя, потому что хорошо выделяется на синем фоне.
Еще одна привлекательная кнопка CTA — на домашней странице Hipmunk. Ярко оранжевая, она захватывает внимание пользователя и определяет его следующее возможное действие.
НЕГАТИВНОЕ ПРОСТРАНСТВО
Для CTA важное значение имеет не только цвет, но и объем пространства вокруг него. Пустота (или отрицательное пространство) создает необходимую воздушность и отделяет кнопки CTA от других элементов пользовательского интерфейса. Старая домашняя страница Dropbox была хорошим примером использования отрицательного пространства: синяя надпись «Зарегистрируйтесь бесплатно» выделяется на светлом фоне.
2. ТЕКСТ, ОРИЕНТИРОВАННЫЙ НА ДЕЙСТВИЕ
Правильный текст для кнопки призыва к действию заставит ваших посетителей принимать правильные решения. А это не такая уж и непростая задача. Вот несколько советов, которые помогут вам сделать это:
НАЧАТЬ С ГЛАГОЛА
Вы должны избегать неопределенных и скучных слов для кнопок CTA, таких как: «Войдите для получения дополнительной информации». Замените их больше ориентированными на действие словами типа: «Начать использовать бесплатную пробную версию» или «Получить скидку сейчас». Evernote как раз демонстрирует довольно распространенные и классно работающие ориентированные на действия тексты для своих CTA. Они используют глаголы: «Начать», «Получить», «Присоединиться».
Более интересный пример — на домашней странице Treehouse. Здесь CTA не просто предлагает начать пользоваться бесплатной пробной версией, но говорит: «Заявите о своем использовании бесплатной пробной версии». Разница в формулировке может показаться тонкой, но второй вариант звучит более лично.
ИСПОЛЬЗУЙТЕ КРАТКИЙ И ЛЕГКИЙ ДЛЯ ПОНИМАНИЯ ТЕКСТ
Обязательно задекларируйте, что получит посетитель, если нажмет на CTA. Но помните: в идеале текст кнопки должен содержать от двух до пяти слов.
ДОПОЛНИТЕЛЬНОЕ ПРЕДЛОЖЕНИЕ
Скорее всего, вы заметили, что у многих кнопок есть слова «бесплатно», “свободно”, и это не случайно. Использование таких слов подчеркивает ценность вашего предложения. При написании своего CTA попытайтесь найти способ интегрировать одно (или все три) следующих слова:
- бесплатно
- бонус
- немедленно
И еще один важный момент. Иногда пользователь побаивается зарегистрироваться или подписаться на какую-либо услугу, не зная, чем это будет грозить ему в будущем, если услуга, в конце концов придется ему не по нраву. Netflix нивелирует этот пользовательский страх, используя обещание «отменить в любое время» прямо рядом с текстом призыва.
СОЗДАЙТЕ ОЩУЩЕНИЕ БЕЗОТЛАГАТЕЛЬНОСТИ
Выстраивание чувства срочности в ваших кнопках CTA может увеличить коэффициенты перехода по клику. Пример такого текста: “Зарегистрироваться и получить 25% только сегодня!”. Ограничение времени для принятия решения, заставляет людей принимать предложение как можно скорее.
ПОЛЕЗНЫЙ ТЕКСТ
Иногда нужно добавить дополнительную строку информации в текст кнопки. Эта практика распространена с бесплатными пробными версиями. Например, под основным текстом CTA: «Начать использовать бесплатную пробную версию» хорошо будет работать надпись мелким шрифтом: «30-дневная пробная версия, без кредитной карты». Такой дополнительный текст способен облегчить процесс принятия решений.
3. СДЕЛАЙТЕ СТА ВИДИМЫМ ВСЕГДА
Размещение кнопок СТА так же важно, как цвет и текст. Кнопка должна располагаться в удобном для поиска месте, которое органично вытекает из потока веб-страницы. Располагайте ее так, чтобы пользователи ее не пропустили. В идеале ваш призыв к действию должен быть первым, что видят пользователи, попадая на целевую страницу сайта.
4. БОЛЬШАЯ КНОПКА С ЗАКРУГЛЕННЫМИ УГОЛКАМИ
Подумайте о том, как дизайн соотносится с доступностью. Понимает ли пользователь этот элемент как кликабельный? Используйте форму и размер СТА так, чтобы элемент был похож на кнопку.
СДЕЛАЙТЕ ЕГО БОЛЬШЕ
CTA должен быть достаточно большим, чтобы увидеть его на расстоянии, но не настолько огромным, чтобы отвлечь внимание от основного контента на странице
ИСПОЛЬЗУЙТЕ КНОПКИ КРУГЛЫМИ УГОЛКАМИ
Форма кнопки может сыграть большую роль. Закругленные углы легче воспринимаются глазами — это доказанный факт. В тесте ContentVerve закругленная зеленая кнопка работает лучше, чем синий прямоугольник.
5. ЛУЧШЕ МЕНЬШЕ, ЧЕМ БОЛЬШЕ
Если вы хотите побудить клиента к действию, вы должны помочь ему принять решение, удалив с пути все возможные препятствия. Когда пользователям предоставляют слишком много вариантов, они, как правило, путаются. Таким образом, лучше предложить потенциальным клиентам только один вариант.
Если вы все же хотите включить несколько вариантов кнопок, придайте одному из них больше веса, чтобы направить пользователей по определенному пути. Одним из хороших примеров является сайт Evernote: как только вы достигаете нижней части домашней страницы, предпочтительным выглядит призыв: «Зарегистрироваться бесплатно», а CTA для уже зарегистрированных пользователей смотрятся второстепенными.
ВЫВОД
Чтобы достичь эффективного дизайна CTA, вам нужно рассмотреть больше, чем просто дизайн кнопки. Важно подумать о цвете фона, окружающих изображениях, тексте и многих других элементах. Надеемся, что советы, упомянутые в этой статье, помогут вам создать отличный призыв к действию на вашем сайте. И не забудьте о важности тестирования — если вы решили создать CTA на сайте, не забудьте проверить, работает ли он для вашей аудитории.
Давайте создадим что-нибудь крутое вместе!
