Мобильная версия сайта: 3 точки потери заказов

Мобильный трафик — 60% от всех визитов. Мобильные продажи — 18%. Показатель отказов в норме, время на сайте приличное, скорость загрузки страниц не вызывает вопросов. Формально мобильная версия работает. Но деньги уходят каждый день — и непонятно куда.

Беда в том, что стандартная аналитика фиксирует сам факт ухода, но не объясняет причину. Яндекс.Метрика видит: пользователь зашел на страницу оформления заказа и закрыл браузер. В отчете это читается как «передумал». На деле — форма с двенадцатью полями, которые на небольшом экране превращаются в испытание на терпение. Или три промаха мимо кнопки «Купить», потому что она 28px на мобильном. Или корзина, из которой невозможно удалить товар, не задев что-то лишнее.

Это не повод затевать редизайн и переписывать код. Есть три конкретные точки в воронке, где мобильная версия интернет-магазина теряет заказы — и каждую можно проверить за 5–10 минут на реальном смартфоне. Большинство проблем в этих точках устраняются без разработчика или с минимальными правками.

Почему аналитика не показывает, где именно уходят мобильные покупатели

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

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

Страница выхода «оформление заказа» в отчете выглядит как «пользователь передумал покупать». На деле он столкнулся с одной из трех типичных ситуаций, которые в стандартных отчетах попросту не видны:

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

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

Точка 1 — карточка товара: кнопка «Купить», которую неудобно нажать

Пользователь заходит на карточку товара, листает фотографии, читает описание — и не добавляет в корзину. Время на странице есть, отказа нет. Аналитика молчит. Заказа тоже нет.

На десктопе кнопка «Купить» или «В корзину» обычно всегда на виду — рядом с фото или зафиксирована при скролле. На мобильном та же карточка ведет себя иначе. Вот три конкретные причины, по которым пользователь до кнопки не добирается:

• Кнопка уходит вниз за пределы первого экрана и без скролла не видна. Пользователь просматривает карточку, не понимает, что делать дальше, и закрывает страницу — не потому что товар не понравился, а потому что следующий шаг просто не очевиден
• Размер кнопки меньше 44×44px — это минимум по рекомендациям Apple HIG и Google Material Design. На небольшом экране промах при каждом втором нажатии становится нормой, особенно когда держишь телефон одной рукой и нажимаешь большим пальцем
• Кнопку перекрывает фиксированный баннер акции или чат-виджет, намертво приклеившийся к нижней части экрана — прямо там, где должна быть кнопка действия

Проверка за 5 минут: откройте карточку товара на реальном смартфоне — не в режиме эмуляции в браузере, а именно на телефоне. Не скрольте. Видна ли кнопка «Купить» сразу? Теперь нажмите на нее большим пальцем без прицеливания — попадаете с первого раза? Если нет — проблема найдена.

Быстрый фикс: на мобильной версии сайта на Тильде в настройках блока можно зафиксировать кнопку как sticky-элемент — она будет оставаться видимой при любом положении скролла. На Битрикс — через CSS увеличьте padding кнопки до 14–16px по вертикали и проверьте z-index виджетов: чат-виджет не должен перекрывать элементы управления. На любой платформе перенесите чат-виджет туда, где он не конкурирует с кнопкой действия за нижнюю часть экрана.

Отдельный момент про проектирование: когда макет мобильной версии в Figma передается в верстку, touch-зона задается отдельным слоем поверх визуального элемента — это стандарт. Но при переносе в код этот слой часто игнорируют, и кнопка визуально выглядит нормально, а нажимается плохо. Если у вас есть доступ к макету — проверьте, задана ли touch-зона явно.

Точка 2 — корзина: пользователь не может изменить заказ и уходит

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

Три причины, по которым корзина на мобильном не конвертирует:

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

Проверка за 5 минут: добавьте 2–3 товара в корзину с реального смартфона. Попробуйте удалить один — попадаете по иконке с первого раза? Измените количество другого — где оказалась кнопка «Оформить» после того, как открылась клавиатура? Видна ли итоговая сумма без скролла?

Быстрый фикс: увеличьте touch-зону всех иконок управления до минимум 44px — это решается через CSS без переработки логики корзины. Итог и кнопку «Оформить» вынесите в sticky-блок внизу экрана: он всегда на виду, не зависит от положения скролла и не прячется за клавиатурой. Видимость этого блока можно настроить отдельно для мобильных устройств.

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

Если хотите убедиться, что проблема именно в корзине, а не в скорости загрузки или чем-то еще, — проверьте дизайн мобильной версии сайта и скорость загрузки отдельно: иногда медленная загрузка корзины маскируется под нежелание пользователя ждать.

Точка 3 — форма оформления заказа: где бросают даже мотивированные покупатели

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

Четыре конкретные причины, почему форма оформления не работает на мобильном:

