Mehrstufige Formulare und Speichern des Kontexts

1) Grundsätze

1. Ein Ziel sind mehrere natürliche Schritte. Teilen Sie nicht nach DB-Tabellen, sondern nach der Logik des Benutzers: „Daten → Bestätigung → Fertigstellung“.
2. Jeder Schritt ist eine abgeschlossene Bedeutung. Nicht zu fein zerkleinern: 3-5 Schritte optimal.
3. Der Übergang darf den Kontext nicht zurücksetzen. Alle Felder, Wahlen und Dateien werden gespeichert.
4. Erlauben Sie mir, zurückzukehren. Zurück - ohne Datenverlust.
5. Verfolgen Sie den Fortschritt. Fortschrittsbalken, Schrittkopf und klare CTAs.
6. Der Benutzer kann gehen und zurückkehren. Entwurf - lokal oder auf dem Server.

2) Mehrstufige Architektur

Client State: Lokaler Stor (z.B. React Context/Redux/Signal) oder temporärer Speicher („sessionStorage“, IndexedDB).
Server State: Erstellen Sie einen Entwurf mit 'draft _ id', speichern Sie nach jedem Schritt.
Sicherheit: 'draft _ id' ist mit dem Benutzer verknüpft und läuft nach N Stunden ab; Daten werden im Ruhezustand verschlüsselt.

