Patterns UX
Formulaires complexes
Formulaire simple vs multi-étapes
| Critère | Page unique | Multi-étapes |
|---|---|---|
| Nombre de champs | < 6 champs | ≥ 7 champs |
| Domaines logiques | 1 domaine | 2+ domaines distincts |
| Données conditionnelles | Non ou peu | Oui, flux bifurque selon les choix |
| Exemples MC | Modifier statut, ajouter un contact | Nouvelle commande PS, configurateur Packs Camp |
Pattern multi-étapes
Indicateur de progression en haut, boutons Back/Next cohérents, résumé final avant soumission.
Client
Produit
3
Personnalisation
4
Récapitulatif
Étape 3 — Personnalisation
Étape 3 sur 4
Étape récapitulative (toujours la dernière)
Avant toute soumission avec impact fort (commande confirmée, email envoyé), montrer un résumé clair. Le CTA final est explicite et non "Valider" ou "OK".
Récapitulatif de la commande
Client Scouts de Namur ASBL
Produit T-shirt Organic · 100 pcs · Taille M
Personnalisation Broderie poitrine gauche · Logo fourni
Montant estimé € 1 240 (HT)
Délai estimé 4–6 semaines
Règles de validation
✓ Valider au blur (onBlur) pour chaque champ individuellement
✓ Valider l'ensemble du formulaire à la soumission
✓ Afficher le message d'erreur sous le champ concerné, pas en toast
✓ Focus automatique sur le premier champ en erreur après soumission
✗ Ne pas valider en temps réel sur chaque keystroke
✗ Ne pas bloquer la navigation entre étapes si les données sont invalides sans message clair
✗ Ne pas perdre les données saisies si l'utilisateur navigue en arrière