Cтруктура лендинга: продающий landing page из 8 конверсионных блоков

Как создать лендинг пейдж?

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

Первым вариантом станет конструктор веб-ресурсов. В данном случае можно создать лендинг самому бесплатно. О том, что такое конструктор сайтов простыми словами, мы уже говорили ранее. В интернете их много. Как варианты, это Wix, Tilda, Flexbe, LPgenerator и другие.

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

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

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

Структура продающего лендинга

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

Какую бы часть структуры не взять, ее следует ориентировать на продажи: будь это оффер (заголовок) или кнопка покупки. Потенциальный клиент должен поэтапно проходит все элементы, а в итоге совершить целевое действие. Простыми словами, посетитель должен пройти, словно по лестнице. Это еще называют лестницей Ханта.

Этапы прохождения пользователя по лендингу:

Основываясь на лестнице Ханта, можно назвать элементы правильной структуры лендинга. Конечно, можно строго ее не придерживаться. Какие-то блоки можно убрать, какие-то поменять местами. Главное, чтобы landing page справлялся со своей задачей, а именно, чтобы посетитель совершил целевое действие. Чем-то лестница Ханта похожа на этапы воронки продаж, где сначала происходит привлечение внимания пользователя, потом вызывается интерес к товару и желание оставить заявку или поместить товар в корзину, а в конце совершение покупки или заказ услуги.

Правильная структура лендинга:

• Оффер (заголовок). Данный элемент должен быть привлекательным. В нем отражается предложение компании. В основном, это цены и скидки.
• Сведения о продукции (товар, услуга). В данной части вы должны рассказать о товаре или услуге: описание, характеристика, изображения. Если есть, то добавьте и видеоматериал.
• Преимущества вашего предложения. Это повысит шанс на совершение действия. В основном, плюсы расписывают при помощи изображений, графики. Если расписывать преимущества только тестом, то читать аудитория не станет.
• Схема работы. Здесь посетителю стоит рассказать о схеме вашей работы: клиент-заказчик.
• Отзывы других клиентов. Это повысит доверие к вам и вашему предложению.
• Дипломы, грамоты, сертификаты. Они также повышают доверие к вам и вашему предложению.
• Стоимость. После предыдущих элементов правильной структуры лендинга стоит еще раз сказать о привлекательности стоимости (невысокой цене). Рядом можно разместить форму заказа.
• Форма заказа (СТА). В основном, она в виде кнопки, нажатие на которую кидает на основной веб-ресурс, или форма для заполнения без перехода. Здесь можно предложить потенциальному клиенту скидку или бонус. Также хорошим приемом станет контрастный цвет кнопки или формы заполнения, повторение кнопки несколько раз.
• Спецэлементы. Для увеличения конверсии landing page можно использовать различные виджеты. Например, счетчик времени завершения предложения.
• Контактные данные. Помещаются они либо в хедере (шапка сайта), либо в футере (подвал сайта). И следует указывать все доступные для связи контакты: от телефона и электронной почты до местоположения офиса на карте и кнопок на соцсети.

Вот такая она – правильная структура лендинга. Но как мы уже говорили, можно и не придерживаться строгого следования ей. Ведь целью лендинг пейдж является совершение действия пользователем.

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

Резюме

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

• изображение имеет высокое разрешение и выглядит презентабельно;
• все фрагменты загружены последовательно (с конца);
• товар показан на первой странице в выгодном ракурсе;
• у landing page есть продающий заголовок;
• посетитель видит контакты и цены (в шапке профиля, на макете и в описании каждого фрагмента);
• присутствует важная информация, выделяющая вас среди конкурентов (гарантии, сроки доставки, бонусы и т.д.);
• в конце находится призыв к совершению целевого действия;
• вся информация подана кратко и ёмко, без растягивания на 50 страниц (если мы не говорим о бесконечном коллаже);