• 'currentStep' ist der Index des aktuellen Schrittes;
• 'completedSteps' - Liste der abgeschlossenen Schritte;
• „errors“ - Per-Step-Fehler;
• `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) Schritt- und Layoutdesign

Aufbau: vertikale Navigation (Desktop )/Fortschrittsbalken von oben (Mobile).
Der sichtbare Name des Schrittes: "1. Persönliche Daten“, „2. Identitätsnachweis".

• Die wichtigste ist „Weiter „/„ Weiter “.
• Sekundär - „Zurück“.
• Im letzten Schritt - „Beenden „/“ Senden “.

• Verwenden Sie' aria-current = 'step'.
• Zeigen Sie% an, wenn die Schritte ungleichmäßig sind.
• Fügen Sie den Hinweis „Sie können später zurückkehren“ hinzu.

4) Speichern von Kontext und Daten

Autoerhaltung

• Feldänderung (mit Debunce 500-1000 ms);
• Übergang zum nächsten Schritt;
• Verlust des Fokus der Registerkarte.

• lokal ('localStorage '/IndexedDB) - wenn das Formular kurz ist;
• Server - für KUS/Zahlungen/Fragebogen.

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

Wiederherstellung

Suchen Sie beim Öffnen des Formulars nach einem Entwurf ('draft _ id' oder einem lokalen Schlüssel).

• Im Konfliktfall (neue Felder) - „Entwurf aktualisieren“ mit Hervorhebung der Änderungen.

5) UX-Übergangsmuster

Vorwärts nur nach lokaler Validierung des Schrittes.
Zurück - keine Bestätigung, wenn kein Datenverlust vorliegt.
Im Falle eines Netzwerkfehlers - lokal speichern, zeigen wir „Wir werden bei der nächsten Verbindung wiederherstellen“.
Ändern Sie die URL nicht willkürlich: '/form/step/2 'ist → praktisch für die Navigation/Wiederherstellung.
Unterstützen Sie' Strg + Enter', um schnell zum nächsten Schritt zu gelangen.

6) Zustände und visuelle Hinweise

In Bearbeitung: grauer/aktiver Indikator, der Schritt ist nur klickbar, wenn der vorherige abgeschlossen ist.
Abgeschlossen: grünes Häkchen/Symbol; kann zur Bearbeitung geöffnet werden.
Fehler: Roter Umriss, Text unter dem Feld und in den Fortschrittslinien.
Deaktiviert: Die Schritte nach dem aktuellen sind ausgeblendet oder nicht verfügbar.

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 und Verfügbarkeit

'aria-current =' step''für den aktiven Schritt.
Der Schrittwechsel wird mit 'aria-live =' polite' beschallt.
Behalten Sie den Fokus innerhalb des aktuellen Schritts; Wenn Sie wechseln, verschieben Sie zur Überschrift.
Tab und Enter Navigation ist vorhersehbar; Der ESC darf den Kontext nicht verlieren.
Für Schritt-für-Schritt-Fortschrittsbalken verwenden Sie' role = 'list', 'role =' listitem 'und' aria-label 'für den Schritt.

8) Verhalten bei Fehlern und Unterbrechungen

Netzwerkfehler: Banner "Verbindung verloren. Die Daten werden lokal gespeichert".
Timeout: automatisch nach 3-5 s wiederholen; im Falle eines Fehlers - ein Offline-Entwurf.
Sitzungsunterbrechung: Nach dem Login → „Mit dem letzten Schritt fortfahren“.
Schrittfehler: Teilweise ausgefüllte Felder speichern, Problemfelder hervorheben.

9) Parallele Sitzungen und Sicherheit

'draft _ id' ist pro Benutzer eindeutig.
Wenn Sie eine neue Registerkarte öffnen, schlagen Sie „Eine andere Sitzung geöffnet“ vor. Aktualisieren oder hier fortfahren".
Bei KUS/Finanzformularen werden die Daten auf dem Client (AES/GCM) verschlüsselt, bevor der Entwurf gespeichert wird.
Löschen von TTL-Entwürfen (z.B. 7 Tage Inaktivität).

10) Beispiele für iGaming-Szenarien

10. 1 KUS/Verifizierung

1. Persönliche Daten → 2. Dokumente → 3. Prüfung → 4. Fertigstellung.

Autosave nach dem Hochladen des Fotos.
Wiederherstellung vom Prüfschritt nach der Pause.
Status „auf Bestätigung warten“ mit Indikator.

10. 2 Zahlung/Anzahlung

Schritte: 1. Die Summe → 2. Methode → 3. Bestätigung.
Die Methodendaten werden zwischen den Sitzungen gespeichert.
Es ist möglich, zur Auswahl der Methode zurückzukehren, ohne den Betrag zurückzusetzen.

10. 3 Limits festlegen

Schritte: Art des Limits → Wert → Bestätigung.
Der Fortschritt zeigt die verbleibenden Schritte.
Nach Abschluss - Bildschirm „Wird wirksam durch“....

11) Metriken und Kontrolle

Erfüllungsquote:% der Benutzer, die alle Schritte abgeschlossen haben.
Drop-off per step: in welchem Schritt sie gehen.
Average time per step и Time-to-Complete.
Auto-Save Erfolgsrate (wie viele Entwürfe wurden wiederhergestellt).
Fehlerwiederherstellungsrate: Der Anteil, der nach einem Fehler erfolgreich fortgesetzt wurde.

12) Antipatterns

Harte Navigation ohne „Zurück“.
Verlust der eingegebenen Daten beim Neustart.
Springen über Schritte ohne Kontext.
Ein gemeinsamer Submit für 10 Bildschirme.
Fehler im Schritt - und „Neu starten“.
Leerer Bildschirm nach Netzwerkausfall.
Progress-Bar ohne semantische Namen („1/4/7“...).

13) Design-System-Token (Beispiel)

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-Presets

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) QS-Checkliste

Speichern und Wiederherstellen

• Bei jedem Schritt wird ein Entwurf erstellt und aktualisiert.
• Beim Neustart ist die Wiederherstellung verfügbar und korrekt.
• Versionskonflikt wird bearbeitet (altes/neues Format).

Navigation

• „Zurück“ verliert keine Daten.
• Die URL entspricht dem aktuellen Schritt.
• Die Fortschrittsleiste ist mit dem Zustand synchronisiert.

Netzwerk und offline

• Offline speichert lokal und stellt online wieder her.
• Die Berichte über die Störung sind verständlich und unzerstörbar.

A11y

• ' aria-current =“ step“', 'aria-live = „polite“' funktionieren.
• Der Fokus wird auf den Schrittkopf übertragen.

Leistung

• Die Übergänge sind augenblicklich (≤ 100 ms).
• Asynchrone Speichervorgänge blockieren die Benutzeroberfläche nicht.

15) Dokumentation im Konstruktionssystem

Компоненты: `StepIndicator`, `MultiStepForm`, `AutosaveBanner`, `DraftRecoveryModal`.
Kontextspeicher (local vs server), A11y und ARIA-Attribute.
UX-Vorlagen: KYC, Einzahlungen, Limits, Fragebögen, Rückerstattung nach einem Fehler.
Do/Don't mit Beispielen für Netzwerkfehler und erfolgreiche Wiederherstellung.

Kurze Zusammenfassung

Ein mehrstufiges Formular sollte sich wie ein kontinuierlicher Prozess anfühlen, auch wenn der Benutzer abgelenkt ist, die Seite neu geladen hat oder das Netzwerk verloren hat. Auto-Save, Recovery, sichtbarer Fortschritt und sichere Retrays machen komplexe Szenarien (KYC, Zahlungen, Limits) zu einem vorhersehbaren und vertrauenswürdigen Erlebnis.