Все мы уже знаем насколько важна роль призыва к действию (СТА-элемент, СТА-кнопка) для конверсии лендинга.
В данном посте хотим поговорить о способах, как сделать привлекательную и правильную СТА-кнопку, которая будет заметна и понятна пользователю.
Помните: СТА-элемент должен гармонировать со всей страницей.
Способ 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 вообще вся важная информация размещена на кнопке.
Ну, и самое главное – тестируем элементы лендинга. Даже небольшое повышение процента конверсии может принести хороший денежный доход.
Успехов!