И последнее, самое главное условие. Вам должен нравится полученный сайт. Задайте себе вопрос: «Я бы купил товар после изучения этой страницы?» Если ответ положительный — вы создали отличный одностраничник.

Красивые лендинги: примеры

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

В это примере красота лендинга заключается в его гармоничности. В последнее время в моду вошла геометрическая тематика, которая присутствует в данном дизайне.

Минимальное содержание текста, удачное сочетание цветов и полю для клиента отведена лишь одна кнопка – что в данном случае удобно, так как речь идёт только о подключении, то есть если кликнуть по кнопке «подключить», вероятно, покажется форма заполнения.

Такое решение подойдёт если для создания сайта Вы будете использовать конструктор сайта Tilda: что это такое мы уже описывали в отдельной статье.

Рассмотрим ещё один макет лендинга, который на наш взгляд, тоже заслуживает внимания. Нежные, неброские оттенки и красивое и, самое главное, качественное фото-фон ненавязчиво предлагают свои услуги. Форма заполнения так же пребывает в контрасте с основной страничкой, что так же является удачным дизайнерским решением.

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

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

Пример хорошего лендинга

Честно сказать, очень редко можно встретить хороший лендинг пейдж. Чаще всего у многих или ооочень скучный дизайн, или много разных скриптов и крутилок, или через чур много текста, что аж невозможно долистать до конца (устаешь).

Но я все же нашел пример, который можно использовать как образец.

Полный вариант можно посмотреть по этой ссылке

Здесь всего в меру:

• Минималистичный дизайн, который делает акценты на нужных вещах
• Хороший продающий текст, которого не слишком много
• Сайт быстро грузится благодаря отсутствию всяких ненужных скриптов
• Четкие призывы к действию

Именно к такому сочетанию вы и должны стремиться.

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

Взлом лендинга: копирайтинг для не писателей

Если текст на лендинге отстой, то никто не будет покупать, и не важно на сколько красивый дизайн. Вы не представляете на сколько это важно! Именно текст определяет, будет ли лендинг пейдж успешным или не успешным

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

Ваша задача выделить эти кусочки, чтобы посетитель не пропустил ничего важного

Хороший копирайтинг убеждает. Больно смотреть, когда я вижу примитивный текст на 95% лендингах. Потратьте время чтобы правильно выразить свои слова. Вам нужно заставить вашу аудиторию чувствовать, что вы на самом деле говорите с ними. Не буду притворяться, это действительно не легко.

Но как это сделать?

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

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

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

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

Но, во всем этом нет смысла, если у вас плохой заголовок. Продающий заголовок вдохновляет и заставляет посетителя остаться и представить ощутимую выгоду после покупки. Посмотрите пример Apple iPad:

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

Также очень настаиваю пройти обучение у Антона Петроченкова по созданию Landing Page, в котором он делится секретными лайф-хаками, как писать убойные тексты не имея опыта в копирайтинге. Даже я думал что все знаю, оказывается нет:)

Причины появления лендинга?

Причины появления лендинга описывают его суть самыми простыми словами. Потому что именно эти причины и дают ответы почти на все вопросы тех, кто только собирается создать свою первую “посадочную страницу”.

Все началось с того, что на заре появления Интернет возникли различные сервисы сбора статистики. Например –  Google Analytics и Яндекс Метрика. Эти сервисы отвечают на такие вопросы, как: что искал посетитель, по какому ключевому запросу он пришел на страницу, и даже то, как посетитель смотрел страницу и на что кликал, где останавливался, а где быстрее проматывал скроллером.

Собирая такую статистику, крупные (и не только крупные) компании работали над тем, чтобы повысить конверсию. Что такое конверсия? Это соотношение тех людей, кто сделал целевое действие к общему количеству людей, которые посетили лендинг:

