Мобильная версия сайта: типичные ошибки мобильного UX

2 ноября 2026LightSEO7 мин чтения

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

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

Коротко

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

Почему мобильная версия определяет результат

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

Google применяет индексацию по мобильной версии (mobile-first indexing): для оценки страницы поисковая система преимущественно использует ее мобильный вариант. Если в мобильной версии не хватает текста, изображений или разметки, которые есть в компьютерной, эти материалы могут потерять вес в поиске.

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

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

Навигация и касания

Размер и расстояние между элементами

Палец менее точен, чем курсор мыши. Руководства Apple и Google для мобильных интерфейсов рекомендуют размер интерактивных элементов примерно 44–48 пикселей по каждой стороне и заметные отступы между ними. Мелкие ссылки в тексте, тесные пункты меню и кнопки вплотную друг к другу приводят к случайным нажатиям и раздражению.

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

Телефон и мессенджеры

Номер телефона оформляют как ссылку с протоколом tel, тогда звонок начинается одним касанием. Так же работают ссылки на мессенджеры. Фиксированная кнопка связи внизу экрана сокращает путь к разговору, если она не закрывает текст и кнопки формы.

Поиск и навигационная цепочка

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

Карусели, выпадающие списки и фиксированные элементы

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

Текст, изображения и таблицы

Читаемость на маленьком экране обеспечивают несколько базовых правил.

Размер основного текста около 16 пикселей: более мелкий шрифт заставляет масштабировать страницу.
Достаточный контраст текста и фона, особенно при ярком освещении.
Короткие абзацы, подзаголовки и списки вместо сплошного полотна.
Изображения с адаптивными размерами и заранее зарезервированным местом, чтобы макет не сдвигался во время загрузки.
Таблицы с отдельной горизонтальной прокруткой внутри блока или перестройкой в карточки; вся страница при этом не прокручивается вбок.
Видео без автозапуска со звуком и с размерами, которые помещаются в экран.

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

Пример: страница услуги на смартфоне

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

Формы и связь

Форма – место, где теряются заявки. Хорошая мобильная форма короткая, имеет подписи над полями, которые не исчезают при вводе, и показывает ошибки рядом с нужным полем.

Поле телефона открывает цифровую клавиатуру, поле почты – клавиатуру с символом @ (типы полей tel и email).
Автозаполнение браузера подставляет имя, телефон и адрес.
Поле телефона принимает номер в любом привычном формате и не требует вводить скобки и дефисы вручную.
Кнопка отправки заметна и не прячется за клавиатурой.
Защита от спама без сложных картинок: подойдут невидимые проверки или простые задания.
После отправки человек видит подтверждение и понимает, что будет дальше.

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

Скорость и элементы поверх страницы

Скорость

Мобильные сети бывают нестабильными, устройства различаются по мощности. Крупные изображения, тяжелые шрифты и сторонние скрипты замедляют страницу. Google в публичных рекомендациях выделяет показатели Core Web Vitals: скорость показа основного содержимого (LCP), реакцию на действия пользователя (INP) и стабильность макета (CLS). Их значения видны в PageSpeed Insights и в Search Console.

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

Баннеры и окна

Баннеры cookies, подписки и рекламные окна, закрывающие экран, мешают дочитать страницу. В публичных рекомендациях Google сказано, что навязчивые окна после перехода из поиска могут ухудшать оценку страницы. Делайте баннер компактным, с кнопкой закрытия, на которую легко нажать, и не показывайте подписку сразу после открытия.

Как проверить мобильную версию и с чего начать исправления

Откройте основные страницы на двух-трех реальных смартфонах с разными размерами экрана.
Пройдите ключевые сценарии: главная, каталог или услуга, форма, оплата, звонок.
Используйте режим устройства в браузере для быстрого обзора, помня, что он не заменяет реальный телефон.
Запустите PageSpeed Insights и просмотрите отчет об основных веб-показателях в Search Console.
Сравните в аналитике конверсию на смартфонах и компьютерах; резкий разрыв указывает на проблему.

Порядок исправления

Результаты удобно фиксировать коротким списком: страница, проблема, приоритет. Сначала исправляют то, что мешает заявке или оплате, затем самые посещаемые страницы по данным аналитики, далее ошибки, которые ломают вид страницы, и в последнюю очередь мелкие улучшения текста и отступов.

Типичные ошибки

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

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

Нужна ли отдельная мобильная версия сайта?

Обычно нет. Современный подход – адаптивный дизайн: один адрес и один набор контента, который перестраивается под размер экрана. Отдельная мобильная версия на другом адресе усложняет поддержку и SEO.

Как проверить, удобен ли сайт на смартфоне?

Откройте основные страницы на реальном телефоне и пройдите ключевые сценарии. Дополнительно используйте PageSpeed Insights, отчет об основных веб-показателях в Search Console и проверку URL. Набор инструментов Google меняется, поэтому сверяйтесь с актуальной справкой.

Какой размер шрифта выбрать для мобильной версии?

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

Всегда ли нужно меню-бургер?

Нет. Для небольшого сайта с несколькими разделами подойдет видимая навигация. Бургер уместен, когда пунктов много; важнейшие действия все равно выносят на видное место.

Как мобильная версия связана с рекламой?

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

Вывод

Мобильная версия определяет, оставит ли человек заявку с телефона. Начните с основных сценариев: найти нужное, позвонить, заполнить форму, оплатить, и исправляйте то, что мешает больше всего. После изменений проверяйте сайт на телефоне еще раз: обновления шаблонов и плагинов нередко ломают мобильный вид. Результат измеряйте по конверсии на смартфонах. LightSEO – digital-агентство из Мукачева, которое с 2015 года создает сайты и интернет-магазины и занимается SEO, поэтому может помочь проверить мобильную версию. Технические проблемы, влияющие на видимость, выявляет SEO-аудит сайта. Новый адаптивный сайт можно заказать как корпоративный сайт под ключ.