Мобильный лендинг: каким он должен быть

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

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

Необходимость мобильного лендинга

Зачем надо создавать специальный лендинг, если уже есть подобный формат для компьютера? Это связано с тем, что люди стали чаще пользоваться телефоном не только для мобильной связи. По данным статистики, процент заходящих в интернет не через ПК сравнялся с компьютерными пользователями еще в 2016 году и продолжает расти. К началу 2021 года лидерство мобильных устройств возросло до 58 %.

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

Существует два способа создания мобильного лендинга.

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

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

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

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

5 основных требований к мобильному лендингу

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

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

1. Быстрая загрузка

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

   

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

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

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

Читайте также!

«Как посчитать конверсию: 3 проверенных варианта» Подробнее

2. Несложная навигация

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

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

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

3. Оптимизация лид-форм

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

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

4. Разметка в одну колонку

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

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

5. Отличная графика

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

   

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

7 рекомендаций по созданию высококонверсионного мобильного лендинга

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

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

1. Установите кнопку прямого/обратного звонка

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

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

2. Используйте пустое пространство

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

   

3. Внедрите кнопку прокрутки

   Хороший пример мобильного лендинга – короткие, законченные по смыслу страницы. Но иногда пользователю хочется посмотреть, что еще есть на вашем сайте, изучить весь перечень товаров или найти дополнительную информацию по продукту. Для таких случаев установите кнопку прокрутки Click-to-Scroll – при нажатии на нее открывается доступ к более длинной ленте. Тогда пользователю не придется каждый раз прокручивать всю страницу, а делать это только в том случае, если возникнет необходимость. По статистике, наличие такой кнопки снижает процент отказов от просмотра (Bounce Rate) на 37 %.

4. Размещайте CTA в верхней части страницы

   Понятно, что на экране смартфона вся страница лендинга не поместится, и пользователь будет вынужден использовать прокрутку, но никто не отменял понятие «выше линии сгиба» (Above the Fold). До 80 % внимания клиентов все равно будет направлено на верхнюю часть страницы до того момента, как они решат ее прокрутить. Поэтому располагайте ваш основной призыв к действию именно там.

Кейс: VT-metall
Узнай как мы снизили стоимость привлечения заявки в 13 раз для металлообрабатывающей компании в Москве
Узнать как

5. Включайте «липкие» хедеры и футеры

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

   Применение «липкой» навигации (Sticky Navigation) увеличивает скорость поиска информации на 22 %, что существенно улучшает показатели мобильного лендинга.

6. Оптимизируйте всплывающие окна

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

7. Составляйте короткие тексты

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

   • во-первых, безжалостно избавляйтесь от всех «красивостей» текста, не влияющих на его содержание, составляйте короткие абзацы, используйте маркированные списки;

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

   

   Любой А/Б-тест имеет базовый формат. Ставится задача, например, повышение конверсии. Выбираются способы решения, которые надо сравнить: пусть это будут 10 %-ная скидка и бесплатная доставка. Создайте две версии мобильного лендинга, которые отличаются только тем, что вы хотите сравнить. Проанализируйте их работу, выявите, какая из посадочных страниц оказалась более эффективной для решения поставленной задачи, и подкорректируйте основной сайт.

Обязательные и дополнительные элементы мобильного лендинга

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

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

Обязательно вставляйте в шаблон мобильного лендинга следующие элементы:

1. Призыв к действию. Поднимет конверсию на 10 – 300 %, если будет коротким и понятным: «Жми кнопку!», «Иди в магазин!», «Скачай игру!».

2. Заголовок. Содержит в себе суть того, зачем пользователь перешел на эту страницу и что ему дальше делать. Хедлайн должен быть визуально привлекательным и коротким, в 1 – 7 слов.

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

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

Что еще можно:

• Таймер. Его присутствие заставляет пользователя быстрее принять положительное решение. Еще лучше мотивирует прикрепленный к таймеру бонус, например, «Скачай сейчас – получи вторую жизнь в игре».

  

• Отзывы. На больших лендингах, где есть свободное место, разместите 2 - 3 положительных отзыва (якобы) от пользователей.

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

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

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

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

