Мобильные версии страниц с прицелом на конверсию

Мобильные версии страниц с прицелом на конверсию

На основе материала 5 Hacks to Optimize Mobile Landing Pages for Conversion

Есть мнение, что к 2015 году количество пользователей, входящих в сеть через мобильные устройства, возрастет очень значительно. В России продажи смартфонов и планшетов радуют производителей и экспортеров. Так что лучше заранее подготовиться к тому, что ваш интернет-магазин будут изучать на маленьких экранах. Хотя изучать – не совсем верное слово. Мобильное устройство редко используется для ленивого интернет-серфинга. Чаще, подключаясь к сети со смартфона, пользователь имеет перед собой конкретную цель: получить ответы на вопросы, найти информацию. И если уж такой пользователь выражает своим поиском интерес к товарам вашего интернет-магазина, следует приложить максимум усилий к тому, чтобы сконвертировать его, перевести из рядов случайно заглянувших в ряды покупателей.

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

Предложение, стоимость, действие

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

  • Заголовок – 4 слова максимум
  • Описание – 2 строки максимум
  • Форма – 3 поля максимум
  • Кнопка – 1

Вертикаль

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

  • На самом верху – полоска заголовка, чтобы посетитель не забывал, куда он пришел и что тут можно сделать (оформить заказ). Если речь идет о странице категории «Распродажа», добавляйте это громкое слово в заголовок.
  • Следом – самая важная информация, описание ценности предложения, продающий фрагмент.
  • Далее – изображения, маленькие как по «весу», так и по размеру. Но при этом четкие, позволяющие увидеть детали. Естественно, с возможностью приближения, вызова укрупненной версии.
  • Под ними – действие, кнопка «В корзину». Следите за тем, чтобы она не упала «под разворот». Средний размер экрана массовых смартфонов – 3,5 дюйма, разрешение – 480 на 800.

Звонок с мобильной версии

Смартфон является телефоном, и смартфонов значительно больше, чем планшетных компьютеров (на данный момент). При помощи простого HTML-кода вы можете добавить кнопку, нажатие на которую приводит к набору номера. По данным Google (сайт нарушает закон РФ) такие кнопки увеличивают эффективность рекламных объявлений в среднем на 6–8%.

Попробуйте следующие идеи:

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

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

Скорость загрузки страниц

Мало кому нравится ждать, пока страница загрузится, даже если время ожидания не превышает нескольких секунд. Гарри Шум (Harry Shum), спец из Microsoft, опубликовал статью в New York Times, где он отмечает, что пользователи могут предпочесть сайт конкурента, если ваш загружается на 250 миллисекунд дольше, чем его. А это лишь четверть секунды. Поэтому важна каждая, даже самая незначительная деталь. Вот список вещей, которые нельзя использовать ни в коем случае:

  • Flash;
  • фреймы;
  • страницы размером более 20 Кб;
  • большое количество изображений или других объектов.

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

Простота – залог успеха

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

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

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

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

Автор: Vyacheslav Vityuk

Читайте также

20 марта / Комментарии

Товарная автоматизация для маркетплейса на 30+ брендов

G-shopping.ru – это российский маркетплейс современных товаров для красоты, здоровья и удобного отдыха. Маркетплейс работает одновременно как магазин оптовой и розничной торговли и продает товары напрямую от производителей. У компании также есть собственные производственные линии. Поэтому основным требованием при разработке программных продуктов была настройка плавного автоматизированного процесса загрузки больших каталогов товаров, сегментированных на категории, а также наличие инструментов для управления запасами. С такими задачами клиент обратился к нам, в Simtech Development

далее →

21 февраля / Комментарии

Перенос сайта на платформу InSales: выгоды и преимущества

От CMS зависит очень многое: функциональность сайта, стабильность его работы, удобство взаимодействия с пользователями. Однако сделать правильный выбор не так легко. В этом материале рассмотрим выгоды, преимущества платформы и 8 причин, чтобы перенести сайт на InSales.

далее →

6 декабря 2021 / Комментарии

Шесть историй о том, как облачный хостинг помог бизнесу вырасти

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

далее →

30 ноября 2021 / Комментарии

InSales – платформа управления онлайн-торговлей: преимущества, тарифы и планы по развитию

InSales – единый инструмент для всех каналов интернет-продаж, где можно создать сайт интернет-магазина, продавать на всех маркетплейсах, через социальные сети и мессенджеры. Платформа InSales обеспечивает полное техническое сопровождение продаж в e-commerce. Уже 13 лет компания помогает начинающим предпринимателям и офлайн-бизнесам продавать онлайн.

далее →

21 октября 2021 / Комментарии

В Google рассказали, как создать идеальное приложение для пользователя

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

далее →