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

Однако представим себе среднестатистического посетителя сайта. Он ищет решение какой-то проблемы и уже исследовал несколько сайтов в поисках идеального предложения в удовлетворении его потребности. Он уже достаточно устал от поиска информации, ему надо решить свою проблему, желательно – поскорее. Не надо заставлять его разгадывать ментальные ребусы вроде «а куда же нажать-то надо?»

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

Вот хороший пример. Согласитесь, на таком сайте вам не пришлось бы ломать голову, какая кнопка является целевой.

А вот гораздо менее удачный пример - страница всем известного интернет-магазина. Вроде бы она должна побуждать нас купить рекламируемый товар. Но что это? Кнопка «Купить» просто незаметна на этой странице. Зато яркие лого и кнопка «Акции», словно созданы для того, чтобы увести нас с этой страницы.

Современный тренд в сторону так называемого «плоского дизайна», словно заставляет веб-дизайнеров соревноваться, кто сделает кнопку менее похожей на кнопку.

Запомните, кнопка должна выглядеть как кнопка (не как ссылка, не как какой-то непонятный элемент интерфейса). Желательно, объемной и визуально похожей на кнопку, а не как рамка со скругленными краями. Рассмотрим несколько примеров.

Что от нас хотят здесь? Надо полагать, чтобы мы нажали ссылку «стать клиентом». А вы попробуйте для начала ее найти на экране?

Эта ссылка не только не сделана в форме кнопки, она даже не подчеркнута, чтобы показать, что это ссылка, и ее можно кликнуть!

Разве было бы плохо, если бы эта ссылка была оформлена в виде кнопки, которая просто просится, чтобы ее нажали? Например, вот так:

Ниже показан удачный пример: согласитесь, такую кнопку сложно не заметить. Она объемна, она похожа на кнопку. К тому же ее форма в виде стрелки решает еще одну интерфейсную проблему – она указывает пользователю, что перед тем, как «купить», неплохо бы выбрать нужную разновидность товара.

Это касается не только самой СТА-кнопки, но и других СТА-элементов, формы, текста в ней, если такие есть.

Старайтесь избегать слов в СТА-элементах, которые связаны с какими-то сложностями, нежелательными действиями.

Типичный пример СТА-кнопки на карточке товара в интернет-магазине: «купить». Что это подразумевает? Расстаться с деньгами. Ой! Может быть лучше использовать слова «в корзину»? Ведь ничего страшного не случится, если я положу товар в корзину, не правда ли? Я потом могу и не покупать, если не захочу.

Вот совсем неудачный пример. Что нам здесь обещают? «Новинки, скидки, предложения» легко транслируются в мозгу потребителя в «поток рекламы на мой email». Вот уж спасибо, такого счастья не надо!

Старайтесь избегать слов, которые не дают конкретики о том, что будет дальше. Это касается таких слов, как «отправить заявку» или «отправить» (подразумевается – форму). «Ок!», - думает посетитель: «Я отправлю заявку, а дальше-то, что будет?»

Попробуйте использовать слова, которые не несут в себе стойкой ассоциации с чем-то негативным – с расставанием с деньгами, с потоком нежелательной рекламы.

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

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

Вот хороший пример. СТА-кнопка обещает получение информации, полезной для тех, кто попал на эту страницу.

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

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

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

Но посмотрите на этот пример ниже. Куда тут нажимать? Желтую кнопку «Заказать»? А что я закажу? Тут и разные виды хостинга, и домены, и конструктор сайтов. А еще тут, кажется, можно «проверить» домен, ок. А что делает зеленая кнопка «Заказать»? Она заказывает что-то другое? А еще тут есть кнопки «Подробнее», и онлайн-консультант приглашает написать ему. Господи, куда нажимать-то?

Чем хорош интернет-маркетинг – тем, что он опирается на факты и цифры.

Аудитории у всех сайтов разные, и ведут себя по-разному, и в каких-то случаях определенная аудитория может давать больше конверсии и при нарушении казалось бы очевидных правил.

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

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

