RSS icon Telegram icon
2к+
Аналитика 0 1 800 27 мар, 2018

ТОП-10 ошибок в работе с мобильной версией сайта

Котаны, привет. Мобайл отхватил жирный кусок от всего пирога под названием Интернет-маркетинг, согласны? Многие компании, маркетологи, рекламодатели и т.д. поняли, что можно и нужно распространять рекламу в мобайл-пространстве и адаптировать сайты под экраны смартфонов.
ТОП-10 ошибок в работе с мобильной версией сайта
Больше половины пользователей Интернета заходят на сайты с мобильных устройств, и это если не учитывать такие ресурсы, как как Instagram, YouTube, Facebook и т.п. Если ваш сайт адаптирован под мобильные платформы, конверсия будет значительно выше. Но на пути к этому многие допускают ошибки, которые могут привести к обратному эффекту.

Некликабельные контактные номера

 
Пользователь смартфона должен иметь возможность связаться с вами вот прямо здесь и сейчас. Многие лишают этой возможности, размещая контактные номера в виде картинок, которые невозможно быстро скопировать и затем позвонить. Это неприемлемо даже в полных версиях сайтов.

Плохой шрифт

 
Вся важная информация, конечно, передается с помощью текста, и в мобильных версиях сайтов тоже есть свои параметры:
 
  • читабельный текст не менее 16px;
  • отступы от краев, сверху и снизу не менее 15px;
  • интервал между строк не менее 1px;
  • строгие обычные шрифты (Arial, sans и т.п.).
ТОП-10 ошибок в работе с мобильной версией сайта

Долгая загрузка страницы


Если страница загружается дольше 3-х секунд, это снижает конверсию.

Для справки:
 
  • задержка на 1 секунду будет стоить вам 3-7% конверсии;
  • 10 секунд будут стоить вам 20-40%.
Многие хотят сделать свою адаптивную страницу красивее, размещая «тяжелые»  картинки, что значительно снижает скорость загрузки. Проверить этот показатель помогут такие сервисы: WebPageTest, PinDom, Neustar, Google PageSpeed Insights.

ТОП-10 ошибок в работе с мобильной версией сайта

Отсутствие перехода к полной версии сайта, неправильный редирект

 
В редиректе тоже бывают ошибки. Пользователь, нужный ему товар в поисковой системе, должен в один клик переходить на сайт к выбранному товару.
 
Но бывает так, что система перенаправляет пользователя на главную страницу мобильной версии сайта, а не к товару, которым он заинтересовался. И пользователю приходиться вновь искать товар, но уже на мобильной версии сайта.

ТОП-10 ошибок в работе с мобильной версией сайта

Неудобные кнопки и ссылки для touch-screen

 
Если человек пользуется компьютерной мышью, ему будет несложно нажать даже на мелкую кнопку перехода или покупки. Но в смартфоне все усложняется. Иногда бывает, что человек, выбрав товар, кликает по кнопке «купить», но ничего не происходит. Приходиться очень хорошо прицеливаться, чтобы сделать покупку. И это очень неприятно для покупателя, что повышает риски его потери.
 
Существуют некоторые стандарты размеров для кликабельных элементов, которые вывели компании Microsoft и Apple:
 
  • минимальный — 26px;
  • оптимальный — 34px;
  • идеальный — 44px.

Слишком длинные формы заполнения

 
Всем знакомо заполнение разных форм и анкет в мобильных версиях сайтов. Особенно неудобно заполнять множество полей и прокручивать их. Поэтому желательно заменить прокрутку на пошаговое заполнение.

Невоспроизводимый контент, использование flash-контента

 
Такой контент может просто не работать, так как пользователю неудобно его воспринимать. В разных случаях, разные устройства могут не воспроизвести видео или важную анимацию. Чтобы не гадать, каким мобильным устройством пользуется потребитель, упростите подачу контента. Flash-анимацию меняйте на GIF. Добавляйте PNG, JPEG файлы и обычную текстовую информацию.
 
ТОП-10 ошибок в работе с мобильной версией сайта

Отсутствие автозаполнения полей

 
Чтобы повысить конверсию, нужно максимально упростить процесс заказа для покупателя. Наверняка люди, которые пользуются мобильными устройствами, уже заполняли нужную вам информацию. Стандартные данные: ФИО, номер телефона, адрес проживания или E-mail.
 
Автозаполнение значительно упрощает процесс заказа, автоматически подставляя нужную информацию в поля заполнения на сайте на основе информации, которую пользователь вводил раньше на похожих сайтах.
 
Для того, чтобы настроить автозаполнение, пропишите в HTML-код:
 
 

Поле Дата — input type=«date»
Поле Индекс, номер карты — input type=«text» pattern=«\d*»
Поле E-mail — input type=«email»
Поле Адрес — input type=«text»
Поле Телефон — input type=«tel»
Поле Кнопка «Отправить» — input type=«submit»

Отсутствие аналитики мобильной версии


Понятно, что отслеживать статистику просто нужно. Обычно при расчете конверсии мобильные и десктопные пользователи смешиваются, и вы не знаете, кто из них выполняет больше целевых действий. Это неправильно и неудобно.Если до вас не будет доходить такая информация, вы не сможете выявлять и изменять проблемные элементы.

Для получения такой информации отлично подходят сервисы Яндекс.Метрика и Google Analytics.

Отсутствие мобильной версии

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

ТОП-10 ошибок в работе с мобильной версией сайта
 
У мобильной версии есть главное преимущество: она подстраивает элементы сайта под себя для удобного функционала и отображения на устройствах с разной диагональю. Вам не надо настраивать картинки или шрифт для планшетов или смартфонов. Ресурс перестроится сам.

Резюме


Рынок мобильных устройств растет и развивается 17-мильными шагами, все больше пользователей предпочитают мобильные версии сайтов, так как часто находятся в обстановке, которая не позволяет воспользоваться компьютером или ноутбуком. Число таких пользователей, естественно, будет расти. Мы желаем вам всегда быть в тренде и не допускать ошибок при создании мобильных версий ваших сайтов.
Принеси в жертву лайк и шеринг во славу бога Рандома, и профитный конверт будет сопутствовать тебе всю неделю!

Трафик, котики, завод!

Комментарии