# Мобильная версия — ошибки, которые видно с первого касания

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

Published: 2026-02-18 · Source: https://subxcat.com/ru/articles/mobile-mistakes · Author: SUBXCAT

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

Вот ошибки, которые встречаются чаще всего.

## Мелкие цели для касания

Палец толще курсора. Иконка в 16 пикселей в 4 пикселях от соседней удобна мышью и мучительна пальцем. Ориентир — область касания не меньше 44 пикселей по меньшей стороне, даже если сама иконка маленькая: область увеличивается отступами, внешний вид не меняется.

Отдельно посмотри места, где рядом стоят противоположные действия: «Сохранить» и «Удалить», «Принять» и «Отклонить». Промах там обходится дорого.

## Клавиатура закрывает поле

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

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

## Прибитые шапки и панели

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

Закрепляй только то, что действительно нужно под рукой. Шапку можно прятать при прокрутке вниз и возвращать при прокрутке вверх. И проверь, что закреплённые элементы учитывают вырез экрана и полосу жестов на новых телефонах.

## Таблицы

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

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

Выбор зависит от того, что человек делает с таблицей. Если сравнивает строки, нужны колонки. Если ищет одну запись, хватит карточек.

## Наведение, которого нет

На телефоне нет наведения. Всё, что появляется только по hover, — подсказки, кнопки действий в строке, выпадающие меню, — для мобильного пользователя не существует. Или срабатывает странно: первое касание вместо действия только «наводит».

Важные действия должны быть видны без наведения или доступны через явную кнопку «ещё».

## Модальные окна

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

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

## Скорость

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

## Как проверять

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

SUBXCAT проверяет мобильную версию на настоящих устройствах и правит то, что мешает пройти главный сценарий с телефона.