Рекомендации для мобильного лендинга

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

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

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

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

Как сделать мобильную целевую страницу высококонверсионной? В этой статье мы обсудим основные рекомендации для мобильных лендингов, которые смогут помочь увеличить конверсию:

- короткие тексты

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

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

Пример, как не нужно делать:

- быстрая загрузка лендинга

Основной проблемой медленной загрузки лендинга являются изображения и видео. Около 50% посетителей покидают страницу только из-за медленной загрузки. Поэтому важно обращать внимание на время загрузки и ускорять этот процесс.

- Гамбургер-меню вместо навигации

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

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

- высококонтрастные цвета в графике

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

- кнопки СТА выше линии сгиба

Термин "Above the fold" до сих пор применяется к лендингам, особенно мобильным. Призыв к действию размещают вверху страницы, т.к. около 80% внимания посетителей приходиться именно на эту часть страницы.

- наличие обратного звонка

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

- «липкая» навигация в хедере, футере

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

- оптимизированные всплывающие окна, формы

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

Такие критерии также касаются и лид-форм, они также должны быть оптимизированы под размер экрана и запрашивать минимум информации (желательно чтобы форма включала 1-3 поля для заполнения и не больше).

Пример всплывающих окон:

- наличие пустого пространства

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

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

- контент в одной колонке

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

- минимум изображений и видео

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

- наличие прокрутки

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

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

КОММЕНТАРИИ:

comments powered by HyperComments

Популярные статьи

<p>Продающий текст на сайте. Возражения!</p>

0

<p>Продающий текст на сайте. Возражения!</p>

<p>Как бороться с летним падением продаж?</p>

0

<p>Как бороться с летним падением продаж?</p>

<p>Как правильно продавать товар</p>

0

<p>Как правильно продавать товар</p>

<p>Популярность поисковых систем</p>

0

<p>Популярность поисковых систем</p>

Наш менеджер свяжется с вами в ближайшее время
Получить предложение
Сообщение отправлено!
Мы c Вами свяжемся в ближайшее время
#