Однако представим себе среднестатистического посетителя сайта. Он ищет решение какой-то проблемы и уже исследовал несколько сайтов в поисках идеального предложения в удовлетворении его потребности. Он уже достаточно устал от поиска информации, ему надо решить свою проблему, желательно – поскорее. Не надо заставлять его разгадывать ментальные ребусы вроде «а куда же нажать-то надо?»

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

Вот хороший пример. Согласитесь, на таком сайте вам не пришлось бы ломать голову, какая кнопка является целевой.

А вот гораздо менее удачный пример - страница всем известного интернет-магазина. Вроде бы она должна побуждать нас купить рекламируемый товар. Но что это? Кнопка «Купить» просто незаметна на этой странице. Зато яркие лого и кнопка «Акции», словно созданы для того, чтобы увести нас с этой страницы.

Современный тренд в сторону так называемого «плоского дизайна», словно заставляет веб-дизайнеров соревноваться, кто сделает кнопку менее похожей на кнопку.

Запомните, кнопка должна выглядеть как кнопка (не как ссылка, не как какой-то непонятный элемент интерфейса). Желательно, объемной и визуально похожей на кнопку, а не как рамка со скругленными краями. Рассмотрим несколько примеров.

Что от нас хотят здесь? Надо полагать, чтобы мы нажали ссылку «стать клиентом». А вы попробуйте для начала ее найти на экране?

Эта ссылка не только не сделана в форме кнопки, она даже не подчеркнута, чтобы показать, что это ссылка, и ее можно кликнуть!

Разве было бы плохо, если бы эта ссылка была оформлена в виде кнопки, которая просто просится, чтобы ее нажали? Например, вот так:

Ниже показан удачный пример: согласитесь, такую кнопку сложно не заметить. Она объемна, она похожа на кнопку. К тому же ее форма в виде стрелки решает еще одну интерфейсную проблему – она указывает пользователю, что перед тем, как «купить», неплохо бы выбрать нужную разновидность товара.

Это касается не только самой СТА-кнопки, но и других СТА-элементов, формы, текста в ней, если такие есть.

Старайтесь избегать слов в СТА-элементах, которые связаны с какими-то сложностями, нежелательными действиями.

Типичный пример СТА-кнопки на карточке товара в интернет-магазине: «купить». Что это подразумевает? Расстаться с деньгами. Ой! Может быть лучше использовать слова «в корзину»? Ведь ничего страшного не случится, если я положу товар в корзину, не правда ли? Я потом могу и не покупать, если не захочу.

Вот совсем неудачный пример. Что нам здесь обещают? «Новинки, скидки, предложения» легко транслируются в мозгу потребителя в «поток рекламы на мой email». Вот уж спасибо, такого счастья не надо!

Старайтесь избегать слов, которые не дают конкретики о том, что будет дальше. Это касается таких слов, как «отправить заявку» или «отправить» (подразумевается – форму). «Ок!», - думает посетитель: «Я отправлю заявку, а дальше-то, что будет?»

Попробуйте использовать слова, которые не несут в себе стойкой ассоциации с чем-то негативным – с расставанием с деньгами, с потоком нежелательной рекламы.

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

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

Вот хороший пример. СТА-кнопка обещает получение информации, полезной для тех, кто попал на эту страницу.

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

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

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

Но посмотрите на этот пример ниже. Куда тут нажимать? Желтую кнопку «Заказать»? А что я закажу? Тут и разные виды хостинга, и домены, и конструктор сайтов. А еще тут, кажется, можно «проверить» домен, ок. А что делает зеленая кнопка «Заказать»? Она заказывает что-то другое? А еще тут есть кнопки «Подробнее», и онлайн-консультант приглашает написать ему. Господи, куда нажимать-то?

Чем хорош интернет-маркетинг – тем, что он опирается на факты и цифры.

Аудитории у всех сайтов разные, и ведут себя по-разному, и в каких-то случаях определенная аудитория может давать больше конверсии и при нарушении казалось бы очевидных правил.

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