Веб Остров Можно написать безумно продающий текст, но не получить ни одной продажи. А всё потому, что волшебная кнопка на лендинге для перехода к оплате или иному целевому действию сделана как попало. Читаем и применяем правила.
Кнопка на лендинге - как правильно оформить
Кнопка на лендинге или в статье - это не просто функция, а элемент дизайна, с которым взаимодействует пользователь. Размещается также в интернет-магазинах и прочих ресурсах. Исходя из этого, к оформлению нужно подойти серьёзно.
1. Кнопка видна на первом экране прокрутки
Вспоминаем универсальную структуру лендинга. Кто не знает, вкратце поясню. Это:
- Цепляющий внимание заголовок.
- Список выгод продукта или какой-то произвольный текст.
- Наиболее сильное преимущество, побуждающее к покупке, например, акция или ограниченные сроки.
- Призыв к действию.
Тот самый призыв располагается на кнопке:
- Купить
- Заказать
- Получить
Теперь представляем, как скользит взгляд читателя в виде буквы F. Следовательно, кнопка на лендинге должна красоваться под заголовком и списком, чтобы читатель не упустил её из вида. Ни в коем случае где-то там слева или справа, а по траектории человеческого взгляда при чтении.
Если весь призыв не подразумевается на кнопке, то прописываем его обычным текстом, а кнопку располагаем строго под ним.
2. Кнопка на лендинге отличается цветом
Заветная кнопка целевого действия должна не просто отличаться цветом, а выделяться, быть яркой. Контраст - это про неё. Казалось бы, очевидно. Но почему я иногда наблюдаю на лендингах старания авторов сделать всё в тон? Ведь тогда кнопка сливается и взгляду не за что зацепиться.
Иногда бывает так, что на лендинге или в тексте нужно поместить 2 кнопки действия. Например, купить и ознакомиться. Тогда наиболее важную кнопку делаем ярче, а вторую как раз можно слить с общей цветовой палитрой. Либо просто белой с окантовкой.
Смотрим пример двух кнопочек. Слева поважнее, справа "чтобы было":
Сознавайтесь, пытались сейчас понажимать кнопки? Лучше закрепим результат:
- Кнопка контрастного цвета
- В ближайших местах цвет не повторяется
- Тёмная кнопка на светлом фоне и наоборот
- Эффекты - градиент, тени
- На кнопке призыв к действию
3. Оптимальный размер кнопки на лендинге
Кнопка должна выглядеть как кнопка и никак иначе. Но как пытаются креативить горе-маркетологи? Например, вместо кнопки вставляют кликабельный баннер. Это не вариант. Можно и даже нужно картинку делать кликабельной, но не вместо кнопки.
Не следует растягивать кнопку на всю ширину экрана. И ещё нюанс. Если нет возможности сделать так, чтобы кнопка меняла своё состояние при наведении курсора, то пусть его меняет сам курсор. Но лучше сделать эффект затухания, смены цвета, увеличения и прочее.
4. Дублирование кнопки
Если продающая страница превышает 1 экран прокрутки, то кнопку нужно дублировать ровно столько раз, сколько экранов получается на лендинге. Призывы к действию дублировать не стоит, по крайней мере на начальном этапе. А лучше потестировать. На каждой кнопке свой призыв.
Если по результатам тестирования обнаружится, что некоторые кнопки не были задействованы вообще, то стоит повторить популярный призыв, либо придумать новый и ещё раз провести тест. Или поменять цвет. На финише страницы тоже нужно расположить кнопку действия или форму заявки.
Вывод: Делайте яркие кнопочки, чтобы сама мышка тянулась кликнуть. Высокой вам конверсии!
Читайте также: Как быстро создать документ в Google Docs и открыть доступ.