Заказать звонок
Логин
Пароль
Войти как пользователь
Зарегистрироваться
После регистрации на сайте вам будет доступно отслеживание состояния заказов, личный кабинет и другие новые возможности
Логин
Пароль
Войти как пользователь
Зарегистрироваться
После регистрации на сайте вам будет доступно отслеживание состояния заказов, личный кабинет и другие новые возможности

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

30.06.2022
#Flottgroup
#Создание сайтов

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

«Как делают лендинги в Flottgroup»

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Некорректный 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 и при необходимости сразу запустят рекламу — поможем полностью настроить канал лидогенерации под ключ.



#Flottgroup
#Создание сайтов