Как работают популярные онлайн-конструкторы мобильных лендингов

• Unbounce

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

Возможности: пользовательские коды JavaScript, CSS и HTML, функция Smart Traffic для адаптивного дизайна, динамическая замена ключевых слов для PPC.

Интеграции: WordPress, AWeber, Slack, Google Analytics, AdWords, Zendesk, Agile CRM.

В наличии: пробник, А/Б-тесты, более ста готовых шаблонов, всплывающие окна, адаптивный дизайн, встроенная система аналитики и собственный фотосток.

• Wix

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

Возможности: прием платежей, разнообразные виджеты, применение собственного кода JavaScript, рассылка сообщений, подключение чатов, работа с всплывающими окнами, взаимодействие с популярными соцсетями, функция Corvid для автоматизации поведенческих сценариев, умные подсказки, подробная аналитика, сертификат SSL.

Интеграции: Google Analytics, платежные системы, аналитические сервисы.

В наличии: пробник и более двухсот готовых шаблонов, всплывающие окна и адаптивный дизайн, встроенная система аналитики и собственный фотосток. А/Б-тестирование недоступно.

• GetResponse

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

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

Интеграции: WordPress, Shopify, PayPal, Google Analytics, AdWords, KissMetrics, Bing.

В наличии: пробник в виде 30-дневной ознакомительной версии, А/Б-тесты, около двухсот готовых шаблонов, адаптивный дизайн, всплывающие окна, встроенная система аналитики и собственный фотосток.

• Wishpond

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

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

Интеграции: более трехсот (WordPress, Facebook, Aweber, Active Campaign, MailChimp, Slack, Agile CRM и другие).

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

• Ucraft

Хотите научиться разрабатывать прибыльные эффективные лендинги? Этот сервис создан именно для вас. Здесь найдете поддержку электронной торговли (предлагается несколько видов доставки и оплаты), более двух миллионов самых различных иконок, отличные SEO-инструменты, бесплатный домен и SSL.

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

Интеграции: с инструментами маркетинга и дизайна.

В наличии: пробник, около сотни готовых шаблонов, адаптивный дизайн, всплывающие окна, встроенная система аналитики, собственный фотосток. Но А/Б-тестирование недоступно.

7 способов повышения эффективности мобильного лендинга

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

Работайте только на целевую аудиторию

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

Обращайте внимание на основной заголовок и содержание оффера

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

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

Наши рекомендации по составлению заголовка:

• Его смысл должен быть максимально простым и понятным.

• Содержание должно соответствовать тезисам, прозвучавшим в рекламной кампании.

• Для улучшения визуального восприятия подойдет Title case (использование заглавных букв в начале каждого слова) в заголовке и Subhead case (только строчные во всем тексте) – в подзаголовках.

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

• Заголовки с долей юмора привлекают внимание и создают позитивный настрой.

Составляйте конкретное предложение

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

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

Не используйте сложные термины

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

Заслужите доверие клиента

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

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

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

Гарантируйте качество

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

Скачайте полезный документ по теме:

Чек-лист: Как добиваться своих целей в переговорах с клиентами

Опубликуйте подробные контактные данные

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

Измерение конверсии мобильного лендинга

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

По определению уровень конверсии (conversion rate, CR) представляет собой процентное соотношение между количеством клиентов и количеством посетителей сайта. Например, если при 100 посещениях лендинга клиентами стали три человека, то CR составит 3%. Нормальная величина зависит от сегмента рынка, в котором работает компания. Маркетологи приводят аналитические данные, согласно которым 25% от общего числа лендингов имеют уровень конверсии в диапазоне 1,5 – 3%.

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

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

Автор статьи

Сергей Касьянов

Сооснователь компании «Генератор продаж»

Статья опубликована: 27.10.2021

Последние статьи этого автора:

• Анализ контента сайта: 9 этапов + сервисы помощники
• Про B2C маркетинг простыми словами
• СРА-маркетинг для рекламодателя: агрегаторы, запуск и схемы обмана

Забрать гарантированный подарок

Полезные
материалы
для руководителей

Скачать 3,2 MB