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

На основе материала 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 предлагает бесплатный инструмент, позволяющий протестировать «дружелюбие» вашего сайта по отношению к мобильным устройствам. Вы получите оценку вашей страницы и советы по улучшению.
Простота – залог успеха
К этому моменту вы уже должны понимать, что основной принцип при разработке дизайна страниц для мобильных устройств – минимализм. Все, что не является существенным, должно быть отброшено. А то что осталось должно быть простым и легким в использовании на планшете или телефоне.
Крупный размер шрифта. Вы когда-либо испытывали проблемы с чтением мелкого шрифта на экране вашего ноутбука? Экран смартфона примерно в пять раз меньше, поэтому сделайте ваши шрифты крупными и разборчивыми.
Белое поле. Чистый дизайн, имеющий большое количество пустых (белых) областей, упрощает восприятие основного содержимого страницы. Уберите все, что отвлекает, избавьтесь от беспорядка, и оставьте только самое важное.
Отдельностоящие ссылки. Далеко не каждого природа наградила изящными пальчиками подростка. Оставляйте достаточное пространство вокруг ссылок и кнопок, чтобы их было легко нажимать даже обладателям крупных пальцев.