Гайд по созданию сайта, 3: Что такое Landing Page? | Penguin-team

Гайд по созданию сайта. Часть 3: Что такое Landing Page?

19.06.2018
Николай Скоропадский
8 минут
Гайды, Разработка, создание сайта,
167

Содержание:

Часть 1. С чего начинается: что такое продукт, какие есть примеры успешных проектов, почему не всегда нужен сайт и как продавать без него. Главное про идею и теоретическую подготовку перед стартом.

Часть 2. Что представляет собой UX проектирование. Первые шаги в создании сайта.

В 3-й части разберемся, что такое лендинг пейдж и каким он должен быть. Определим обязательные компоненты и «разберем по косточкам» структуру страницы. Также поговорим о технических требованиях и предложим несколько рекомендаций по оформлению.

Landing Page (посадочная страница) — это  веб-страница, созданная с целью убедить посетителя совершить действие (подписаться, купить, скачать и т. д.).

 

Пример стандартных страниц сайта

Пример Landing Page

Главная (может быть и посадочной)

Карточка товара

Контакты

Главная страница

404 страница

Страница блога

Категория товаров

Промо-страница

 

Каждый Landing Page должен содержать в себе макро- и микро-цели и быть вписан эргономически в структуру и логику сайта.

Здесь и далее в статье будем ссылаться на труд Бенджи Рэбхэна «От кликов к продажам».

Структура, контент и дизайн посадочных страниц всё это служит задаче оправдать ожидания пользователя в предоставлении качественной и исчерпывающей информации о продукте/услуге.

Чтобы создавать эффективные посадочные страницы, рекомендуем использовать модель пирамиды:

модель пирамиды для landing page

Вот эти три базовых компонента стоит учитывать в своей работе для более комплексного подхода. Давайте рассмотрим их подробнее.

 

Пользовательский контекст. Компонент вмещает в себя всю информацию о целевой аудитории, которая будет взаимодействовать с сайтом. Чем больше есть понимания о нужде, боли, шаблоне поведения аудитории, тем релевантнее можно настроить подачу информации на сайте.

 

Триггеры конверсий. Разработчики сайтов зачастую применяют «лучшие» решения, о которых узнали из своего или чужого опыта. Подобные триггеры можно найти в интернете или книгах: например, когда и где отдать предпочтение одному цвету, а не другому, какого размера должны быть кнопки, сколько должно быть текста и т.д. Правильным подходом тут будет оценка ситуации и адаптация триггеров для каждой страницы, чтобы улучшить доверие, релевантность и полезность страницы.

 

Триггер это элемент, который увеличивает, какое-либо свойство. Например: Отзывы — это триггер landing page, который увеличивает доверие страницы. Социальное подтверждение отзыва — это триггер, который увеличивает доверие к отзыву, и т.д.

 

Микро- и макро- конверсии. Каждая страница должна иметь микро- и макро- конверсии, которые не будут упускать пользователей с сайта, а плавно продвигать их по «воронке». Если пользователь не готов купить продукт, то это еще не значит, что он не готов оставить свой e-mail и другую контактную информацию.

 

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

 

Анатомия посадочной страницы

 

Теперь немного рекомендаций по анатомии объектов посадочной страницы. Итак, двигаемся сверху вниз:

 

  1. Логотип в верхнем левом углу.
  2. Дескриптор (краткое описание деятельности компании).
  3. Заголовок.

 

Требования к заголовку:

  • содержит до 11 слов;
  • оформлен в теге H1;
  • содержит ключевое слово;
  • отражает содержание посадочной страницы.
структура посадочной страницы 1
  1. Изображение (видео, картинка или гифка).

Требования к нему:

  • уникальное;
  • высокого качества;
  • изображение релевантно теме посадочной страницы;
  • демонстрирует конечный результат или процесс взаимодействия с продуктом;
  • если это видео, то не длиннее 2 минут.
требования к изображению
  1. Кнопка.

Требования:

  • яркая;
  • не меньше 5% от площади экрана;
  • содержит CTA;
  • описывает следующий шаг.
требования к кнопке
  1. Форма обратной связи.

Требования к форме:

  • обведена в контур с закругленными полями;
  • имеет до 7 полей (7 — максимум);
  • содержит маску номера телефона;
  • форма содержит валидацию (если данные заполнены неверно, высвечивается подсказка);
  • имеет уникальный однотонный фон.
форма обратной связи
  1. Цена.

Требования к оформлению цены:

  • визуальное снижение цены;
  • скидка выделена цветом, фоном или графически;
  • перевод цены в стоимость за единицу;
  • визуальная поддержка разных комплектаций.
цена на сайте
  1. Кейсы.

Требования:

  • краткое описание «было — стало» со ссылкой на подробное описание;
  • содержат изображения, подтверждающие результаты;
  • логотип и данные заказчика.
