Лендинги подобны LEGO — если их правильно собрать, можно получить хороший результат. В статье расскажем, какие блоки можно использовать при создании структуры лендинга с высокой конверсией.
После прочтения вы узнаете:
- Что такое лендинг
- Какие бывают блоки и входящие в них элементы продающих лэндингов
- Как определить, какие элементы лендинга нужны на сайте
- В каком порядке располагать блоки для улучшения эффективности сайта
- В каком порядке располагать блоки для улучшения эффективности сайта
В статье мы делимся личным опытом, показываем, какие блоки (экраны) используем при создании контента для лендингов с целью повышения их конверсии.
Что такое лендинг и из чего он состоит
Лендинг — одностраничный сайт, создаваемый для решения одной конкретной задачи. Чаще всего это сбор контактных данных или заявок на покупку продукта или услуги.
Каждый лендинг состоит из:
- Разделов — наибольшей единицы в структуре. Раздел — область, в которую входят функциональные блоки.
- Блоков — это конкретные области, которые могут решать несколько задач, например, блок «шапка» служит для предоставления контактных данных компании и объяснения человеку, куда он попал.
- Элементов — самых маленьких единиц, входящих в блоки. Например, для шапки элементами будут логотип, меню (иногда с якорями перехода на какую-то часть лендинга), кликабельный телефон и кнопка призыва к действию.
Разделы лендинга
Принято выделять 5 основных разделов лендинга:
- Первый экран.
- Рассказ о продукте.
- Понятные выгоды.
- Доверие.
- Призыв к действию.
Рассмотрим каждый из них подробнее.
Раздел «первый экран» (вступительный)
Задача первого экрана — четко показать пользователю, куда он попал и почему он должен остаться на сайте. В первом разделе лендинга чаще всего размещают блоки «Шапка» и «Оффер», содержащие CTA-элементы, часто добавляют УТП.
Разберем блоки по порядку.
Шапка
Согласно классической структуре продающего лендинга, вначале делают шапку с данными компании.
Туда включают следующие элементы:
- изображение логотипа;
- наименование организации;
- контактную информацию;
- если лендинг будет длинным, то пункты меню с якорями (переходами на конкретную часть страницы). Тогда посетитель сможет сразу перейти к нужному разделу на сайте, чтобы посмотреть цену, узнать условия доставки или получить больше информации о предлагаемом продукте/услуге.
Иногда также добавляют дескриптор — короткое и лаконичное описание под логотипом, помогающее понять суть сайта. Но если сфера деятельности организации понятна сразу, его переносят в блоки ниже.
Важно! Не путайте дескриптор с УТП или ключевым преимуществом. Дескриптор — кратко описывает, куда попал посетитель. УТП — показывает ваш оффер, чем вы выгоднее конкурентов. Ключевое преимущество — показывает, почему стоит выбрать именно эту компанию.
Также в шапку часто добавляют такие элементы, как кнопку обратной связи и кликабельный телефон. Таким образом, пользователь сам сможет решить, хочет он позвонить или ему будет удобнее дождаться ответного звонка сотрудника компании.
Оффер
После шапки в схеме лендинга чаще всего идет торговое предложение (оффер) — обычно это заголовок с конкретным описанием того, что предлагает организация. После него может идти подзаголовок или обычный текст, дополняющий оффер главными выгодами.
При составлении оффера придерживайтесь следующих рекомендаций:
- проведите маркетинговый анализ — изучите, что вы можете предложить и каковы преимущества вашего продукта;
- составьте портрет целевой аудитории — поймите, чего хотят люди и какие у них страхи;
- посмотрите, как и что предлагают конкуренты — в будущем это пригодится в подготовке УТП и отстройке от них, что поможет повысить конверсию.
Для подготовки заголовков, которые будут размещаться на лендинге, можно использовать метод 4U.
Дополнительные выгоды для клиентов размещайте после основного заголовка. Можно использовать списки или горизонтальные перечни с иконками и подписями. В структуру первого экрана обязательно добавьте кнопку призыва к действию, чтобы те, кто приняли решение остаться, могли сразу связаться с вами. Также схему можно дополнить счетчиками обратного отсчета или акциями.
Призыв к действию
Кроме оффера и шапки, на первом экране часто размещают призыв к действию (CTA), оформленный в виде кнопки. Он помогает получить заявки посетителей, которые сразу заинтересовались продуктом после прочтения ключевой информации о нем. Выполнен он может в разных вариантах.
При нажатии на кнопку может появляться попап с полями для ввода контактных данных. Также может быть реализация, когда поля для ввода контактов сразу расположены на экране над кнопкой.
Раздел «о товаре»
Задача этого раздела — предоставить всю нужную покупателю информацию о предлагаемом продукте, ответить на основные вопросы читателя. В этот раздел входят блоки с описанием продукта или услуг, а также блоки сравнения, цен (тарифных планов), этапов работ и целевой аудитории.
О продукте
Как правило, после первого экрана в схемах лендингов идет блок, раскрывающий информацию о предлагаемом продукте или услуге. Он помогает объяснить потенциальному клиенту, чем товар отличается от аналогов конкурентов, особенно если вы продаете сложный продукт.
В блоке «о продукте» постарайтесь рассказать о:
- свойствах предлагаемого товара или услуги;
- характеристиках;
- выгодах для клиента;
Мы рекомендуем подавать информацию о свойствах, характеристиках и выгодах тезисами — на лендингах у людей обычно нет времени читать и разбираться в каждой детали, поэтому если они что-то не поймут, то просто уйдут. Например, рассказывая о продаваемом продукте, используйте список с иконками и кратким описанием его свойств. В качестве тезисов используйте короткие предложения из 3-5 слов, четко раскрывающих сущность товара или услуги.
По возможности добавьте видеоролики или изображения, с помощью которых продукт можно будет лучше рассмотреть. Также можно добавить под видео- или фотоконтент поясняющий текст, но не слишком много — основной акцент сделайте на фотографиях или видео.
Цены и тарифы
В блоке описываются цены на продукт или услугу. Как правило, стоимость представляется либо в виде одной на весь продукт, либо разделяется на несколько — второй вариант часто используется в инфобизнесе, например, при продаже курсов, или сервисах с оплатой за подписку.
В случае разделения на тарифы придумывается несколько версий продукта, каждая из которых немного лучше и дороже предыдущей. Тогда также подсвечивают одну из цен, например, среднюю, указывая ее как самую популярную.
Если цена на продукт не конкурентна, иногда ее не указывают. В случае, когда стоимость может меняться, пишут минимальную, начиная словами «ОТ».
Целевая аудитория
Также известен как блок «для кого». В этом разделе делают больший «прицел» на целевую аудиторию, чтобы отсеять тех, кому продукт или услуга не подойдет. Если ЦА дополнительно делится на несколько подгрупп, то под каждую пишут текст на ее языке, делая акцент на потребностях и получаемой пользе.
Читая информацию, посетители смогут лучше понять, подойдет ли им предлагаемый товар.
Сравнение товара
Блок сравнения в структуре лендинга применяется, чтобы побудить читателя оставить свой выбор на вашем продукте и дополнительно отстроиться от конкурентов.
Сравнивать можно как продукты или услуги конкурентов (но при этом не упоминая прямые наименования конкурентов, иначе можно попасть на штраф за нарушение Закона о рекламе), так и собственные товары, если вы продаете несколько позиций с минимальными отличиями между собой.
Этапы работы
Здесь описывается процесс сотрудничества, как оказываются услуги или продается товар. Это помогает посетителю понять, что его ждет на каждом этапе после оплаты.
Часто применяют схемы — они помогают лучше воспринимать информацию.
Раздел «понятные выгоды»
В данном разделе посетителю объясняется, почему ему стоит купить продукт у компании, а также показывается польза, сценарии использования и конкретные результаты, которые в итоге получит клиент.
Выгоды от проекта (товара или услуги)
В этом блоке клиенту объясняется, какие выгоды предоставляются покупателю и как они удовлетворят желания клиента. При этом, если клиент до конца не осознает свои потребности, ему могут показать возможности, которые откроются перед ним, если посетитель купит товар или услугу.
В качестве оформления могут использоваться списки или небольшие заголовки с иконками.
Сценарии использования
В этот блок добавляют несколько вариантов применения продукта, которым может воспользоваться клиент, и показывают конечный результат использования. Делается это, чтобы покупатель ясно представил пользу от использования (или приобретения) продукта.
Результаты
Необязательный блок, который показывает, какой результат в итоге получит клиент. Часто применяется в онлайн-образовании или при продаже медицинских услуг — тогда используют популярный формат фотографий с видом «до» и «после».
Раздел «доверие»
В разделе доверия содержатся блоки, укрепляющие доверие посетителя и повышающие надежность компании в глазах целевой аудитории. Основная цель раздела — снять возражения, которые есть практически у каждого человека, особенно если ваша компания мало известна и вы только выходите на рынок. Необходимо показать, почему стоит начать работать именно с вами. Например, почему человек должен вам доверять и оставлять свои контактные данные или платить за ваш продукт.
О компании
В блоке «О нас» кратко рассказывается история компании или предпринимателе, миссия организации и ее принципы, перечисляются главные достижения и причины, почему клиент может доверять фирме. Например, для врачей из медицинского центра это могут быть сертификаты, дипломы, опыт работы и название вуза.
В этом блоке организации также перечисляют опыт работы, преимущества сотрудничества с ними, занятую долю на рынке и т.п.
Хорошим дополнением станут вспомогательные элементы — фотографии с генеральными директорами или другими сотрудниками компании, видеоролики, описывающие деятельность фирмы.
Преимущества компании
В данном блоке схема лендинга описываются преимущества, объясняющие клиентам их выгоды от работы именно с вашей компанией.
Чаще всего плюсы, которые клиент получит, работая с компанией, бывают оформлены в виде прямоугольников или небольших квадратов:
Каждый пункт состоит из:
- Изображения с заголовком — служат для привлечения внимания.
- Краткого описания — раскрывает и поясняет суть преимущества.
Важно: не путайте этот блок с преимуществами самого товара или услуги.
В преимуществах используйте цифры и факты вместо расплывчатых определений — тогда люди будут доверять вам больше. Например, вместо «оперативной доставки» пообещайте доставку за 48 часов, вместо «демократичных цен» — стоимость до 2000 рублей и т.п. Старайтесь добавить как можно больше конкретики.
Конечная цель этого экрана — повысить доверие целевой аудитории, чтобы склонить покупателя к выбору, выгодному компании.
Отзывы
Блок, призванный повысить доверие. Идеальный экран должен иметь ссылки на реальные соцсети клиентов или дополнение другими элементами, которые показывают то, что отзыв настоящий.
Иногда отзывы могут также быть в видеоформате или виде историй сотрудников, работающих в компании.
Кейсы
Сюда добавляется краткое описание кейсов формата «что нужно было сделать - как сделали - какого результата добились».
Правильный блок с кейсами должен иметь привлекательный заголовок, точно показывающий пользу, которую получил клиент — например, если это лендинг от таргетолога, в кейсах должно упоминаться, сколько лидов привел специалист и по какой цене.
Портфолио
Как правило, содержит элементы в виде примеров выполненных работ. Иногда этот блок комбинируется с блоком «Кейсы» — тогда при клике на одну из работ пользователю кратко рассказывают, какая задача стояла перед компанией, как ее решили и какой результат в итоге получил клиент.
FAQ
В блоке обычно содержатся от 5 до 10 ответов на часто задаваемые вопросы. Создается, чтобы лучше понять страхи клиента и позже дать на них развернутые ответы. Может оформляться не только в виде вопросов-ответов, но и как интервью или чат.
Раздел «целевое действие»
Содержит блоки, мотивирующие к действию. Например, формы регистрации, кнопки призыва к действию, контакты. Расскажем о каждом блоке подробнее.
Призыв к действию
По сути, один из самых главных блоков на лендинге — именно через него пользователь отправляет заявку. Как правило, состоит из яркого фона и контрастно выделяющейся кнопки с призывом совершить целевое действие.
Иногда такие блоки размещаются в нескольких местах на странице и могут быть в любых разделах.
Формы связи
Схож с предыдущим типом, но в отличие от него, кроме кнопки также содержит форму, в которой пользователь может указать свою контактную информацию — например, имя, e-mail и номер телефона.
После заполнения также часто используется ободряющая фраза, например, «Спасибо!» или «Ваши данные отправлены».
Контакты
Блок с контактами компании, как правило, некоторые из них кликабельны — например, электронная почта и телефон. Также может содержать элемент «Карта проезда» или карту с отделениями организации, расположенными в разных странах
Как определить, какие блоки понадобятся
Перед тем, как начать использовать функциональные блоки, мы рекомендуем определиться, какие из блоков вам понадобятся для работы.
Чтобы понять, какие блоки использовать на лендинге для создания, вам понадобится проанализировать целевую аудиторию и подумать над структурой лендинга.
Для этого выполните следующие действия:
- Сформулируйте идею бизнеса. Для чего вы хотите создать лендинг? К примеру, одностраничник для вебинара может создаваться, чтобы помочь людям разобраться, стоит ли им записываться на мероприятие, а его УТП (ключевое отличие) — предоставление уникальной и полезной информации с закрытой конференции для целевой аудитории.
- Поставьте задачу. Какую задачу должен решить ваш сайт? Например, принести заявки на вебинар с помощью сбора формы.
- Поймите, кто ваша ЦА. Какого они пола, где живут, какой уровень доходов имеют, как принимают решения? Таким образом, вы сможете сформировать аватар целевой аудитории — подробное описание типичного покупателя.
- Составьте список потребностей целевой аудитории. Чего они хотят? Например, в случае вебинара это могут быть уникальные знания, которые помогут им развиваться в профессиональном плане и дороже продавать себя на рынке труда. Также подумайте, что может послужить для них дополнительным аргументом совершить нужное целевое действие — например, оставить контакты, чтобы записаться на вебинар? К примеру, таким аргументом может быть известный спикер, которого они знают, или интересная тема.
- Уточните ее «страхи» и возражения. Чего опасаются перед совершением нужного целевого действия? Что может оттолкнуть их от покупки или оставления своих контактов?
- Подготовьте примерную структуру. На этом этапе вы уже сможете понять, какие блоки понадобятся для вашего сайта — например, первый экран с оффером и формой для сбора e-mail, чтобы собирать контакты, блок «Спикеры» для повышения доверия ЦА, блоки с описанием продукта (вебинара) для предоставления подробной информации и «Выгоды», и т.п.
Зная, какое назначение имеет каждый блок, а также определив ЦА и составив структуру сайта, вы уже будете лучше понимать, как и когда использовать те или иные блоки.
Несколько примеров:
- Если вы работаете в сегменте В2С, то вам понадобятся блоки с отзывами на реальные соцсети клиентов (чтобы люди могли больше доверять вашей компании), сценарии использования продукта, выгоды и блоки с ценами, условиями гарантий и возврата.
- При работе в В2В, актуальными будут блоки кейсов, описание компании, блоки с сертификатами и лицензиями, а также оффер, нацеленный на конкретную выгоду для бизнеса.
В итоге весь результат будет оформлен в виде прототипа.
Чаще всего, прототип разрабатывают в программах, например, Figma, но результат можно получить даже в обычных Google Docs. Об их создании подробнее читайте в нашей отдельной статье.
В каком порядке располагать блоки лендинга
Размещая блоки, позаботьтесь о том, чтобы пользователь:
- Понял, куда он попал.
- Чем вы можете ему помочь в его ситуации.
- Почему он должен вам доверять.
- Что он в итоге должен сделать.
Для этого при составлении продающей структуры рекомендуем придерживаться следующих принципов:
- Придумайте сильный оффер. Покажите, какую выгоду получит клиент. Подготовьте заголовок и качественное УТП, чтобы привлечь внимание человека и показать уникальность вашего предложения.
- Расскажите о продукте. Опишите, что и кому вы хотите продать, по какой цене, сравните свой товар или услугу с аналогами конкурентов.
- Покажите выгоды. Покажите преимущества товара для покупателя, в идеале также расскажите, кому поможет продукт и в как именно его можно использовать.
- Завоюйте доверие. Расскажите о гарантиях, добавьте разделы FAQ, отзывов и кейсов, сертификаты и лицензии. А также расскажите, почему нужно работать именно с вашей компанией.
- Правильно закончите лендинг. Добавьте в конце блок подвала с контактами, схемой проезда и призывом к действию.
Как оформлять блоки лендинга
Помните, оформление — не только дизайн, но и текст, его подача, а также иконки, изображения, шрифты.
Мы рекомендуем придерживаться следующих советов:
- используйте выделение текста. Для акцентирования внимания на важных моментах добавляйте жирное начертание.
- подавайте информацию блоками. Списки, как правило, читаются удобнее простых «полотен» текста.
- добавляйте иконки. Они помогают уточнить информацию и лучше передать клиенту суть вашего предложения. Также можете применять стрелочки или другие элементы, чтобы направлять внимание человека в нужную точку.
- используйте цифры. Люди лучше относятся к текстам, где встречаются цифры, особенно с четкими фактами. Для цен можете применять известный трюк с указанием цены в 199$ вместо 200$ — тогда у людей в подсознании формируется цена ниже, чем указана в реальности.
- вызывайте эмоции. Используйте цвета, которые хорошо помогут передать настроение вашей целевой аудитории, психологические триггеры в тексте.
Итоги
Теперь, когда вы знаете, какие существуют разделы, блоки и элементы для лендинга, вы можете начать применять их на практике. При этом не обязательно располагать их так, как указано в статье — каждый случай уникален, и вы самостоятельно должны решить, какое решение лучше подойдет для вашей ситуации. Если решите заказать lending page в нашей компании, то наш дизайнер подскажет, поможет рационально расположить элементы для сайта.