Можно сказать, что так измеряется эффективность лендинга. В процентном соотношении. Какие же показатели средней эффективности лендинга? Очень хорошей считается конверсия в пределах 20-30%. Но сама конверсия – относительное понятие, которое зависит от многих факторов. Например ниша, под которую сделана страница. В “агрессивных” нишах конверсия в 1-2% считается очень хорошей.

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

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

Такое глубокое изучение поведенческого фактора и привело к появлению лендингов – страниц, где у пользователя только два действия:

1. Уйти со страницы не сделав целевого действия
2. Сделать целевое действие, которое было прогнозируемо.

Поэтому еще одно определение того, что такое лендинг, простыми словами можно сформулировать так:

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

Секретный соус

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

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

Что такое А/B тестирование? Это одновременный эксперимент между двумя или более лендингами, чтобы определить, какой из них работает хуже или лучше. Несмотря на название, эксперимент может проводиться с любым количеством лендингов.

Трафик случайным образом распределяется каждому варианту страницы на основе заданного веса – например, если вы выполняете тест с 2 вариантами страницы, вы можете разделить трафик 50/50 или 60/40. Посетители, как правило, направляются так, что они всегда будут видеть одну и ту же версию страницы.

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

Что нужно протестировать на лендинге?

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

Будьте готовы выбросить все догадки в окно и получить реальное понимание того, что работает, а что нет – тестирование, как фотокамера, никогда не лжет.

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

Некоторые из элементов, которые вы должны рассмотреть тестирование:

1. Основной заголовок
2. Призыв к действию (CTA) – обычно текст на кнопке
3. Изображение. Картинка с контекстом. Попробуйте свою фотографию (если она у вас есть)
4. Дизайн кнопок
5. Цвет кнопки – зеленый для действия, синий для цвета ссылки, оранжевый или красный для эмоциональной реакции
6. Количество полей ввода на форме
7. Длинная копия против короткой копии. Часто более короткий лучший, но для некоторых продуктов деталь важна в процессе принятия решения. Проверьте это и посмотрите.

Продолжайте отслеживать, улучшаются ли ваши результаты. Если результаты не меняются, вернитесь к исходной версии и попробуйте другое изменение. Мы наблюдали как этот тип тестирования улучшал результаты Landing Page во много раз!

Зачем нужен одностраничный сайт

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

В бизнесе красивый сайт играет ключевую роль – привлекает внимание потенциальных клиентов

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

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

Идеальный одностраничник должен удерживать внимание, вовлекать и побуждать к действию – совершению заказа или покупки

Допустим, если на одностраничнике будет слишком много неинтересного текста, например такого: “Мы работаем на рынке уже миллион лет, все наши клиенты довольны и т. д. и т. п.”, – то посетители его явно не оценят. Вы увидите, как они скоротечно покидают сайт.

На данный момент лендинги чаще всего используются в рекламе. Когда люди хотят продвинуть свои товары или услуги, они создают лендинг и запускают контекстную рекламу.

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

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

Где применяют лендинги?

Представьте – вы выходите на рынок с новым товаром или услугой. Как протестировать нишу и узнать, что товар, который вы собираетесь закупить, будет пользоваться спросом и вы его точно продадите? Классический маркетинг нас учит составлять фокус-группы, делать опросы, и так далее.

Однако, давно замечено, что согласие человека купить при маркетинговом исследовании и согласие клиента купить в реальности – разные вещи. Когда дело доходит до расчета не обещанием, а “живыми” деньгами – тут то все маркетинговые исследования можно выбросить на помойку.

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

По правде сказать, в последние годы очень много начинающих стали пользоваться данным методом, не понимая самой его сути. В итоге мы имеем ниши, которые просто заполнены такими “тестировщиками” и найти нормального исполнителя для потребителя в этих нишах очень трудно.

Но вам то клиенты нужны прямо здесь и сейчас! И самый простой способ получить первых клиентов – сделать лендинг пейдж и настроить контекстную рекламу в Google или Яндекс. Это самый простой путь от вас к потребителю. Да, все остальные инструменты маркетинга очень важны, но лендинг и реклама сделают свое дело намного быстрее. Правда, стоимость клиента при этом, может быть очень большой, но это уже другая история.

