Содержание
Процент мобильного трафика уже давно опередил десктопный. Однако над мобильной версией сайта мало кто работает. В первую очередь разрабатывают десктопную версию, а мобильную после — «как получиться». И уж точно никто не вымеряет и не работает над увеличением мобильной конверсии. Общая тенденция идет к тому, что мобильный траффик растёт, а мобильная конверсия падает.
⠀
Поэтому, когда мы приступаем к новому проекту, разрабатываем параллельно и мобильную и десктопную версию сайта, для того чтобы проработать все элементы на обоих вариантах. В этой статье хочу поделиться 3 фишками, которые гарантированно позволяют повысить конверсию мобильной версии сайта.
⠀
Проверьте свой сайт и внедрите, если не используете:
-
Телефон должен быть кликабельным. До сих пор забывают сделать телефон ссылкой, хотя это пожалуй главное действие, которое должен совершить посетитель со смартфона. Не заставляйте посетителя перепечатывать цифры, что крайне неудобно и на этом этапе может отпасть часть возможных клиентов.
Кнопки действий. Если посетитель заходит на Ваш сайт со смартфона, он хочет либо позвонить, либо узнать как доехать, либо записаться/забронировать/заказать. Для этого мы закрепляем 2 кнопки в нижней части сайта с самыми важными действиями для конкретного сайта, которые преследуют посетителя на всех страницах.
Закрепленные футер и меню. Особенно это касается длинных страниц и лендингов. Не заставляйте посетителя скролом возвращаться до верхней части сайта, чтобы перейти на другую страницу. Меню всегда должно быть в видимой части экрана. Закрепленное меню заметно ускоряет навигацию по сайту.
Надеюсь эти 3 фишки позволят увеличить конверсию Вашего сайта. Внедряйте и тестируйте.
Конверсия мобильных лендингов как российский футбол: команда есть, побед нет. Все маркетологи признают, что покупать со смартфонов стали больше и чаще, но создавать адаптированные версии сайтов никто не спешит. А у тех, кто делает, получается как-то не очень.
В помощь — 4 фишки, которые помогут «разогнать» мобильную конверсию.
Что интересно: мобильный трафик растет с каждым днем, а мобильная конверсия падает. Переломный момент пришелся на 2015 год — теперь 60% всего трафика приходится именно на мобильные устройства.
По Рунету мы не нашли актуальных данных, а «за бугром» вот такие циферки (США, 2014 год):
Фоточки, карты, прогноз погоды, онлайн-игры, социальные сети, здоровье, новости — люди поглощают контент, лежа на диванах с мобильниками в руках.
При этом посадочные страницы для них можно оптимизировать с помощью 4 простых приемов:
Фишка номер раз: click-to-call
Все еще верите, что адаптивный дизайн поможет разогнать конверсию до 400%? Ха-ха. Совсем наоборот, особенно если вы фанат сплит-тестов. Вы просто погрязнете в тестах. Запомните: мобильные пользователи не хотят ждать. Все решает действие здесь и сейчас.
Как это сделать? Используйте click-to-call (быстрый звонок). Раз уж у человека мобильник в руках, значит, он готов использовать его по прямому назначению, то есть, звонить. Исследования Ipsos (международная аналитическая компания) и Google показали: 1 500 из 3 000 опрошенных мобильных пользователей предпочли сделать звонок, а не заполнять лид-форму после ознакомления с УТП. Продолжительность звонков от 30 секунд до 6 минут.
Самые популярные «телефонные» действия: уточнить время работы, забронировать и разместить заказ. В данном случае телефонный звонок нужен пользователю для закрытия сделки.
Как это может выглядеть в выдаче:
Сlick-to-call встроен в AdWords, в органической выдаче.
Как это часто бывает на самом деле:
Заказать пиццу в течение минуты не получится, придется лезть на сайт, и еще неизвестно, оптимизирован ли он под мобильный гаджет. Кстати, мобильные пользователи условно делятся на две группы. Это болтуны, которым лень читать информацию и проще позвонить для уточнения деталей. И «кнопкотыки» — им проще «накатать простыню» и заполнить десяток форм, лишь бы не звонить никуда.
Google утверждает, что click-to-call увеличивает CTR на 8%.
На следующем скриншоте пример от американского автостраховщика Esurance. Скромная кнопка click-to-call помогла увеличить количество звонков на 200% и сократить рекламный бюджет на 30%.
Автодилеры из String Automotive подняли конверсию лендинга на 200%. Опять же, с помощью click-to-call:
Кстати. Работающий код для кликабельной ссылки:
Фишка номер два: Click-to-Scroll
Итак, разобрались с кнопкой click-to-call, давайте посмотрим, что должно быть под сгибом. А под сгибом должна быть дополнительная информация. Вернемся к примеру String Automotive. Понятно, что пользователи приходят на сайт не просто так, а с конкретной целью. «Добить» их или направить поможет функция click-to-Scroll. Здесь мы видим грамотное использование оставшегося места:
«Посмотреть каталог»; «Часы работы и местонахождение».
Эти кнопки можно было разместить и на других страницах, однако зачем гонять пользователей по сайту в поисках информации? С помощью Click-to-Scroll можно мгновенно доставить посетителей в нужное место. Таким образом String Automotive уменьшили показатель отказов на 37%.
Фишка номер три: закрепляйте футер и главное меню
Опросы журнала Smashing Magazine показали, что «липкие» футер и меню на 22% ускоряют навигацию по сайту. Все участники исследования подтвердили, что предпочитают именно такое решение.
Фишка номер четыре: мобильные поп-апы (всплывающие окна)
Поп-апы ассоциируются со сбором почты, и что греха таить, со спамом. Главное — знать меру и просить контакты в нужное время и в нужном месте. Когда пользователь провел достаточное количество времени и призыв позвонить, например, будет «в тему». Ну, и про «плюшки» не забывайте, если собираете email-базу.
Вместо заключения
Разумеется, все советы необходимо тестировать, ибо нет единых рецептов для всех. Главное — это понимание зачем и в какой момент пользователи приходят на вашу мобильную страницу. Что они ищут, какую конкретно информацию? Давайте ее без лишних заморочок: скорости в мобайле быстрее. Не понятно, не удобно — все, ушел потенциальный покупатель. Выводы делайте сами.
Техническая сторона
1. Проверьте скорость загрузки. Желательно, чтобы страница грузилась менее 1 секунды, максимум 3 секунды.
Как проверять? Вопреки распространенному мнению, Google PageSpeed Insights не измеряет скорость загрузки — вы получите только рекомендации по ее улучшению. Для проверки скорости существуют GTMetrix или Pingdom Tools.
Как повышать? Используйте Accelerated Mobile Pages от Google, например. Он использует в 10 раз меньше данных и грузит страницы до 4-х раз быстрее. Скорость реакции на мобильном устройстве в 5 раз лучше привычной нам, благодаря чему скорость загрузки менее секунды становится вполне реальной.
2. Удостоверьтесь, что файл robots.txt дает поисковым роботам доступ к картинкам, файлам -js и -css. Зайдите в Google Webmaster, выберите сайт и в разделе “Сканирование” выберите “Просмотреть как Googlebot”. После этого нажмите “Получить и отобразить” и сверьте изображения на сайте с теми, которые видит робот. Если картинки совпадают — все в порядке.
3. Бывает, что при переадресации выскакивает ошибка 404 или пользователь попадает в совсем другой раздел. Проверьте переход из полной версии сайта (site.ru) на мобильную на поддомене (m.site.ru) – ссылка должна вести на страницу того же товара/раздела.
4. Чтобы не запутать поисковых роботов и не полететь вниз в выдаче, на главном сайте (в десктопной версии) в хедере поставьте тег alternate. Если робот придет и увидит 2 одинаковых текста на разных источниках, то посчитает их неуникальными. Это грозит проблемой с оптимизацией. Тег alternate убирает конфликт: если его поставить, одна страница будет главной, а другие — ее производными.
5. Для мобильной версии действуют правила SEO: теги, мета-теги, подписи картинок важны. Проверьте их правильное написание (латинский алфавит, до 70 символов), сократите адреса страниц (например, site.ru/ru/razdel/podrazdel/kontent1 можно превратить в site.ru/ru/kontent1) и ссылки в тексте — они будут восприниматься легче.
6. Уменьшайте размер картинок – на маленьком экране разница не заметна, зато скорость загрузки страницы ощутимо повысится. Вполне хватит 800 пикселей по ширине. Кроме того, рекомендуется сжимать картинки, чтобы снизить их вес, сохраняя разрешение. На качестве это отразится, но незначительно — будьте уверены, пользователи ничего не заметят. Зато страница будет грузиться быстрее. Работать с картинками легко — на помощь придут бесплатные онлайн-сервисы http://resizepiconline.com/, http://optimizilla.com/ru/, http://compressjpeg.com/ru/ и аналоги.
Дизайн и юзабилити
7. Выравнивайте контент по левой стороне. Исключение можно сделать для заголовка или подзаголовков — их можно выровнять по центру. Страница или блок должны полностью помещаться на один экран по ширине и высоте. Избегайте скролла прокрутки по горизонтали — бойтесь его, как огня. Но…
8. Задействуйте все пространство экрана — не оставляя пустых полей по сторонам.
9. Используйте локализованный поиск и гео-таргетинг, чтобы точнее отвечать на запросы пользователей — автоматически предлагать доступные способы доставки и заполнять адрес, рассчитывать расстояние и время прибытия, и пр. Особенно актуально это для сфер, где пользователи часто ищут что-то поблизости: рестораны, автомойки и СТО, автозаправки, метро, банки и банкоматы, гостиницы и отели, кинотеатры, салоны красоты, аптеки, круглосуточные заведения (от кафе до супермаркетов).
Зарегистрируйтесь в Google+, чтобы сайт участвовал в органическом поиске или поиске на карте, и при входе на сайт определяйте местонахождение пользователя. У Яндекса и Google есть руководства, как настроить гео-таргетинг.
10. Типографика важна. Подбирая размер и тип шрифта, проверяйте его читабельность на смартфоне. Размещайте текст одной колонкой. Если это лендинг — уместно максимум 2 пункта в ряд (в блоках с преимуществами, например). Но лучше все же размещать их в один ряд вертикально.
Пример оформления блока с преимуществами в шаблоне Flexbe
11. Обязательное требование: размер кнопок — достаточно большой, чтобы любой пользователь их увидел и смог нажать, попав куда надо. В руководстве для разработчиков Android указаны оптимальные размеры кнопок и других кликабельных объектов: 7-10 мм независимо от размера экрана. Учитывайте также, что мобильные запросы отличаются от десктопных, и люди предпочитают не вводить большое количество информации. Поэтому сократите число полей до минимума, но обязательно оставьте на видном месте кнопки для звонка, sms или прямой связи через соцсеть (например, Facebook Messenger).
Такая форма — головная боль для мобильного пользователя
12. Сделайте номера телефонов кликабельными или оформите в виде кнопки “Позвонить”. Зачем? Представьте, что вы нашли СТО и хотите связаться с ним. Нажимаете на номер — приложение перезагружается и… ничего не происходит. Тут варианта 2: или выписывать номер и затем позвонить, или найти другое СТО. Или совсем об этом забыть, если ситуация не критична. Не теряйте клиентов — это одна из самых распространенных ошибок.
13. Расстояние между ссылками сделайте достаточным для того, чтобы переходить по нужной, не промахиваясь. Для постоянно используемых это 7 мм, редко используемых — 5 мм.
14. Лишний контент уберите, упростите или просто скройте (хотя последнее Google не приветствует). Оставьте только то, что помогает покупателям принять решение. Для товара — фотографии, характеристики, цену и отзывы. Если это контентный проект — оставляйте, например, только название статьи и данные о просмотрах и комментариях, плюс дату публикации. Внизу экрана можно закрепить кнопки популярных соцсетей. Так на экране смартфона поместится больше информации.
15. Уберите анимацию. Баннеры и красивая демонстрация товаров снижают скорость загрузки. Кроме того, на небольшом дисплее смартфона анимация смотрится не так эффектно, как на мониторе.
16. Flash уходит в прошлое. Используйте для вставки видео HTML5 — он обеспечивает лучшую скорость загрузки, очень удобен и к тому же потребляет меньше энергии аккумулятора.
17. Уберите всплывающие окна (popup). С января 2017 года Google понижает в выдаче сайты с назойливой межстраничной рекламой и всплывающими окнами. Подробнее об этом можно прочитать здесь.
18. Оставьте возможность смены языка (если необходимо) и перехода на полную версию сайта.
19. “Линии прогресса” и другие подобные фишки оставьте для основной версии сайта. Для мобильной используйте простую навигацию и ее элементы тоже упростите.
В мобильной версии “линия прогресса” не всегда уместна
20. В подвале десктопной версии обычно находится много информации — раздел “О нас”, ссылка на страницу с вакансиями, соглашение о конфиденциальности, разделы с акциями и многое другое. У каждого сайта этот набор свой. В мобильной версии оставляйте внизу только релевантное содержимое: ссылки на акции, контакты, способы оплаты, популярные товары.
21. Используйте глобальную навигацию. Оставляйте ссылки на главные разделы сайта, показывайте цепочку вместе со страницей, на которой находится посетитель. Эти ссылки будут выполнять роль “хлебных крошек” и не дадут заблудиться на сайте.
Подведем черту
Большинство пунктов известны почти всем, но это не мешает им оставаться самыми распространенными ошибками в мобильной версии сайта. Главное — повысить скорость загрузки страницы, этот параметр важен как для ранжирования, так и для пользователей. Используйте современные технологии для мобильной выдачи, обеспечьте людям удобную навигацию и корректное отображение страницы на дисплее — и это повысит отдачу от мобильной версии вашего сайта.