Многошаговые формы и сохранение контекста

1) Принципы

1. Одна цель — несколько естественных шагов. Делите не по таблицам БД, а по логике пользователя: «Данные → Подтверждение → Завершение».
2. Каждый шаг — завершенный смысл. Не дробите слишком мелко: 3–5 шагов оптимально.
3. Переход не должен сбрасывать контекст. Все поля, выборы и файлы сохраняются.
4. Разрешайте вернуться. Назад — без потери данных.
5. Отслеживайте прогресс. Прогресс-бар, заголовок шага и ясные CTA.
6. Пользователь может уйти и вернуться. Черновик — локально или на сервере.

2) Архитектура многошаговой формы

Клиентский стейт: локальный стор (например, React Context/Redux/Signal) или временное хранилище (`sessionStorage`, IndexedDB).
Серверный стейт: создайте черновик с `draft_id`, сохраняйте после каждого шага.
Безопасность: `draft_id` связан с пользователем и истекает через N часов; данные шифруются в покое.

• `currentStep` — индекс текущего шага;
• `completedSteps` — список завершенных;
• `errors` — пер-шаговые ошибки;
• `progress = current / total`.

js const formState = {
draftId: "d-84f...",
currentStep: 2,
steps: [ { id: "personal", completed: true }, { id: "kyc", completed: false } ],
data: { name:"", idPhoto:null },
lastSaved: Date. now()
}

3) Дизайн шагов и макета

Структура: вертикальная навигация (desktop) / прогресс-бар сверху (mobile).
Видимое название шага: «1. Личные данные», «2. Подтверждение личности».

• Основная — «Далее»/«Продолжить».
• Вторичная — «Назад».
• На последнем шаге — «Завершить»/«Отправить».

• Используйте `aria-current="step"`.
• Показывайте %, если шаги неравномерные.
• Добавьте подсказку «Можно вернуться позже».

4) Сохранение контекста и данных

Автосохранение

• изменении поля (с дебаунсом 500–1000 мс);
• переходе на следующий шаг;
• потере фокуса вкладки.

• локально (`localStorage`/IndexedDB) — если форма короткая;
• сервер — для KYC/платежей/анкеты.

js const saveDraft = debounce(async (data) => {
await fetch('/api/draft', { method:'POST', body: JSON. stringify(data) });
}, 800);

Восстановление

При открытии формы ищите черновик (`draft_id` или локальный ключ).

• В случае конфликта (новые поля) — «обновить черновик» с подсветкой изменений.

5) UX паттерны переходов

Переход вперед только после локальной валидации шага.
Назад — без подтверждения, если нет потери данных.
При ошибке сети — сохраняем локально, показываем «Восстановим при следующем подключении».
Не меняйте URL произвольно: `/form/step/2` → удобен для навигации/восстановления.
Поддержите `Ctrl+Enter` для быстрого перехода на следующий шаг.

6) Состояния и визуальные подсказки

In progress: серый/активный индикатор, шаг кликабелен только если завершен предыдущий.
Completed: зеленая галочка/иконка; можно открыть для редактирования.
Error: красный контур, текст под полем и в прогресс-линии.
Disabled: шаги после текущего скрыты или недоступны.

html
<nav aria-label = "Progress">
<ol class="steps">
<li class = "done "> <span> 1 </span> Data </li>
<li class = "current" aria-current = "step "> <span> 2 </span> Documents </li>
<li> 3 Verification </li>
</ol>
</nav>

7) A11y и доступность

`aria-current="step"` для активного шага.
Смена шага озвучивается `aria-live="polite"`.
Сохраняйте фокус в пределах текущего шага; при переходе — перемещайте на заголовок.
Навигация Tab и Enter предсказуема; Esc не должен терять контекст.
Для пошаговых прогресс-баров используйте `role="list"`, `role="listitem"` и `aria-label` для шага.

8) Поведение при ошибках и прерываниях

Сбой сети: баннер «Соединение потеряно. Данные сохранятся локально».
Таймаут: повторить автоматически через 3–5 с; при неудаче — оффлайн-черновик.
Разрыв сессии: после логина → «Продолжить с последнего шага».
Ошибка шага: сохраняем частично заполненные поля, подсвечиваем проблемные.