Еще один пример – сбор собственной клиентской базы

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

Если говорить проще, то в наши дни сбор клиентской базы проходит через бесплатный тест. Клиент дает нам контактные данные, мы ему взамен – бесплатный продукт, услугу или еще что-то, что может “познакомить” клиента с нами. Благо, такая модель еще работает у нас. В США бесплатные продукты уже лет 5 как не работают! Ценность клиентской базы скоро будет запредельно высокой. Не теряйте времени.

Начните с понимания задачи

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

Подготовьте бриф. Вам нужны ответы на три главных вопроса:

Что нужно сделать

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

Для кого

Вам нужно досконально изучить целевую аудиторию. Дизайн для презентации сериала для подростков и стиль для b2b-направления отличаются кардинально.

Как вы это реализуете

Здесь нужно уточнить, чего в результате ждет заказчик. Придумайте, какие блоки будете рисовать, с помощью каких инструментов.

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

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

Пример лендинга «Звездных войн» — необычный яркий пример с почти незаметным боковым меню.

Бесконечный лендинг в Инстаграм

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

Такой формат имеет несколько неоспоримых плюсов:

• все преимущества landing page сохраняются (привлечение внимания, нестандартное решение, яркая подача информации);
• появляется возможность постоянного обновления информации с сохранением общего стиля;
• страница всегда «живая», что позитивно воспринимается системой Инстаграм (снижается риск блокировки аккаунта или занесения страницы в спам-лист).

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

Пример плохого лендинга

Из крайности в крайность бросаться тоже не стоит

Да, у вас может быть простой лендинг, но постарайтесь все же сделать его аккуратным и привлекающим внимание

Лепить безвкусные лендинги – это тоже самое, что делать «пёстрый» дизайн. Результат примерно один и тот же – теряется эффективность.

Представьте, что вы ищите в интернете натяжные потолки и попадаете вот на такой лендинг:

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

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

Вот еще один пример плохого лендинга:

Старайтесь никогда не повторять подобное на своих одностраничниках.

Виды продающих одностраничников

Существует 2 разновидности лендингов:

• Лонг-пейдж. «Long» — с англ. – «длинный». Длинная страница, часто имеет несколько форм заполнения, огромное количество информации, фотографий, видеороликов, в общем, полностью знакомит читателя с продуктом. Это самый популярный вид лендинг пейдж.
• Шорт-пейдж. Противоположный смысл. Короткая страница, на которой нет такого количества информации и она вряд ли надоест вам постоянно выскакивающими лид-формами, ведь самая частая функция данного вида лендингов – это перенаправление для сбора данных клиента и пополнения базы этих самых клиетов.

И 2 типа:

• One step-page. Одношаговая продающая страница. Самый популярный тип страницы.
• Two step-page. Двухшаговая страница. Суть её заключается в том, что после прочтения первой части, пользователь перенаправляется на вторую. Первая часть зачастую разогревает интерес клиента к продукту, а вторая призывает к действию и фиксирует лиды.

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

Заключение

Лендинг в умелых руках – это хороший инструмент для продвижения. Сейчас эти сайты пользуются особой популярностью и могут приносить большой доход, продвигая услуги компании, товары или даже какую-то личность. Создать одностраничник не так уж и сложно. Все больше различных конструкторов, CMS, SaaS начинают предлагать пользователям упрощенный алгоритм создания лендингов.

Практически любой пользователь может зайти на тот же Wix, выбрать первый попавшийся шаблон и создать свой первый лендинг. Будет ли он хорошим? Определенно нет, но все начинают с малого.

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

То же касается и информации

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

Поэтому создание лендинга – это не просто склепать что-то на готовом шаблоне. Учитывайте этот факт.