5 примеров крутых мобильных лендингов: как делать эффективные посадочные страницы

Рубрика: Теория и статистика | Время на чтение: 8 мин.

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

5 примеров крутых мобильных лендингов: как делать эффективные посадочные страницы

А спонсором блога в этом месяце выступает сервис Rookee. Когда требуется комплексное поисковое продвижение, контекстная реклама на автопилоте или формирование репутации в сети – на помощь приходят Rookee!

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

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

Оглавление

1. ASPCA упрощает конвертацию трафика на мобильных устройствах

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

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

Главная страница aspca.org (Американское общество по предотвращению жестокости к животным) – отличный пример баланса между потребностями посетителей сайта и оптимизацией конверсии.

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

Оранжевый фон сразу бросается в глаза, а призыв к действию – пожертвовать (donate) – написан заглавными буквами.

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

Это идеальное сочетание предоставления сервиса клиенту и упрощения процедуры осуществления продаж.

Кенни Хайдер, эксперт по контекстной рекламе из Лос-Анджелеса, поделился своим мнением на этот счёт с журналистом Search Engine Journal, Роджером Монтти:

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

Основные факторы, облегчающие покупку:

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

2. Peacock ориентируется на конкретную цель

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

Показательный пример такой ориентации – домашняя страница peacocktv.com. Одним из примечательных аспектов основного лендинга Peacock TV является отсутствие лишнего контента.

Вторым важным моментом является то, насколько целеустремлённый первый экран посадочной. Он преследует только две цели:

Побудить вас стать клиентом сервиса (get started / join now).
Предложить залогиниться, если вы уже являетесь клиентом (sing in).

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

Обратите внимание на текст лендинга:

Смотрите Peacock бесплатно или разблокируйте всё с Peacock Premium. Всего 4.99 доллара в месяц.

Слова, используемые на этой странице, настолько лаконичны, что могут эффективно применяться для PPC-рекламы.

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

Вот что думает об этом лендинге Кенни Хайдер:

Это эффективное использование места. На мобильных устройствах пользователи хорошо знакомы с горизонтальной и вертикальной прокруткой. Но усталость от прокрутки по-прежнему актуальна.
Используйте площадь экрана мобильного телефона с умом.

3. Kayak – лендинг, похожий на мобильное приложение

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

Вот что думает об этом лендинге Синди Крам, основательница компании MobileMoxie (софт для мобильной оптимизации):

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

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

4. Lyft привлекает внимание с помощью кнопок высокой контрастности

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

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

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

Все цвета условно можно разделить на холодные и тёплые. Если на странице преобладают холодные цвета, сделайте призыв к действию тёплым (и наоборот).

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

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

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

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

На walmart.com всё иначе.

У Walmart есть «постоянная» кнопка покупки, которая остаётся «приклеенной» к нижней части экрана мобильного телефона.

Потребитель может прокручивать страницу вверх и вниз, выбирая разные опции и просматривая изображения продуктов, а кнопка «Добавить в корзину» (add to cart) остаётся закреплённой в нижней части экрана мобильного устройства.

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

Удивительно, что многие e-commerce сайты до сих пор не сделали так же. Ведь добавить такую кнопку – это немного работы с CSS, и делов-то!

Мобильные лендинги могут эффективно конвертить

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

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

Источник информации: searchenginejournal.com.