Кнопка призыва к действию

Кнопка призыва к действию

Как должна выглядеть кнопка призыва к действию? Где ее разместить на сайте? Как избежать навязывания? Эти и другие вопросы волнуют многих маркетологов и дизайнеров. О том, что такое призыв к действию и как правильно использовать этот элемент в маркетинге и дизайне, мы и поговорим сегодня.

Содержание:

Что такое призыв к действию в маркетинге и дизайне?

Что такое кнопка призыва к действию

Аббревиатура «CTA» означает призыв к действию. Призыв к действию — это любой элемент дизайна (обычно кнопка), который побуждает посетителя выполнить определенные действие. Это может быть что угодно — от просмотра сайта до заполнения контактной формы или добавления товара в корзину.

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

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

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

Как создать кнопки CTA

Начнем с текста.

Правильный текст

How to Write CTA Copy

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

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

CTA Copy

Во многих случаях в идеальном тексте с призывом к действию просто указывается цель конверсии веб-сайта. Если ваша цель — побудить людей читать ваш блог, на кнопке должно быть просто написано «Читать» или «Читать далее». Если вы хотите простимулировать контакт, вам подойдет кнопка с текстом «Связаться с нами» или «Напишите нам».

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

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

creating a sense of urgency

Кнопки с надписью: «Получите бесплатную копию прямо сейчас» или «Только сегодня, скидка 50% при регистрации» имеют высокую конверсию, поскольку пользователи не хотят упускать редкую возможность получить что-то, что завтра уже не будет доступно.

Еще одна вещь, на которую стоит обратить внимание, — это то, как вы обращаетесь к своим посетителям. Некоторые западные эксперты считают, считают наиболее эффективным использование местоимений от первого лица — «Create My Account», «Get My Copy», другие же предпочитают использование местоимений от второго лица – «Get Your Copy», «Claim Your Free Trial».

Pronouns

В России же, по большей части принято максимальное упрощение и даже обезличивание – «Подписаться на рассылки», «Зарегистрироваться», «Вход в личный кабинет» и т.д. Нельзя сказать, что это не работает, однако зачастую стоит проявить чуть больше уважение к посетителю – «Подпишитесь на нашу рассылку», «Зарегистрируйтесь», «Ваш личный кабинет». Помните, посетитель сайте, пусть и заочно, но все же общается с вами. Так почему бы не сделать общение приятным и уважительным. Тем более, что степень вовлеченности напрямую влияет на конверсию.

Форма кнопок

Визуальная составляющая кнопок CTA не менее важна (если не более), чем сам текст. На первый взгляд, все просто — кнопки должны привлекать внимание и быть-таки нажатыми.  Но этого не так просто добиться. Чтобы выделяться на странице — форма, размер, цвет и расположение кнопок CTA должны четко контрастировать с остальной частью контента.

Design Your CTA Buttons

Вы заметили, что большинство CTA-кнопок (как и большинство кнопок в Интернете) имеют прямоугольную форму. Конечно, есть отличные примеры CTA круглой, квадратной или другой, даже менее распространенной формы, но большинство из них прямоугольные. Почему так?

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

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

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

Форма кнопок призыва к действию

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

Овальная кнопка

Цвет

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

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

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

Важность цвета

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

Кнопка

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

Кнопка призыва к действию - две кнопки

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

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

Анимация и детали

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

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

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

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

Позиция на сайте

Последним аспектом, определяющим успешность кнопки CTA, является ее расположение и своевременная подача. Хотя не существует «золотого правила» относительно того, где на самом деле поставить кнопку, ясно одно — ее следует подавать посетителю в нужное время.

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

Таким образом, вся страница — ее дизайн и ее содержание — должны быть структурированы и разработаны таким образом, чтобы приводить посетителя к конечной цели (действию), будь то подписка, покупка или что-то еще.

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

Кнопка призыва к действию - позиция

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

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

Заключение

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

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

Источник

Опубликовано admin

1 комментарий

Данная статья очень наглядно иллюстрирует примеры правильного создания и использования кнопок призыва к действию.

Добавить комментарий