Мобильные шаблоны лендинг пейдж – 10 методов оптимизации
Мобильные шаблоны лендинг пейдж (целевые страницы) могут быть использованы для PPC-рекламы, скачивания мобильных приложений, проведения рекламных кампаний и пр. Тактика оптимизации нацелена на увеличение конверсии, улучшение показателей PPC и обеспечение лучшего пользовательского опыта. Учитывая, что мобильный Интернет переживает невероятный рост, маркетологи не могут игнорировать его влияние. Вы, например, знаете, какая часть вашего веб-трафика приходится на мобильный сегмент?
88% мобильного поиска приводит к действиям в течение 24 часов, а около 70% — в течение 1 часа (Google Mobile Movement Study, 2011). Подумайте об этом, прогнозируя конверсию вашего трафика!
Мобильные шаблоны лендинг пейдж – 10 методов оптимизации
Самое время, чтобы адаптировать вашу стратегию. Вместо того чтобы просто проектировать традиционную целевую страницу, разработайте другие контент и макеты своей лендинг пейдж для различных устройств и экранов всех размеров — настольных компьютеров, планшетов, смартфонов и пр. Вот некоторые подсказки на эту тему.
-
Будьте доступными
Убедитесь, что ваш контент доступен и просматривается на мобильных устройствах. Flash, рамки и многочисленные плагины на мобильных устройствах не доступны. Обновите свой сайт с помощью таких дружественных для мобильных устройств альтернатив, как HTML5, JQuery или просто новых версий существующих плагинов.
Действующая разметка (синтаксис кодирования и структура) имеет решающее значение для того, чтобы веб-браузер правильно отображал контент. Проверьте ваш код и выполните QA-тестирование перед запуском. Инструменты W3C QA включают в себя валидаторы для HTML, ссылки, CSS, XML-каналы и многое другое.
Не забывайте, что получив негативный мобильный опыт 40% посетителей уходят к конкурентам (Compuware, “What Users Want from Mobile,” 2011).
-
Будьте быстрыми
Ваши мобильные страницы должны быть легкими (менее 20 Кб) и загружаться менее чем за 5 секунд. Главные факторы замедления мобильных страниц — количество запросов (загруженные изображения, скрипты и т.д.), а затем количество байт (размер файла). Другими словами, лучше иметь один сводный файл JavaScript, чем несколько отдельных небольших. Объедините или ликвидируйте сценарии, измените размер и сохраните оптимизированные изображения для мобильных, где это возможно используйте CSS вместо изображений, а также по мере необходимости проводите мобильную оптимизацию веб-производительности вашего кода и контента.
Опять же, 43% мобильных пользователей вряд ли вернутся на медленный мобильный сайт. 74%, подождут до 5 секунд; 60% подождут 3 секунды или меньше (Compuware, “What Users Want from Mobile,” 2011).
Если вы не сможете исправить время загрузки, вряд ли стоит возиться с другими пунктами в этом списке.
-
Будьте организованными
Для смартфонов сделайте макет с одним столбцом и приоритетным контентом в верхней части. Мобильные пользователи ориентированы на цель, в отличие от пользователей настольных компьютеров, более ориентированных на выгоду. Поэтому предусматривайте кнопку призыва к действию «выше сгиба» для смартфонов (например, «нажмите для звонка», «найти магазин» и пр.) Если ваш призыв к действию расположен ниже на экране, используйте реплики или ссылки для удержания внимания посетителя («прокрути ниже, чтобы увидеть предложение»).
-
Будьте краткими
В зависимости от количества текста на вашей традиционной целевой странице, есть вероятность, что вам придется сократить текст в целях мобильной оптимизации. Размер экрана варьируется, поэтому снижение количества традиционного контента может составлять до 65% для планшетов и 35% для смартфонов. Другими словами, переделайте заголовки из шести слов в заголовки из трех или четырех слов, а перечни из пяти буллетов сократите до двух или трех.
Примените творческий копирайтинг и подумайте о визуализации в виде значков, чтобы заменить или уменьшить текст.
-
Будьте разборчивыми
Пользователи должны иметь возможность читать страницу без масштабирования. Используйте минимальный размер шрифта в 16 пикселей, 100% по умолчанию для браузеров. Google рекомендует обеспечивать и проверять разборчивость текста на мобильных устройствах, находящихся на расстоянии вытянутой руки. Простая цветовая палитра, сильный контраст между текстом и фоном и адекватное пустое пространство между элементами также играют большую роль в обеспечении разборчивости.
-
Обеспечьте возможность для звонка
Главное действие мобильного пользователя, которое надо ожидать, — телефонный звонок, поэтому убедитесь, что ваш телефонный номер полностью виден в верхней части страницы. 61% мобильных пользователей звонит после локального бизнес-поиска (Google Mobile Movement Study, 2011).
Пользователи должны иметь возможность нажать на номер телефона для осуществления вызова.
Всегда включайте международный префикс (символ «+» с последующим кодом страны), чтобы обеспечить возможность звонка из-за пределов вашей страны.
Укажите часы работы вблизи номера телефона.
-
Обеспечьте удобство для большого пальца
На маленький, компактный контент сложно нажимать на мобильном телефоне. Все цели должны быть легко достижимы без масштабирования. Создайте интерактивные цели (ссылки, кнопки, иконки, поля форм и т.д.) так, чтобы ими можно было полностью и легко управлять пальцами и в частности большим пальцем.
Минимальные целевые площади:
Microsoft: 38 × 38 пикселей (0,25 «)
Apple: 44 × 44 пикселей (0,30 «)
Используйте запас (пустое пространство) вокруг активной области, чтобы избежать неправильного нажатия. Используйте JavaScript (JQuery) плагины с сенсорными жестами (например, FlexSlider, Photoswipe). Обеспечьте, чтобы интерактивные изображения (например, социальные иконки) имели размеры минимальных целевых площадей.
-
Будьте локальными
Геолокация мобильного пользователя может, как правило, определяться в пределах от 10 до 30 км в зависимости от его IP-адреса. На основании IP-адреса (GeoIP) могут быть определены некоторые детали расположения веб-пользователя — страна, регион (государство / провинция), почтовый индекс, широта, долгота, код города, метеостанция и многое другое. Это золотое дно для персонализации контента!
-
Обеспечьте простые формы
Формы целевых страниц должны быть чрезвычайно короткими. Количество полей должно быть четыре или меньше (идеально 1-2), но знайте, каждое дополнительное поле потенциально снизит конверсию на 50%.
Если вам необходимо несколько полей, предусмотрите процесс двухступенчатого заполнения формы, поскольку она в этом случае выглядит для мобильного пользователя как меньшее количество шагов.
Чтобы помочь юзабилити, предусмотрите ввод через клавиатуру — номер телефона, адрес, электронная почта.
-
Вынуждайте к действию
Цель страницы должна быть очевидна, убедительна и хорошо просматриваться как действие. Для оптимизации лендинг пейдж ограничьте количество «действий» для мобильных устройств до трех или менее.
Действие представляет собой любую задачу, которую пользователь может выполнить на странице — линк, лайк, просмотр видео, отправка формы, расширение меню и др.
Вне зависимости от общего количества действий, целевая страница должна иметь только одну основную цель. Текст и изображения должны поддерживать только одну цель. Если возможно, отложите показ других призывов к действию до тех пор, пока основное действие не завершено.
Примеры призывов к действию:
Позвоните сейчас
Найдите магазин Посмотреть видео Написать письмо |
Найдите направление
Добавить в мой календарь Проголосовать Позвоните нам |
Оценить
Поставить Лайк Скачать Поделиться |
Мобильные шаблоны лендинг пейдж – 10 методов оптимизации, выводы:
В отличие от традиционной лендинг пейдж, мобильная тактика должна сосредоточиться на простоте юзабилити (чтение / управление кликом), высокой производительности, минимальных и убедительных действиях и мобильных функциях (GeoIP / нажмите для вызова / и др.).
Многие улучшения, применяемые для мобильных устройств можно применить также и на своих традиционных целевых страницах.
Как обычно, проводите A/B тестирование, собирайте обратную связь от пользователей и старайтесь понять, что работает лучше для ваших пользователей.
Если у вас есть какие-либо замечания или вопросы, пожалуйста, напишите их в комментариях ниже. Удачи!
Comments