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

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

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

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

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

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

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

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

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

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

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

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

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

1. Каждый лендинг должен быть заточен только под одно целевое (конверсионное) действие — либо подписка, либо продажи. Не надо жадничать, ибо внимание пользователя будет рассеяно и сильно увеличится вероятность его ухода (так ничего и не выбрав из предложенных вариантов). Лучше как можно меньше заставлять клиентов думать и выбирать — путь на landing page должен быть прямым как стрела (очевидным для него) и без каких-либо ответвлений.
2. На посадочной странице обязательно должен присутствовать призыв к действию (с глаголами в повелительном наклонении — позвони, купи, получи, приди и т.п.). Фразы должны быть короткими и мотивирующими. Например, «купите сейчас», «получить видеокурс» или «подпишись и получи».
3. Рулят также яркие кнопки и стрелки , создающие на них акцент. Неплохо работают кнопки красных и желтых оттенков, ибо заметны и содержат как бы призыв к действию.

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

   

   Иногда очень неплохо работают анимированные кнопки (но в любом случае нужно будет проводить тестирование эффективности тех или иных элементов лендинг пейджа):

   

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

   

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

   

8. Также неплохо работают на посадочных страницах сравнения «до и после» . Не для всех тематик это применимо, но в области похудения, косметологии, фитнеса и многих других ниш это можно с высокой эффективностью использовать. Например, так делает фирма, предоставляющая услуги ресторации.
   
   
9. Страница landing page может быть довольно длинной, но при просмотре первого экрана (это та область страницы, что видна без использования прокрутки) пользователю должно быть совершенно ясно и понятно, что именно вы хотели ему сказать.
10. Для стимулирования подписчиков или покупателей некоторых товаров (например, ) можно использовать вариант дополнительных бонусов, которые получит подписчик или покупатель при заказе. Когда пользователь находится на грани принятия решения, то как раз такие «плюшки» могут перевесить чашу весов в вашу пользу.
11. Ну и, конечно же, стоит делать упор на то, что «только здесь и только в течении нного количества времени» пользователю будет доступно все это великолепие (подписка, специальная цена на товар, дополнительный набор услуг). Как это сделать лучше всего? Правильно, поставить таймер, ведущий обратный отчет времени до часа Х, когда предоставленная возможность будет упущена. Ничто так не стимулирует к принятию решения колеблящегося пользователя, как буквально на глазах убегающие секунды.

    

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

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

    

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

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

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

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

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

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

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

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

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

Главное правило мобильного лендинга

Думать о клиенте – главное правило мобильного лендинга (как и любого сайта). Представьте, в какой ситуации постетитель увидит ваш одностраничник:

Он откроет сайт на ходу, у него не будет времени долго его рассматривать.

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

У него может быть плохой интернет – сайт не загрузится.

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

Как посмотреть, как выглядит ваш сайт на мобильном?

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

Правило №1. Меньше секций

Если лендинг – это разговор с клиентом, то мобильный лендинг – это максимально короткий разговор. Не письмо, а сообщение в мессенджере. Поэтому подумайте, какие секции можно не показывать на мобильных:

Точно ли нужно описание всех преимуществ работы с вами?

Стоит ли оставлять раздел с кейсами и примерами работ?

Нужны ли отзывы довольных клиентов?

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

Как скрыть лишние секции в мобильной версии лендинга?

В настройках секции во вкладке со значком мобильного телефона поставьте галочку «Скрывать на телефонах».

Правило №2. Меньше фото

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

Какая скорость загрузки считается нормой?

9-13 секунд – это максимум, который клиент готов ждать. (Исследование seochat.com).

Правило №3. Меньше текста

Экран мобильного маленький, а туда нужно поместить столько же текста, сколько на большой. Придется уменьшить шрифт или сократить текст.

Лучше поступить так:

Сначала уменьшить размер шрифта, посмотреть, читается ли текст с маленького экрана.

Если текст всё ещё занимает ли слишком много места – сократите: примените к нему правила инфостиля или удалите части с дополнительной информацией.

Как настроить шрифт для мобильных?

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

Правило №4. Больше кнопка

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

Как изменить кнопку для мобильных?

В настройках кнопки зайдите во вкладку с иконкой мобильного телефона и задайте положение «На всю ширину».

Итак, порядок работы над страницей:

