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

26 декабря 2014

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

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

посадочную страницу для проекта Cascade

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

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

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

эффект надписи мелом

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

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

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

слоган

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

большой заголовок с обращением к пользователю и текст

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

посадочная страница

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

форма подписка на рассылку

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

Показать или рассказать?

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

посадочная страница Pencil Case Абсолютно другая подача посадочной страницы

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


Готов поспорить: такая же посадочная страница, но без разноцветной схемы, показала бы результаты хуже!


Что значит переборщить

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

главная страница ConvertKit ConverKit: слишком много слов и не наглядно

Приложение The Meteor Book

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

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

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

посадочная страница The Meteor Book Посадочная страница для приложения The Meteor Book

Скриншоты приложения не очень интересны, а картинка реальной книжки придает продукту "материальности". Для бренда выбрано фиолетово-желтое сочетание (и эффект 8-битного градиента). Кроме того, для привлечения пользователей есть блог с полезными статьями.

Заключение

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

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

Analysis of a Landing Page, Sacha Greif


Макаров ДмитрийМакаров Дмитрий, копирайтер Uplab
Статья написана 15 февраля 2013 года, с тех пор прошло около 2 лет. Если перейти на приведенные в статье страницы, видно, что практически все они были переделаны. Изменения могут быть вызваны двумя причинами:

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

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

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

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

Сами экраны, к слову, никак не выделены на странице. Когда мы создаем лендинг, то сначала продумываем его сценарий (Главная, Преимущества, Компания – самый простой пример), а затем разбиваем его по экранам, каждый – со своим заголовком и отличающимся от соседних экранов фоном. Так в лендинг вносится разнообразие, глаза читателя не устают от просмотра белого или черного.

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

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


Рекламщики, особенно молодые, не приемлют никаких правил. Сегодня я не сказал бы: «Никогда не печатайте рекламный текст в негативе (белые буквы на черном фоне)». Я сказал бы: «Результаты исследований свидетельствуют о том, что, если вы напечатаете текст рекламного объявления в негативе, его никто не станет читать».

Дэвид Огилви, «Откровения рекламного агента»


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

сайт Pencil Case

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

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


Поделитесь материалом с друзьями и коллегами

Подпишитесь на блог Uplab.
Мы будем делиться с вами всем лучшим, что у нас есть!

Комментарии к статье
Похожие материалы