Проектирование форм и мастеров: как выбрать вариант

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

Сначала определите, что именно вы проектируете

Под «формой» здесь понимается веб-сценарий, в котором пользователь вводит данные и отправляет их на сервер: заявка, оформление заказа, анкета, настройка интеграции или создание объекта в личном кабинете. Вариант интерфейса выбирают до отрисовки полей.

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

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

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

Четыре подхода и их цена

Хороший мастер не прячет сложность. Он показывает её порциями, сохраняет уже принятое и не заставляет пользователя повторять то, что система уже знает.

Как выбрать вариант без вкусовщины

Оставляйте одну страницу

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

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

Используйте секции, если порядок не обязателен

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

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

Выбирайте мастер, когда есть зависимость между шагами

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

Шаг должен отвечать на один понятный вопрос. «Куда доставить?» и «Как оплатить?» обычно лучше разделять, а «Имя», «Телефон» и «Почта» не стоит разносить по трём экранам без причины. На каждом шаге показывайте, сколько этапов осталось, но не обещайте точное время заполнения, если оно зависит от документов или внешней проверки.

Добавляйте черновик только при реальной паузе

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

Сохранение должно быть видимым. Покажите состояние «сохранено», время последнего сохранения и способ удалить черновик. Если данные хранятся на сервере, привяжите черновик к учётной записи или одноразовой сессии, а не к предсказуемому идентификатору в URL.

Что проверить в любом мастере

1. Сценарий прерывания. Откройте шаг, заполните часть полей, обновите страницу и вернитесь назад. Должно быть понятно, что сохранилось, а что нет.
2. Переход назад. Измените ответ на первом шаге. Система должна либо пересчитать зависимые поля, либо предупредить, что прежние значения будут удалены. Молчаливое сохранение противоречивых данных — дефект.
3. Ошибки. Оставьте обязательное поле пустым, введите неверный формат и отправьте данные с сервера. Ошибка должна быть видимой, связанной с конкретным полем, а уже введенное — сохраниться.
4. Повторная отправка. Дважды нажмите кнопку отправки и обновите страницу после успеха. Нельзя создавать две заявки, два заказа или два платежа из-за повторного запроса.
5. Мобильный ввод. Проверьте сценарий одной рукой на узком экране. Поля не должны прятаться за клавиатурой, а переход на следующий шаг не должен требовать горизонтальной прокрутки.
6. Клавиатура и скринридер. Пройдите форму без мыши. У каждого поля должна быть доступная подпись, фокус — видимым, а ошибка — связанной с полем. Ориентиром служит WCAG 2.2, но автоматическая проверка не заменяет ручной проход.

Валидация: где обычно ломается логика

Проверка в браузере нужна для быстрой обратной связи, но не для защиты данных. Сервер обязан повторить правила: клиентский JavaScript можно отключить, запрос — изменить, а браузерная проверка — не покрывает бизнес-ограничения.

Не проверяйте сложные поля слишком рано. Маска телефона может помочь с форматом, но не доказывает, что номер принадлежит пользователю. Проверка адреса может зависеть от внешнего сервиса и занять время. В таких случаях отделяйте синтаксическую ошибку от статуса «нужно уточнить» и не блокируйте весь мастер из-за поля, которое ещё находится на проверке.

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

Где подход ломается

Одна страница становится слишком длинной

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

Мастер превращается в лабиринт

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

Черновик хранит устаревшее

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

Аналитика измеряет клики, но не результат

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

Когда что выбирать

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

Комбинации допустимы. Например, мастер может состоять из трёх шагов, а внутри каждого шага — из секций. Но границы должны быть объяснимы: пользователь понимает, на каком этапе находится, что уже сохранено и что произойдёт после нажатия кнопки.

Что делать дальше

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

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