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

Которые создаются, чтобы продавать один товар и услугу.

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

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

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

Где сделать прототип лендинга?

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

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

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

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

Создание сайта лендинг пейдж

Что нужно учесть при создании лендинга ещё?

Лучше воспринимается 80% того, что человек видит, и 20% того, что читает. Так что следует также правильно подбирать оформление и делать небольшие по объёму тексты. Просмотрите примеры других страниц, чтобы знать, . Очень помогают сравнительные таблицы.
В современном мире неограниченное количество различных товаров и услуг, и в большинстве случаев, кто-то уже занимается тем же, что и вы. Поэтому вам нужно предоставить свою продукцию в самом лучшем свете. Если вы точно знаете, в чём ваше преимущество, не бойтесь показывать это! Делайте разные инфографики и таблицы с вашими данными и информацией других компаний.

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

Как сделать правильный лендинг

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

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

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

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

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

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

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

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

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

Идеальная структура лендинга — это 8 основных экранов

Приступим к проработке структуры вашего идеального лендинга?

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

Также на первом экране может находиться подзаголовок, который поясняет основное сообщение, которое есть в заголовке.

Часто на первом экране можно увидеть первый – кнопку «Узнать больше», и даже лид-форму, если посетителям уже известна ваша услуга, или это уже не первый контакт с вашей компанией.

Яркая иллюстрация – лендинг Сбербанка, посвящённый именной стипендии. Он рассчитан на тех, кто уже знает компанию (кто её не знает?). Здесь располагается краткий призывающий заголовок, интригующий подзаголовок и кнопка CTA («Готов попробовать»), дополненная логотипом акции.

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

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

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

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

Очень интересно это реализовано на лендинге компании 7Devs, студии по разработке мобильных приложений. Каждое из преимуществ вынесено на отдельный экран с интересной иллюстрацией и подробным описанием.

Блок с ценами

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

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

Блок с отзывами

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

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

Ответы на часто задаваемые вопросы (снятие опасений)

Даже после всей этой информации у клиента могут остаться опасения. Почему так дорого/дёшево? А как я получу свой заказ? А могу ли я приехать в офис? И многое другое. Успокойте посетителя, и разместите ответы на часто задаваемые вопросы. Это поможет ему ещё больше проникнуться к вам доверием.

Например, так сделали на лендинге компании по доставке наборов вина на дом:

Выгодное предложение (акция, дефицит, истекающий срок действия)

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

Например, Тильда предлагает купить курс по интернет-маркетингу со скидкой в 40%.

А LPGenerator предлагает пройти первое занятие бесплатно – и выгодное предложение, и обработка возражений («а вдруг мне не подойдет») в одном блоке.

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

Контакты

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

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

Как работает лендинг

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

Когда есть смысл делать Landing Page? В первую очередь все зависит от ситуации, продукта и вашей ниши. Прежде чем решать запускать продающую страницу, нужно провести анализ рынка. Но есть уже ряд «стандартных ситуаций, в которых лендинг оказывается идеальным решением:

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

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

А если есть сайт, что тогда?

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

Как продвигать Landing Page

Откуда брать трафик? Так как лендинг – это одна страница, и текстовой составляющей на нем не так и много, тут работает только в очень экзотических нишах, где нет конкуренции. в основном льётся с или таргетированной рекламы.

Заключение

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

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

Современная интернет-маркетинговая стратегия практически непредставима без использования целевых страниц (Landing Pages, посадочные страницы, лендинги), которые все чаще встречаются в рекламных кампаниях как крупных брендов, так и представителей SMB-сектора Рунета.

По нашей просьбе специально для пользователей work-zilla.com свои рекомендации относительно того, как создать Landing Page с высокой конверсией озвучил директор по маркетингу LPgenerator Максим Плосконосов. Советы эксперта такого уровня будут безусловно ценны для наших заказчиков и исполнителей, ведь сервис LPgenerator представляет собой ведущее SaaS-решение Рунета по созданию и работе с целевыми страницами.

