Главное Свежее Вакансии Образование
39 878 47 В избр. Сохранено
Авторизуйтесь
Вход с паролем

10 ошибок в мобильной версии сайта, которые убивают конверсию

​Мобильный трафик растёт и занимает, в среднем, уже около 25% от всех посещений. Если раньше потеря этих посетителей была незначительной, то сейчас это каждый 4 или 5 пользователь. Собрали топ 10 убийц конверсии мобильного трафика.

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

1. Слишком длинные формы захвата.

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

На примере видно, насколько грамотно поступили ребята из Тинькоф банка, которые разбили длинную заявку "на кредит" на шаги. Заполнив всего 4 поля, посетитель станет лидом и, если он отвалится на втором шаге, то контакты его останутся.

b_56f930856cd72.jpg 2. Номер телефона компании указан без +7 или в виде картинки.

Это просто адский ад! Есть особое место в аду для таких сайтов, когда вместо 1 клика требуется запоминать номер и потом самостоятельно его вводить. Чёрт! А если я еду за рулем?

b_56f93086346a8.jpg3. Использование Flash на сайте или контент, который нельзя воспроизвести на мобильном.

Желательно для мобильной версии полностью исключить такой контент. Он не будет нормально работать и вызовет много трудностей у посетителей. Видео не пойдет, игра не заиграет, а особая анимация в меню разъест мозг. Яблочные устройства ios вообще не поддерживают Flash анимацию. Удаляйте лишнее, зачем усложнять просмотр.

b_56f93086ccbf9.jpg4. Виджеты и поп-апы на сайте, которые не адаптированы под мобильные.

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

Как правильно проверять виджет и на что обратить внимание, смотрите в коротком видео-обзоре:5. Отсутствие адаптивной мобильной версии. Кроссбраузерности и кроссплатформенности.

Какие плюсы от наличия мобильной версии?

Во-первых, поисковые системы отдают предпочтения в выдаче. Так google помечает сайты отметкой "Mobile friendly":

b_56f930878a612.jpg

Во-вторых, пользователям удобно просматривать ваш сайт с разных устройств.

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

Есть хороший сервис quirktools.com для проверки сайта на разных устройствах.

Например, для просмотра на маленьких и больших экранах. Заметьте, что это не модуляция мобильного телефона, а просто подгонка под размер его экрана.

b_56f930885f6f7.jpg

Конечно, чтобы точно убедиться в правильности, стоит проверить это в живую на настоящих устройствах:

b_56f93088eaa13.jpg

Проверить мобильную версию сайта на удобство и скорость загрузки можно через Google сервис. Рекомендации по скорости можно соблюдать до оценки 90, дальше они теряют актуальность.

b_56f9308978991.jpg6. Слишком мелкий шрифт и отсутствие отступов.

Важный текст не должен быть менее 16px и убедитесь, что межстрочный интервал не превращает текст в единую кашу.

b_56f923b4792ee.jpg

Не забудьте про отступы. Минимум 15px от края экрана. Часто, контент прилипает к самому краю экрана, что портит внешний вид:

b_56f923c25cf21.jpg7. Кнопки и ссылки, которые не дружат с тач-скрином.

Кнопка "купить" или "оставить заявку" должна быть не только заметной, но и удобной для тач-касания пальцем.

b_56f923d2709ca.jpg

Хотя пальцы у всех разные, есть рекомендации от производителей. Например, компания Apple призывает по iPhone Human Interface Guidelines использовать размер тач-элемента минимум 44px на 44px. Microsoft гайдлайн рекомендует размер 34px, а минимально допустимый 26px. Полезно почитать статью Идеальный дизайн для тач-скринов. Правда, статья на английском языке, но смысл понять можно.

b_56f924b69b66a.jpg8. Долгая загрузка сайта.

Еще один пункт, который может понизить конверсию сайта.

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

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

Для справки: 1 секунда задержки "стоит" порядка 3-7% конверсии сайта (10 секунд "стоит" 20-40%). Если сайт загружается 15 секунд и более, то ускорение до 3-5 секунд повысит конверсии на те самые 20-40 пунктов.

Проверить скорость сайта можно при помощи сервисов: Айри.рф или WebPageTest или Pingdom

b_56f9308a02009.jpg

Существуют 3 ключевые проблемы скорости сайта - это размер, расстояние и виджеты. Обычно, для мобильного пользователя не требуются какие-то специальные эффекты на сайте, подойдет обычная верстка сайта без "наворотов". Дополнительно экран мобильного телефона, чаще всего, обладает низким разрешением, поэтому для мобильных пользователей можно "отгружать" меньшие по размеры изображения (и использовать более прогрессивный формат, например, WebP).

