Армия покупателей, которая применяет носимые гаджеты для шопинга ежедневно, растет. На день написания этого материала она составляла больше половины всех потребителей интернет-магазинов. Настольные устройства с удобными большими экранами уступают пальму первенства маленьким собратьям. Однако процент мобильной конверсии существенно ниже. Качество мобильных одностраничников играет в процессе ее повышения первостепенную роль.
Какими свойствами должна обладать прибыльная мобильная посадочная страница:
Обращать на себя внимание.
Побуждать на совершение действия.
Иметь конкретные цели — продажа, регистрация, звонок, заполнение формы.
Если речь идет не просто о лендинге, а о его мобильной версии, то требование к тому, чтобы она была проста, понятна, и четко выражала ваше стремление, звучит особенно пронзительно.
Для того, чтобы показатель конверсии мобильного лендинга был равен или превышал показатели его настольного конкурента, следите за выполнением следующих требований.
Сегодня мало руководствоваться принципом «Mobile First», провозглашенному Google или следовать технологиям респонсивного веб-дизайна, когда происходит масштабирование интерфейса под устройство пользователя за счет media-queries, или модуля CSS3, позволяющего задавать разные стили, или даже таблицы стилей, в зависимости от разрешения экрана, его размеров и прочих характеристик.
Страница должна быть сделана специально для мобильных устройств.
В респонсивном дизайне все страницы имеют двойное назначение:
Для настольных устройств.
Для мобильной техники.
Респонсивная страница верстается на десктопе.
Но опыт мобильного поиска в корне отличается от настольного. Для достижения успеха нужно проводить настройку и оптимизацию сайта под каждый девайс, который будет применяться любым клиентом.
Разработчики сайта известной платежной системы создали приятный минималистичный одностраничник для настольных компьютеров.
Мобильный лендинг этой же компании еще более аскетичен и прост. Тем не менее здесь есть все, что нужно для полноценной работы: форма входа, главное меню. Акцент делается на двух видах сведений для разных типов посетителей: простых пользователей и представителей бизнеса.
Оба сайта хорошо смотрятся, но призваны выполнять разные миссии. Мобильная — для оперативного получения данных о возможностях компании. Настольная — для более скрупулезного изучения информации.
2. Добавьте возможность прямого телефонного звонка
Расположите в верхней части экрана, там где все привыкли видеть меню, каталог и часы работы, контактную информацию. Для мобильной страницы попросите дизайнера нарисовать большую яркую кнопку прямого звонка или заказ обратной связи.
Кнопка заказа звонка в верхней половине экрана существенно повышает конверсию. Наличие подобного элемента отвечает запросу мобильных посетителей на мгновенное получение информации и принятие решения здесь, сейчас, в эту секунду.
3. Добавьте элемент прокрутки
Будет лучше, если ваши мобильные лендинги не будут длиннее одного экрана. Но чаще всего это условие невыполнимо. Хочется донести до покупателей больше информации о товаре, ценах и способах доставки. Добавьте на экран управляющий элемент прокрутки или перехода к дополнительным сведениям. При нажатии на него к странице снизу подстраиваются дополнительные блоки. Пользователь сам принимает решение, совершать скроллинг вниз или ограничится теми данными, которые уже получил.
На мобильной странице клуба предпринимателей «Трансформатор» никто не принуждает посетителей крутить страницу вниз. Они сами принимают такое решение, если нуждаются в дополнительных данных.
Маркетологи заметили, что при добавлении элемента прокрутки, показатель отказов снижается на 35%.
4. Закрепите «подвал» и «хедер» страницы
Площади на мобильных экранах — на вес золота. Необходимо использовать их разумно и рационально. Но CTA, призыв к действию, навигационное меню, контактные данные и другие важные элементы должны быть на виду все время, которое пользователь проводит на сайте.
«Липкое» заглавие и «подвал» на четверть увеличивают скорость поиска информации. Закрепленное сверху «меню-гамбургер» — это тренд последних лет в мобильном дизайне.
«Гамбургер» и кнопка корзины неотступно следуют за клиентом, в какой бы части сайта он ни находился.
5. Удалите или уменьшите popup-окна
Если всплывающие окна занимают больше 20% площади мобильного экрана, Google перестает показывать такие сайты в поисковой выдаче. В то же время, попапы эффективны в деле привлечения потенциальных покупателей и подписчиков.
Кроме размера, обращайте внимание на простоту, минимум текстовых данных и доступность элементов закрытия — крестик.
За такое всплывающее окно, полностью перекрывающее все пространство сайта, Google пессимизирует сайт в выдаче. Необходимо как можно скорее исправить положение путем уменьшения popup-окна в несколько раз или его полного удаления.
6. Заказывайте короткие тексты
Не переносите на мобильные страницы весь текстовый контент настольной версии. Добавьте лаконичное цепкое коммерческое предложение и быстро переходите к сути.
Сократите текст на мобильной странице следующими способами:
Удалите все, что не повлияет на суть.
Добавьте в списки простые маркеры.
Сократите предложения за счет удаления эпитетов, усиливающих слов и вводных фраз.
Разбейте текст на короткие абзацы.
На этой странице много нечитабельного текста. Сокращение в 3-4 раза исправит ситуацию.
7. Уменьшите количество видео, и визуальных эффектов
Тяжелый мультимедиа контент требует от клиента особых условий: долгого времени загрузки и неограниченного трафика мобильного интернета.
Оптимизируйте изображения. Удалите или сократите количество видеороликов до минимума. Не включайте автоматическое воспроизведение.
Не захламляйте мобильный сайт видео, картинками и гифками.
На этом сайте совсем не используются ни изображения, ни видео — только текст. Сайт легкий, удобный, минималистичный. Работает быстро, не потребляет излишних ресурсов.
На этой странице включено автовоспроизведение видеофона. Это вызывает торможение и потребление трафика. Такое «поведение» сайта — не располагает к дальнейшему серфингу. Красота играет здесь последнюю роль.
8. Увеличьте скорость работы мобильного лендинга
Скорость загрузки не должна превышать 2 секунды. Те страницы, которые грузятся дольше этого времени, хуже ранжируются поисковыми системами. На медленных сайтах увеличиваются показатели отказа. Посетители становятся все более нетерпеливыми и не согласны ждать загрузки страниц слишком долго.
На день подготовки этого материала средняя скорость загрузки составляла 15 секунд. Это означает, что больше половины мобильных пользователей не дождались окончательной загрузки страницы и перешли на сайты конкурентов.
Основным камнем преткновения в проблеме низкой скорости мобильных сайтов становятся тяжелые изображения, видео, гифки, «красивые» фоны и другие медиа элементы. Следующими по степени воздействия на скорость являются медленные хостинг-планы. В стремлении сэкономить, собственники сайтов приобретают урезанные тарифные планы, скорость на которых оставляет желать много лучшего.
9. Верстайте в один столбец
Контент, разделенный на несколько колонок становится на мобильном экране нечитабельным. Многоколоночные сайты стремительно теряют свои позиции по сравнению с конкурентами, дизайн которых приведен к современным нормам.
Так выглядит мобильная страница администрации одного из южных городов РФ. Она практически нечитабельна. Получить информацию, используя мобильную технику, — нереально.
А это мобильный сайт администрации этого же края. Здесь хоть и нет дизайнерских изысков, но все удобно, доступно.
10. Используйте «Гамбургер-меню»
Практические полный отказ от мобильной навигации — это направление последнего времени в мобильном дизайне. Посетители, для которых мобильный серфинг — обычное дело, привыкли видеть три горизонтальные полоски в верхней части экрана. Они знают, что при тапе на них, откроется навигационное меню, в котором можно выбрать необходимый для дальнейшего перехода пункт.
В редких случаях, рядом с “гамбургер-меню” можно поставить самые важные навигационные ссылки.
11. Сократите формы
Заполнение форм на смартфонах — это, скорее, испытание, чем развлечение. Чтобы не мучить клиентов, сократите формы до минимума. Пусть в них будет не больше двух полей, а лучше одно.
Форма с одним полем — идеальна. Всю остальную информацию получите с клиента по телефону или при личной встрече.
Отважится заполнить до конца такую форму может только герой. Ему потребуется дополнительная скидка на услуги.
12. Увеличьте контрастность
Попросите своего дизайнера применить на мобильной странице контрастные сочетания цветов. Они привлекут больше внимания, повысят кликабельность элементов. На мобильных устройствах, которые «слепнут» при ярком дневном свете, они будут лучше видны.
Успех этой мобильной рекламе гарантирован. Дизайнер достиг высшей степени контраста, на который нельзя не обратить внимание.
На этом сайте все красные элементы сливаются воедино, а желтые вставки выполняют функцию «вырви глаз».
13. Добавьте воздушности
Пустое пространство на мобильной странице — это великолепно. С его помощью лендинги выглядят строго, современно. Их удобно читать. С ними удобно взаимодействовать. При воздушном дизайне исключены случайные тапы.
На этой странице пустое пространство не выглядит пустым. Легкий градиент гармонично встраивается в контекст лендинга, дополняя и усиливая его.
14. Располагайте призывы к действию как можно выше
Мобильные пользователи — это обычные люди, внимание которых приковывается к верхней части экрана. Расположите главный CTA, призыв к действию, как можно ближе к верхней части страницы.
Контрастный призыв к действию «Получить свою коробочку» не пропустит ни одна посетительница «Beautys Box». Но если даже она посчитает, что нажимать на эту кнопку преждевременно, при прокрутке на экран ниже, она встретит еще одну, но попроще. С текстом «Получить».
15. Проводите тесты
Это главный из всех пятнадцати советов. Проводите тестирование. Ничто больше не подарит вам столько информации, как хороший A/B-тест. Используйте его постоянно для улучшения лендинга, повышения процента конверсии, увеличения продаж. И все это малыми средствами и в короткие сроки.