Посадочные продающие страницы на практике чаще всего используются для решения следующих задач:

Первая задача - получение контактной информации или лид (lead, «лид»; термин многозначный, означающий как данные, полученные от посетителя email, имя и т. д., так и пользователя, оставившего такую информацию). Такие лендинги называются лидогенерирующими (Lead Capture Landing Page), процесс, происходящий на них - генерация лидов.

Вторая задача - клик, переход или подготовка потенциальных клиентов к завершению конвертации на другой странице; такая целевая страница называется «кликабельной» (Click-through Landing Page) и является частью конверсионных путей или мини-сайта.

Если лид-страница получает данные (посредством заполнения посетителем специальной интерактивной web-формы, так называемой «лид-формы»), то Click-through лендинг, наоборот, предоставляет дополнительные сведения о сути вашего оффера. Конечным пунктом конверсии на CTR-посадочной странице будет переход непосредственно на другой лендинг, где осуществляется покупка или генерация лида.

Автономные целевые страницы с лид-формой - это самый популярный тип организации постоянного потока заявок в отдел продаж для последующей обработки.

Правила продающего лендинга:

1. «Один лендинг - один оффер»

Уникальное торговое предложение (оффер) есть набор маркетинговых характеристик, описывающий ваш продукт, предлагаемый рынку. Другими словами, оффер есть некий объект, обладающий ценностью в глазах целевой аудитории и предоставляемый вами в обмен на деньги или персональные данные потенциального клиента. Суть УТП выражается через 4 текстовых элемента любого продающего лендинга: основной заголовок; поддерживающий подзаголовок; текст, усиливающий заявление; заключительный аргумент.

Каждая отдельно взятая целевая страница предполагает один конкретный оффер, получаемый посетителем для выполнения конверсионной задачи, поставленной перед ним веб-маркетологом. На решение этой задачи должны быть ориентированы все элементы лендинга: логотип, главное изображение, текстовые составляющие - заголовок, подзаголовок, список преимуществ, надпись на интерактивной кнопке призыва к действию (CTA, Call-to-Action).

На практике этот принцип работает достаточно просто: целевая страница генерирует поток лидов для, скажем, записи на фотосессию - и ВСЕ! Этот призыв к действию может повторяться сколько угодно раз, но он должен быть один-единственный.

2. Правило точного соответствия

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

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

Простой и понятный заголовок лендинга - вот ваше главное орудие привлечение внимания посетителей, обладающих крайне низким «порогом внимания» (5-8 сек). За эти считанные секунды даже самый неторопливый пользователь успеет прочесть заголовок лендинга (на этом 80% из них вообще прекращает «исследование» страницы). То есть в заголовке должно обязательно присутствовать ключевое слово, соответствующее вашему УТП.

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

3. Используйте высококачественные изображения и видео

Главным средством воздействия на целевую аудиторию остается изображение (визуализация оффера) продукта. Фотография продукта или видеоролик должны наглядно демонстрировать какое-либо из преимуществ вашего УТП или способ решения проблемы пользователя, для которого и существует ваш оффер.

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

4. Упоминайте о выгодах оффера (буллеты), а не о технических характеристиках

Не нужно утомлять посетителей перечислением технических характеристик вашего продукта или ваших заслуг - им это нисколько не интересно.

Вы должны рассказать о выгодах вашего УТП, обращаясь к подспудным страхам таргет-группы («страх потери», loss aversion - сильнейший стимул к завершению сделки). Вы можете напрямую обращаться к пользователю, упоминая о прекращении выгодных условий сделки («Только 3 дня - скидка 25%») или же более тонким способом, например так: «Сохрани эти бесценные часы для жизни - посуду пусть моет машина».

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

Единственно, что вам нужно твердо помнить: плохой буллет основан на функции вашего продукта, хороший - на выгоде или решении проблемы потенциального клиента.

5. Используйте социальные доказательства

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

6. Цель конверсии воплощена в призыве к действию (CTA)

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

