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

СТА кнопки на продающих страницах страницах мировых брендов

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

Что такое СТА элемент? Call to action (СТА) – призыв к действию, побуждение пользователя сделать какой-то шаг (покупка, подписка, скачивание), задуманный разработчиком страницы. Графически такой призыв выделяется яркой кнопкой (чаще всего) с надписью-призывом: «купить сейчас», «скачать», «зарегистрироваться». 

Иногда, нажав такую кнопку, мы переходим на другую страницу с подробным описанием товара или услуги. Тогда на кнопке будет уместна надпись «узнать больше», «узнать подробнее». 

Внимание: СТА кнопка всегда должна быть в цветовой гамме дизайна всей страницы, должна сочетаться и иметь эстетический вид. НО выделяться. 

Как выделить СТА кнопки

Есть проверенные временем методы по созданию СТА кнопок. Посмотрим примеры знаменитых компаний:

На кнопке располагается призыв о выгоде предложения

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

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

Призыв на кнопке тесно связан с элементом о скидке. Вы видите предложение и тут же кнопка с возможностью использования этого предложения. Здесь кнопка – логическая точка. 

Призывная кнопка носит обобщенный характер

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

Пример кнопки обобщенного типа рассмотрим на примере  Internet Explorer. 


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

На кнопке нет уточнений, общий призыв «Скачать». Но здесь это вполне уместно, так как бренд общеизвестен. Цвет призыва находится в контрасте с цветом кнопки, но в сочетании с текстом страницы. 

Внимание: если скачивание программы платное, то возле кнопки будет уместным разместить условия использования. Как это сделал бренд Apple.
 

СТА кнопка, на которой размещена конкретика

Как самый оптимальный пример, здесь выступает СТА кнопки сайтов Mozilla Firefox. 


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

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

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

Нахождение СТА кнопки вверху страницы

Рассмотрим на примерах от Google. 



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

Как улучшить СТА элемент

Не забываем о том, что СТА элемент для лендинга самый важный. Она используется для сосредоточенности внимания пользователя, для конечного действия – покупки.

Если страница перегружена текстом и картинками, то кнопка на ней просто потеряется. 

Есть определенные правила при создании СТА элемента:

1.    Если это кнопка, то она должна быть похожа на кнопку.

2.    Цвет должен быть ярким, но согласованным с общей гаммой.

3.    Размер кнопки не должен быть маленьким.

4.    Можно использовать такой элемент, как стрелки, которые указывают на кнопку, но не увлекайтесь.

5.    Текстовый призыв должен быть продуманным.

6.    Используйте контраст для СТА элемента.

7.    Шрифт текста страницы и текста СТА элемента должен быть одинаковым.

8.    Цветовое решение всей страницы должно включать в себя не более 4 цветов.

9.    Тестируйте разные варианты элементов и выбирайте лучший.

Успехов!
 
Вернуться назад