Содержание · 7
Правильный тип клавиатуры, работающее автозаполнение и ошибки, которые видно. Разбираем детали, из-за которых мобильные формы бросают чаще десктопных.
Тип клавиатуры
Каждое поле должно вызывать подходящую клавиатуру: цифровую для телефона и кода, с символом «собака» для почты, без автозамены для логина.
Это одна из самых дешёвых доработок с самым заметным эффектом: пользователь не переключает раскладки вручную.
Размер шрифта в полях
Шрифт меньше 16 пикселей в поле ввода заставляет мобильный браузер увеличивать масштаб страницы при фокусе. Вёрстка смещается, пользователь теряет контекст, а вернуть масштаб обратно вручную неудобно.
Это техническая деталь, о которой дизайнеры узнают обычно после запуска.
Автозаполнение
Браузер и система умеют подставлять адрес, карту и контакты автоматически — но только если поля правильно размечены. Кастомные компоненты полей часто ломают эту возможность.
Проверка простая: заполните форму на телефоне и посмотрите, предлагает ли клавиатура сохранённые данные.
Ошибки, которые видно
Сообщение об ошибке под полем, скрытое клавиатурой, эквивалентно отсутствию сообщения. На мобильном ошибку стоит показывать над полем или прокручивать экран так, чтобы она попадала в видимую область.
Текст ошибки должен говорить, что сделать, а не что не так: «Введите номер в формате +7 900 000–00–00» вместо «Неверный формат».
- Ошибка видна при открытой клавиатуре.
- Текст объясняет, как исправить.
- Фокус переходит к первому полю с ошибкой.
- Уже введённые данные не сбрасываются.
Неверный тип клавиатуры стоит дороже любой ошибки вёрстки: человек набирает номер буквами и уходит, не поняв, что произошло.
Что превращает форму в отказ
Мобильная форма проигрывает не из-за количества полей, а из-за трения на каждом: неверная клавиатура, потерянный фокус, валидация не вовремя, прыгающая вёрстка при появлении клавиатуры. Каждое такое место — небольшая пауза, а форма из восьми полей набирает из них минуту раздражения.
Самое дешёвое улучшение — правильно объявленные типы полей. Числовая клавиатура для кода подтверждения, почтовая — для адреса, признак автозаполнения для имени, телефона и адреса доставки. Тогда телефон подставит сохранённое сам, и половина формы заполнится без единого нажатия по клавиатуре.
Правила, которые снимают большую часть отказов
- Кегль поля не меньше 16 пикселей: при меньшем iOS приближает страницу при фокусе.
- Валидация после ухода из поля, а не на каждом нажатии — иначе ошибка появляется на первой букве.
- Ошибка рядом с полем и текстом, а не общим блоком сверху: до него надо ещё долистать.
- Кнопка не прячется за клавиатурой: закреплённая снизу панель или прокрутка к ней после фокуса.
- Никакого сброса введённого при ошибке — это самая быстрая причина закрыть вкладку.
Что в итоге
Мобильные формы ломаются на деталях: неверная клавиатура, шрифт меньше 16 пикселей и ошибки под клавиатурой.
Исправление этих трёх вещей обычно даёт больший эффект, чем любой редизайн формы.
Коротко
- Почему форма приближается при нажатии на поле?
- Это поведение iOS при кегле меньше шестнадцати пикселей. Лечится увеличением кегля поля — отключать масштабирование метатегом нельзя, это ломает доступность.
- Когда показывать ошибку?
- После ухода из поля, а не на каждом нажатии: иначе сообщение появляется на первой букве и мешает вводу. Исключение — счётчик оставшихся знаков, он полезен сразу.
Тёмная тема в приложении
Как поддержать системную тему, зачем всё равно нужен ручной переключатель и что делать с иллюстрациями, скриншотами и брендовыми цветами.ДальшеЧитайте также
Посмотреть примеры
Нашли ошибку или неточность в атрибуции? Напишите нам
Обсуждение
Загружаем…