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

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

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

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

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

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

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

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

Что проверить:

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

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

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

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

Таблицы

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

Варианты получше:

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

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

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

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

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

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

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

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

Скорость

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

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

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

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