Для решения проблемы расстояния нужно убедиться, что хостинг сайта нормально доступен из сетей основных мобильных операторов. Оптимальным будет размещение в хорошем московском (или региональным - для региональных проектов) датацентре, который заявляет хорошую связность с сетями мобильных операторов. Зарубежный хостинг мало подходит (и имеет ряд проблем со скоростью передачи данных из-за границы).

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

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

Например, как бывает?

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

b_56f92801604b6.jpg

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

Конверсия растет, если мы уменьшаем сопротивление для клиента. Каждое поле можно сделать более удобным для заполнения. Для этого прописываем соответственно:

Поле E-mail – input type="email"

Поле Телефон – input type="tel"

Поле Адрес – input type="text"

Поле Индекс, номер карты – input type="text" pattern="\d*"

Поле Дата – input type="date"

Поле Кнопка «Отправить» – input type="submit"

Более подробное руководство с наглядным примером можно посмотреть на этом сайте: http://ionicframework.com/

b_56f927f57bb85.jpg

Дополнение для удобства:

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

Как это сделать:

Сделайте иконку размером 180px на 180px (без закругления), а на сайте добавьте тег: link rel=«apple-touch-icon» href=«иконка.png»

b_56f927d832ec3.jpg

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

Высокой конверсии вашей мобильной версии сайта!

Спасибо!

+17
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
СпросиДоктора.ру
Онлайн консультации врачей
Кирилл Атстаров
Уже минимум треть всего трафика - мобильный. На нашем проекте он уже 50%
Ответить
Perezvoni.com
Callback виджет с безлимитной связью и сквозной аналитикой
Виталий Ягодкин
Согласен! Мобильный трафик имеет серьезное место, поэтому нужно работать над его конверсией или хотя бы, чтобы все выглядело адекватно :)
Ответить
Gordon Shamway
только наверное не "модуляцимя", а "эмуляция" телефона
Ответить
Perezvoni.com
Callback виджет с безлимитной связью и сквозной аналитикой
Виталий Ягодкин
верная поправка! )
Ответить
Lockstep Marketing
Агентство Интернет-маркетинга
Глеб Владимирович Горохов
Ошибка 1: Отсутствие мобильной (адаптивной) версии :)
Ответить
Perezvoni.com
Callback виджет с безлимитной связью и сквозной аналитикой
Виталий Ягодкин
Сколько раз не читаю перед публикацией, все равно потом находятся опечатки. Спасибо)
Ответить
Артём Понятин
Друзья, порекомендуйте сервис для проверки адаптивности ?
quirktools.com кеширует страницы, и после первых правок невозможно проверить изменения
Ответить
Пора за дело!
Проект решающий проблемы начинающих бизнесменов
Юра Римский
В файрфоксе есть режим адаптивного дизайна. Что дополнительного могут дать сервисы?
Ответить
Perezvoni.com
Callback виджет с безлимитной связью и сквозной аналитикой
Виталий Ягодкин
А если в режиме инкогнито заходить?
Ответить
Артём Понятин
я не часто гуглю инет по этому вопросу, есть вероятность что уже создали сервис качественного эмулирования моб. устройств, видимо еще нет, но чувствую скоро появится)
Ответить
Пора за дело!
Проект решающий проблемы начинающих бизнесменов
Юра Римский
Это практически невозможно. Как сэмулировать браузерный движок мобильника на яваскрипте браузерного движка десктопа?

Обходятся обычным iframe переменной ширины. Ничего более продвинутого я ещё не видел.
Ответить
Perezvoni.com
Callback виджет с безлимитной связью и сквозной аналитикой
Виталий Ягодкин
Верно. Все равно, в итоге, приходится тестить на реальных мобильниках и планшетах.
Ответить
Евгений Лебедев
Дополню, что яндекс тоже сейчас отмечает сайты адаптированные под мобиильники и ранжирует их выше.

