Formulaires multiples et enregistrement du contexte

1) Principes

1. Un objectif est plusieurs étapes naturelles. Divisez non pas par tableau OBD, mais par logique utilisateur : « Données → Confirmation → Achèvement ».
2. Chaque étape est un sens terminé. Ne pas écraser trop finement : 3-5 étapes sont optimales.
3. La transition ne doit pas réinitialiser le contexte. Tous les champs, sélections et fichiers sont enregistrés.
4. Laissez-moi revenir. Pas de perte de données.
5. Suivez les progrès. La barre de progression, le titre de l'étape et les CTA clairs.
6. L'utilisateur peut partir et revenir. Brouillon - local ou sur le serveur.

2) L'architecture de la forme multiple

State client : Store local (par exemple React Contact/Redux/Signal) ou stockage temporaire ('sessionStorage', IndexedDB).
Steat serveur : créez un brouillon avec 'draft _ id', enregistrez-le après chaque étape.
Sécurité : 'draft _ id'est associé à l'utilisateur et expire après N heures ; les données sont cryptées au repos.

• « currentStep » est l'index de l'étape courante ;
• 'CompletedSteps 'est la liste des steps terminés ;
• « errors » - erreurs par étapes ;
• `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) Conception des étapes et mise en page

Structure : navigation verticale (bureau )/barre de progression en haut (mobile).
Nom visible de l'étape : "1. Données personnelles », « 2. Preuve d'identité".

• Le principal est « Suivant « /« Continuer ».
• Le secondaire est « Retour ».
• La dernière étape est Terminer/Envoyer.

• Utilisez 'aria-current =' step '.
• Affichez % si les étapes sont inégales.
• Ajoutez un conseil « Vous pouvez revenir plus tard ».

4) Enregistrer le contexte et les données

Stockage automatique

• Modification du champ (avec débauche de 500 à 1000 ms) ;
• passer à l'étape suivante ;
• perte du focus de l'onglet.

• local ('localStorage '/IndexedDB) - si la forme est courte ;
• serveur - pour les CUS/paiements/questionnaires.

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

Restauration

Lorsque vous ouvrez un formulaire, recherchez un brouillon ('draft _ id' ou une clé locale).

• En cas de conflit (nouveaux champs) : « Mettre à jour le brouillon » avec mise en surbrillance des modifications.

5) Modèles UX de transitions

Aller en avant seulement après la validation locale de l'étape.
Retour - sans confirmation s'il n'y a pas de perte de données.
En cas d'erreur réseau - nous enregistrons localement, nous montrons « Restaurer la prochaine connexion ».
Ne modifiez pas l'URL arbitrairement : '/form/step/2 'est → pratique pour la navigation/restauration.
Maintenez 'Ctrl + Enter' pour passer rapidement à l'étape suivante.

6) États et indices visuels

En cours : gris/indicateur actif, l'étape n'est cliquable que si la précédente est terminée.
Complète : tique/icône verte ; peut être ouvert pour édition.
Error : contour rouge, texte sous le champ et dans la ligne de progression.
Disabled : les étapes après le courant sont cachées ou inaccessibles.

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 et disponibilité

'aria-current = » step » pour l'étape active.
Le changement d'étape est prononcé "aria-live =" polite ".
Gardez le focus dans l'étape courante ; lors de la transition - déplacez-le sur le titre.
La navigation de l'onglet et de l'entrée est prévisible ; Le CES ne doit pas perdre son contexte.
Pour les barres de progression pas à pas, utilisez 'role = « list »,' role = « listitem » et 'aria-label' pour l'étape.

8) Comportement en cas d'erreurs et d'interruptions

Panne du réseau : bannière "Connexion perdue. Les données seront stockées localement".
Temporisation : répéter automatiquement après 3-5 s ; En cas d'échec, un brouillon hors ligne.
Casser la session : après le login → « Continuer à partir de la dernière étape ».
Erreur d'étape : nous enregistrons les champs partiellement remplis, mettons en surbrillance les champs problématiques.

9) Sessions parallèles et sécurité

'draft _ id' est unique sur l'utilisateur.
Lorsque vous ouvrez un nouvel onglet, suggérez "Une autre session est ouverte. Mettre à jour ou continuer ici.
Pour les formulaires CUS/financiers - les données sont cryptées sur le client (AES/GCM) avant d'enregistrer le brouillon.
Supprime les brouillons TTL (par exemple, 7 jours d'inactivité).

10) Exemples de scénarios iGaming

10. 1 CUS/vérification

1. Données personnelles → 2. Documents → 3. Vérification → 4. Achèvement.

Après le téléchargement de la photo.
Récupération à partir de l'étape de vérification après la pause.
L'état « en attente de confirmation » avec l'indicateur.

10. 2 Paiement/dépôt

Étapes : 1. Montant → 2. Méthode → 3. Confirmation.
Les données sur la méthode sont conservées entre les sessions.
Il est possible de revenir au choix de la méthode sans réinitialiser le montant.

10. 3 Fixer des limites

Étapes : type de limite → valeur → confirmation.
Les progrès montrent les étapes restantes.
Une fois terminé, l'écran « Entrera en vigueur »....

11) Métriques et contrôles

Taux de complétion :% des utilisateurs qui ont terminé toutes les étapes.
Drop-off per step : à quelle étape on part.
Average time per step и Time-to-Complete.
Taux de réussite auto-save (combien de brouillons ont été restaurés).
Taux de récupération d'erreur : proportion de ceux qui ont continué avec succès après l'échec.

12) Anti-modèles

Navigation rigide sans Retour.
Perte des données saisies lors du redémarrage.
Sauter par-dessus les étapes sans contexte.
Un submit total pour 10 écrans.
Erreur à l'étape - et « Recommencer ».
Écran vide après une panne de réseau.
Barre de progression sans noms sémantiques (« 1/4/7 »...).

13) Tokens de système de conception (exemple)

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

Presets 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) Liste de vérification QA

Sauvegarde et restauration

• Le brouillon est créé et mis à jour à chaque étape.
• Au redémarrage, la restauration est disponible et correcte.
• Conflit de version en cours de traitement (ancien/nouveau format).

Navigation

• « Back » ne perd pas de données.
• L'URL correspond à l'étape courante.
• La barre de progression est synchronisée avec l'état.

Réseau et hors ligne

• Hors ligne enregistre localement et restaure en ligne.
• Les rapports d'échec sont compréhensibles et peu concluants.

A11y

• ' aria-current = » step »,' aria-live = « polite » fonctionnent.
• Le focus est déplacé sur le titre de l'étape.

Performance

• Transitions instantanées (≤ 100 ms).
• Les sauvegardes asynchrones ne bloquent pas l'IU.

15) Documentation dans le système de conception

Компоненты: `StepIndicator`, `MultiStepForm`, `AutosaveBanner`, `DraftRecoveryModal`.
Hydes par stockage de contexte (local vs server), A11y et attributs ARIA.
Modèles UX : KYC, dépôts, limites, questionnaires, retours après erreur.
Do/Don't avec des exemples de panne réseau et de restauration réussie.

Résumé succinct

Un formulaire multi-flux doit être ressenti comme un processus continu, même si l'utilisateur est distrait, a rechargé la page ou a perdu le réseau. Le stockage automatique, la restauration, les progrès visibles et les retraits sécurisés transforment des scénarios complexes (KYC, paiements, limites) en une expérience prévisible et fiable.