Как сделать многошаговую форму и сохранить введённые данные

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

Что должно получиться

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

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

Из чего это складывается

Как это сделать по шагам

1. Опишите конечное действие. Запишите, какие данные получает команда после завершения и что видит пользователь. Уберите вопросы, которые не нужны для этого результата. Отдельно перечислите сведения, которые человек должен подготовить заранее: например, ссылку на свою работу.
2. Сгруппируйте вопросы по смыслу. Разместите связанные сведения рядом. Если выбор направления определяет дальнейшие вопросы, поставьте его до зависимой части. Не делите связанный ответ только ради одинакового числа полей на экранах.
3. Нарисуйте переходы в обе стороны. Укажите, какие ответы открывают ветку, где её можно пропустить и куда человек попадает после исправления. Для каждого перехода определите, какие данные остаются и какие больше не относятся к выбранному варианту.
4. Задайте правила сохранения. Согласуйте с разработчиком, когда черновик записывается, где хранится и как восстанавливается. Разведите сохранённые ответы и изменения, которые ещё не удалось записать. Не обещайте продолжение на другом устройстве, если такой механизм не сделан.
5. Продумайте проверку текущей части. Показывайте, какое поле мешает продолжению и как его исправить. Возврат к предыдущему шагу не должен требовать заполнения всех вопросов текущего. При окончательной отправке сервер заново проверяет весь относящийся к выбранному маршруту набор.
6. Добавьте обзор ответов. Покажите сведения в удобном для чтения виде и предусмотрите переход к нужной части для исправления. После изменения верните человека к обзору, если зависимые ответы не требуют повторного заполнения.
7. Проверьте прерывания и завершение. Пройдите форму с клавиатуры и телефона, обновите экран, вернитесь средствами браузера и воспроизведите потерю связи. Убедитесь, что повторное действие после сбоя не создаёт незаметно вторую анкету.

Как выбрать границы шагов

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

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

Что значит сохранить введённые данные

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

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

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

Как менять ранние ответы и зависимые ветки

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

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

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

Ошибки, ожидание и окончательная отправка

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

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

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

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

Частые ошибки

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

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

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

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

Вопросы и ответы

Сколько шагов должно быть у формы?

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

Обязательно ли показывать все шаги сразу?

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

Можно ли сохранять всё только в браузере?

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

Нужно ли проверять будущие шаги при каждом переходе?

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

Что делать с данными ветки, которая больше не нужна?

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

Как вернуть человека после исправления из обзора?

Обычно удобно сразу вернуться к проверке ответов, сохранив остальные данные. Но если правка открыла новые обязательные части или сделала зависимые сведения неподходящими, сначала проведите человека через них. Маршрут должен следовать текущим ответам, а не механически повторять все экраны.

Достаточно ли сообщения о сохранении для завершения анкеты?

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