Formulare cu mai multe trepte și conservarea contextului

1) Principii

1. Un scop este de mai multe etape naturale. Împărțiți nu după tabele de baze de date, ci după logica utilizatorului: „Date → Confirmare → Completare”.
2. Fiecare pas este un sens complet. Nu zdrobiți prea fin: 3-5 pași sunt optimi.
3. Tranziția nu ar trebui să reseteze contextul. Toate câmpurile, selecțiile și fișierele sunt salvate.
4. Lasă-mă să mă întorc. Înapoi - nici o pierdere de date.
5. Urmăriţi progresul. Bară de progres, antet pas și CTA clar.
6. Utilizatorul poate pleca și reveni. Proiect - local sau pe server.

2) Arhitectura multi-pas

Starea clientului: magazin local (de exemplu, React Context/Redux/Signal) sau stocare temporară ('sessionStorage', IndexedDB).
Starea serverului: creați un draft cu 'draft _ id', salvați după fiecare pas.
Securitate: 'draft _ id' este asociat cu utilizatorul și expiră în N ore; datele sunt criptate în repaus.

• „Etapa curentă” - indicele etapei curente;
• „etape finalizate” - lista completată;
• „erori” - erori per etapă;
• 'progres = curent/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) Pas și design aspect

Structura: navigare verticală (desktop )/bara de progres de mai sus (mobil).

Numele vizibil al pasului este "1. Date cu caracter personal” „, 2. Dovada identităţii"

• Principalul este "Next'/" Continuați".
• Secundar - „Înapoi”.
• La ultimul pas - „Complet „/” Trimite „.

• Utilizați' aria-curent =” pas”'.
• Arată% dacă pașii sunt neuniforme.
• Adăugați un prompt „Poate reveni mai târziu”.

4) Salvați contextul și datele

Autosave

• schimbarea câmpului (cu un debunk de 500-1000 ms);
• Treceți la pasul următor
• pierderea focalizării filei.

• local („LocalStorage ”/IndexedDB) - dacă formularul este scurt;
• server - pentru CCM/plăți/chestionar.

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

Recuperare

La deschiderea formularului, căutați un proiect ('draft _ id' sau cheie locală).

• În caz de conflict (câmpuri noi) - „proiect de actualizare” cu evidențierea modificărilor.

5) Modele de tranziție UX

Mergeți înainte numai după validarea pasului local.
Înapoi - fără confirmare dacă nu există pierderi de date.
În cazul unei erori de rețea, salvați-o la nivel local, afișați „Restaurare la următoarea conexiune”.
Nu schimbați URL-ul în mod arbitrar: „/form/step/2 ”→ este convenabil pentru navigare/recuperare.
Support 'Ctrl + Enter' pentru o tranziție rapidă la următorul pas.

6) Stări și indicii vizuale

În curs de desfășurare: indicator gri/activ, pasul este clicabil numai dacă cel anterior este finalizat.
Completat: verde căpușă/pictogramă; poate fi deschis pentru editare.
Eroare: contur roșu, text sub câmp și în linia de progres.
Dezactivat - Pași după cel curent sunt ascunse sau indisponibile.

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 și disponibilitatea

'aria-curent = "pas" "pentru pasul activ.
Schimbarea de treaptă este exprimată de 'aria-live =' politicos ''.
Mențineți focalizarea în pasul curent; în timpul tranziției - treceți la antet.
Tab și Enter navigarea este previzibilă; Esc nu ar trebui să piardă contextul.
Pentru bare de progres pas cu pas, utilizați „rol =” listă „”, „rol =” listitem „”, și „aria-etichetă” pentru pas.

8) Eroare și comportament întrerupt

Eșecul rețelei: "Conexiunea pierdută. Datele vor fi salvate local.
Timeout: repetați automat în 3-5 s; pe eșec - proiect offline.
Pauză de sesiune: după autentificare → „Continuați de la ultimul pas”.
Eroare pas: salvați câmpurile parțial umplute, evidențiați cele problematice.

9) Sesiuni paralele și securitate

'draft _ id' este unic per utilizator.
Când deschideți o nouă filă - sugerați "O altă sesiune este deschisă. Actualizați sau continuați aici.
Pentru formulare CCM/financiare, datele sunt criptate pe client (AES/GCM) înainte de a salva proiectul.
Ștergeți proiectele de TTL (de exemplu, 7 zile de inactivitate).

10) iGaming Scenariu Exemple

10. 1 CCM/verificare

1. Date cu caracter personal → 2. Documente → 3. Verifică → 4. Finalizare.

Autosave după încărcarea unei fotografii.
Recuperarea de la etapa de testare după o pauză.
Starea „așteptare pentru confirmare” cu indicator.

10. 2 Plata/depozit

Pași: 1. Suma → 2. Metoda → 3. Confirmare.
Datele metodei sunt stocate între sesiuni.
Puteți reveni la selecția metodei fără a șterge suma.

10. 3 Stabilirea limitelor

Pașii sunt tip limită → valoare → confirmare.
Progresul arată pașii rămași.
După finalizare - ecranul „Va avea efect în”....

11) Măsurători și control

Rata de finalizare:% dintre utilizatorii care au finalizat toți pașii.
Drop-off pe pas: la ce pas pleacă.
Timpul mediu pe pas и Time-to-Complete.
Auto-salva rata de succes.
Rata de recuperare a erorilor - Procentul de recuperare de succes după un eșec.

12) Antipattern

Navigare grea fără „Înapoi”.
Pierderea intrării la repornire.
Sărind peste trepte fără context.
O trimitere comună la 10 ecrane.
Pas eroare - și „Începe din nou”.
Ecran gol după eșecul rețelei.
Bara de progres fără nume semantice („1/4/7”...).

13) Proiectarea tokenurilor sistemului (exemplu)

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

Presetări 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) Lista de verificare QA

Salvarea și restaurarea

• Un proiect este creat și actualizat la fiecare pas.
• La repornire, recuperarea este disponibilă și corectă.
• Conflictul versiunii este tratat (format vechi/nou).

Navigare

• „Înapoi” nu pierde date.
• URL-ul corespunde pasului curent.
• Bara de progres sincronizată cu starea.

Rețea și offline

• Offline salvează local și restaurează online.
• Mesajele de eșec sunt ușor de înțeles și nedistructive.

A11y

• ' aria-curent =” pas”', 'aria-live = „politicos”' de lucru.
• Focus trece la antetul pas.

Performanță

• Tranzițiile sunt instantanee (≤ 100 ms).
• Economiile asincrone nu blochează UI.

15) Documentația în sistemul de proiectare

Компоненты: 'StepIndicator', 'MultiStepForm', 'AutosaveBanner', 'DraftRecoveryModal'.
Ghiduri pentru stocarea contextului (local vs server), A11y și ARIA atribute.
Șabloane UX: KYC, depozite, limite, chestionare, întoarcere după o eroare.
Do/Don' t cu exemple de eșec de rețea și recuperare de succes.

Scurt rezumat

Forma multi-pas ar trebui să se simtă ca un proces continuu, chiar dacă utilizatorul este distras, repornit pagina, sau a pierdut rețeaua. Salvarea automată, recuperarea, progresul vizibil și retroactivele sigure transformă scenariile complexe (KYC, plăți, limite) în experiențe previzibile și de încredere.