Посмотрите в аналитику: у большинства компаний 70–80% посетителей заходят с телефона. При этом сайт чаще всего проектировали на большом мониторе — дизайнер сдал десктопный макет, а мобильную версию «как-нибудь ужали». Технически она открывается. Но пользоваться ею неудобно, и человек уходит, не оставив заявку.
Ниже разберём типичные ошибки мобильной версии: первый экран, меню, формы, кнопки, скорость, всплывающие окна и контент. В конце — мини-чек-лист, по которому вы за полчаса проверите свой сайт с собственного телефона, и ориентиры, когда точечных правок мало и нужен адаптив-редизайн.
Почему мобильная версия — это не «ужатый десктоп»
Адаптивную вёрстку часто понимают буквально: «всё то же самое, только колонки выстроились в столбик». Сайт открывается на телефоне, ничего не разъезжается — значит, мобильная версия есть. Формально да. По факту — нет.
На телефоне у человека другой контекст. Маленький экран, палец вместо курсора, мобильный интернет вместо офисного Wi-Fi и минута внимания, пока он едет в автобусе или ждёт кофе. Сайт, собранный «с десктопа», этот контекст игнорирует.
Чем мобильный сценарий отличается от десктопного
- Экран в несколько раз меньше — на нём помещается один смысловой блок, а не вся страница
- Вместо точного курсора — палец, и наведение мышью не работает в принципе
- Сессии короче: человек смотрит сайт на ходу, между делами, его постоянно отвлекают
- Связь нестабильна — страница, которая «летает» в офисе, на 4G в дороге грузится мучительно
- Набирать текст на экранной клавиатуре тяжело, каждое поле формы стоит дорого
- Уйти проще: конкуренты в той же поисковой выдаче, в двух тапах от вас
Каждое из этих отличий по отдельности кажется мелочью. Вместе они означают, что мобильная страница должна быть короче, проще и быстрее десктопной — а не такой же, только узкой.
Как ошибка проектирования видна в метриках
Чтобы заподозрить проблему, не нужен аудит. Достаточно сравнить сегменты в своей аналитике.
- Конверсия с мобильных в заявки в два-три раза ниже, чем с десктопа, при том же трафике
- Высокий процент отказов именно с мобильной рекламы
- Люди открывают форму, но не отправляют её
- Время на странице с телефона заметно короче, глубина просмотра — один экран
Мы в Qazaqsoft при UX-аудитах почти всегда начинаем со сравнения мобильной и десктопной воронки. Разрыв между ними обычно говорит сам за себя: трафик одинаковый, а заявки — нет.
Что значит проектировать «с мобильного»
Подход mobile-first — это не модное слово, а порядок работы. Сначала проектируется экран телефона: что человек видит первым, куда нажимает, как оставляет заявку. Десктоп достраивается потом.
Это вопрос приоритетов контента, а не только вёрстки. Когда места мало, приходится честно решать, что важно: кнопка заявки или баннер про «15 лет на рынке». На большом мониторе это решение можно отложить. На телефоне — нет.
Первый экран на телефоне: что должно поместиться
Первый экран — это то, что видно до прокрутки. На телефоне это совсем небольшая область, и её дополнительно съедают шапка сайта, панель браузера и плашка про cookies.
Человек тратит на первый экран несколько секунд. Если за это время он не понял, куда попал и что здесь делать, он не будет разбираться — он вернётся в поиск.
Четыре вещи, которые должны попасть в первый экран
- Что вы предлагаете — заголовок по делу, без «инновационных решений для вашего бизнеса»
- Кому и где — город, ниша, сегмент, чтобы человек узнал себя
- Целевое действие — заметная кнопка заявки, расчёта или записи
- Быстрый способ связи — телефон или мессенджер для тех, кто не любит формы
Если все четыре не помещаются, жертвуйте чем угодно, кроме заголовка и кнопки. Эти два элемента и есть первый экран.
Что чаще всего съедает место зря
В большинстве проектов, которые мы разбираем, первый экран занят не ответами, а декорацией.
- Огромный логотип и раздутая шапка с дублирующими ссылками
- Слайдер с абстрактными баннерами, которые никто не досматривает
- Приветственный текст в духе «Добро пожаловать на наш сайт»
- Стоковое фото на весь экран, под которым заголовок не читается
- Плашка cookies или акции, перекрывающая треть экрана
Каждый такой элемент сдвигает суть и кнопку вниз, за пределы видимости. Часть посетителей до них просто не доходит.
Быстрая проверка первого экрана
Откройте сайт на своём телефоне в режиме инкогнито и засеките пять секунд. Не прокручивайте.
Ответьте на три вопроса: понятно ли, что предлагают; понятно ли, что это для вас; видно ли, что нажать, чтобы оставить заявку. Если хотя бы один ответ «нет» — первый экран не работает.
Формы: длина, клавиатуры, маски телефона
Форма заявки — место, где мобильная конверсия теряется сильнее всего. Человек уже решился, открыл форму — и ушёл на третьем поле. Каждое лишнее поле на телефоне стоит заметно дороже, чем на десктопе: печатать на экранной клавиатуре медленно и неудобно.
Сколько полей оставить
Для первой заявки достаточно имени и телефона. Всё остальное менеджер уточнит в разговоре — и сделает это лучше, чем форма.
- Уберите email, если на него реально никто не пишет
- Адрес, бюджет и детали проекта переносите на этап после первого контакта
- Комментарий оставьте, но сделайте необязательным
- Если полей больше четырёх, делите форму на короткие шаги с прогрессом
В наших проектах короткая форма из двух полей стабильно даёт больше отправок, чем подробная анкета. Детали лучше выяснять голосом, а не полями.
Правильные клавиатуры для каждого поля
Когда человек тапает в поле телефона, должна открываться цифровая клавиатура. В поле email — клавиатура с символом @. Если вместо этого открывается обычная раскладка, человек переключает её вручную — и часть людей бросает форму прямо здесь.
- Поле телефона должно иметь тип tel, чтобы открывалась цифровая клавиатура
- Поле email — тип email и отключённую автокапитализацию первой буквы
- Автозаполнение должно работать: телефон и имя подставляются из памяти устройства одним тапом
- Поле в фокусе не должно перекрываться клавиатурой — страница обязана подскроллиться
Это настройки на считаные минуты работы разработчика. Но в формах, собранных «с десктопа», о них забывают постоянно.
Маска телефона: помогает или мешает
Хорошая маска подставляет +7, форматирует номер по ходу набора и прощает лишние символы. Плохая — не даёт вставить номер из буфера обмена, ругается на корректный ввод и сбрасывает уже набранное.
- Маска обязана принимать вставку номера из буфера в любом формате
- Код страны лучше подставить заранее, а не заставлять набирать
- Ошибку показывайте после попытки отправки, а не красным во время набора
- Текст ошибки должен говорить, что исправить, а не просто «неверный формат»
И обязательно проверьте форму с реального телефона после каждого обновления сайта. Сломанная маска — одна из самых частых причин «заявки внезапно пропали».
Услуга по теме
Найдём, где мобильная версия теряет ваши заявки
Проведём UX-аудит мобильной версии: пройдём путь клиента от рекламы до отправленной формы, проверим первый экран, меню, формы, кнопки и скорость на реальных устройствах. Отдадим список правок по приоритетам — от быстрых побед до задач на адаптив-редизайн, с оценкой эффекта по каждой.
Скорость загрузки и тяжёлые картинки
На телефоне сайт чаще всего открывают из рекламы или соцсетей — на мобильном интернете, в движении, с нестабильным сигналом. Каждая лишняя секунда загрузки — это посетители, которые не дождались и закрыли вкладку ещё до первого экрана.
Особенно обидно, что за этих посетителей уже заплачено: клик по рекламе списан, а страницу человек так и не увидел.
Что обычно тормозит мобильную версию
- Фотографии, загруженные в полном размере прямо с камеры или фотостока
- Видеофон на первом экране, который грузится раньше текста
- Десятки сторонних скриптов: чаты, пиксели, виджеты карт, коллтрекинг
- Шрифты в пяти начертаниях, из которых реально используются два
- Слайдеры и анимации, тянущие свои библиотеки на каждую страницу
По нашему опыту, главный виновник почти всегда один и тот же — изображения. Одна непережатая фотография может весить больше, чем весь остальной код страницы.
Что с этим делать
- Сжимать изображения и отдавать их в современных форматах вроде webp
- Грузить картинки ниже первого экрана лениво — по мере прокрутки
- Карту и видео подгружать по клику, а не вместе со страницей
- Раз в полгода делать ревизию сторонних скриптов и выключать мёртвые
- Для первого экрана — никаких каруселей и видеофонов, только текст и одна лёгкая картинка
Часто страницу ускоряют в разы вообще без редизайна — просто наведя порядок в картинках и скриптах. Это самые дешёвые проценты конверсии из возможных.
Как измерить скорость без специалиста
Откройте бесплатный сервис PageSpeed Insights и проверьте свой сайт во вкладке для мобильных. Смотрите не на итоговый балл, а на время до появления основного контента — именно его ощущает посетитель.
И сделайте проверку честнее: выключите Wi-Fi и откройте сайт на телефоне через мобильный интернет где-нибудь вне офиса. Это и есть условия, в которых вас видит большинство клиентов.
Контент: таблицы, длинные тексты, читабельность
Тексты для сайта обычно пишут и согласовывают в документах на широком экране. Там абзац на шесть строк выглядит нормально. На телефоне он превращается в стену текста на полтора экрана — и его пролистывают, не читая.
Таблицы и прайсы
Широкая таблица — классическая жертва мобильной адаптации. Она либо уезжает за край экрана, либо сжимается до нечитаемых ячеек по два слова в столбик.
- Превращайте строки таблицы в карточки: название, цена, срок — друг под другом
- Оставляйте на телефоне две-три ключевые колонки, остальное — в раскрывающиеся детали
- Если без горизонтальной прокрутки никак, покажите явный намёк, что таблица листается
- Прайс на мобильном лучше работает списком «услуга — цена», чем сеткой
Длинные тексты
- Абзацы по две-четыре строки на экране телефона, не больше
- Подзаголовок каждые два-три абзаца, чтобы текст сканировался
- Перечисления оформляйте списком, а не через запятую в строке
- Главный вывод — в начало блока, детали — ниже для тех, кому нужно
Человек на телефоне не читает, а сканирует: цепляется глазами за подзаголовки, списки и цифры. Текст без опорных точек для него просто серый шум.
Читабельность
- Размер шрифта — такой, чтобы текст читался без увеличения двумя пальцами
- Контраст: светло-серый текст на белом красиво выглядит в макете и не читается на солнце
- Межстрочный интервал с воздухом — плотный текст на маленьком экране утомляет
- Важное — цены, условия, телефоны — нельзя набирать самым мелким кеглем
Проверка простая: дайте телефон человеку сорока пяти лет и попросите найти цену услуги. Где он щурится и зумит — там и правки.
Как проверить мобильную версию самому: мини-чек-лист
Для первичной диагностики не нужен подрядчик. Нужен ваш телефон, мобильный интернет и полчаса времени. Важно одно условие: проходите путь как клиент, а не как владелец, который знает, где что лежит.
Чек-лист из десяти шагов
- Откройте сайт с телефона через мобильный интернет в режиме инкогнито, без Wi-Fi
- Засеките, через сколько секунд появился читаемый первый экран
- Не прокручивая, за пять секунд ответьте: что предлагают, для кого, куда нажать
- Откройте меню и найдите конкретную услугу и её цену — посчитайте количество тапов
- Отправьте реальную заявку через форму и проверьте, какая клавиатура открывается в каждом поле
- Попробуйте вставить телефон из буфера обмена в поле с маской
- Нажмите на номер телефона на сайте — должен начаться вызов, а не выделиться текст
- Пройдите по странице большим пальцем одной руки и отметьте все промахи
- Зафиксируйте каждое всплывающее окно: когда появилось и легко ли закрылось
- Пройдите путь с рекламного объявления до заявки целиком — именно с того объявления, за которое платите
Что записывать
Фиксируйте каждое место, где вы запнулись, задумались или промахнулись. Не оценивайте «красиво — некрасиво», только «удобно — неудобно».
Получившийся список — готовый бэклог правок. Рассортируйте его на «чинится за день», «нужен дизайнер» и «нужно перепроектировать» — и половину пунктов закроете уже на этой неделе.
Когда нужен взгляд со стороны
У самопроверки есть потолок: владелец знает сайт наизусть и физически не может увидеть его глазами новичка. Привычка прощает сайту то, что отпугивает клиента.
Мы в Qazaqsoft на UX-аудитах первым делом проходим мобильный путь от объявления до отправленной заявки — большинство критичных находок прячется именно там, а не на десктопе, который все привыкли показывать на презентациях.
Когда нужен адаптив-редизайн
Не каждая проблема из этой статьи лечится редизайном. Большая часть — точечные правки, которые делаются без переделки сайта. Но есть ситуации, когда латать бессмысленно.
Когда хватит точечных правок
- Формы: сократить поля, починить маску, настроить клавиатуры
- Скорость: сжать картинки, отложить карты и видео, выключить лишние скрипты
- Попапы: перенастроить сценарии показа и крестики
- Кнопки: увеличить зоны нажатия, добавить sticky-панель с действием
- Тексты: разбить абзацы, добавить подзаголовки, переверстать таблицы в карточки
Эти работы измеряются днями, а не месяцами, и почти всегда окупаются быстро: трафик уже есть, нужно лишь перестать его терять.
Когда точечные правки не спасут
- Дизайн рисовался только под десктоп, а мобильная версия — автоматическое ужатие без проектирования
- Вёрстка старая и хрупкая: каждая правка ломает что-то в другом месте
- Структура страниц не отвечает мобильному сценарию — суть и действие всегда «где-то ниже»
- Сайт собран на конструкторе, и вы упёрлись в его ограничения по мобильной версии
- Мобильная конверсия в разы ниже десктопной, хотя точечные правки уже делали
Если узнали свой сайт в двух-трёх пунктах, дальнейшие заплатки — это дорогое откладывание решения. Каждый месяц промедления оплачивается рекламным бюджетом, который льётся в неработающую мобильную версию.
Как подойти к редизайну и не потерять то, что работает
- Начните с аудита и аналитики: какие страницы и сценарии приносят заявки сейчас — их нельзя сломать
- Проектируйте мобильные макеты первыми, десктоп — производным от них
- Переносите сайт поэтапно, начиная со страниц, на которые идёт реклама
- Замеряйте мобильную конверсию до и после — иначе не узнаете, сработал ли редизайн
Адаптив-редизайн — это не «перекрасить сайт». Это пересобрать сценарий под палец, маленький экран и минуту внимания. Именно так из мобильного трафика, за который вы уже платите, получаются заявки.