9) Параллельные сессии и безопасность

`draft_id` уникален на пользователя.
При открытии новой вкладки — предложить «Открыт другой сеанс. Обновить или продолжить здесь».
Для KYC/финансовых форм — данные шифруются на клиенте (AES/GCM) перед сохранением черновика.
Удаление черновиков по TTL (например, 7 дней неактивности).

10) Примеры сценариев iGaming

10.1 KYC/верификация

1. Личные данные → 2. Документы → 3. Проверка → 4. Завершение.

Автосейв после загрузки фото.
Восстановление с шага проверки после перерыва.
Состояние «ожидание подтверждения» с индикатором.

10.2 Платеж/депозит

Шаги: 1. Сумма → 2. Метод → 3. Подтверждение.
Данные о методе сохраняются между сессиями.
Возможен возврат к выбору метода без сброса суммы.

10.3 Установка лимитов

Шаги: тип лимита → значение → подтверждение.
Прогресс показывает оставшиеся шаги.
После завершения — экран «Вступит в силу через…».

11) Метрики и контроль

Completion rate: % пользователей, завершивших все шаги.
Drop-off per step: на каком шаге уходят.
Average time per step и Time-to-Complete.
Auto-save success rate (сколько черновиков восстановлено).
Error recovery rate: доля успешно продолженных после сбоя.

12) Антипаттерны

Жесткая навигация без «Назад».
Потеря введенных данных при перезагрузке.
Перепрыгивание через шаги без контекста.
Один общий submit на 10 экранов.
Ошибка на шаге — и «Начните заново».
Пустой экран после сбоя сети.
Прогресс-бар без смысловых названий («1/4/7…»).

13) Токены дизайн-системы (пример)

json
{
"steps": {
"radius": 10,
"gap": 8,
"barHeight": 4,
"activeColor": "#2B9F5E",
"inactiveColor": "#E0E0E0"
},
"autosave": {
"debounceMs": 800,
"retryMs": 3000,
"ttlDays": 7
},
"a11y": {
"ariaLive": "polite",
"focusBehavior": "scrollToTitle"
}
}

CSS-пресеты

css
.steps { display:flex; gap:8px; list-style:none; counter-reset:step; }
.steps li { position:relative; flex:1; text-align:center; }
.steps li::before { counter-increment:step; content:counter(step); display:block; width:24px; height:24px; line-height:24px; margin:0 auto 4px; border-radius:50%; background:var(--inactive); color:#fff; }
.steps li. done::before { background:var(--success); }
.steps li[aria-current="step"]::before { background:var(--primary); }

14) QA-чек-лист

Сохранение и восстановление

• Черновик создается и обновляется при каждом шаге.
• При перезагрузке восстановление доступно и корректно.
• Конфликт версий обрабатывается (старый/новый формат).

Навигация

• «Назад» не теряет данные.
• URL соответствует текущему шагу.
• Прогресс-бар синхронизирован с состоянием.

Сеть и оффлайн

• Оффлайн сохраняет локально и восстанавливает при онлайне.
• Сообщения о сбое понятны и недеструктивны.

A11y

• `aria-current="step"`, `aria-live="polite"` работают.
• Фокус переносится на заголовок шага.

Перформанс

• Переходы мгновенные (≤ 100 мс).
• Асинхронные сохранения не блокируют UI.

15) Документация в дизайн-системе

Компоненты: `StepIndicator`, `MultiStepForm`, `AutosaveBanner`, `DraftRecoveryModal`.
Гайды по хранению контекста (local vs server), A11y и ARIA-атрибутам.
UX-шаблоны: KYC, депозиты, лимиты, анкеты, возврат после ошибки.
Do/Don’t с примерами сбоя сети и успешного восстановления.

Краткое резюме

Многошаговая форма должна ощущаться непрерывным процессом, даже если пользователь отвлекся, перезагрузил страницу или потерял сеть. Автосохранение, восстановление, видимый прогресс и безопасные ретраи превращают сложные сценарии (KYC, платежи, лимиты) в предсказуемый и доверенный опыт.