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

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 вообще вся важная информация размещена на кнопке.

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

Успехов!

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

Рубрики: