Moduli multifunzione e salvataggio del contesto

1) Principi

1. Un obiettivo è un paio di passi naturali. Non in base alle tabelle del database, ma in base alla logica dell'utente, «Dati Conferma Completamento».
2. Ogni passo è un senso completo. Non frazionare troppo poco: 3-5 passi sono ottimali.
3. La transizione non deve ripristinare il contesto. Tutti i campi, le selezioni e i file vengono salvati.
4. Permettetemi di tornare indietro. Indietro, senza perdita di dati.
5. Monitorate i progressi. Progress bar, titolo del passo e CTA chiaro.
6. L'utente può uscire e tornare. La bozza è locale o sul server.

2) Architettura multifunzione

Stato client: lo store locale (ad esempio, React Content/Redux/Server) o il deposito temporaneo ('sessionStorage', IndexedDB).
Stato server - Crea una bozza con draft _ id e salva dopo ogni passo.
Protezione: 'draft _ id' è associato all'utente e scade dopo N ore; i dati vengono cifrati in pace.

• «currentStep» è l'indice del passo corrente.
• «completedSteps» è la lista dei completati;
• «errors» - errori per fasi
• `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) Progettazione dei passi e layout

Struttura: navigazione verticale (desktop )/avanzamento bar in alto (mobile).
Il nome visibile del passo è "1. Dati personali», «2. Conferma di identità".

• Il principale è Avanti/Continua.
• Secondario, «Indietro».
• L'ultimo passo è «Termina «/» Invia ».

• Usa "aria-current =" step ".
• Mostra il% se i passi non sono uniformi.
• Aggiungere il suggerimento «Puoi tornare più tardi».

4) Salvare il contesto e i dati

Archiviazione automatica

• Modifica del campo (con debount 500-1000 ms)
• passare al passo successivo;
• Perdere l'attivazione della scheda.

• locale ('localStorage '/ IndexedDB) - se la forma è breve;
• server - per CUS/pagamenti/questionario.

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

Ripristino

Quando si apre un modulo, cercare una bozza ('draft _ id' o chiave locale).

• In caso di conflitto (nuovi campi), aggiorna la bozza evidenziando le modifiche.

5) X pattern di transizione

Passa in avanti solo dopo la convalida locale del passo.
Indietro, senza conferma, se non c'è perdita di dati.
In caso di errore di rete: memorizzate localmente, visualizzate Ripristina alla prossima connessione.
Non cambiare l'URL casualmente: '/form/step/2 'è facile da navigare/ripristinare.
Supporta Ctrl + Enter per passare rapidamente al passo successivo.

6) Stati e suggerimenti visivi

In progress: indicatore grigio/attivo, la fase è cliccabile solo se il passo precedente è completato.
Completed: spunta verde/icona; è possibile aprire per la modifica.
Errore: tracciato rosso, testo sotto il campo e linee avanzate.
Disabled: i passi dopo l'attuale sono nascosti o non sono disponibili.

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 e disponibilità

"aria-current =" step "per il passo attivo.
Il cambio di passo è dettò aria-live = «polite».
Mantenete l'attivazione nel passo corrente. al passaggio, spostarsi sul titolo.
La navigazione di Tav e Enter è prevedibile; Esc non deve perdere il contesto.
Usate «role = list», «role = listitem» e «aria-label» per il passo.

8) Comportamento in caso di errori e interruzioni

Rete non riuscita: striscione "Connessione persa. I dati saranno salvati localmente".
Timeout: ripete automaticamente dopo 3-5 s; in caso di fallimento, una bozza off-line.
Interruzione sessione - Dopo il login, «Continua dall'ultimo passo».
Passo non riuscito: salviamo i campi parzialmente riempiti e evidenziamo quelli con problemi.

9) Sessioni parallele e sicurezza

draft _ id è univoco per utente.
Quando si apre una nuova scheda, suggerire "Aperta un'altra sessione. Aggiorna o continua qui".
Per CUS/moduli finanziari - I dati vengono cifrati sul client (AES/GCM) prima di salvare la bozza.
Elimina le bozze TTL (ad esempio 7 giorni di inattività).

10) Esempi di script di iGaming

10. 1 CUS/convalida

1. Dati personali → 2. I documenti sono → 3. Controllo 4. Completamento.

Una volta caricata la foto.
Ripristina la fase di convalida dopo l'interruzione.
Stato in attesa di conferma con indicatore.

10. 2 Pagamento/deposito

Passo: 1. → 2. Metodo 3. Conferma.
I dati relativi al metodo vengono salvati tra le sessioni.
È possibile ripristinare la selezione del metodo senza ripristinare l'importo.

10. 3 Impostazione dei limiti

Passaggi - Il tipo di limite il valore della conferma.
I progressi mostrano i passi rimasti.
Al termine, la schermata «Entrerà in vigore attraverso»...

11) Metriche e controllo

Completamento rate:% degli utenti che hanno completato tutti i passaggi.
Drop-off per step: a che passo vanno.
Average time per step и Time-to-Complete.
Auto-save success rate (quante bozze sono state ripristinate).
Errore recovery rate - Percentuale continuata dopo il guasto.

12) Antipattern

Navigazione dura senza «Indietro».
Perdita dei dati immessi durante il riavvio.
Saltare i passi senza contesto.
Un sottomit totale per 10 schermate.
Errore nella fase - e ricomincia da capo.
Schermo vuoto dopo un guasto alla rete.
Progress bar senza nomi significativi («1/4/7»...).

13) Token di progettazione (esempio)

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 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) Foglio di assegno QA

Salvataggio e ripristino

• La bozza viene creata e aggiornata a ogni passo.
• Durante il riavvio, il ripristino è disponibile e corretto.
• Il conflitto di versioni viene elaborato (formato vecchio/nuovo).

Navigazione

• Indietro non perde i dati.
• L'URL corrisponde al passaggio corrente.
• Il progress bar è sincronizzato con lo stato.

Rete e off-line

• Off-line salva localmente e ripristina online.
• I messaggi di errore sono chiari e non costruttivi.

A11y

• 'aria-current = «step», «aria-live =» polite «» funzionano.
• L'attivazione viene spostata al titolo del passo.

Performance

• Transizioni immediate (≤ 100 ms).
• I salvataggi asincroni non bloccano l'UI.

15) Documentazione in progettazione

Компоненты: `StepIndicator`, `MultiStepForm`, `AutosaveBanner`, `DraftRecoveryModal`.
Guidi di archiviazione del contesto (locale vs server), A11y e attributi ARIA.
Modelli UX: KYC, depositi, limiti, moduli, rimborso dopo un errore.
Do/Don't con esempi di guasto alla rete e ripristino riuscito.

Breve riepilogo

Il modulo multi-aga deve essere un processo continuo, anche se l'utente è distratto, ha riavviato la pagina o ha perso la rete. Conservazione automatica, ripristino, progressi visibili e retrai sicuri trasformano gli scenari complessi (KYC, pagamenti, limiti) in esperienza prevedibile e affidabile.