Оптимизация посадочных страниц для мобильных устройств — 10 передовых методов для достижения успеха

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

Хотя из-за того, что так много компаний «не готовы иметь дело с мобильными устройствами», посадочные страницы для мобильных устройств обычно не удостаиваются должного внимания. Однако значительный рост использования сети при помощи мобильных устройств заставляет маркетологов заняться этим вплотную. На планете насчитывается более 4 миллиардов мобильных телефонов, а по оценке Google к 2014 году для выхода в Интернет люди будут использовать мобильные телефоны чаще, чем компьютеры.
Какая часть вашего интернет-трафика приходится на мобильные устройства? Десять процентов? Двадцать? Да вы вообще знаете это?

Аргументы в пользу посадочной страницы для мобильного устройства…

Когда речь идет об оптимизации посадочной страницы, простое А/В-тестирование может добавить к конверсии 20-30 процентов. Хотя это и неплохой результат, такое небольшое поэтапное улучшение не имеет большого смысла, если при этом игнорируется существенное число посещений, совершенных с помощью мобильных устройств.

К примеру, вашу страницу посещает, скажем, тысяча пользователей, и 2 процента из них (20) становятся покупателями. Вы проводите А/В -тестирование, что повышает конверсию на 25 процентов (5 пользователей). Тем временем 15 процентов (150 человек) из ваших посетителей практически игнорируются, и им предоставляется далеко не самый оптимальный интерфейс. Логичным будет признать, что имеет смысл сосредоточиться на этих 150, чем биться за 5 новых покупателей, тем более что пользователи с мобильными устройствами с большей вероятностью станут покупателями.

«88% посетителей, осуществляющих поисковые запросы с мобильных устройств, предпринимают действие в течение 24 часов. Около 70% предпринимают действие в течение одного часа».

~ Google Mobile Movement Study, 2011

10 способов адаптировать посадочную страницу к мобильным устройствам

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

1. Доступность

Убедитесь, что ваш контент доступен для мобильных устройств и виден на них. Флэш, фреймы, 24-битные изображения PNG и многочисленные плагины недоступны для мобильных устройств.

Обновите свой сайт подходящими для мобильных устройств вариантами перечисленных технологий, например HTML5, jQuery, используйте форматы изображений JPG или GIF.
«После неудачного опыта просмотра сайта на мобильном устройстве 40% переходят на сайт конкурента».

~ Compuware, «What Users Want from Mobile», 2011

2. Скорость

Ваши страницы для мобильных устройств должны быть небольшими по размеру (менее 20 KB в общей сложности) и загружаться не дольше 5 секунд.

Основные факторы медленной загрузки такого рода страниц — количество запросов (загружаемые изображения, скрипты и т. д.), после чего идет число байтов (размер страницы), поэтому разработайте соответствующую стратегию.
Консолидируйте или удаляйте скрипты, оптимизируйте размер изображений для корректного отображения в мобильных устройствах, используйте спрайты, что позволит кэшировать одно изображение, а не много, используйте вместо изображений CSS и при необходимости воспользуйтесь другими советами по оптимизации работы вашего кода и контента для мобильных устройств.
Для определения времени загрузки и объема ваших посадочных страниц можно использовать такие инструменты, как W3C Mobile OK, mobiReady или Mobitest.

«43% посетителей скорее всего не вернутся на сайт, медленно загружающийся на мобильном устройстве. 74% пользователей мобильных устройств ждут до 5 секунд; 60% ждут 3 секунды или меньше».

~ Compuware, «What Users Want from Mobile», 2011

3. Последовательность

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

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

4. Краткость

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

Размеры экранов бывают разные, поэтому размер страницы может уменьшиться приблизительно на 35% для планшетов и 65% для смартфонов.
Иными словами, сожмите заголовки из шести слов до трех-четырех, а маркированные списки из пяти пунктов — до двух-трех.

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

5. Удобочитаемость

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

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

6. Удобство телефонной коммуникации

Самое главное действие пользователя с точки зрения как SEO, так и РРС — телефонный звонок, поэтому убедитесь, что в верхней части страницы виден ваш полный номер телефона.

«61% пользователей мобильных устройств по завершении поиска в бизнес-целях совершают телефонный звонок».

~ Google Mobile Movement Study, 2011

Пользователи должны смочь нажать/кликнуть на номере телефона и совершить звонок, поэтому внедрите функциональность «нажми, чтобы позвонить», сделав номер гиперссылкой с протоколом tel:.
Пример значения гиперссылки: «tel:+16515551212»
Пример HTML:
<a href=»tel:+16515551212″>Call Now! (651) 555-1212</a>

Советы касательно оформления призыва к звонку (СТС):

• Обязательно включайте префикс выхода на международную связь (значок «+» с последующим кодом страны) — благодаря этому смогут дозвониться пользователи, находящиеся за пределами своей страны
• Для быстрой визуальной ассоциации добавьте иконку «телефон»
• Добавьте призыв к действию в текст ссылки (например, «Позвоните сейчас», «Связаться со службой поддержки», «Нажми, чтобы позвонить» и т.д.)
• Повторите номер телефона в тексте ссылки для идентификации и упрощения вербального общения
• Рядом укажите часы работы (Крайне неприятно будет позвонить и обнаружить, что заведение закрыто!)
• Добавьте полезный и/или завлекательный текст (например, о гарантиях, рекламных акциях, отзывы и т.д.)
• Оформите ссылку как кнопку дополнительного цвета — так она будет выделяться (для облегченного адаптивного дизайна используйте кнопки CSS3, которые не требуют изображения)
• Все эти связанные с оформлением СТС советы неплохо учесть при проведении А/В-тестирования.