Для посетителя же цель конверсии воплощена в конкретном элементе призыва к действию (CTA-элементе), каковой может быть как независимой интерактивной кнопкой (продающий CTR-лендинг) или частью лид-формы.

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

Отсюда следует равнозначная важность обеих составляющих кнопки призыва к действию: ее дизайна и текста призыва. Но хотя эти элементы непосредственно влияют на конверсию, роль они выполняют разную: дизайн привлекает внимание к CTA-элементу, текст же призыва отвечает на главный вопрос пользователя: «Почему я должен нажать на кнопку?»

Заметим, что текст CTA должен четко соответствовать заголовку и лендинга и лид-формы: если заголовок гласит - «Загрузите уникальный видеокурс по созданию целевых страниц без знания HTML», то призыв к действию должен вторить ему: «Загрузить сейчас!». Все эти бессмысленные названия кнопок типа «Отправить» или «Подтвердить» отнюдь не идут на пользу вашей конверсии.

7. Источники трафика

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

С точки зрения практического применения все входящие каналы отличаются наличием у каждого своего собственного набора достоинств и недостатков.

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

Неплохие результаты показывает email трафик - хорошая конверсия, но он ориентирован на «длинные» маркетинговые стратегии и требует применения особых тактик (сегментация подписной базы, «выращивание» клиентов, так называемый Nurturing).

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

8. Оптимизация конверсии

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

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

Для оптимизации конверсии применяется метод маркетингового исследования известный как сплит-тест (А/Б-тест, A/B/n-тест), заключающийся в сравнении 2 или более вариантов целевой страницы.

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

Для получения практически значимых результатов теста следует придерживаться заранее установленных параметров статистической значимости:

100 достижений конверсии по каждому варианту;
1000 уникальный посетителей по каждому варианту;
минимум 3 недели тестирования.

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

По мнению большинства экспертов по оптимизации конверсии (CRO, Conversion Rate Optimization), подвергать А/Б-тестингу нужно в первую очередь элементы лендинга, оказывающие решающее влияние на преобразование.

Заголовок . Он должен быть информативным, понятным и лаконичным, соответствующим правилу точного соответствия.

Главное изображение. Замена изображения может принести драматический прирост конверсии. Можно попробовать заменить фотографию на видео.

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

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

Высоких вам кoнверсий!

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

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

Что такое лендинг пейдж и почему это так важно

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

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

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

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

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

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

Примеры лендингов

В зависимости от преследуемых вами целей можно разделить посадочные страницы (лендинги) на несколько типов:

12 шагов по созданию идеального лендинга

Нужно понимать, что посадочные страницы, на которые будут привлекаться вами пользователи из социальных сетей (или из контекстной рекламы), должны обладать рядом характеристик и удовлетворять некоторым требованиям. Так как же создать идеальную лендинг пейдж ?

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

Примеры ошибок делающих landing нерабочим

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

Еще раз напоминаю, что в интернете практически никто не читает (во всяком случае вновь открытую страницу), а именно просматривает информацию. Если она окажется действительно стоящей и требующей более детального изучения, то тогда уже доходит дело и до прочтения (в общем-то, так же как и с газетами). Поэтому не допускайте перегруженности лендинга информацией — это может дезориентировать пользователя и вызвать реакцию отторжения еще до того момента, когда он разберется о чем там идет речь.
Текст должен быть небольшого объема, максимально лаконичен и наполнен информацией, а не водой. Пару абзацев «ни о чем» вызовут у пользователя бурное желание закрыть такую посадочную страницу. На landing page также плохо работает мелкий шрифт. В общем-то, его использование и не нужно, ибо для изложения сути много слов не потребуется.
Не обманывайте ожидания пользователя. Если в рекламе или в посте в социальной сети вы говорили об одном, а при попадании на лендинг пользователь видит несколько другое, то происходит утрата доверия и резко снижается конверсия. Очень важно следить за этим соответствием.

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

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

