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

cpalil

ТОП-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-мильными шагами, все больше пользователей предпочитают мобильные версии сайтов, так как часто находятся в обстановке, которая не позволяет воспользоваться компьютером или ноутбуком. Число таких пользователей, естественно, будет расти. Мы желаем вам всегда быть в тренде и не допускать ошибок при создании мобильных версий ваших сайтов.

Так же рекомендуем к прочтению:

Понравилась статья? Поделиться с друзьями:
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: