Как посмотреть на свой сайт глазами мобильного посетителя
Прежде чем что-то исправлять, нужно понять масштаб проблемы. Яндекс.Метрика даёт три среза, которых обычно достаточно для первичной оценки.
Доля устройств и конверсия по типу устройства
В Метрике откройте раздел «Аудитория» → «Устройства». Вы увидите, сколько трафика приходит с телефонов, планшетов и компьютеров. Затем добавьте сегментацию по достижению целей: нажмите «Сегменты», выберите цель «Отправка формы» или «Звонок». Сравните конверсию мобильных и десктопа.
Если конверсия с мобильных ниже десктопной в полтора раза и более, у вас проблема с интерфейсом, а не с аудиторией. Разрыв в 20–30% считается нормальным: мобильный пользователь чаще изучает, а не покупает прямо сейчас. Разрыв в два-три раза: сигнал, что часть людей хотела оставить заявку, но не смогла.
Вебвизор на мобильных
Откройте Вебвизор и отфильтруйте записи только по мобильным устройствам. Посмотрите 10–15 сессий людей, которые не оставили заявку. Обращайте внимание на три паттерна: резкий уход с первого экрана, попытки нажать на что-то, что не реагирует, и прокрутка через форму без остановки. Каждый из них подскажет, где именно теряются заявки.
Если у вас настроена сквозная аналитика, можно пойти дальше: сравнить, сколько стоит заявка с мобильных и с компьютеров. Часто оказывается, что мобильные заявки дороже не потому что трафик хуже, а потому что часть людей просто не смогла дойти до формы.
Формы на мобильном: три вещи, которые делают их неудобными
Форма заявки — финальный шаг перед конверсией. Если человек дошёл до неё, он уже почти решился. Задача формы: не спугнуть. На мобильном это решается хуже, чем на компьютере, по трём конкретным причинам.
Количество полей
Каждое поле требует усилий: тапнуть, подождать клавиатуру, ввести текст, закрыть клавиатуру, перейти к следующему полю. На компьютере это занимает секунды, на телефоне в три-четыре раза дольше, потому что экранная клавиатура закрывает форму и приходится постоянно переключаться между вводом и просмотром оставшихся полей.
Спросите себя: какая информация нужна для первого контакта? Обычно достаточно имени и телефона. Адрес, компания, комментарий — это уже вопросы для менеджера при первом звонке, а не барьер перед заявкой. Каждое лишнее поле снижает шанс, что форму заполнят до конца.
Тип клавиатуры под тип поля
Когда поле для ввода телефона открывает букво-алфавитную клавиатуру, а не цифровую, это технический недосмотр, который видит каждый посетитель. Исправляется атрибутом type="tel"на поле формы: телефон откроет цифровую клавиатуру, почта откроет клавиатуру с символом @, число откроет цифровую с точкой.
Проверьте каждое поле вашей формы с телефона. Если при нажатии на поле «Телефон» открывается обычная клавиатура, это нужно исправить. Разработчику это займёт несколько минут.
Автозаполнение
Браузер на телефоне умеет подставлять имя, адрес и телефон из сохранённых данных. Если форма это поддерживает, человек заполняет её за два касания вместо двадцати. Если нет, человек вводит всё вручную и раздражается.
Поддержку автозаполнения включает атрибут autocompleteна полях:autocomplete="name" для имени, autocomplete="tel"для телефона. Это не магия, а стандарт, которому следуют все современные браузеры. Если атрибут не прописан, автозаполнение либо не работает, либо угадывает поле неправильно.
Попапы и баннеры cookies: когда дизайн перекрывает цель
На широком мониторе всплывающий баннер о cookies занимает нижнюю полосу и не мешает читать контент. На телефоне тот же баннер закрывает треть или половину экрана. Посетитель видит не ваше предложение, а кнопку «Принять».
Это относится и к другим всплывающим элементам: предложению подписаться на рассылку, чат-боту, баннеру акции. Каждый из них сам по себе может быть полезен. Но если он появляется на первых секундах визита и перекрывает контент, он становится препятствием, а не инструментом.
Как это проверить
Откройте сайт в режиме инкогнито на телефоне (или в браузере компьютера с эмуляцией мобильного, F12, значок телефона). Посмотрите, что появляется в первые 5–10 секунд. Если экран перекрыт, посетитель видит то же самое.
Что с этим делать
- Баннер cookies по закону нужен, но его можно сделать небольшим и не блокирующим. Достаточно полоски снизу с кнопкой «Принять» — без перекрытия контента.
- Попап с предложением лучше показывать не при входе, а при выходе или после прокрутки определённого количества контента: человек уже прочитал что-то полезное и более готов к диалогу.
- Чат-бот или виджет обратного звонка должен быть в углу экрана и не перекрывать основной контент. Если он разворачивается на полный экран автоматически, это ошибка.
Кнопка звонка и клик-ту-колл: главное действие на телефоне
На компьютере посетитель видит номер телефона, берёт трубку и набирает. На телефоне — совсем другая история. Если номер просто написан текстом, человек должен его запомнить или выделить, скопировать и вставить в приложение звонка. Это три-четыре действия там, где могло быть одно.
Клик-ту-колл решает эту задачу: ссылка с атрибутом href="tel:+7..." при нажатии сразу открывает набор номера. Звонок совершается в одно касание. Это не техническая тонкость, это разница между заявкой и брошенным сайтом.
Как проверить кнопку звонка
Откройте сайт с настоящего телефона и нажмите на номер телефона. Если ничего не произошло или открылось неправильное приложение, значит номер оформлен не как ссылка. Отдайте задачу разработчику: замена текста на ссылку займёт несколько минут.
Кнопка на первом экране
На телефоне первый экран — это всё, что видно до прокрутки. Если кнопка звонка или форма заявки находится ниже, значительная часть посетителей её не увидит: они уйдут, не прокрутив. Главное целевое действие должно быть видно сразу, без прокрутки.
Проверьте это так: откройте сайт на телефоне и не листайте. Всё, что видите прямо сейчас — это то, что видит каждый новый посетитель. Есть ли кнопка? Понятно ли с первого взгляда, что нужно нажать?
Размер кнопки: попасть пальцем
Указатель мыши точен до пикселя, кончик пальца нет. Минимально удобная область нажатия на телефоне — около 44×44 пикселей. Кнопки меньше этого люди промахиваются: нажимают в пустоту рядом или попадают на соседний элемент. Если рядом стоят две маленькие кнопки, они будут нажимать не ту из них.
Тяжёлые картинки и шрифты: когда ожидание съедает заявку
Скорость загрузки на мобильном — это отдельная большая тема, и технической оптимизацией мы здесь не занимаемся. Но есть несколько вещей, которые можно увидеть невооружённым взглядом и которые напрямую влияют на то, сколько посетителей дожидается загрузки страницы.
Картинки, не оптимизированные для мобильных
Если сайт загружает одинаковые картинки для компьютера и телефона, мобильный посетитель скачивает файл, который в несколько раз больше, чем нужно для его экрана. На домашнем Wi-Fi это незаметно. На мобильном интернете в метро или за городом это ощутимо.
Проверить просто: откройте сайт в браузере, нажмите F12, включите эмуляцию мобильного устройства и переключите сеть на «Slow 3G». Если первый экран загружается дольше 5–7 секунд, часть посетителей уйдёт, не дождавшись. Это не теория, а задокументированная закономерность: каждая секунда ожидания снижает вероятность того, что человек останется на странице.
Шрифт, который нельзя прочитать
Текст размером 10–12 пикселей нормально читается на мониторе, но на телефоне в него нужно вглядываться, приближая экран. Это не просто неудобство — это сигнал, что сайт сделан не для телефона. Минимально комфортный размер основного текста для мобильных — 16 пикселей.
Также проверьте межстрочный интервал и ширину строки. Если на телефоне строка занимает всю ширину экрана без отступов, читать неудобно. Если строка слишком длинная, глазу трудно перейти на следующую строку. Оптимально 65–75 символов в строке.
Что проверить руками за полчаса: чек-лист
Ниже — минимальный список проверок, которые можно пройти самостоятельно, без разработчика. Возьмите реальный телефон (не эмулятор) и пройдитесь по каждому пункту.
- Аналитика: конверсия по устройствам. Откройте Яндекс.Метрику. Сравните конверсию с мобильных и с компьютеров. Если разрыв больше 1,5–2 раза — есть проблема с интерфейсом.
- Первый экран. Откройте сайт на телефоне и не листайте. Видна ли кнопка или форма для заявки? Понятно ли, чем вы занимаетесь? Если нет — переработайте первый экран под мобильный.
- Кнопка звонка. Нажмите на номер телефона. Открылся набор номера? Хорошо. Ничего не произошло? Попросите разработчика сделать клик-ту-колл.
- Форма заявки. Нажмите на поле «Телефон». Появилась цифровая клавиатура? Нажмите на поле «Имя» — появилось автозаполнение? Посчитайте поля: больше трёх — подумайте, что убрать.
- Всплывающие элементы. Откройте сайт в режиме инкогнито. Что появляется в первые 10 секунд? Баннер cookies перекрывает контент? Всплывает предложение подписки? Если да — это нужно исправить.
- Скорость на слабом интернете. В браузере включите эмуляцию мобильного и режим «Slow 3G». Загрузите страницу. Сколько секунд до первого экрана? Больше 7–10 — посетители уходят.
- Размер шрифта. Можно ли читать текст на телефоне без увеличения? Если нет — размер шрифта нужно поднять минимум до 16 пикселей.
- Кнопки и ссылки. Попробуйте нажать на разные кнопки и ссылки. Есть ли такие, куда трудно попасть пальцем? Маленькие или расположенные слишком близко друг к другу — в список задач разработчику.
По итогам получится список конкретных правок. Часть из них разработчик сделает за час — изменить type у поля, добавить href к номеру телефона, увеличить размер шрифта. Часть потребует больше работы: переделать первый экран или переработать логику попапов. Начните с быстрого — даже небольшие правки заметно влияют на конверсию.
Если хотите понять, где ещё теряются деньги до и после заявки, разберёт статья об A/B-тестировании посадочных страниц — там про методологию проверки гипотез, расчёт выборки и интерпретацию результатов.