Хороший лендинг: делаем по инструкции

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

Выбор цели

Лендинг — это одностраничный сайт с простой навигацией. Самостоятельно он не приведет клиентов. Но может собрать данные о них, рассказать о продукте или услуге и мотивировать к покупкам. Чтобы лендинг не простаивал, необходимо привести трафик. Email-рассылки, посты в соцсетях, сообщения в мессенджерах, анонсы на сайте принесут аудиторию на лендинг. Еще нужен план рекламной кампании — какие посты пишем, где и когда публикуем, как настраиваем триггерные цепочки писем. Без этого создавать одностраничный сайт бессмысленно.

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

Чаще всего посадочные страницы продают товар или услугу. Лендинг рассказывает о продукте компании и предлагает его тут же приобрести. Переход на основной ресурс не требуется. Еще одна задача — передать клиента менеджеру. Лендинг мотивирует пользователя оставить заявку на покупку, после чего с ним работает клиентский отдел.

На одностраничных сайтах удобно собирать контакты. В этом случае они становятся лид-магнитами. Компания что-то обещает пользователю — скидку, бонус, бесплатную доставку, подарок — и просит за это оставить свои данные. Клиент попадет в базу контактов, где его «подогревают» звонками, рассылками, пушами.

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

Сбор информации

Первый шаг подготовки к созданию посадочной страницы — сбор данных. Нужно изучить сайты конкурентов и выяснить потребности своей ЦА.

Смотрим сайты конкурентов и примеры лендингов

Начните с простой оценки в формате нравится/не нравится. Отмечайте понравившиеся элементы, анализируйте структуру и составьте список блоков, которые добавляют конкуренты. Их можно найти в ТОПе выдачи Google и Яндекса по целевому запросу.

Анализируем ЦА

Клиенты должны нажать на кнопку, оставить данные или подать заявку. Чтобы убедить их выполнить целевое действие, нужно правильно рассказать о продукте. Для этого необходимо знать, кому вы рассказываете. Поспрашивайте у своих клиентов или просто у друзей, что они узнавали перед покупками, по каким причинам отказывались покупать, что их смущало и что мотивировало. Когда соберете портрет ЦА, сегментируйте ее. Одна страница — один сегмент.

Создание текстовых блоков

Рассказ о продукте убеждает пользователя совершить целевое действие. Поэтому текст должен представить продукт и ответить на возможные вопросы клиентов. Нам понадобится информация о конкурентах и ЦА.

Структура страницы

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

Для первого прототипа лендинга подойдут основные блоки:

  • оффер и СТА;
  • рассказ про преимущества товар или услуги;
  • описание работы;
  • отзывы, рекомендации или список компаний, с которыми сотрудничали;
  • стоимость;
  • FAQ.

Требования к текстам

Клиент не будет тратить свое время на изучение текстовых полотен. Он зашел на лендинг, чтобы узнать о товаре или услуге, а не читать большую статью. Поэтому пишем короткие предложения и отказываемся от длинных абзацев. Часть информации переводите в инфографику или буллеты. Вместо сложных описаний добавляйте поясняющую картинку или инструкцию. Тяжелые фразы и обороны усложняют восприятие — выбрасываем их и пишем простые и понятные слова. Расставляем заголовки и подзаголовки — это поможет клиенту быстро пробежаться на ним, чтобы уловить суть.

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

Оффер и основные преимущества помещайте на первый экран. Не каждый клиент будет пролистывать страницу до конца, поэтому его внимание нужно сразу же зацепить. Достаточно и нескольких фраз — как на странице компании «Pro Питание»: оффер, описание, цена и кнопка.

Ключевые слова помогут продвигаться в поисковых системах, но основной трафик придет из рассылок, соцсетей и мессенджеров. Поэтому не стоит превращать описание продукта в SEO-текст. Достаточно органично вписать ключевые фразы.

Важен ли размер лендинга

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

Рисунок прототипа страницы

Это макет будущего лендинга. Представьте визуальную структуру на листочке или в графическом редакторе. Разместите выбранные блоки, укажите, где и какой текст нужно указать. Добавьте пожелания по картинкам. У вас получится эскиз посадочной страницы, по которому вы легко сможете собрать лендинг.

Требования к структуре

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

Мотивируйте пролистать весь лендинг. Еще один способ удержать клиента — создать дизайн, в котором интересно разбираться. Бренд Silla запустил на первом экране галерею продуктов. Цифра один намекает, что будут еще. Слева видны кружки навигации, по которым можно переключать изображения. А надпись внизу побуждает проскроллить страницу.

Рассказывайте через фото, видео и анимацию. Если в тексте тяжело объяснить процесс выполнения работы или эффективность продукта, добавляйте графику. Сервис Qlean.ru вместо текста про уборку поместил список действий на фотографии.

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

Добавляйте кнопки с СТО. Без напоминай о целевом действии клиент почитает о продукте и закроет страницу. Их проще всего расположить на кнопках, которые ведут на сайт или к менеджеру. Призыв к действию закрывает потребность клиента. Компания «Окна людям» сделала лендинг из одной большой фотографии расписанного от руки прототипа. А вот две кнопки выделяются на общем фоне и привлекают внимание.

Создание лендинга

Его делает дизайнер и программист. Но простые лендинги можно собрать самостоятельно в конструкторах. Для этого не нужно просматривать лекции и читать туториалы. В конструкторах простой и понятный интерфейс, а вся работа строится вокруг добавления и редактирования блоков. Как в сервисе Sitebox от Mail.ru для бизнеса. В нем есть галерея шаблонов, готовые и популярные блоки, а также советы по дизайну. Можно посмотреть, как будет выглядеть страница на мобильных устройствах. Из других конструкторов отметим Tilda, Wix, Nethhouse.

На что обратить внимание?

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

Пользуйтесь пустым пространством. Не обязательно на каждый экран добавлять картинки. Оставляйте свободные места, разделяйте с их помощью экраны и акцентируйте внимание на содержании. Бренд Prestige-expert так и сделал — пустое пространство выделяет раздел с услугами. А он в виде перевернутого треугольника приводит пользователя от заголовка к кнопке с ценами.

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

Реже берите фотографии из стоков. Оригинальные изображения дадут честное представление о продукте. Радужные и прилизанные картинки из фотостоков не смогут выделить оффер. Сервис по доставке полезного питания Level Kitchen вместо фото вставил скриншоты отзывов.

Тесты

После создания и запуска лендинга работа над ним не заканчивается. Привести страницу в подходящий формат можно после тестирований. Проверьте скорость открытия одностраничника на Google PageSpeed Insights и уменьшайте размер лендинга, если он открывается больше двух секунд. Проверяйте верстку на смартфонах — если она поедет или криво отобразятся фотографии, вы потеряете клиентов. Подключите Яндекс.Метрику и Google Analytics, чтобы отслеживать показатели и смотреть на поведение клиентов на вашей странице. Эта информация поможет доработать лендинг. Например, убрать ненужные элементы, улучшить оффер, поменять картинки.

Советы

А/В-тесты в email-рассылках

26 февраля 2021
Вопрос-ответ

Как объединить email-маркетинг и SMM

24 февраля 2021
Узнавайте о наших публикациях первыми
Все статьи для бизнеса