Аналитика 510 0 27 марта, 2018

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

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

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

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

Плохой шрифт

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

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


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

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

oshibki mobilnoy versii sayta

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

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

oshibki mobilnoy versii sayta

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

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

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

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

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

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

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

 
Чтобы повысить конверсию, нужно максимально упростить процесс заказа для покупателя. Наверняка люди, которые пользуются мобильными устройствами, уже заполняли нужную вам информацию. Стандартные данные: ФИО, номер телефона, адрес проживания или 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.

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

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

oshibki mobilnoy versii sayta
 
У мобильной версии есть главное преимущество: она подстраивает элементы сайта под себя для удобного функционала и отображения на устройствах с разной диагональю. Вам не надо настраивать картинки или шрифт для планшетов или смартфонов. Ресурс перестроится сам.

Резюме


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