Еще для номеров телефонов важно проставлять тег tel, чтобы звонить в 1 клик можно было со всех устройств.
Ответить
Perezvoni.com
Callback виджет с безлимитной связью и сквозной аналитикой
Виталий Ягодкин
А Яндекс пометку видимую ставит как Гугл или нет?
Ответить
Пора за дело!
Проект решающий проблемы начинающих бизнесменов
Юра Римский
Как они определяют адаптированный сайт или нет?
Ответить
Perezvoni.com
Callback виджет с безлимитной связью и сквозной аналитикой
Виталий Ягодкин
Если гугл сервис дает рекомендации по улучшению мобильной версии, то с этим он справится)
Ответить
Евгений Лебедев
Да, на мобильной выдаче идет пометка.
Ответить
Евгений Лебедев
Например, по мета тегу viewport, а вообще подробности есть в хелпе для вебмастеров.
Ответить
Алена Крамарчук
Самая большая проблема для меня как пользователя — огромные поп-ап баннера. Иногда легче просто уйти из сайта, чем найти крестик на баннере.
Ответить
Perezvoni.com
Callback виджет с безлимитной связью и сквозной аналитикой
Виталий Ягодкин
Не только у вас, это раздражает многих! ) Вот например так это происходит: https://www.youtube.com/watch?v=hxn00VHByVA
Ответить
Sergey Glagolev
Я бы не стал на месте автора статьи пиарить сайты, которые не могут следить за работоспособностью своих сервисов.
Тест от Айри.рф на проверку скорости или не работает, или сделан не для людей.
Ответить
Perezvoni.com
Callback виджет с безлимитной связью и сквозной аналитикой
Виталий Ягодкин
Что не так с айри? Проверка работает, если что там еще 2 сервиса указаны.
Ответить
Sergey Glagolev
У меня не получилось воспользоваться ей. Кнопка "проверить скорость" не активна, чтобы я не вбивал в поле.
Ответить
Yandex Wallet Bot
Telegram-бот для мгновенных денежных переводов
Александр Лифшиц
Спасибо! Особенно пункт номер 2. Это просто адский ад!

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

Кстати, как вы считаете, в каких случаях стоит делать отдельную мобильную версию, а в каких делать адаптив?
Ответить
Юрий 6443
В любом случае лучше всего делать мобильную версию, адаптив - бюджетный вариант.
Сделав отдельную моб. версию вы сможете убрать из загрузки ненужные css, js, графику и html код, ускорив в разы загрузку сайта.
Ответить
Дикий Лид
Агентство интернет маркетинга
Олег imarketer
Есть три момента:

1. Правильнее будет говорить про адаптивный дизайн сайта, а не мобильная версия.

2. Если рассматривать минусы и плюсы, так и взять сайт некачественный и на 10 баллов и разбирать все детали. А так рассмотрели 5% из 100% из важных моментов, которые реально делают конверсию!

3. Ну и самое важное. Сапожник без сапог. Ваш сайт не адаптивен. Но вы типо в теме))
Ответить
Perezvoni.com
Callback виджет с безлимитной связью и сквозной аналитикой
Виталий Ягодкин
Олег, я ждал такого комментария)
Отвечу по пунктам:
1) Разве мобильная версия сайта не включает понятие дизайна?
2) Не совсем понял начало предложения, но не суть... если вы говорите, что эти 10 пунктов всего 5% из важных моментов, то давайте 190 пунктов в студию.
3) Я знал, что кто-то бегло посмотрит статью и так скажет, поэтому специально в хедере пометил, что мы разрабатывали "новую мобильную версию виджета" для клиентов, а не сайт себе делали. Читайте внимательнее. Да мы типо немного в теме )
Ответить
Дикий Лид
Агентство интернет маркетинга
Олег imarketer
Открыл ваш сайт на телефоне и закрыл. Не удобно, так как не адаптивен. Это как общаться с фитнес инструктором, который дохлый, но типо в теме как накачаться.

Адаптивный дизайн и моб. версия разные вещи.

