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

26 ДЕКАБРЯ 2014

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

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

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

Истинных причин смены дизайна и текстового наполнения, к сожалению, мы не знаем.
1
Автор статьи характеризует описанные приемы лендинг-страницы только с положительной стороны. Формы зеленого цвета, стрелки (треугольники) для продолжения чтения, обращение к пользователю – это все хорошо, но, на мой взгляд, в лендинге есть досадные ошибки.
2
Форм заказа всего две. В идеале их стоит размещать на каждом экране, при условии, что каждый экран занимается продажей товара. Небольшая зеленая кнопка в нижней части экрана посередине страницы будет видна каждому и при этом не вызовет раздражения читателя.
3
Сами экраны, к слову, никак не выделены на странице. Когда мы создаем лендинг, то сначала продумываем его сценарий (Главная, Преимущества, Компания – самый простой пример), а затем разбиваем его по экранам, каждый – со своим заголовком и отличающимся от соседних экранов фоном. Так в лендинг вносится разнообразие, глаза читателя не устают от просмотра белого или черного.
4
Иллюстрации, о которых говорит автор, практически никак не представлены. Не видно изображений продукта, а отдавать 99 долларов непонятно за что не хочется.
5
Но самая большая ошибка лендинга – это белый текст на черном фоне. Еще классик рекламы Дэвид Огилви заметил, что такой текст читается хуже, человеку сложнее следить за мыслью. Многоэкранный лендинг с неизменными черным фоном и белым шрифтом гарантирует усталость при чтении, и, как следствие, большой показатель отказов.
Рекламщики, особенно молодые, не приемлют никаких правил. Сегодня я не сказал бы: «Никогда не печатайте рекламный текст в негативе (белые буквы на черном фоне)». Я сказал бы: «Результаты исследований свидетельствуют о том, что, если вы напечатаете текст рекламного объявления в негативе, его никто не станет читать».
Дэвид Огилви, «Откровения рекламного агента»
Pencil Case учли предыдущий опыт и создали новый одностраничный сайт, на котором практически все тексты набраны черным или темно-серым шрифтом на белом фоне. Показательное исключение – второй экран, где приходится буквально расследовать, что же написано белыми буквами на пестром фоне. Уверен, это самый нечитаемый участок страницы.
Новый одностраничный сайт Pencil Case
Мне кажется, эти три ошибки в полной мере нивелируют все заслуги дизайнера, отрисовавшего эту страницу. А в том, что ее созданием занимался именно дизайнер, сомневаться не приходится – лендинг выглядит действительно красиво, но проигрывает с точки зрения маркетинга.

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

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

Дмитрий Макаров, перевод
3464
Оцените статью
()

Комментарии к статье

Другие статьи в блоге
Статьи ~ 25 минут на чтение

Мобильный UX: как разработать удобный сайт финансовой компании

4
25 июня 2019
Статьи ~ 30 минут на чтение

Микроразметка для «Яндекс» и Google: как настроить и проверить

179
07 июня 2019
Статьи ~ 20 минут на чтение

Как в Uplab создают прототипы сайтов: принцип работы и обзор инструментов

11375
05 июня 2019
Статьи ~ 10 минут на чтение

Как автоматизировать создание документов в «Битрикс24»

163
31 мая 2019
Статьи ~ 10 минут на чтение

Как в Uplab разрабатывают сайты. Этап дизайна

218
23 мая 2019
Статьи ~ 10 минут на чтение

Как интегрировать «Битрикс24» и «1С»

433
17 мая 2019
Статьи ~ 25 минут на чтение

Образцовые лендинги. Наш топ-50

50761
16 мая 2019
Статьи ~ 10 минут на чтение

Как мы автоматизировали согласование заявок сотрудников для российского банка

206
30 апреля 2019
Статьи ~ 20 минут на чтение

Как в Uplab разрабатывают сайты. Этап аналитики и проектирования

352
29 апреля 2019
Статьи ~ 20 минут на чтение

Как провести бесплатный SEO-аудит сайта. Чек-лист

148
19 апреля 2019
+7 499 653 78 83