Создание мобильной версии лендинга — это, скорее, необходимость, нежели просто полезное дополнение. Мобильный трафик сегодня приходится на 51 % покупателей, желающих найти новые бренды и продукты. При этом доля пользователей десктопных устройств неуклонно сокращается. Почему при всех этих условиях конверсий на мобильных устройствах все равно меньше, чем на ПК? Одна из причин — не самое лучшее качество мобильных лендингов многих компаний. Чтобы увеличить продажи с мобайла, нужно позаботиться о пользователях. Как именно? Расскажем далее.
Чем мобильный сайт отличается от мобильного лендинга
Лендингом называют отдельную страницу, на которой потенциальный клиент оказывается после клика по объявлению. Как правило, такая страница имеет одну цель, один призыв к действию, простую навигацию и минималистичный дизайн. Хороший лендинг отвечает следующим требованиям:
- наличие конверсионной цели,
- привлечение внимания,
- требование к совершению определенного действия.
Это основные отличия мобильного лендинга от мобильного сайта. Оказавшись на посадочной странице, пользователь сразу понимает, что от него требуется. Для этого лендинг должен быть простым и понятным. Особенно, если дело касается мобильных устройств.
Создать лендинг для мобильных устройств можно двумя способами. Первый — использование адаптивной верстки. Вам нужно лишь обеспечить корректное отображение страницы с любого устройства. Вне зависимости от того, со смартфона, ПК или планшета зашел пользователь, сайт «растянется» правильным образом. Однако использовать этот способ стоит лишь в том случае, если большая часть аудитории все-таки будет посещать лендинг с десктопа.
Если же статистика показывает, что немалая часть аудитории — это мобильные пользователи, то есть смысл сформировать лендинг иным, более дорогим способом. Речь идет о создании его полноценной мобильной версии на поддомене или внутри сайта. Например, заказ еды чаще выполняется со смартфона или планшета. А потому рекомендуется не «ужимать» страницу, а менять структуру сайта при отображении на разных устройствах. Задача программистов и дизайнеров в этом случае — сделать не один сайт, а сразу несколько его версий. Это позволит представить то же наполнение, но без уменьшения шрифтов и изображений. Юзабилити страницы останется при этом на высоком уровне, а загружаться она будет максимально быстро.
Вот как выглядят адаптированный мобильный лендинг и лендинг, созданный с нуля:
Сравнение двух лендингов
Второй вариант хоть и считается более выгодным, но имеет два недостатка: сложная кодировка и высокая цена. Вам потребуется больше времени и денег, чтобы оплатить труды разработчиков. Но в перспективе все затраты обязательно окупятся большими охватами аудитории. Именно поэтому тенденция к созданию мобильных лендингов уверенно набирает обороты, понемногу вытесняя принцип адаптивной верстки.
Главные советы для создания мобильного лендинга
Итак, мы выяснили, что посадочные страницы нужно разрабатывать специально для использования на мобайле. В противном случае они не будут конвертировать должным образом.
Проблема адаптивного дизайна кроется в том, что все элементы на нем изначально предназначены для десктопа, а не для смартфонов или планшетов. При этом пользователи мобайла ищут и просматривают сайты совсем по-другому. Им важны такие моменты, как скорость, удобство и простота. Все это отсутствует на «сжатом» до мобильной версии сайте. Тут слишком много элементов, в которых можно запутаться. Скорость загрузки оставляет желать лучшего, а формы заявки и вовсе могут не срабатывать.
Используйте наши советы, чтобы создать удобный, рабочий, а главное конвертируемый мобильный лендинг.
Простая навигация
Существует мнение, что на мобильных лендингах навигации в принципе быть не должно. Необходимо сосредоточиться на том, чтобы подтолкнуть пользователей к действию.
Оптимальный вариант — создание на посадочной странице «гамбургер-меню», представляющего собой иконку из трех горизонтальных полосок. Так вы сэкономите место на небольших экранах, а посетители точно будут тапать по знакомому символу.
Пример лендинга с «гамбургер-меню»
При нажатии на такое меню откроется дополнительное окошко с вариантами навигации. Это куда удобнее, чем «липкие» хедеры, включающие несколько навигационных ссылок.
Не забывайте, что каждая ссылка должна иметь отношение к основной цели лендинга — продать конкретный товар или услугу.
Оптимизация форм
Мобильная версия лендинга должна включать оптимизированные лид-формы. Пользователи смартфонов не привыкли делать что-то подолгу. В связи с этим ориентируйтесь на показатель скорости. Ваша задача — запросить минимум данных о клиенте. Для получения же дополнительных деталей всегда можно связаться с человеком позже.
Вот отличный пример лид-формы, содержащей всего один пункт:
Пример лид-формы
Если вы что-то продаете, соблюдайте требование к количеству полей в форме — их должно быть максимум 3. Помните, что чем дольше пользователь будет что-то заполнять, тем выше вероятность, что ему надоест и он уйдет к конкуренту.
Разметка в одну колонку
Экраны мобильных устройств вертикальные, а потому на них тяжело смотреть контент, поделенный даже на два столбца. Прокрутка и навигация в таком случае становятся слишком громоздкими и нескладными.
Никто не мешает вам размещать контент самым неожиданным образом, экспериментировать со стилями и форматами. Вот только делать это нужно так, чтобы пользователю было удобно и интересно. Так что мы рекомендуем выбирать классическое решение — размещать тексты, изображения и видео в один столбец.
Высококонтрастная графика
Компьютер, как правило, стоит дома или в офисе, поэтому на мониторе достаточно хорошо и стабильно передаются цвета. Мобильное же устройство используется людьми в самых разных условиях. Например, при тусклом свете или на солнце. Естественный свет затрудняет просмотр того, что показывает экран, а некоторые экраны могут всегда передавать цвета не лучшим образом.
Ваша задача — использовать на мобильном лендинге высококонтрастные цвета. Они привлекут внимание пользователя и будут видны при любых условиях. Только не переусердствуйте с контрастом. Кислотные цвета на сайте могут оттолкнуть большую часть пользователей.
Вот как решен этот вопрос в рекламе ноутбуков Apple:
Цветовые решения на мобильном лендинге
Не стремитесь выбирать цвета, якобы влияющие на рост конверсии. Последние исследования показывают, что важнее не сам цвет, а грамотное его использование вкупе с текстом и посылом. Делайте ваш мобильный лендинг удобным и презентабельным.
Пустое пространство
Не допускайте на мобильном лендинге нагромождения различных блоков. Помните, что люди ценят минимализм и строгость. Поскольку один лендинг — это одна цель, не стремитесь включить на площадку все подряд. Страница должна выглядеть современно, а процесс ее чтения должен быть комфортным.
Пустое пространство облегчит взаимодействие с сенсорным экраном и сведет случайные клики к минимуму. Вот отличный пример использования пустого пространства:
Пример использования пустого пространства
Вы минимизируете отвлекающие моменты и сосредотачиваете внимание пользователя на самом важном.
Призыв к действию вверху страницы
Любой CTA на мобильном лендинге следует размещать в верхней части страницы. Безусловно, пользователи смартфонов будут прокручивать страницу, но 80 % их внимания придется на ее верхнюю часть.
Не забудьте выделить призыв цветами, контрастирующими с фоном. Вот как это сделано в рекламе косметики:
Размещение СТА на мобильном лендинге
Потенциальный клиент видит слоган, после чего опускается чуть ниже. На полпути он видит кнопку, например, со словами «Оформить заявку», «Получить», «Заказать звонок» и т.д. Это своеобразное напоминание для пользователя, с какой именно целью он оказался на лендинге.
Короткие тексты
В дополнение к пункту о пустом пространстве следует рассказать о необходимости писать максимально коротко. Лендинг для мобайла не должен включать весь тот текст, что размещен на версии для десктопа.
На русской версии посадочной страницы Evernote допущено сразу несколько ошибок — неконтрастные цвета и слишком громоздкий текст:
Слишком громоздкий текст на мобильном лендинге
Оффер должен быть убеждающим и ярким. Обратите внимание на основные принципы сокращения объема текста:
- Предложения и абзацы должны быть короткими и легко читаемыми. Избегайте простыней текста. Для более легкого восприятия ключевых моментов, разбейте текст на параграфы.
- Используйте маркированные списки. Они отлично подходят для выделения важных моментов: пользователи быстрее обратят внимание на такой текст.
- Вырезайте все, что можно.
Дополнительную информацию пользователь всегда сможет найти на полной версии сайта.
Акцент на скорость лендинга
Скорость загрузки — один из важнейших моментов, которому стоит уделить внимание при создании мобильного лендинга. С увеличением времени загрузки растет и показатель отказов. Более того, почти половина посетителей, покинувших сайт, потому что он долго открывался, никогда больше на него не возвратятся.
Не так давно были проведены исследования, демонстрирующие зависимость между увеличением времени загрузки сайта и ростом показателя отказов. Результаты следующие:
- 3 секунды — отказы до 32 %
- 4-5 секунд — отказы до 90 %.
Главная проблема медленных лендингов — слишком «тяжелые» видео и картинки. Ваша цель — ускорить процессы посредством оптимизации контента. Не лишним будет обновить хостинг-план на более быстрый. Вложения точно окупятся.
Ограничение визуальных средств и видео
Как уже было сказано, видео и изображения требуют длительной загрузки данных. Но есть еще один связанный с ними недостаток: зачастую лишний контент «захламляет» страницу, отвлекая внимание от самого важного. Несоблюдение принципа «пустого пространства» приводит к тому, что пользователю некомфортно, он не понимает, что происходит, и покидает лендинг.
Вот пример хорошей страницы:
Правильное использование пустого пространства на мобильном лендинге
Пустое пространство здесь есть, данные представлены тезисно, слоган сверху. На фоне есть схематичное изображение, которое выглядит органично и ненавязчиво.
Кнопка прокрутки
Предпочтительнее создавать короткие страницы, на которых представлена лишь основная информация. При этом не стоит забывать о пользователях, которые хотят узнать о вас больше либо посмотреть полный перечень товаров/услуг. Для этого используйте кнопку открытия дополнительных данных. Она снижает показатель отказов на 37 %, а выглядит следующим образом:
Кнопка прокрутки
При нажатии на кнопку откроется более длинная прокручиваемая страница. Так вы позволите посетителям самостоятельно принять решение о просмотре.
Оптимизация всплывающих окон
Всплывающие окна могут быть эффективными не только на десктопе, но и на мобильных устройствах. Использовать их нужно аккуратно и с умом. Сделайте такие окна максимально простыми. Минимум текста и одно простое изображение не будут сильно раздражать пользователей, а многих даже заинтересуют.
Не забудьте поставить крупный значок закрытия окошка, чтобы у пользователя не возникло проблем с дальнейшим просмотром лендинга. В противном случае он уйдет с сайта.
Соединение футеров и «липких» хедеров
Как мы уже говорили, использовать пространство на мобильных экранах нужно аккуратно. Однако пользователю всегда должна быть доступна кнопка призыва к действию. Присоедините значок корзины, звонка или формы заявки к «липкой» навигации — не прокручиваемой полоске вверху. Так пользователь сможет выполнить действие в любой удобный момент.
«Липкий» хедер
Такой вариант для потенциального клиента в разы удобнее, чем поиск формы по всему лендингу.
Кнопка прямого или обратного вызова
В верхней части лендинга указывается только самая важная информация. Если такие данные, как каталог товаров, часы работы или цены, можно поместить в другое место, то контактная информация должна быть в шапке обязательном порядке. На мобильной версии сайта это должна быть большая яркая кнопка прямого звонка, выполняемого в один клик. Выглядеть она может следующим образом:
Кнопка прямого или обратного вызова
Мобильные пользователи привыкли получать информацию быстро. Если это не удается, они ищут контакты, которые по этой причине должны быть на виду.
Тестирование вариантов
Наконец, самая важная рекомендация. Каждый вариант мобильного лендинга необходимо тестировать. Так вы получите максимум данных, которые сможете применять для оптимизации сайта, увеличения дохода и повышения конверсии.
Алгоритм А/Б-тестирования выглядит следующим образом:
- Выбор проблемы для решения. Например, рост заявок.
- Сравнение вариантов для достижения цели: допустим, бесплатная доставка и скидка 25 %.
- Выполнение теста, который предполагает создание двух версий посадочной страницы.
- Просмотр результатов теста, анализ данных и определение победителя.
- Внесение изменений в существующую версию страницы.
Проводить такие тесты можно на любой удобной платформе для создания мобильных лендингов.