У вас есть еще немного времени? Хотите его провести с пользой? Тогда берите попкорн, садитесь поудобнее и смотрите двухчасовой мастер-класс «Пошаговый алгоритм создания Landing Page» :

12 сентября 2016

Эффективная посадочная страница (landing page) — чудо инженерной мысли, невероятный конструкторский проект, где нет ничего лишнего и все сделано для того, чтобы человек мог быстро получить полезную ему информацию и совершить нужное вам действие. Скажу сразу, что нет универсального ответа, как сделать на 100% успешный лендинг. Вы можете для начала постараться не повторять ошибок других и тестировать, тестировать, тестировать!

Сегодня мы поговорим о следующих вопросах:

Размер шрифта
Акценты
Типы шрифта и их разнообразие
Длина строк и верстка
Заголовки
Размер блоков текста и их компоновка
Иллюстрации
Иконки и списки
Фон и цвет шрифта
Психология цвета

Мало кто задумывается о том, что успешность посадочной страницы (мы говорим не только о landing page) зависит не только от верного маркетингового предложения, точного попадания в ЦА и правильного контента, но и от грамотного оформления. У вас есть всего несколько секунд, чтобы произвести хорошее впечатление на потенциального покупателя и «зацепить» его. Если точно - 5 секунд.

Какой размер шрифта лучше?

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

Размер экранного шрифта измеряется в нескольких вариантах единиц: пикселях (px), процентах (%) и ems (em). Px - самая известная и старая единица измерения, которая, в отличие от % и em, не дает возможности масштабировать текст для чтения на различных экранах, т. е. это абсолютный размер шрифта, и пользователь не сможет его адаптировать под свои вкусы и предпочтения.

Когда-то стандартным для всех сайтов был размер 12 px, но со временем стало понятно, что для экранов он мелковат, и от него отказались в пользу более крупного шрифта. Сегодня в ходу шрифт не меньше 14-16 px или его аналог в em и %.

1 em = 16 px = 100% Times New Roman (serif).

Обратите внимание, что не все шрифты имеют одинаковый размер: 16 px Arial больше, чем например версия 16 px Trebuchet.

16 px - это оптимальный размер, потому что набранный им текст на экране выглядит примерно так же, как текст, напечатанный в качественной книге (мы не берем карманные форматы и т. д.). И он отлично подходит для людей, имеющих проблемы со зрением, или тех, кто старше 40 и видит уже не так хорошо, как в 20. Например, текст, который вы сейчас читаете, - это Arial 16 px. Если вы распечатаете листок бумаги с шрифтом 10 px и поместите рядом с экраном, то увидите, что размеры шрифтов будут одинаковые. Так что мой выбор это 16 px. Отдельные, не значимые куски текста можно делать 14 px. Многие используют в качестве основного шрифта 14 px, это допустимый вариант, но если ваша ЦА старше 40 лет, то я бы точно выбрал 16 px.

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

Как привлечь внимание к заголовкам?

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

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

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

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

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

Пример того, как делать не надо. Заголовок и подзаголовок написаны прописными буквами.

Подчеркивание в заголовках допустимо только в том случае, если это линк.

Например, так:

Можете экспериментировать с цветами и эффектами (инверсия, цветная плашка и т. д.).

Применяйте в заголовках кавычки - они привлекают взгляд.

Но лучше любой типографики заголовок выделит хороший копирайтинг. Почитайте пару книг и дерзайте! Вот несколько советов:

Заголовок или подзаголовок в форме вопроса вызовет интерес у читателя.

Заголовок должен быть не длиннее 140 символов.

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

Какой шрифт выбрать?

Традиционно для веб применяют шрифты, у которых отсутствуют насечки (шрифты семейства sans-serif, или «рубленые»): Tahoma, Arial, Verdana, Trebuchet и аналогичные. Зачем это нужно? Чтобы избавить читателей вашего текста от «лесенок» по краям символов, которые появляются на экранах с низким разрешением.

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

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

