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

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

На основе материала 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

Подписаться на новости

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

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

Интернет-магазин: сами с усами?

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

Вопрос правильный и важный. Однако в большинстве случаев ответом на него будет: «Нет, не стоит». Иначе, разве было бы у веб-студий столько работы?!

далее →

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

Возможно ли «коробочное» решение в B2B? 11 ключевых отличий розничного интернет-магазина от B2B-портала

Когда  пишешь о различиях B2B и B2C сфер, то сами собой всплывают слова Льва Николаевича «Все счастливые семьи похожи друг на друга, каждая несчастливая семья несчастлива по-своему». Так же и в бизнесе: все розничные интернет-магазины похожи друг на друга, но каждый B2B-портал индивидуален.
Разница не очевидна на первый взгляд, поэтому многие компании соглашаются на «коробочное» решение. Почему готовая CMS подходит для розницы, но не подходит для B2B?

далее →

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

«Джентльменский набор»: что нельзя забыть при запуске интернет-магазина?

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

далее →

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

Заказ интернет-магазина: на чем можно сэкономить?

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

далее →

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

Создание интернет-магазина без лишних вложений: онлайн-конструктор + профессиональная CMS в одной «коробке»

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

далее →

X
Нажмите «Нравится»,
чтобы читать Shopolog.ru в Facebook