7. Удобство использования пальцев

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

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

Минимальные требования к целевой зоне:
Microsoft: 38×38 пикселей (0.25″), Apple: 44×44 пикселей (0.30″)

Примечание: Разрешение варьируется в зависимости от телефона, поэтому создайте набор разрешений и тестируйте соответственно.

• Увеличьте кликабельное пространство ссылок (например, 0,85 круглой шпации или 85% для текста)
• Убедитесь, что размер кликабельных изображений (например, иконок социальных сетей) подогнан под минимальный размер целевых зон
• Во избежание ошибочного клика между кликабельными зонами используйте интервалы (негативное пространство).
• Для облегчения выбора добавьте свободное место вокруг полей ввода и флажков.
• Максимально используйте плагины для JavaScript (jQuery), поддерживающие обработку жестов скольжения (например, Flexslider, Photoswipe)

8. Свой среди своих

Географическое местонахождение мобильного пользователя обычно можно определить по его IP-адресу с точностью до 8—32 км, при этом его конкретное местоположение не указывается. Исходя из IP-адреса (известного также как гео-IP ), можно получить некоторую информацию о местонахождении интернет-пользователя: страна, регион (штат/область), почтовый индекс, зона действия метрополитена (например, в городских агломерациях), город, широта, долгота, код области, метеостанция и другое. Вот так-то. Это золотая жила для персонализации контента и последующей конверсии!

Точность данных в базе данных MaxMind GeoIP City Database в США составляет 99,8% для страны, 90% для штата и 81% для города. Хотя эти данные не идеальны, они прекрасно подойдут для создания на лету подсказок для пользователя и заполнения контактных полей информацией по умолчанию.

• Используйте данные гео-IP для создания более быстрых, привязанных к местоположению посетителя и персонализированных посадочных страниц.
• Персонализируйте заголовки с помощью названия города или станций метро
• Перечислите представительства или магазины, расположенные неподалеку (например, «Магазины недалеко от Миннеаполиса»)
• Добавьте местный «акцент», используя местные термины или сленг (например, «таки да», «давай, до свидания» и т.п.)
• Устанавливайте центр карты и увеличивайте ее масштаб в соответствии с местонахождением пользователя
• Заполните автоматически поля форм с указанием местности

Совет: Определите почтовый индекс по гео-IP, а затем вычислите по индексу СООТВЕТСТВУЮЩИЕ значения поля для города, штата/области и страны!)

9. Простота формы

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

Демонстрируйте только те поля, которые обязательны для сбора необходимых данных, и подумайте о других вариантах получения или расчета данных впоследствии. Главное здесь — побудить пользователей предоставить минимальные данные лида (например, имя и электронный адрес), требуемые для вашего ответа.

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

Типы входных данных HTML5

Для повышения удобства использования воспользуйтесь типами входных данных HTML5 — номер, телефон, URL и электронный адрес — в связи с уникальными для каждого типа клавиатурами для ввода данных. Для более старых систем все это будет отображаться как простое поле для ввода текста. Для того, чтобы посмотреть как это будет выглядеть на деле, зайдите со своего мобильного устройства на эту тестовую страницу для входных данных HTML5. (Отсканируйте прилагаемый QR-код или воспользуйтесь http://j.mp/html5inputtypes в качестве ярлыка для быстрого перехода!)

10. Побуждение к действию

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

Для оптимизации конверсии мобильной версии посадочной страницы ограничьте число «действий» до трех или меньше. «Действие» — это любая операция, которую может выполнить пользователь на странице — ссылка, «лайк», кнопка «Поделиться», просмотр видео, заполнение формы, переход вглубь меню или любой другой жест (касание/нажатие/скольжение).

ЭКСПРЕСС-ТЕСТ: Сколько «действий» присутствует на этом изображении посадочной страницы Comcast?
Независимо от общего количества действий, посадочная страница должна иметь только одну цель. Текст и иллюстрации должны вести к достижению одной цели. Если это возможно, не демонстрируйте другие действия, пока главное действие не будет завершено.

«Одна страница — одна цель».

~ Оли Гарднер, Unbounce (Landing Page Rehab)

Примеры призывов к действию для мобильных устройств:

• Позвоните сейчас
• Найти магазин
• Посмотреть видео
• Свяжитесь с нами/Отправьте нам письмо
• Как к нам добраться (карта)
• Добавить в мой календарь
• RSVP
• Загрузить
• Оцените это
• Поставьте «лайк»
• Проголосовать
• Поделиться (укажите способ)

Совет: Не устанавливайте для видео режим автоматического воспроизведения. Для проигрывания видео пользователь должен кликнуть/коснуться — тогда будет считаться, что выбрано действие «просмотр».

Резюме по оптимизации мобильных посадочных страниц

1. Доступность
2. Скорость
3. Последовательность
4. Краткость
5. Удобочитаемость
6. Удобство телефонной коммуникации
7. Удобство использования пальцев
8. Свой среди своих
9. Простота формы
10. Побуждение к действию

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

Для достижения специфичного для мобильных устройств режима отображения используйте скрипты обнаружения мобильного пользователя и CSS3 Media Queries для адаптивного веб-дизайна. (Этими техническими штуками пусть займется ваш веб-разработчик!) И как всегда, чтобы выяснить, что подходит вашим пользователям больше всего, используйте А/В-тестирование, отзывы пользователей и тесты, отслеживающие движение взгляда посетителей.