кейсы на посадочной странице
  1. Отзывы:
  • видео подтверждение;
  • ссылка на социальные сети;
  • содержат логотип, должность, реквизиты лица, которое оставило отзыв;
  • структура отзыва (причина — возражение — покупка — личный опыт — рекомендация).

 

  1. Имиджевые триггеры:
  • ссылки из популярных СМИ в нише;
  • мнения экспертов;
  • сертификаты, рекомендации.
имиджевые триггеры на странице
  1. Микро конверсии:
  • форма e-mail подписки;
  • white book;
  • калькулятор;
  • презентация, бриф;
  • тест, заявка на бета-версию.

 

  1. Сравнение с конкурентами:
  • таблица со сравнением свойств;
  • выделение ключевого свойства продукта, которое отличает от конкурентов.
сравнение с конкурентами
  1. Футер:
  • юридическая информация;
  • копирайт;
  • контактная информация;
  • расширенное меню;
  • ссылки на соц.сети.
футер посадочной страницы
  1. Контент.

Требования:

  • уникальный;
  • есть FAQ;
  • текстовый контент — от 2000 символов;
  • равномерно расположен на посадочной странице;
  • схема (боль — продукт — преимущества);
  • структурирован по блокам.
  1. Формы связи:
  • открытая форма связи;
  • закрытая (кнопка);
  • онлайн-консультант;
  • комментарии;
  • реквизиты компании.
  1. Лицо компании:
  • команда продукта;
  • руководитель компании;
  • эксперт-консультант.

Посадочная страница должна быть подобна хорошей упаковке, которая подчеркивает достоинства продукта и органично вписывается в структуру и логику сайта.

 

Технические требования к посадочной странице

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

  1. Проверяем отображение в браузерах:
  • Google Chrome;
  • Mozilla Firefox;
  • Internet Explorer 9;
  • Internet Explorer 8;
  • Opera;
  • Safari.
  1. Проверяем, чтобы сайт корректно отображался на основных разрешениях экрана с шириной:
  • 800 px ;
  • 1024 px ;
  • 1280 px ;
  • 1920 px ;
  • 300 px .

Пригодится инструмент: http://quirktools.com/screenfly/

  1. Обращаем внимание на скорость загрузки сайта:

https://gtmetrix.com/

  1. Проверяем мобильную адаптивность сайта:

https://search.google.com/test/mobile-friendly

  1. Проверяем код сайта на валидность:

например, https://validator.w3.org (или любой другой).

Все выявленные ошибки оперативно устраняем.

 

Такие технические проверки помогут выявить ошибки и решить их, чтобы ресурс, выделяемый на привлечение трафика, не тратился впустую.

 

Рекомендации по оформлению объектов посадочной страницы

Перед тем, как дать рекомендации, напомним, что основной акцент должен быть на дизайне и эмоциональном взаимодействии пользователя с сайтом.

Итак, что мы рекомендуем:

  1. Сложные свойства продукта лучше описывать через преимущества, которые получит пользователь.

Преимущество = что клиент получит;  

свойство = характеристика.

Пример: сервис по сбору ключевых слов из поисковых систем Google и Яндекс — свойство. Экономия до 20% рабочего времени seo-специалиста — преимущество.

  1. 1 посадочная страница = 1 макро-конверсия. 1 посадочная страница = 3 микро-конверсии.
  2. Каждая вспомогательная страница должна не только решать свои прямые задачи, но и приносить вспомогательную пользу.

Пример: на странице благодарности можно предложить купить товары-комплементы.

  1. Особое внимание к дизайну. Каждый элемент нужно упрощать. Стоит продумать необходимость: если можно обойтись без элемента, то лучше не нагружать им посадочную страницу. Принципы дизайна: простота восприятия, удобство, функциональность, наглядность и логика.
  2. Контент на странице должен подчиняться конструкции: 
контент на посадочной странице
  • Problem: в контенте должна быть обозначена проблематика, с которой сталкивается целевая аудитория;
  • More problem: данная проблема должна быть усилена дополнительной информацией;
  • Hope: в контенте должны быть описаны варианты решения проблемы;
  • Solve: продукт, о котором посадочная страница, должен решать заявленную проблему.
  1. Необходимо проводить правильное А/В тестирование для поиска оптимального вида посадочной страницы.

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

Получить 7 писем о том,
как улучшить свой AdWords аккаунт
+ PPC статьи

Имя
e-mail
Улучшить AdWords

Улучшить свой AdWords

Получите 7 писем, о том, как можно улучшить свой аккаунт в AdWords

Подписаться

Наш сайт использует файлы cookie, чтобы улучшить работу и предоставить максимальное удобство пользователям.

В версии 2.2.0

  • Добавлена поддержка "Google Keyword Planner"
  • Используйте "LeftALT + S" для поиска слов
  • "Показать/скрыть" теперь полностью скрывает расширение с экрана

Основные комбинации

  • LeftMouseClick для добавления слова, повторное нажатие - для удаления
  • LeftALT + LeftMouseClick - для сбора фраз
  • LeftALT + S - для поиска слов