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