Нужна ли навигация на лендинге: данные, подтвержденные кейсами. Адаптивное меню для landing page

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

Оптимизация посадочной страницы

Лендинг — неотъемлемая часть стратегии увеличения прибыли. В среднем, объем лидов повышается на 55%, когда компании увеличивают количество посадочных страниц. Вместе с тем, исследования показывают, что только 22% компаний удовлетворены своим .

Видите все эти элементы сверху? Они отвлекают внимание и уводят с лендинга. Навигация, уводящая с целевой страницы, противоречит смыслу ее существования.

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

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

Кейс «за» навигацию

понимать свое местоположение;
легко переходить к другим разделам.

Существует три типа навигации:

основная;
локальная;
контекстная.

Этот тип представляет собой основное меню сайта. Каждый элемент в нем ведет на конкретный раздел ресурса. Хедер на странице Edgar — пример основной навигации:

Локальная навигация

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

Контекстная навигация

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

По данным WordStream, целых 96% посадочных страниц содержат хотя бы одну ссылку, уводящую посетителя. Цифры говорят:

только на 4% посадочных страниц вообще нет ссылок;
81% страниц содержит от 1 до 9 ссылок;
14% использует более 10 навигационных элементов.

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

Примером возьмем страницу Meltwater.

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

Кейс «против» навигации

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

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

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

Например, на лендинге Better Homes and Gardens’ sweepstakes велика вероятность, что посетитель захочет узнать о Meredith Corporation подробнее и свернет с пути, ведущего к нажатию CTA-кнопки.

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

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

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

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

Особенно интересно, что исключение навигации из середины воронки конверсии (conversion funnel) дало рост на 16% и 28%, а из верхней части воронки — 0-4%.
Когда команда Minders протестировала свой лендинг и убрали панель навигации, за месяц конверсия выросла с 9,2% до 17,6%.

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

Вот что вышло после удаления панели навигации:

Этот вариант поднял конверсию до 100%.

Когда на лендинге нет посторонних ссылок (кроме CTA-кнопки), пользователя ничего не отвлекает от основной задачи. Лендинг пейдж без ссылок сосредоточена на одном действии, значит и посетитель обратит внимание на него. Но навигационные ссылки не просто отвлекают внимание — они чреваты материальными потерями.

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

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

На странице Conversion XL agency есть такое меню, которое позволяет двигаться по лендингу без прокрутки.

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

Так работает страница Google App:

Заключение

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

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

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

Привет друзья, коллеги! Как ваши дела? Надеюсь у всех все здорово:) Сегодня будем делать простое адаптивное меню для наших landing page. Все чаще спрашивают об этом, а я подобные вопросы записываю в и стараюсь в свободное время писать на эти темы статьи.

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

Как сделать адаптивное меню для сайта

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

В основном это будет html + css, но понадобится совсем маленький скрипт, для обработки клика. Итак…

Адаптивное горизонтальное меню

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

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

Скачать прайс

Контакты

Отзывы

Как видите — ничего сложного, думаю, по мере необходимости вы сами сможете усовершенствовать его.
Теперь давайте добавим стили:

#menu { background: #2ba9c0; width: 100%; padding: 10px 0; text-align: center; } #menu a { color: #fff; text-decoration: none; padding: 12px 12px; } #menu a:hover { border-bottom: 4px solid #fff; background: #078ecb; } .itemsMenu li { display:inline; padding-right: 35px; width:100%; margin: 0 auto; } .itemsMenu li img{ vertical-align: middle; margin-right: 10px; } .iconMenu { color: #fff; cursor: pointer; display: none; } .showitems { display:block !important; } @media screen and (max-width: 600px) { #menu a{ padding-bottom: 13px; } #menu a:hover { border-bottom: none; } .iconMenu { display:block; } .itemsMenu { display:none; } .itemsMenu li { display:block; padding:10px 0; } }

Теперь, при уменьшении окна браузера вы увидите следующую картину:

Мне бы очень не хотелось описывать каждую строчку, ведь блог не о верстке как таковой. Давайте я просто попытаюсь объяснить.

Сначала элементам li задаем свойство display:inline, чтобы сделать их расположение горизонтально друг за дружкой. Можно было бы использовать float:left, но решил таким образом сделать. И скрываем иконку меню свойством display:none. Когда разрешение экрана меньше 600 пикселей, убираем inline, у элементов li, и скрываем их, а показываем иконку. В двух словах — так.

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