1) Открываем отображение страницы на мобильном
(верхняя панель редактора – значок мобильного телефона).

2) Просматриваем страницу в новом адаптированном виде.

3) Оцениваем каждую секцию: можно ли её скрыть без потери смысла? Скрываем лишнее (настройки секции – значок мобильного телефона – галочка «Скрывать на телефонах»).

4) Особенно оцениваем секции с картинками и видео. По возможности скрываем.

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

6) Проверяем, как отображается форма и кнопка, настраиавем.

7) Если необходимо, задаем особое положение любых элементов на странице, задаем отступы.

8) Публикуем лендинг и открываем его на мобильном телефоне. Проверяем:

• Как долго грузится страница?
• Не поехал ли текст?
• Не поехали ли изображения?
• Правильно ли отображается форма?

Если всё хорошо, ваш лендинг готов к мобильным посетителям. А их, говорят , больше половины! Так что дерзайте)

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

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

Исследование Люка Вроблевски (Luke Wroblewski), директора по продуктам Google и автора книги «Сначала мобильные!» показывает, что в период с 2009 по 2013 потребление контента через привычные каналы, такие как телевидение, радио, печать, значительно снизилось. Единственный показатель, который вырос — использование мобильных устройств.

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

Даже в 2015 году у большинства пользователей возникает целый ряд затруднений:

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

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

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

1. Сайт не оптимизирован для мобильных устройств

Еще в декабре 2012 года медиа-ресурс Mashable провозгласил наступающий 2013 годом адаптивного дизайна. Крупнейшие компании тогда обратили на это внимание и разработали мобильные версии своих ресурсов. Но многие не могут похвастаться корректным отображением страниц до сих пор.

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

Ритейлер одежды «O’Neill Clothing» достиг впечатляющих результатов после того, как его маркетологи применили адаптивный дизайн. Они отслеживали три главных показателя: конверсию, количество сделок и выручку на протяжении трех недель до и после применения технологии. Результаты были невероятными.

iOS устройства:

• Конверсия увеличилась на 65.71%
• Количество сделок — на 112.50%
• Выручка — на 101.25%

Устройства Android:

• Конверсия увеличилась на 407.32%
• Количество сделок — на 333.33%
• Выручка — на 591.42%

Можно привести немало примеров, которые иллюстрируют явные преимущества адаптивного дизайна. Специалисты из «Skinny ties», компании, занимающейся созданием галстуков с 1971 года, отметили рост выручки на 42,4% после запуска мобильной версии ресурса. В фирме по производству фотоэкипировки «Think Tank Photo» количество сделок, заключенных с помощью смартфонов и планшетов, выросло на 96% по сравнению с предыдущим годом.

2. Игнорирование целей пользователя

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

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

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

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

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

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

Если пользователи видят длинные формы на своем мобильном устройстве, они будут стараться избежать утомительных интеракций. Автор книги «UX для бережливого стартапа» Лаура Клейн (Laura Klein) отмечает: «Ожидание, что пользователи мобильных устройств будут вводить данные таким же образом, как и обладатели стационарных компьютеров — самая большая ошибка многих компаний».

Несколько советов для создания максимально удобных и понятных форм:

• Выбирайте только простые формы и не просите слишком много информации;
• Удалите лишние поля;
• Включите автозаполнение наиболее распространенных слов и фраз;
• Используйте средства, встроенные в мобильные устройства (цифровая клавиатура, GPS, адресные книги, фотоаппараты и т. д).

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

Стивен Хубер (Steven Hoober), проектировщик пользовательского взаимодействия для мобильных устройств, дизайнер и автор книги «Проектирование мобильных интерфейсов» советует: «Убедитесь, что каждая зона прикосновения находится по крайней мере в 8 миллиметрах от центра другой, хотя расстояние в 10 миллиметров даже предпочтительнее».

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

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

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

Вместо заключения

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

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

И снова хорошая новость для владельцев сайтов на WordPress – есть плагины, которые создают мобильную версию вашего сайта на поддомене, например, WP Mobile Edition.

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

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

Что мы получим?

Дополнительный адрес сайта на поддомене ”m.” с отличным от основного домена дизайном, упрощенным. В сети примеров такой реализации полно, вот, например, известный всем сайт:

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

Еще по теме:

Есть вопросы?

Задайте их прямо сейчас, и мы ответим в течение 8 рабочих часов.