Аббревиатура СТА, произносится [ситиэй], пришла к нам из западных материалов по улучшению конверсии и означает «призыв к действию» (от «call to action»). Под словом «СТА-кнопка» подразумевают ту кнопку на странице сайта или интернет-магазина, которую пользователь должен нажать по мнению создателей страницы. Обычно это такие кнопки как «купить», «заказать» и так далее.
Словом «СТА-элементы» обозначают сопутствующие элементы, если желаемое действие на сайте состоит не только из нажатия кнопки, а из выполнения и каких-то других действий – например, ввода своего email-адреса, выбора нужного размера, и т. д. Такие поля для ввода, выбора значения и сама форма сбора контактных данных обычно совокупно называются «СТА-элементы».
Но не все СТА-кнопки одинаково хороши! Предлагаем вашему вниманию несколько правил, как повысить конверсию вашего сайта с помощью «правильных» СТА-кнопок.
СТА-кнопка должна резко контрастировать с цветовой схемой страницы
Казалось бы, это очевидно. Если вы создаете страницу сайта и хотите, чтобы пользователь после ее просмотра нажал определенную кнопку, то, наверное, ее стоит сделать, яркой и контрастной к остальному содержимому, чтобы она была хорошо заметна? Это кажется очень логичным, но зачастую эта логика «разбивается о быт» брендбуков, где большое внимание уделяется визуальной эстетичности, а высокий контраст и бросающиеся в глаза элементы считаются дурным вкусом и несоблюдением фирменного стиля.
ЧТО БУДЕТ ЕСЛИ ВЫКУРИТЬ 100 СТИКОВ GLO?
Однако представим себе среднестатистического посетителя сайта. Он ищет решение какой-то проблемы и уже исследовал несколько сайтов в поисках идеального предложения в удовлетворении его потребности. Он уже достаточно устал от поиска информации, ему надо решить свою проблему, желательно – поскорее. Не надо заставлять его разгадывать ментальные ребусы вроде «а куда же нажать-то надо?»
Поэтому кнопка должна максимально контрастировать и быть заметной на фоне сайта. Посетитель должен ее заметить, даже если у него серьезные проблемы со зрением! Серые кнопки на сером фоне серого сайта – это может и выглядит стильно, но совершенно не конверсионно.
Источник: www.100up.ru
Как написать СТА, который не раздражает
Многие люди, которые даже не работали с рекламой, знают, что это такое, но для приличия расшифруем. СТА (Call To Action) — кликабельное небольшое сообщение, которое отвечает на вопрос: «Что делать, после просмотра рекламы/коммерческой страницы/контента? ”. Он встречается повсеместно: блогеры просят оформить подписку и нажать на колокольчик, кнопка «Скачать» в PlayMarket, плашка “Добавить в корзину» в интернет-магазинах и подобное бесконечное множество примеров. Призывом всегда является глагол: жми, купи, подпишись, скачай, запусти, получи, оформи и так далее.
Один призыв = один клик
Всегда должен быть один призыв к действию, потому что пользователь может не понять, что от него требуется после просмотра рекламы или всего лендинга, после чего уйдет. К тому же нельзя давать ЦА выбор — ведите ее по своему пути.
НА БАЗЕ Руслан Карманов (Китайский свяZноj)
Кстати, говоря про всяко разные лайки, подписки и колокольчики, стоит сказать, что они отнюдь не бесполезные. Просите пользователя сделать все, что нужно, но при условии его понимания, что от него вообще требуется.
Чем понятнее, тем ближе
СТА, понятный и близкий для человека, автоматически считается хорошим. Нужно объяснить пользователю ту выгоду, которую он может получить при выполнении действия. Речь идет о классный рецептах? — СТА должен выглядеть так: «Подпишись и получай больше клевых рецептов». Пользователь просмотрел весь лендинг услуги? — тогда пусть колл ту экшон будет таким: «Получи коммерческое предложение».
Как не нужно делать
Во-первых, СТА не должен быть агрессивным, располагаясь в каждом свободном пространстве страницы. Когда призыв напихан где только можно, это вызывает полное отторжение у большинства пользователей.
Во-вторых, СТА и вправду лучше не писать капсом. Интернет-пользователи воспринимают такой текст как что-то кричащее. Плюсуем сюда факт того, что большинство пропускают все через себя и уже получим часть юзеров, которые посчитали, что вы на них орете.
“Одна из главных ошибок — непонятный СТА, когда пользователь не знает, что произойдет после клика по кнопке. Записаться — куда? Скачать — что? Покупатель просто уходит со страницы, когда не понимает, что от него требуют или как вести себя дальше. Из-за невнятного Call To Action очень легко потерять часть целевой аудитории”
Галина Менг
, Главный редактор, ITB-company
Вспоминается сбор СТА конкурентов, когда один из них умудрился уместить на лендинге 12 одинаковых призывов к действию, которые еще и капсом были написаны. Так что не совершайте подобных ошибок при составлении и размещении СТА.
О том, как собирать тексты СТА конкурентов и остальные блоки сайта с коммерческой информацией продающих страниц, можете почитать здесь.
Можно не призывать?
Конечно, без СТА можно обойтись, но я не рекомендую совершать подобного. Как по мне, отсутствие призыва — большое упущение, ведь СТА повышает кликабельность и одновременно является инструкций для пользователя, говоря о том, что будет после клика. Если пользователь знает, что будет дальше, то и трафик будет более качественный и конверсия с вашего сайта подрастет.
Тестируйте различные вариации СТА и не совершайте ошибок. Да прибудет с вами конверсия!
Источник: vc.ru
Эффективный дизайн сайта: CTA-кнопки
Еще во время планирования будущего сайта нужно учитывать принципы оформления так называемых СТА кнопок. Дословно это «call to action». Несложно догадаться, что такая кнопка призывает к какому-то действию на сайте: заказать, купить, скачать и так далее. Дело в том, что некоторые дизайнеры не придают этому элементу должного внимания, а зря. Ведь это значительно повышает эффективность готового проекта.
Для чего нужна кнопка СТА?
Основная цель такой кнопки — это, собственно, замотивировать случайного прохожего, заглянувшего на сайт, или постоянного посетителя совершить какое-то действие. Это может быть добавление товара в корзину, переход на другую страницу для подробного ознакомления, скачивание чего-либо, заполнение анкеты и так далее.
Для того, чтобы кнопка была действительно эффективна, при ее оформлении важно учитывать свою целевую аудиторию, направленность сайта, его дизайн, а также само действие, которое вам необходимо получить от посетителя.
Какими бывают кнопки СТА?
В зависимости от типа кнопки «Call to action» выбирается и ее оформление. Ниже собраны самые распространенные виды, которые отвечают за определенное действие.
1. Скачивание
Кнопка «Скачать» предлагает пользователю воспользоваться определенным продуктом. Чтобы он решился на это действие, желательно предоставить некоторую дополнительную информацию. Например, размер файла и его версию. Нелишним будет и фотография или скриншот содержимого. В качестве примера можно привести шаблон Moneyapp, где пользователь уже знает, что ему предлагается, а кнопками служат иконки AppStore и Google Play.
2. Добавление в корзину
Ни один интернет-магазин не обходится без этой кнопки. Как правило, она находится на каждой странице с товаром и призывает клиента либо «Купить», либо «Добавить в корзину». Шаблон Kashve оформлен очень лаконично, нет ничего лишнего и отвлекающего, а потому главная кнопка «Add to cart» сразу же бросается в глаза.
3. Узнать подробности
Чтобы пользователь ознакомился с более подробным материалом, обычно его анонс на главной странице сопровождают кнопкой «Узнать подробнее». Как правило, сам незаконченный текст уже заинтересовывает посетителя и заставляет перейти дальше, так что просто большого размера кнопки вполне достаточно. Например, шаблон BD настолько впечатляет дизайном и эффектами на главной странице, что не захотеть узнать подробнее просто не выходит.
4.Связаться
Если вы предоставляете комплексные услуги, то имеет смысл не ограничиваться только кнопкой, а сделать целую форму обратной связи. В ней человек может оставить свое имя, контактные данные и задать интересующий вопрос. Этот блок не обязательно должен быть очень ярким, т.к. его, скорее всего, будут искать, если заинтересуются вашими услугами. По классике его располагают в конце сайта, как это сделано, например, в шаблоне T-Flag.
5. Подписка
Некоторые сайты предоставляют посетителю возможность подписаться на новости или полезные советы от сервиса. Это хороший прием для прогрева аудитории и поддержания контакта с тем, кто в первый раз зашел на сайт и еще не знает, хочет ли воспользоваться вашими услугами. Хороший пример — шаблон Ambient Yoga. Важно, в зоне возле кнопки объяснить, что будет в подписке. Чем больше прозрачности — тем лучше.
Принципы оформления СТА кнопок
1. Свободное пространство
Для того, чтобы СТА кнопка выигрывала на фоне прочего контента и привлекала внимание посетителя, желательно, чтобы она была немного удалена от остального наполнения сайта. То есть будет гораздо интереснее, если между кнопкой и содержимым страницы, изображениями и другими элементами сайта вы оставите так называемое негативное пространство.
При этом очень важно, чтобы кнопка не смотрелась одинокой, где-то на отшибе, совершенно оторванная от остального контента. Так что тут скорей всего придется повозиться, чтобы найти ту самую золотую середину, которая позволит разместить СТА элемент максимально гармонично. Вот несколько рекомендаций, которые могут помочь:
— Расположите СТА кнопку так, чтобы вокруг нее было свободное пространство в достаточном количестве, а остальное наполнение сайта не было нагроможденным.
— Руководствуйтесь правилом золотого сечения или двух третей, чтобы расположение главного элемента, в нашем случае кнопки «Call to action», было гармоничным и сразу же бросалось в глаза.
— Убедитесь, что свободное пространство вокруг кнопки хорошо отделяет ее от прочего контента и не дает слиться с другими элементами.
Трамвай желаний – удивительный сайт сам по себе, наполненный занимательной графикой, анимацией и музыкальным сопровождением. Но и СТА кнопка здесь интересно удалена от остального контента, а еще выполнена в виде замочной скважины. Здесь нужно, зажав кнопку мыши, попасть ключом в эту самую кнопку. Вот что называется оригинальный подход.
2. Цвет и размер
Размер кнопки будет зависеть от оформления всего сайта. В любом случае нужно принять во внимание, что крупная кнопка затмит остальное содержимое, что не есть хорошо. А очень маленькая не будет выделяться и не принесет должного результата.
Если говорить о цвете, то тут есть некоторая зависимость от размера. Если кнопка большая, то ее цвет не должен быть из разряда «вырви глаз». Естественно, должно быть отличие от фона, но не слишком ярко. Если кнопка не слишком большая, она, наоборот, должна привлекать внимание контрастными цветами, но сочетающимися с общей гаммой сайта. Несколько советов:
Herman Scheer – как раз отличный пример. Нежные тона фона отлично контрастируют с темно-синей СТА кнопкой.
3.. Текстовое наполнение
То, насколько грамотно вы сформулируете призыв и насколько правильно оформите саму кнопку, очень сильно повлияет на дальнейшую конверсию. Все должно быть грамотно и просто написано, коротко и внятно. Например, «Добавить в корзину» будет не так эффективно, как «Заказать сейчас». Второй вариант более конкретен и уже мотивирует совершить действие.
Формулируйте призыв как можно более коротко и четко, чтобы с первого взгляда посетитель осознавал, что его ждет после клика. Обязательно уделите внимание размеру шрифта и его цвету. Он должен быть большим и контрастным.
На сайте eSputnik главная кнопка «Попробовать» грамотно и четко сформулирована и ярко оформлена, за счет чего эффект от этого гораздо лучше.
4. Дополнительные сведения
Иногда на СТА кнопке просто необходимо разместить дополнительную информацию. Например, это относится к таким призывам, как «Скачать» или «Демоверсия». В таком случае посетителю хотелось бы узнать, что именно ему предлагают, каковы условия, сколько весит файл для скачивания и как долго будет действовать режим демо.
Здесь нужно учитывать, что главное – это создать мотив к действию, его нужно сделать максимально выделяющимся и броским, а вот дополнительную информацию можно сделать поменьше и не так ярко.
И еще, не стоит лепить информацию на кнопку, если без нее ничего не изменится. Например, к кнопке «Добавить в корзину» абсолютно не нужны никакие слова-пояснения. Тут все понятно и так, а информация о товаре располагается рядом на странице.
На сайте Join.me, который позволяет получать доступ к удаленному компьютеру, как раз обе кнопки снабжены полезным дополнением, так что клиент сразу видит, что он получит в итоге.
5. Форма, изображение и оформление в целом
Самая распространенная форма СТА кнопки – это, конечно, прямоугольник. Но нет ничего плохого, если любая другая геометрическая фигура будет отлично вписана в общий дизайн страницы.
Если говорить про изображение, то желательно использовать то, которое полностью соответствует призыву на самой кнопке. То есть, если это «Добавить в корзину», уместно будет добавить изображение самой корзины. А возле слова «Скачать» привычным уже для нас является стрелка. Но и оригинальные изображения тоже могут стать весьма эффективными.
Вот основные правила:
— Изображение на СТА кнопке должно дополнять, отображать и помогать понять основной призыв к действию.
— Чем проще и понятнее изображение, тем эффективнее и легче воспринимается призыв на кнопке.
— Смело используйте незаезженные картинки, главное, чтобы их смысл был предельно понятен.
На сайте 3D ручки Lix Pen обе СТА кнопки дублируются соответствующими изображениями: просмотр видео – привычным треугольником, а заказ товара – магазинной тележкой.
6. Приоритетность
Если на странице размещено несколько кнопок, призывающих к действию, то следует расставить приоритеты. Так что основная по значению и эффективности кнопка должна быть выделена больше, чем остальные. Сделать это можно цветом, размером, шрифтом текста.
Так, главная СТА кнопка должна быть ярче, больше и выразительнее, чем менее значимые. Например, на сайте Flywheel приоритетная кнопка имеет ярко выраженную форму, контрастный оттенок заливки и более крупный шрифт.
Главная цель сайта – это добиться от посетителя определенного действия. Именно поэтому от малюсенькой СТА кнопки зависит очень многое. Так что пренебрегать ею вовсе не стоит. Чем больше принципов оформления этого элемента вы примите во внимание, тем больше шансов, что вы добьетесь от клиента желаемого действия. Готовы применить знания на практике?
Тогда настало время создать свой сайт.
Источник: www.ucraft.ru