Лайфхак: если вы присмотрели какой-то сайт, где вам нравится шрифт, но вы не можете его распознать, зайдите в секретную библиотеку - там есть ссылка на полезное приложение, которое позволит получить всю нужную информацию. (приложение WhatFont для Google Chrome)

Как правильно расставлять акценты

Всегда помните, что пользователь читает не более трети созданного вами контента, поэтому помогите ему сразу найти нужное! Самый простой способ обратить на что-то внимание человека внутри основной массы текста - выделить это с помощью:

полужирного написания (bold),

НАПИСАВ ВЕРХНИМ РЕГИСТРОМ (ПРОПИСНЫМИ),

выделив другим цветом.

Полужирное написание

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

Курсив

Курсив в веб - зло. Думаю, вы уже догадались почему. Если нет, вернитесь к разделу про типы шрифта. Курсив создает те самые «лесенки». Если берете курсив, то следите за размером: нет ничего хуже мелкого курсива. Я считаю, что курсив в веб уместен только в оформлении цитат.

Немного о ВЕРХНЕМ РЕГИСТРЕ

Можно, но не злоупотребляйте! Выше я говорил, как наш мозг реагирует на предложения, полностью написанные прописными буквами. Но есть еще один важный аспект. Текст, полностью написанный заглавными буквами, в интернет-среде означает крик. Если в тексте встречается предложение, написанное прописными, - вы его прокричали! Подумайте, уместен ли «повышенный тон» в конкретном случае.

Разряжение

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

Подчеркивание и Ссылки

Хотите подчеркнуть? Только ссылку! Если на сайте есть некликабельный подчеркнутый текст, вы облажались. Убирайте! В веб этот вид выделения принадлежит гиперссылкам. Традиционно гиперссылки оформляются как выделенный голубым подчеркнутый текст. Это устоявшийся в интернете стандарт, и я не рекомендую менять его без веских на то причин. Выделенная другим цветом ссылка выглядит странновато и непонятно. Даже Google и «Яндекс» оставили их именно в таком варианте, хотя могли бы позволить себе задать новую моду.

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

Типичной ошибкой является оформление ссылок в корпоративных цветах компании.

Как правильно оформить Call To Action?

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

Что касается расположения Call To Action, то он всегда есть на первом экране и в конце страницы и может несколько раз повторяться в тексте (это зависит от длины страницы).

Вот некоторые правила оформления «кнопки»:

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

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

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

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

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

Длина строк и верстка: главные правила

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

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

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

Трехколонная верстка, как в примере с клиникой, - путь в никуда, который уместен только для бескрайних просторов интернет-СМИ, которые «продают» своему читателю пару десятков баннеров на каждой странице.

Верно: Не верно:

Оптимальная длина строки (независимо от типа страницы) - от 50 до 70 знаков. Текстовые колонки, ширина которых превышает это значение, читаются с экрана крайне сложно. С другой стороны, если строки очень короткие (меньше 20 знаков), а текста много, это также будет раздражать читателя - очень часто приходится переводить взгляд.

Проблема длины строк становится еще более актуальной с появлением адаптивной верстки и требует от разработчика аккуратности и внимательности: разбег размера экрана сегодня варьируется от 5’’ до 55’’.

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

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

Как оформить текстовый блок?

Структура любой страницы состоит из блоков. Их количество и наполнение зависят от целей сайта.

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

Обратите внимание, что россияне стали заходить в интернет через мобильные устройства чаще (51%), чем через обычные компьютеры. Смартфоны и планшеты - совершенно другой тип экрана, поведения и мышления пользователя! Порой специальная посадочная страница для мобильных устройств дает большую конверсию, чем просто адаптированная верстка.

Что касается компоновки картинки, заголовка и блока, то тут есть много вариантов, но вот три классических.

Картинка слева , блок с заголовком и текстом справа. Очень удачный вариант: картинка привлекает внимание к тексту (eye catch).

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

Картинка сверху , заголовок и текст внизу - неплохой вариант, когда надо «показать товар лицом».

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