Какой должна быть
продающая посадочная страница?

Джарред Драйсдейл сделал посадочную страницу для проекта Cascade. Страница вызывает такое любопытство, что непосвященным в детали проекта сразу хочется узнать о нем больше. Что делает её такой успешной?

Только сначала взгляните на страницу сами. Посмотрели? А теперь давайте разберемся вместе.

Главный слоган написан огромным 80px шрифтом и гласит: «проблемы с дизайном для вашего стартапа закончились. Здесь не говорится о том, что такое Cascade, но есть два важных ключевых слова: «стартап» и «дизайн». Оба слова очень знакомые и – в отсутствие лучшего определения – модные, они с ходу помогают определить целевую аудиторию продукта.

Во второй части экрана Джарред использует эффект надписи мелом, чтобы отобразить различные элементы пользовательского интерфейса, которые можно создать с помощью Cascade.

Цифровой дизайн ассоциируется с прямыми линиями и правильными формами, поэтому подобное использование аналоговых текстур и неровных линий – это отличный способ привлечь внимание. Джарред уже использовал эту технику на посадочной странице для своей книги, которую буквально начинил надписями, сделанными будто от руки.

Затем мы переходим к большой зоне призыва к действию. Здесь можно заметить две вещи.

Первое: треугольник привлекает взгляд, мы автоматически смотрим вниз и видим форму. Второе, поле и кнопка — единственные на странице зеленого цвета. Оттенок резко выбивается на коричнево-оранжевом фоне, поэтому элементы так выделяются.

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

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

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

Здесь Джарред продолжает мысль, напоминая пользователю о главной проблеме (что он «застрял на дизайне». Заметили, какой большой размер шрифта используется на странице? Основной текст не должен быть меньше 18px, он гораздо удобнее для чтения, чем 12−14px.

В конце страницы продублирована форма подписки, чтобы не заставлять пользователя прокручивать наверх. Не стоит недооценивать лень рядового пользователя интернета!

Конечно, нельзя пока утверждать, что эта страница приносит хорошую конверсию. Бывает, лучше показать, чем рассказать.

Хорошим примером служит посадочная страница Pencil Case: она практически ничего не рассказывает о продукте, но показывает такие интересные скриншоты, что все равно любопытно, что это такое, и хочется оставить email.

Пример того, как делать не надо — главная страница ConvertKit. С «рассказать» переборщили: текст хороший, но нет ни скриншотов, ни схем, ни макета приложения. Нет даже названия.

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

Не помешает выделить свой бренд цветом, шрифтом или забавной эмблемой.

Вот посадочная страница The Meteor Book:

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

Помните Первый Закон Посадочных Страниц: хоть какая-то посадочная страница лучше, чем совсем ничего!

Статья написана 15 февраля 2013 года, с тех пор прошло около 2 лет. Если перейти на приведенные в статье страницы, видно, что практически все они были переделаны.

Изменения могут быть вызваны двумя причинами:

1. Лендинги плохо продавали.
2. Владельцы страниц постоянно работают над повышением конверсии.

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

Pencil Case учли предыдущий опыт и создали новый одностраничный сайт, на котором практически все тексты набраны черным или темно-серым шрифтом на белом фоне. Показательное исключение — второй экран, где приходится буквально расследовать, что же написано белыми буквами на пестром фоне. Уверен, это самый нечитаемый участок страницы.

Мне кажется, эти три ошибки в полной мере нивелируют все заслуги дизайнера, отрисовавшего эту страницу. А в том, что ее созданием занимался именно дизайнер, сомневаться не приходится — лендинг выглядит действительно красиво, но проигрывает с точки зрения маркетинга.

Попробуйте представить страницу на русском языке — вы бы дочитали текст до зеленый кнопки, расположенной возле футера? Напрашивается вывод: никогда не ставьте дизайн во главу угла — дайте для начала проверить удобство и посыл вашего сайта проектировщику и копирайтеру.