$(function() { $(".iconMenu").click(function() { if($(".itemsMenu").is(":visible")) { $(".itemsMenu").removeClass("showitems"); } else { $(".itemsMenu").addClass("showitems"); } }); });

Вот так. Я его вынес в отдельный файл и подключил перед закрывающимся тегом body.

Вот и все. Таким образом можно быстро сверстать простое адаптивное меню для landing page.

Конечно, есть недостатки. Отступы заданы в пикселях, но можно задать все расстояния и в процентном соотношении. Просто в этом не было необходимости. Если бы это был полноценный сайт, то и иконки бы я использовал в svg или шрифтовые, а не png и отступы бы пересчитал в процентах. А так, это был небольшой экспромт:) Надеюсь все понятно? Пока.

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

Статьи на тему эффектов при прокрутке страницы:

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

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

Скачать

Процесс смены блоков:

Как сделать такой дизайн лендинга?1 HTML структура

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

Структура меню стандартная:

1 2 3 4 5 6

Блок 1 Блок 2 Блок 3 Блок 4

Поясню атрибуты:

data-menuanchor — атрибут необходим для формирования меню.
href — атрибут ссылки, который переходит к соответствующему якорю с таким же идентификатором.

Сейчас создадим структуру всех блоков:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

Есть общий блок с идентификатором "fullpage" , в котором находятся блоки с содержимым. Здесь есть один незнакомый для Вас атрибут:

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

2 Стили CSS

Никаких стилей особых здесь нет, поэтому здесь размещу только стили для меню:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

#menu { height : 60px ; left : 0 ; margin : 0 ; padding : 0 ; position : fixed ; top : 0 ; width : 100% ; z-index : 70 ; text-align : right ; background : #fff ; } #menu li { background : rgba(255 , 255 , 255 , 0.5 ) ; border-radius : 4px ; color : #000 ; display : inline-block; margin : 10px ; } /*Стиль ссылки когда активен соответствующий блок*/ #menu li a , #menu li.active a { display : block ; padding : 9px 18px ; text-decoration : none ; color : #ccc ; } /*Стиль элемента списка когда активен соответствующий блок*/ #menu li.active { background : rgba(0 , 0 , 0 , 0.5 ) ; color : #fff ; }

Осталось подключить скрипт и написать небольшой JS код.

3 JS часть

Необходимые библиотеки:

jQuery.min.js

Подключаем их:

1 2

Как создать ссылку в меню лендинга? Да очень просто! Просто скопировать часть кода (пару строк) и вставить в нужное место. Сейчас всё это рассмотрим. Но с начало поясним. Изначально подразумевается, что ленд никуда не ведет (в смысле на другие страницы), это одностраничный сайт. Поэтому все ссылки по идее должны вести только на разделы самого LP (). Иногда бывает нужно поставить ссылку на другую страницу, к примеру, на политику конфиденциальности. Все эти подробности мы уже описывали в статье « ». Рассмотрим оба варианта добавления гиперссылок в одностраничник.

В качестве примера будем использовать наш ресурс « ». Перейдите по ссылке на страницу и нажмите сочетание клавиш Ctrl + U (переключать клаву на английский не надо). Откроется html код страницы.

Html код лендинга

Гипер ссылки на сайтах заключены в специальные html теги . Тег имеет атрибут href=далее следует юрл адрес, ссылка на страницу (другую) либо якорь на часть документа со знаком # и названием, примерно так Бонус

Код меню

Теперь надо поставить пересылку на нужную часть ленда, для этого используется идентификатор id=«название которое использовалось в меню со знаком #», в нашем случаи «screen», см. картинку

Идентификатор из меню

Теперь создадим дополнительную ссылку на футер (подвал). Для этого в каком то html редакторе, к примеру NotePad++, просто скопируйте одну из существующих ссылок меню и вставьте ниже после стоимости. Далее после значка # замените на futer и слово после птички >Футер. Вот что у Вас должно получиться.

добавленная новая ссылка в меню

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

Меню до добавленной ссылки

Меню после добавления кода

Далее необходимо поставить id в нужное место. Для этого идем вниз документа и ищем div с именем footer, я специально сделал ошибку в новом имени меню и поставил futer, так как id должен быть уникален. Вот какой результат должен быть, см. скрин.

Установка идентификатора из меню Замена ссылки на другую страницу

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