СОЗДАЙ СВОЙ LANDING PAGE ПРЯМО СЕЙЧАС! ВЕСЬ ФУНКЦИОНАЛ БЕЗ ОГРАНИЧЕНИЙ - ПРОСТО ЗАРЕГИСТРИРУЙСЯ!
Бесплатно создать

СТА-элементы и их применение на практике

2 июня 2014 г.
Комментариев не добавлено
ста кнопка

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

Помните: СТА-элемент должен гармонировать со всей страницей. 
 

Способ 1 - увеличивайте размеры СТА кнопки
 

У дизайнеров есть правило: чем важнее роль элемента, тем он больше. 

Пример 1 – СТА призыв превышает все остальные части страницы по размерам

В качестве примера используем лендинг компании Lifetree Creative

 
лендинг

Здесь 2 важных элемента – СТА-кнопка и логотип. Но кнопка шире логотипа. И хотя логотип находится выше, но глаз «останавливается» на кнопке. 

Пример 2 – наиболее важная СТА-кнопка должна быть больше своих «коллег» (в случае использования двух СТА кнопок)

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

Способ 2 - придерживайтесь правил размещения СТА кнопки на странице
 

То, где СТА кнопка размещена, очень важно для конверсии. Кнопки должны размещаться на заметных местах.

Пример 1 – СТА-кнопка выше, чем остальные элементы лендинга

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

Пример 2 – СТА-кнопка расположена вверху страницы

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

Пример 3 – кнопка в центре

Лендинг делится пополам, а в самой середине расположена кнопка. Как пример, лендинг PicsEngine.
 
кнопка ста на лендинг

Помните: кнопка и центр не должны находиться далеко от верха страницы.
 

Способ 3 - "поиграйте" с пустым пространством лендинга
 

Пустое пространство хорошо срабатывает при расположении СТА-кнопки. 

Пример 1 – используем пробелы на лендинге
 
сделать лендинг
Лендинг сервиса IconDock хорошее доказательство, где кнопка серого цвета на лиловом фоне отлично привлекает внимание.

Пример 2 – обозначайте связь между элементами страницы при помощи уменьшения размерности пробела

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

Хорошим примером можно считать лендинг компании Donor Tools. 
 
сделать лендинг самому

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

Способ 4 - контраст цветов для выделения СТА кнопки
 

Определите для себя всю цветовую гамму лендинга, а потом решите – каким контрастным цветом выделить СТА-кнопку.

Но помните о сочетании цветов.

Пример 1 – используем оттенки, которые контрастны по отношению к остальным элементам страницы. 

Сервис Notepod хороший пример.
 
пример лендинг пейдж

Здесь все элементы черного цвета, а кнопка ярко синего. Сложно не заметить. 

Пример 2 – игра на контрасте кнопки и фона

Очень, на наш взгляд, стильный способ. Как пример, черно-белый фон и яркая желтая кнопка.
 
ста на лендинг пейдж
 

Способ 5 - поторопим пользователя
 

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

Как пример, лендинг tap tap tap.com
 

пример лендинга

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

Помните: о сильных побуждающих словах для СТА-кнопки.
 

Способ 6 - пользователь должен знать, что действие на Вашем лендинге выполнить просто
 

Ведь часто посетители не начинают действие, потому что считают, что это долго по времени. 

Хороший пример страница Basecamp.
 
продающая страница

На СТА-кнопке даже написано количество затрачиваемого времени и сроки действия тестовой версии. 
 

Способ 7 - объясните пользователю, что он получит после нажатия СТА кнопки
 

И снова о доверии пользователей. Будьте честным и открытым с потенциальным покупателем. Расскажите им о выгодах после нажатия СТА-кнопки. 

На странице Mozilla Firefox вообще вся важная информация размещена на кнопке. 
 

продающий лендинг

Ну, и самое главное – тестируем элементы лендинга. Даже небольшое повышение процента конверсии может принести хороший денежный доход. 

Успехов!


 
Вернуться назад