Читать тут: https://habrahabr.ru/post/239441/
Ответить
Perezvoni.com
Callback виджет с безлимитной связью и сквозной аналитикой
Виталий Ягодкин
Олег, мы продаем онлайн виджет увеличения конверсии, а не разработку сайтов. Статья и родилась после создания мобильного виджета.
Про разницу знаю, но не соглашусь, что "правильнее было бы говорить про адаптивный дизайн", так как некоторые пункты общие, например скорость загрузки.
Ответить
Дикий Лид
Агентство интернет маркетинга
Олег imarketer
Тестировали мы, тестировали и результат показал что все эти перезвоним за 26 секунд херня и замануха. Поставил себе клиент на сайт и типо конверсия увеличилась))) Сказки.
Звонков было больше без виджета. А конверсия увеличилась после долгой аналитики клиентов через вебвизор и понимания что конкретно должно быть на сайте и доработки функционала и адаптивного дизайна...
Ответить
Perezvoni.com
Callback виджет с безлимитной связью и сквозной аналитикой
Виталий Ягодкин
Жаль вас, если вы надеялись заменить контент сайта, адаптивную версию, анализ кликов и функционал одим виджетом. Работайте над сайтами, а виджет дополнение конверсии. И скорее всего, вы не наш пробовали, так как у вас на сайте стоит не адаптивный виджет. Поэтому, то, что у вас конверсия не пошла, это ваш частный случай.
Ответить
Дикий Лид
Агентство интернет маркетинга
Олег imarketer
Речь идет о сайтах клиентов.
Также тестировали среди заказчиков, их просто бесит эти всплывающие виджеты.
Ответить
Perezvoni.com
Callback виджет с безлимитной связью и сквозной аналитикой
Виталий Ягодкин
Меня самого они бесят, когда я их закрываю, а они показываются снова. Это настоящая боль для клиента. Поэтому, мы мониторим реакцию клиента на открытие виджета на всех сайтах, если он несколько раз просто закрывал виджет, то он увидит вот такое сообщение и больше виджет его не будет тревожить во всем интернете.
Ответить
Igor Fatkulin
П.2 - в аду есть спецкотел для тех, кто чатится за рулем. Так себе аргумент
Ответить
Perezvoni.com
Callback виджет с безлимитной связью и сквозной аналитикой
Виталий Ягодкин
Автомобиль как пример указан. Скорее всего, вы просто не сталкивались с сайтами, где номер указан без +7 - таким компаниям звонить ужасно не удобно даже лежа на диване
Ответить
Дикий Лид
Агентство интернет маркетинга
Олег imarketer
Обсуждать проблему номера "+7" на примере вообще не адаптивного сайта это круто)
Ответить
Perezvoni.com
Callback виджет с безлимитной связью и сквозной аналитикой
Виталий Ягодкин
Номер без +7 может быть и на адаптивном сайте. Думаю не стоит пересекать эти 2 пункта. Мы разбираем проблему, а не конкретный сайт на ошибки.
Ответить
Igor Fatkulin
Так приводите нормальные примеры, не дискредитируйте свой же труд)
Ответить
Perezvoni.com
Callback виджет с безлимитной связью и сквозной аналитикой
Виталий Ягодкин
Да какая разница на адаптивном или нет показана ошибка?? Суть в том, чтобы показать проблему. Клиенту на сайте будет одинаково трудно позвонить вам и на адаптивном сайте и нет.
Ответить
Дикий Лид
Агентство интернет маркетинга
Олег imarketer
Вы задали тему паблика: "10 ошибок в мобильной версии сайта, которые убивают конверсию" а в примере указываете проблему номера на десктопной версии. Приводите сразу нормальные примеры без "подразумевается"!!! Принципы UX дизайн никто не отменял и в примерах пабликов...
Ответить
Perezvoni.com
Callback виджет с безлимитной связью и сквозной аналитикой
Виталий Ягодкин
Олег, я вас понимаю, что не совсем корректно это соотносится с названием, но скажите как это бы повлияло на суть проблемы? Совершенно одинаково этот пункт убивает конверсию мобильного трафика независимо от адаптивности сайта или наличия мобильной версии.
Ответить
Дикий Лид
Агентство интернет маркетинга
Олег imarketer
Зачем менять носки с дыркой на новые? Все равно ступня в туфле и не продувает...
То что очевидно для одного, совершенно по-другому понимается другим. Пишите для людей, а не для себя!!!
Ответить
Perezvoni.com
Callback виджет с безлимитной связью и сквозной аналитикой
Виталий Ягодкин
Олег, возможно, вы и правы, но думаю для нашей аудитории это очевидно и за время публикации этой статьи во всех ресурсах такого вопроса никто не задал. В след. раз буду аккуратнее.
Ответить
Daaa Esss
За рулем надо на дорогу смотреть, а не в телефон. Испортило впечатление эта фраза.
Ответить
Perezvoni.com
Callback виджет с безлимитной связью и сквозной аналитикой
Виталий Ягодкин
Полностью согласен, но все мы знаем, что люди сидят в телефоне круглосуточно и за рулем в том числе. За рулем это крайняя степень неудобства дозвона до компании, а так даже если я лежу на диване мне должно быть максимально просто позвонить.
Ответить
Artem Bulatov
Нужна была адаптация сайта, сам ничего в этом не понимаю. Да и сайт создавал с помощью специалистов, можно было конечно и у них заказать мобильную версию сайта, но стоят услуги дорого. Стал искать где могут сделать быстро и недорого. Нашел http://www.mobile-version.ru Цена приемлемая, тем более никаких данных не нужно предоставлять, для меня это важно в первую очередь. Не хочется лишиться своего детища. Сделали за 2 дня. С мобильников, планшетов просматривается на ура,текст и изображения оптимизированы, шрифт читабельный. Сайт открывается быстро, включили даже быстрые настройки для удобства посетителей.
Ответить
Ольга Волга
Благодаря вашей статье исправили ошибки у себя, вот что получилось https://drbeauty.com.ua????
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.