Продающий мобильный сайт. 11 советов от Clicktex.
Сегодня интернет переполнен предложениями и вопросами по созданию мобильной версии сайта. В основном, на рынке сложилось мнение, что мобильный сайт - это про адаптивность. Но какие еще задачи стоят перед его разработчиками? Что работает, а что не работает на мобильном сайте? Как повысить его конверсию? В этой статье мы собрали главные наши выводы, которые действительно помогут повысить мобильный статус вашей компании.
Какова ценность наших советов?
Мы можем гордиться тем, что стали первой компанией в мире, которая в 2014 году предложила рынку веб-сервис, нацеленный на увеличение конверсии сайтов за счет звонков со смартфонов. Тогда доля звонящих устройств в общем трафике коммерческих сайтов составляла всего 7%.С тех пор прошло 3 года. Мы развивали свой флагманский продукт и набирали опыт, изучая поведение посетителей на сайтах наших клиентов. Сегодня, когда мобильная аудитория в мире составляет уже более 50%, а нашими клиентами являются более 1000 российских компаний, мы решили выйти за рамки нашего продукта и опубликовать список рекомендаций, которые действительно увеличивают конверсию мобильного сайта.
Итак, по пунктам:
Номера телефонов конечных точек продаж должны быть размещены на видном месте. По возможности, на каждой странице.
Очевидное, но крайне важное правило. И оно справедливо практически для каждой отрасли бизнеса. Стоит отметить, что если вы являетесь сетевой компанией, то вам необходимо разместить номера всех конечных точек или офисов, чтобы не заставлять мобильного пользователя ожидать на общей линии, находясь за рулем, на морозе, эскалаторе в метро или еще где-нибудь. Очень вероятно, что клиента нужно будет переключить на конкретную точку, чтобы там ему объяснили нюансы проезда, рассказали о текущей ситуации и т.п. Звонок может и не сорваться при переводе, но в любом случае клиенту придется ждать ответа от ваших сотрудников дважды: один раз на общей линии, и второй раз при переводе.
В панели Clicktex мы реализовали поддержку филиалов с помощью выпадающего меню с различными уровнями вложенности.
На некоторых сайтах были замечены удобные перечни номеров каждой точки. Это - тоже хороший вариант, но если точек не более семи. Если ваша сеть разрослась обширнее, имеет смысл сделать отдельную страницу с номерами телефонов и дополнительной информацией о каждом офисе, доступную по кнопке "Позвонить". Саму кнопку разместите на главной странице. В верхней части страницы с перечнем офисов можно добавить выпадающий список, фильтрующий телефоны по городам.
Мы пошли еще дальше, и отображаем конкретные наборы офисов в выпадающем меню нашей панели в зависимости от геолокации посетителя сайта. Если вы представляете федеральную сеть, то наверняка уже используете какой-либо сервис определения региона посетителя, и сможете реализовать такой функционал без труда.
Выбирайте ваше главное предложение мобильным пользователям
Сфокусируйте мобильного пользователя на одном, но самом интересном своем предложении. Поймите, он не зашел изучать ваш сайт. С вероятностью 80% он уже что-то решил для себя, и желает реализовать свое намерение.
Считаете важным рассказать посетителю о калорийности ваших блюд в меню, показать калькулятор кредитования из 80-пунктов или ознакомить клиента со всеми нюансами договора? Cделайте ссылку "Список услуг", "Меню ресторана" или "Условия по кредиту". Разместите эту ссылку уже после типовых функциональных кнопок. Возможно, человек просто хочет позвонить в одно из отделений вашего банка, заказать столик в уже известном ему ресторане, срочно ищет где поблизости напечатать визитки или купить шнурки для ботинок.
По нашему опыту, самыми конверсионными действиями на мобильных сайтах являются звонки и клики на специальные акции. Если с виджета прямого звонка мы в свое время начинали развитие продукта, то к системе промо-информеров Clicktex SmartHunter для смартфонов мы пришли совсем недавно. У нас это работает так: вы создаете перечень объявлений с актуальными специальными акциями, а мы отображаем эти объявления "барабанным методом", то есть каждому посетителю показываем не более одного объявления за один визит в сутки. При этом, каждое объявление отображается каждому клиенту только один раз. Так продолжается до тех пор, пока все ваши предложения не будут показаны всем посетителям. Самостоятельно такую систему сделать не просто, но что-то подобное, мы уверены, у вас получится. Главное, следите за тем, чтобы информация об акции прекрасно смотрелась на смартфоне, была снабжена небольшой картинкой и кратким пояснением.
Адаптируйте схему проезда к просмотру на смартфоне
Посмотрите, как выглядит схема проезда на вашем сайте, если открыть ее на смартфоне. На сайтах часто установлены плагины с Google- или Яндекс-картами в специальных фреймах. Это удобно и красиво выглядит на компьютере, но зачастую совершенно не "юзабельно" на смартфонах.
Для панели Clicktex мы написали систему, открывающую любимое приложение навигатора на смартфоне клиента, и автоматически прокладывающую маршрут до выбранного офиса продаж. Таким обзаром, клиент сразу получает информацию о дальности и длительности маршрута с учетом транспортной ситуации. Причем, если компания федеральная, мы предусмотрели автоматическую фильтрацию выбора точек в зависимости от местоположения посетителя. Если вы не клиент Clicktex, можете сделать это проще, например, адаптивной картинкой.
Проверяйте, как выглядят подключенные вами виджеты на смартфонах
Часто бывает, что сервисы онлайн-чатов и обратных звонков неправильно ведут себя на смартфонах, мешая нормальному просмотру сайта.
В Clicktex мы предусмотрели функцию очистки экрана смартфона от таких виджетов, и лаконичную интеграцию их функционала в панель. Если используемый вами виджет плохо работает на смартфонах, а панели Clicktex на вашем сайте нет, поищите функцию отключения виджета на смартфонах в его настройках. Если такой функции нет, попробуйте заблокировать его самостоятельно с помощью CSS или условий на стороне сервера по правилу User Agent. Если сомневаетесь, что сделаете все правильно, лучше отключите такой виджет, чтобы не терять клиентов.
Например, на сайте одного из автодилеров премиум класса, отображается 3 кнопки разных сервисов одновременно. Причем, одна из них разъезжается на весь экран при попытке масштабирования сайта. Есть еще крупная сеть фитнес-центров с такой же разъезжающейся кнопкой. Важно понимать, что разъезжающийся при масштабировании виджет препятствует просмотру сайта вообще.
Если вы отключили возможность масштабирования сайта, проверьте как это работает на Safari Mobile на iPhone.
Прямой звонок приоритетнее обратного
В последнее время сервисы обратного звонка получили очень широкое распространение в России. Они воспринимаются буквально как "серебряная пуля" повышения конверсии.
По нашим исследованиям, функция прямого звонка работает для мобильной аудитории значительно лучше, чем функция обратного. Обратный звонок может быть дополнительным функционалом мобильной версии, но никак не первостепенным.
Если вы все желаете прерывать сеанс пользователя внезапным окном с формой ввода номера телефона, проверьте как она выглядит на смартфоне, и какая клавиатура открывается по умолчанию. Лучше всего для проверки использовать iPhone 5 в горизонтальной ориентации.
Если ваш сайт отправляет письма, проверьте их на смартфоне
Адапативные шаблоны электронных писем вы можете найди здесь:
http://zurb.com/playground/responsive-email-templates
https://colorlib.com/wp/responsive-html-email-templates
Проверьте ваш сайт в сложных условиях
Чтобы лучше понимать мобильного посетителя, попробуйте открыть свой сайт на ходу, когда вы в дороге или в любой сложной ситуации. Смоделируйте реальный жизненный кейс и помните, что доля смартфонов в общем количестве посещений веб-сайтов уже превысила 50%.
Проверьте, как работают всплывающие окна на сайте в горизонтальной ориентации смартфона. Лучше всего для проверки использовать iPhone 5.
Для контроля скорости работы сайта вы можете воспользоваться этими сервисами:
https://developers.google.com/speed/pagespeed/insights/
https://gtmetrix.com
Регулярно проверяйте работоспособность вашего мобильного сайта
Браузеры на смартфонах обновляются очень часто. Нам приходится корректировать работу системы в среднем раз в месяц из-за обновлений ПО на смартфонах посетителей. Функционал, работающий сегодня отлично, завтра может исчезнуть с сайта вовсе из-за нововведения какой-нибудь панели с быстрыми ссылками, скажем, в Facebook Browser или Google Search App. Будет не здорово, если таким исчезнувшим блоком окажется корзина с заказами или навигационное меню сайта.
Также мы часто наблюдаем, как на предыдущих версиях Safari у клиентов не работают формы заказа, не говоря уже об экзотических браузерах. Если раньше вы бы теряли 1-2% заказов в такой ситуации, то теперь, когда мобильный трафик вырос, эта цифра может увеличиться до внушительных 10-20%.
Дело в том, что отладка веб-сайта под смартфоны технически производится сложнее, чем под ПК. Разработчики часто ленятся, и ограничиваются проверкой внешнего вида сайта, имитируя экран смартфона на своих рабочих станциях. Если вы не считаете свой ИТ-отдел образцом для подражания, попросите веб-мастера добавить на сайт следующий код сразу после открывающего тега <body>:<script type="text/javascript"> window.onerror = function(msg, url, linenumber) { alert('Error message: '+msg+'\nURL: '+url+'\nLine Number: '+linenumber); return true; } </script>
После того, как код будет добавлен, зайдите на сайт со старенького iPhone или iPad, используя браузер Safari. Походите по продающим страницам и убедитесь в отсутствии сообщений об ошибках Javascript. Именно из-за их наличия на сайте может не работать конверсионный функционал.
Теперь переходим к техническим деталям. Если вы не обладаете специальными знаниями, используйте это как рекомендации для веб-мастера.
Все телефоны на сайте должны быть кликабельны. На всех мобильных платформах.
Мы знаем случаи, когда крупнейшие российские банки с сотнями ИТ-специалистов в штате были уверены, что у них идеальный мобильный сайт. Простая проверка показала, что в браузере Google Chrome на iPhone размещенные номера телефонов службы поддержки не набирались при нажатии. Другой пример - один из дилеров самого престижного серийного автомобиля отображал сервисный номер, который было невозможно набрать с iPhone или Android-смартфона.
Почему это так важно? Дело в том, что самое популярное целевое действие на среднем мобильном сайте - звонок. Некоторые распространенные мобильные платформы не позволяют пользователю внести изменения в номер телефона после того, как он был открыт в номеронабирателе. К слову, последняя версия iOS позволяет это делать, но большинство пользователей не знает об этом, так как отталкиваются от возможностей старых версий. Таким образом, чтобы позвонить по телефону с сайта, пользователь должен сначала скопировать номер телефона, потом открыть "Блокнот", вставить его туда, отредактировать (например, добавить/исправить код страны и города), после чего снова скопировать его, вставить в номеронабиратель, и, о чудо, совершить вызов.
Clicktex предоставляет функционал автоматической адаптации всех телефонных номеров к любым версиям браузеров. Происходит это сразу после установки кода Clicktex на сайт и не требует какой-либо оплаты. Для тех, кто желает решить эту задачу вручную, приводим несколько приемов:
Добавьте в заголовок шаблона всех страниц сайта мета тег
<meta name="format-detection" content="telephone=no">
Оберните каждый размещаемый на сайте номер в тег ссылки
<a href="tel:+711100000000">(111) 000-0000</a>,
где в качестве параметра "tel:" укажите вместо +711100000000 номер своей компании в международном формате без пробелов и тире. Вместо "(111) 000-0000" внутри ссылки вы можете написать номер в свободном формате.
Если вы используете call-tracking, проверьте как нажимаются номера телефонов как с ним, так и без него.
Разумно подходите к вопросу отключения функции масштабирования сайта
Отключить возможность масштабирования сайта посетителем привычными жестами можно с помощью мета тега viewport, расположив его внутри заголовка <head></head> всех страниц сайта.
Вот так выглядит комбинация параметров viewport, запрещающая масштабировать сайт:
<meta name="viewport" content="initial-scale=1,minimum-scale=1,maximum-scale=1,width=device-width,user-scalable=no">
Делайте это только в том случае, если уверены, что весь текст достаточно крупный, а сайт не вылезает за пределы экрана смартфона ни при каких обстоятельствах.
Если ваш сайт, открытый на смартфоне, чем-то напоминает изображение выше, вы можете ограничить максимально допустимое увеличение сайта с помощью другой комбинации уже знакомого нам мета тега viewport:
<meta name="viewport" content="maximum-scale=2">,
где maximum-scale=2, максимально допустимый коэффициент увеличения сайта. Такая комбинация параметров, как правило, помогает решить большинство проблем.
Хорошим приемом может быть также установка изначальной ширины сайта на экране смартфона. Это достигается в помощью параметра width. Пример ниже устанавливает ширину сайта в 600 пикселей.
<meta name="viewport" content="width=600">
Важно понимать, что вы не можете добавить несколько мета тегов viewport на свой сайт. Вам нужно править скомпоновать один единственный viewport. Подробную инструкцию по работе с этим мета тегом можно посмотреть здесь:
http://html5.by/blog/viewport-meta-tag/
Настройте заголовок сайта правильно
Помимо упомянутых мета тегов viewport и format-detection, в заголовке <head> сайта должны быть указаны следующие параметры:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="msthemecompatible" content="no">
<meta http-equiv="cleartype" content="on">
<meta name="robots" content="all">
<meta name="author" content="Ваш сайт">
<meta name="copyright" content="Ваша компания">
<meta name="keywords" content="Ключевые слова">
<meta name="description" content="Описание">
<meta name="HandheldFriendly" content="True">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta property="og:type" content="company">
<meta property="og:site_name" content="Ваша компания">
<meta property="og:title" content="Ваш бренд">
<meta property="og:image" content="Файл картинки">
<meta property="og:url" content="Ваш сайт">
<meta property="og:description" content="Описание">
<meta property="fb:app_id" content="№ Facebook SDK">
<meta property="twitter:description" content="Описание"><link rel="shortcut icon" type="image/ico" href="favicon.ico">
<link rel="icon" type="image/ico" href="favicon.ico">
<link rel="apple-touch-icon" type="image/png" href="Файл картинки">
<link rel="yandex-tableau-widget" href="/public/js/manifest.json">
Также не забудьте добавить правильный указатель <!DOCTYPE html> (для сайтов на HTML5) и указать языковую версию тега <html lang="ru-RU">.
Нам будет действительно приятно, если вы все же решите подключить панель Clicktex или систему промо-информеров Clicktex SmartHunter к своему сайту. Мы очень хотим, чтобы мобильные сайты были эффективными и удобными.
Комментарии
Отправить комментарий