10 ошибок при разработке мобильной версии сайта

Мобильный траффик неумолимо растет. Компании, которые игнорируют этот факт или уделяют мобильной версии недостаточно внимания, уже потеряли каждого 4-го или 5-го посетителя. Отпугнуть привередливого клиента может любая мелочь (например, ошибка в дизайне и неточность верстки). Однако есть десять промахов, которые не просто отпугивают, а убивают напрочь желание пользоваться сервисом.

1.До неудобства большие формы захвата

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

Как поступить? Мобильная версия сайта обязана оснащаться удобной формой заказа. Для этого разбейте большую заявку на короткие шаги с несколькими действиями и крупной кнопкой для продолжения операции. Если посетитель заполнит только первое поле и уйдет, у вас все равно останутся его данные.

2.Номер, который невозможно набрать

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

3.Flash и контент, который не воспроизводится на мобильном устройстве

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

4.Неадаптированные виджеты и поп-апы

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

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

Мобильная версия дает владельцу ресурса несколько важных преимуществ:

• предпочтение в выдаче поисковиков – система Google помечает такие сайты «Mobile friendly»; • всестороннее удобство – возможность пользоваться вашим сайтом с любого гаджета.

Но для этого разработка должна адекватно функционировать на всех существующих гаджетах вне зависимости от величины экрана, платформы разработчика или модели браузера.

6. Неразборчивый текст

Шрифт должен быть крупным, чтобы информация воспринималась легко. Важные моменты выделяются шрифтом от 16px. Следите за тем, чтобы текст не сливался в единое полотно и не прилипал к краям экрана. Для этого межстрочные интервалы и отступы по бокам должны быть достаточно большими.

7. Кнопки и ссылки, которые плохо совмещаются с тач-скрин

Тач-кнопка должна быть достаточно большой, чтобы ею было удобно воспользоваться на смартфоне. Разработчики Apple рекомендуют делать кнопки «Оформить покупку», «Купить» не менее 44px на 44px. Сотрудники Microsoft называют приемлемым размер 34px, а минимальным – 26px. В целом тач-элемент не стоит делать меньше кончика указательного пальца.

8. Длительная загрузка

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

Исследования показывают: задержка длиною в 1 секунду равна потере 3-7% конверсии сайта, 10секунд задержки – это потеря 20-40% конверсии.

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

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

Протестировать оперативность ресурса можно посредством Айри.рф, WebPageTest или Pingdom.

9. Неправильный редирект

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

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

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

Автозаполнение позволяет уменьшить сопротивление и увеличить конверсию. Пользователи привыкают к упрощенной схеме обращения, и ее отсутствие может вызвать отток посетителей.

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

Возможно, вас заинтересует наша услуга контекстная реклама в Минске.