Багатокрокові форми та збереження контексту

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) - якщо форма коротка;
• сервер - для КУС/платежів/анкети.

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'унікальний на користувача.
При відкритті нової вкладки - запропонувати "Відкритий інший сеанс. Оновити або продовжити тут".
Для КУС/фінансових форм - дані шифруються на клієнті (AES/GCM) перед збереженням чернетки.
Видалення чернеток по TTL (наприклад, 7 днів неактивності).

10) Приклади сценаріїв iGaming

10. 1 КУС/верифікація

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, платежі, ліміти) в передбачуваний і довірений досвід.