Почему с телефона приходит меньше заявок, чем с компьютера

Почему это важнее, чем кажется

Начать стоит не с чужой статистики, а со своей. Откройте отчёт системы аналитики и сравните две пары чисел: долю посетителей с телефонов и долю заявок с телефонов. Расхождение между ними и есть предмет этой статьи — всё остальное про рынок в целом к вашему сайту отношения не имеет.

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

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

Распространённая ошибка в рассуждениях: «с телефона посмотрят, а потом позвонят или зайдут с компьютера». Часть людей так и делает, но в аналитике это выглядит как заявка с другого устройства, а не как потерянная. Терять имеет смысл только тех, кто ушёл совсем, — и их видно по отказам на странице с формой.

Первый экран на телефоне

Экран телефона — это примерно четверть площади настольного. Всё, что на мониторе помещается рядом, на телефоне выстраивается в столбик, и первый экран умещает в несколько раз меньше. Отсюда главный вопрос: что именно видно до первой прокрутки.

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

• Понятно, чем занимается компания, — одной строкой, без прокрутки
• Видно следующее действие: кнопка заявки или связи в пределах первого экрана
• Заголовок читается целиком, а не обрывается на середине
• Декоративная картинка не занимает весь экран, вытесняя смысл
• Нет всплывающего окна, которое закрывает содержимое раньше, чем его прочитали
• Меню открывается с первого нажатия и не требует точного попадания

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

Адаптив или отдельный мобильный сайт

Вопрос всплывает при любом разговоре о мобильной версии, и ответ на него практически однозначен: одна адаптивная вёрстка, а не второй сайт на отдельном адресе. Отдельная мобильная версия — решение из времён, когда иначе было нельзя, и у него есть цена, которую платят годами.

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

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

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

Формы: сколько полей переживает мобильный пользователь

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

• Полей столько, сколько нужно для первого ответа: обычно имя и один способ связи
• Для телефона и почты вызывается соответствующая клавиатура, а не обычная буквенная
• Поля достаточно высокие, чтобы попадать по ним пальцем: опубликованные рекомендации платформ — порядка 44–48 точек по меньшей стороне цели нажатия
• Кнопка отправки не прячется под клавиатурой: при открытой клавиатуре она должна оставаться достижимой
• Ошибка в заполнении показывается у самого поля, а не общим сообщением сверху, которого не видно
• Введённое не теряется, если человек вышел из приложения и вернулся
• Согласие на обработку данных не превращается в стену текста: ссылка, а не три абзаца
• После отправки видно, что заявка принята, — без перехода на пустую страницу

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

Проверять форму нужно на своём телефоне и до конца — с отправкой. Половина проблем обнаруживается именно в момент, когда открылась клавиатура: кнопка уехала, поле скрылось, страница прокрутилась не туда.

Скорость на мобильном интернете

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

Пороги, заданные Google, одинаковы для всех устройств и проверяемы: LCP — время до появления основного содержимого — до 2,5 секунды, INP — отклик на действие — до 200 миллисекунд, CLS — смещение разметки при загрузке — до 0,1. На телефоне тяжелее всего даются первый и третий: основное содержимое приходит позже, а разметка смещается, пока догружаются изображения и шрифты.

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

Почему скорость — не технический вопрос, а коммерческий, разобрано отдельно: как скорость влияет на заявки и позиции. Сами метрики и порядок их починки — в разборе Core Web Vitals.

Навигация и поиск нужного раздела

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

Отсюда требования, которых на настольной версии не возникает:

• Пункты меню названы словами клиента, а не внутренними терминами компании: искать приходится глазами, а список короткий
• Главные разделы стоят первыми: до нижних пунктов в длинном списке доходят редко
• Открытое меню не прокручивает фон под собой — иначе человек теряет место, где был
• Меню закрывается нажатием вне него, а не только по крестику
• Из меню видно, где человек находится сейчас
• Если разделов много, у меню есть группировка, а не список из двадцати равноправных строк

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

Кнопки связи и мессенджеры

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

• Номер телефона — ссылка, по которой начинается звонок, а не просто текст
• Адрес почты — ссылка, открывающая почтовое приложение
• Кнопки мессенджеров ведут в приложение, а не на страницу входа в его веб-версию
• Адрес открывается в картах, а не остаётся строкой, которую нужно копировать
• Кнопки связи доступны не только в подвале: до него на телефоне нужно долго прокручивать
• Плавающая панель связи не закрывает содержимое и не перекрывает кнопку отправки формы

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

Типичные поломки вёрстки

Набор однотипный и опознаётся быстро. Общая причина у всех одна: элемент, у которого задана фиксированная ширина, не умещается в экран телефона и растягивает страницу.

Первая строка таблицы — самая показательная. Горизонтальная прокрутка на телефоне означает, что вёрстку не проверяли на узком экране вообще: она заметна сразу, с первого движения пальцем поперёк страницы. Если она есть, остальные пункты списка почти наверняка тоже.

Чек-лист самопроверки с телефона

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

• 1. Откройте главную и, не прокручивая, ответьте: чем занимается компания и куда нажать
• 2. Проведите пальцем поперёк экрана на главной и ещё на трёх страницах — страница не должна ездить вбок
• 3. Найдите цену или условия так, как искал бы клиент. Посчитайте, сколько нажатий потребовалось
• 4. Откройте форму, заполните и отправьте заявку по-настоящему. Проверьте, что письмо дошло и не попало в спам
• 5. При открытой клавиатуре посмотрите, видна ли кнопка отправки
• 6. Нажмите на номер телефона — должен начаться звонок. Нажмите на адрес почты — должно открыться письмо
• 7. Откройте меню и закройте его. Проверьте, не прокручивается ли фон под открытым меню
• 8. Найдите страницу с таблицей или прайсом и проверьте, читается ли она
• 9. Пройдите по ссылкам в подвале, включая политику: они тоже открываются на телефоне
• 10. Повторите пункты 1–4 на чужом телефоне другой модели, желательно старше вашего

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

Как это чинится

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

• Форма: сокращение полей, правильные клавиатуры, достижимая кнопка. Несколько часов работы, самый заметный результат
• Первый экран: вынести обещание и действие выше, убрать или перенести всплывающее окно. День работы
• Горизонтальная прокрутка и поломки вёрстки: правятся точечно, по списку найденного
• Изображения и скорость: сжатие, размеры, отложенная загрузка сторонних скриптов. От дня до недели в зависимости от числа страниц
• Кнопки связи: ссылки на звонок, почту, мессенджеры и карты. Несколько часов
• Переработка структуры под телефон: если разделы не находятся с первого раза, это уже не правка вёрстки

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

Своими силами по списку выше находится почти всё. Чего самостоятельная проверка не покажет — это причины: видно, что содержимое прыгает при загрузке, но не видно, какой именно элемент его смещает. Эту часть мы закрываем разбором сайта с замерами на реальных устройствах, но начинать разумнее с десяти пунктов чек-листа: они бесплатны и дают список, с которым уже можно идти к подрядчику.