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

СТА-кнопки – обзор примеров из жизни. Часть I

20 августа 2014 г.
Комментариев не добавлено

Эта статья – продолжение серии, посвященной СТА-кнопкам, их видам и размерам: http://prob2b.biz/blog/view/index/post/48, http://prob2b.biz/blog/view/index/post/95, http://prob2b.biz/blog/view/index/post/82.

Мы решили собрать в данном посте примеры из жизни лендингов различных брендов и сервисов.
 

1.    Контраст цвета в СТА-кнопке

 

Контраст – это мощнейшее воздействие на пользователя. Это наиболее простой и действенный способ привлечь внимание посетителя. Выделите свою СТА-кнопку контрастным цветом по отношению к общему фону. 

лендинг

Можно воспользоваться способом «двойного» контраста – контрастную надпись СТА-элемента разместить на яркой кнопке, которая также контрастирует с основным фоном.

ста кнопка

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

лендинг для бизнеса

На странице с белым фоном можно даже разместить 2 кнопки, важность отметить цветом: оранжевый – очень важно, серый – менее важно, синий шрифт – наименее важно.

лендинг пейдж

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

создать лендинг

2.    Стимуляция пользователя

 

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

Предложите что-то бесплатно, и Вы снимите психологический барьер. Например, ресурс Codeacademy дает бесплатный доступ к курсам.

дизайн лендинга

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

создать лендинг самому

Можно воспользоваться социальным влиянием. Вы показываете товар и показываете насколько он популярен среди пользователей – под СТА-кнопкой расположите счетчик популярности: нравится многим - понравится и мне. Играйте на этом.

купить лендинг

3.    СТА-кнопка, которая показывает товар «лицом»

 

Можно, например, сделать скрин продукта и связать его с СТА-элементом.

лендинг пейдж

А вот авторы приложения Flipboard предложили 2 СТА-кнопки и иллюстрацию, которая показывает работу программы, и пользователь уже не покупает «кота в мешке». 

дизайн для лендинга

Компании, которые разрабатывают ПО, часто используют метод показа товара. Часто есть бесплатная версия, чтобы опробовать продукт.

ста призыв на лендинг

Сервис Instagram даже показывает  - как будет выглядеть Ваша страница в мобильном приложении.

как создать лендинг

В Orchestra предложен выбор приложения.

продающая страница

4.    СТА-кнопки и правильно написанные тексты

 

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

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

Например, на сервисе Akismet четко и доступно описано его предназначение. Здесь есть четкий призыв и хороший описательный текст.

кнопка для лендинга

Amazon снова безупречен:

дизайн продающей страницы

Здесь на СТА-кнопке выведен текст с полным предложением. Отличный вариант для тех, кто не любит читать буклеты.

ста элемент

А здесь, рядом с СТА-кнопкой, расположен поясняющий текст:

кнопка для лендинг пейдж

Создатели ресурса Eventbrite за пределы СТА-элемента вынесли надпись о том, что версия бесплатна:

лендинг компании

Хороший пример того, что на одной кнопке разместился правильный и точный текст о предназначении сервиса:

что такое лендинг

На страничке сервиса GoToWebinar создатели дали четкое пояснение того, что будет после нажатия на СТА-кнопку  - пообщаться с продавцом, совершить полноценную покупку или опробовать версию.

создать лендинг

А вот пример того, как надпись на кнопке обобщает все предыдущие пункты:

целевая страница купить

Вот еще один метод объяснения – ниже СТА-кнопки поясняющий текст:

что нужно для лендинга

А вот страничка  Brightcove - здесь для усиления эффекта текст на СТА-элементе повторяет текст заголовка:

элементы лендинга

Здесь призыв СТА-надписи подчеркивается с помощью графической стрелки - дополнительный стимул:

дизайн продающей страницы

5.    Призывы обыгрываются при помощи пространственного эффекта

 

Идеальный пример, где СТА-кнопку просто невозможно не заметить:

призыв для целевой страницы

Здесь вокруг СТА-элемента остается достаточно места для того, чтобы сосредоточиться на главном – на информации:

что нужно для ста кнопки

Сервис Dropbox – сама простота и четкость:

кнопка ста

А здесь основные пункты собраны в группы и с помощью пространства отделены от СТА-кнопки:

призыв к действию

Каждый СТА-элемент огражден пространством:

дизайн самому

Абсолютно минималистический дизайн:

легкий дизайн

Тоже хороший пример использования свободного места:

пространство в дизайне

Skype – пример простоты, доходчивости и логичности:

А здесь эффект пространства подчеркивает дополнительный элемент справа от СТА-кнопки:

заказ лендинга

Мы рассмотрели некоторые виды призывов к действию. В следующей статье мы продолжим знакомить Вас с разными типами, покажем новые примеры из реальных рекламных кампаний мира. 

Продолжение следует!

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