Доля мобильного трафика – больше 50%: как подготовить свой лендинг к просмотру со смартфона

По итогам 2021 года, доля мобильного трафика в общем количестве трафика выросла еще на 2% и сейчас в среднем по всему миру составляет 54%:

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

При этом, 54% – это только среднее значение по миру. Есть страны, в которых мобильный трафик составляет в разы больше (даже 83,5%):

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

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

Mobile First

Чтобы не пришлось “потеть” над адаптацией большого формата сайта под мобильные устройства – начните разработку сразу под мобильные устройства, а затем адаптируйте его наоборот – под экран компьютера или ноутбука.

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

Упрощение дизайна и наполнения

Избавьтесь от дизайнерских элементов, без которых лендинг не потеряет в смыслах и останется интуитивно понятным. Уберите все картинки, которые долго грузятся, спрячьте некоторые элементы под кнопками (например, “Показать больше”), откажитесь от встроенного в страницу видео (например, на первом экране).

Сделайте так, чтобы картинки, которые вы оставите на сайте, соответствовали ширине мобильного экрана. Если ширина мобильной версии лендинга 600 пикселей – загружайте картинку с этой шириной, не используйте, например, 1 500 пикселей.

Лучшие форматы изображений для мобильных версий – JPEG и PNG.

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

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

По данным Google, около 53% мобильных пользователей покидают сайт, загрузка которого занимает более 3 секунд.

Только вертикальная прокрутка и нажатия пальцем

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

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

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

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

Звонок одним нажатием

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

Кнопка на первом экране

По статистике, 53% сайтов, где на поиск кнопки уходит более 3-х секунд, теряют потенциальных клиентов. Это слишком долго. СТА должен обнаруживаться за 1-2 секунды.

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

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

Верстайте в одну колонку

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

Добавьте навигацию по странице

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

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

Короткая форма заявки

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

Ограничьтесь 1-2 действительно важными полями:

Чтобы еще более упростить заполнение формы для пользователей, можно также:

- обеспечить автозаполнение полей

- добавить оповещения об ошибочно заполненной форме (например, подсвечивая поля красным), чтобы не приходилось перезаполнять форму с ошибкой снова или отправлять некорректную заявку

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

Большие кнопки и другие кликабельные элементы

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

Не размещайте кликабельные элементы слишком близко друг к другу

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

Сфокусируйтесь на одном целевом действии на лендинге

Не перегружайте страницу кнопками и смыслами. Один лендинг – одно целевое действие.

Если вам все же нужно разместить 2 кнопки с разными целевыми действиями – поставьте ключевое целевое действие выше.

Больше смыслов, меньше текста

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

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

Чтобы уменьшить количество текста, можно также использовать вместо текста символы (например, иконки или эмоджи в списке).

Разберитесь на каком этапе покупки находится клиент

От этого зависит, насколько нужно сократить текст. Если пользователь, попадая на лендинг, еще выбирает среди альтернатив, ему понадобится больше информации (не текста). Если он готов сделать заявку уже сейчас – можно оставить всего 1-2 экрана с главными тезисами и формой заказа.

Читабельность текста

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

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

Сделайте так, чтобы лендинг можно было прочесть “по диагонали”.

При этом рекомендуем сократить заголовки до 3-4 слов и количество элементов в списке, если это возможно, до 2-3.

Дайте пользователю понять, что нужна прокрутка

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

Например, в этом примере непонятно, что ниже есть еще что-то:

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

Переход на основную версию

Использование мобильной версии должно быть удобным, но не принудительным.

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

Отказ от технологии Flash

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

Примерно это будет выглядеть так:

Использовать быстрый и надежный хостинг

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

Использовать Ускоренные Мобильные Страницы (AMP) от Google

Ускоренные мобильные страницы (AMP) – один из проектов Google. Он помогает ускорять загрузку страниц, сжимая данные и делая из примерно в 8 раз (!) меньше обычного размера мобильных версий лендингов.

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

Избавиться от баннеров или минимизировать их количество

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

Если есть возможность обойтись на мобильной версии лендинга без выпадающих баннеров – избавьтесь от них.

Проверьте отображение лендинга на разных мобильных устройствах и в разных браузерах

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

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

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

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