• Форма не разбита на шаги: все 10–12 полей на одном экране. Пользователь видит длинную простыню и закрывает страницу — не потому что передумал, а потому что объем работы выглядит пугающе
• Тип клавиатуры не задан для полей: поле «Телефон» открывает буквенную клавиатуру вместо цифровой, поле «Email» — без символа @. Это решается атрибутом inputmode в HTML, но во многих магазинах до сих пор не настроено. Каждая лишняя секунда на переключение раскладки — шанс закрыть вкладку
• Поле адреса без автодополнения: пользователь вручную вбивает улицу и номер дома на небольшом экране. Долго, неудобно, высокий риск ошибки — и высокий шанс бросить все именно на этом шаге
• Кнопка «Оформить заказ» не видна, пока открыта клавиатура: экран смартфона сжимается почти вдвое, кнопка уходит за пределы видимой области. Пользователь заполнил последнее поле — и не понимает, что нажать дальше

Проверка за 10 минут: пройдите весь путь оформления заказа на реальном смартфоне, заполняя каждое поле. Засеките время. Больше трех минут — форма слишком тяжелая для мобильного. Обратите внимание на клавиатуру: какая открывается для телефона и email? Видна ли кнопка подтверждения при открытой клавиатуре?

Быстрый фикс: разбейте форму на 2–3 шага — контакты, доставка, оплата. Добавьте inputmode=»tel» для телефона и inputmode=»email» для почты. Подключите подсказки адреса через API Dadata или аналогичный сервис — пользователь начинает вводить улицу, система предлагает варианты. Ни один из этих шагов не требует редизайна — только правки в коде формы или настройках платформы. На Битрикс форма оформления заказа настраивается в компоненте sale.order.ajax без переписывания шаблона целиком.

Как проверить все три точки за 20 минут — без разработчика

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

1. Карточка товара. Откройте карточку на смартфоне. Не скрольте. Видна ли кнопка «Купить» сразу? Нажмите на нее большим пальцем без прицеливания — попадаете с первого раза? Не перекрыта ли кнопка чат-виджетом или баннером?
2. Корзина. Добавьте 2–3 товара. Попробуйте удалить один — попадаете по иконке? Измените количество другого — где оказалась кнопка «Оформить» после открытия клавиатуры? Видна ли итоговая сумма без скролла?
3. Форма оформления. Заполните все поля. Засеките время. Какая клавиатура открывается для телефона и email? Сколько времени уходит на ввод адреса? Видна ли кнопка подтверждения при открытой клавиатуре?

Хотите зафиксировать проблемы точнее — запишите экран смартфона во время прохождения воронки. Это займет 10 минут и даст разработчику конкретное видео вместо абстрактного «что-то не работает на мобильном». С записью экрана задача решается за час. Без нее — за неделю согласований.

Дополнительные инструменты для проверки:

• Яндекс.Метрика — Вебвизор: записи сессий на мобильных устройствах, помогает увидеть, где пользователи останавливаются и уходят
• Google PageSpeed Insights: скорость загрузки мобильной версии — если страница грузится медленно, пользователи уходят еще до того, как увидят кнопку
• Chrome DevTools: эмуляция разных устройств для первичной диагностики — смартфон, планшет, разные размеры экранов. Реальное устройство это не заменяет, но для быстрой проверки верстки инструмент полезный

Что делать, если быстрые правки не помогли

Точечные исправления работают, когда проблема локальная. Если после того как вы поправили три точки конверсия не изменилась — проблема глубже. Либо адаптивная верстка устарела и не рассчитана на современные смартфоны, либо структура страниц изначально строилась под десктоп, а мобильная версия — просто сжатый вариант того же макета.

Три признака, что нужна полноценная работа с мобильной версией, а не точечные правки:

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

Здесь два пути: точечный аудит с разработчиком — дешевле полного редизайна, но требует специалиста — или пересборка мобильной версии на уровне адаптивного дизайна. На Тильде это делается в редакторе без написания кода: можно создать отдельный вариант блока для мобильных и настроить его видимость. На Битрикс — через настройку мобильной темы. На кастомных решениях — через правки CSS с учетом ширины экрана и медиа-запросов. Если сайт строился несколько лет назад и с тех пор не трогался — скорее всего, адаптивная верстка просто не рассчитана на современные устройства. Подробнее о том, как подходить к разработке мобильных версий сайтов с нуля или при глубокой переработке — отдельная тема, выходящая за рамки точечных правок.

Итог

Три точки потери заказов в мобильной версии интернет-магазина — карточка товара, корзина и форма оформления — проверяются за 20 минут на реальном смартфоне. Большинство проблем в этих точках устраняются без редизайна: увеличить touch-зону кнопки, вынести итог в sticky-блок, разбить форму на шаги, добавить правильный тип клавиатуры для полей.

Нашли проблему, но не знаете, как исправить технически — опишите ее конкретно, лучше с записью экрана, и передайте разработчику. «Кнопка не нажимается с первого раза, touch-зона меньше 44px» — это задача на час. «Что-то не так с мобильной версией» — это неделя выяснений.

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

Вопросы и ответы