Четыре критические ошибки, которые снижают конверсию лендинга

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

1. Загрузка дольше 3 секунд

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

Чтобы исправить проблему: 

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

• Оптимизируйте исходный код — удалите лишние строки в HTML-документе, поправьте стили CSS и сократите количество JavaScript. Обязательно проверьте валидность кода, особенно если лендинг самописный или разработан на шаблоне — ошибки также замедляют загрузку.

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

Проверить скорость загрузки сайта можно через Google Pagespeed Insights или инструмент внутри Вебмастера Яндекс. Время полной загрузки не дошло превышать 3 секунды, а основная часть страницы — прорисовываться за 1–1.5 секунды.

2. Отсутствие логичной навигации и структуры страницы

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

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

Что можно исправить: 

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

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

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

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

3. Некорректный call to action

Пример плохого сайта: много разрозненных CTA-элементов на 1 экране — это больше мешает, чем подводит к покупке.

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

• Соблюдайте стандарты UX-дизайна: кнопки должны быть заметными, при этом органично вписываться в общий дизайн. На первом экране лендинга должна быть кнопка для заказа в 1 клик.

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

• Используйте только 1 CTA-кнопку на 1 блок. Несколько призывов на одном экране замыливают УТП и отвлекают внимание пользователей, а наличие 2 и более кнопок — уводят от целевого действия. 

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

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

4. Отсутствие адаптивной вёрстки

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

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

Чтобы исправить проблему:

• Проверьте структуру макета страницы. Для всех блоков макета в теге <style> указываются размеры блоков для экранов с разрешением 320px, 990px и 1400px. 

• Настройте CSS. Можно выровнять ширину изображений под размеры экранов пользователей, например, добавив в таблицу стилей img {max-width: 100%;}.

• Подключите JavaScript. Расширить возможности стилей CSS можно через функции jQuery, тонко настроив отображение каждого блока в макете.

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

Нужен лендинг для бизнеса? 

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