Conception de formulaires UX

1) Principes

1. D'abord la tâche, puis les champs. Formulaires : Continue le script personnalisé, pas la liste des bases de données.
2. Un écran est un objectif. Enlevez tout ce qui ne mène pas à la fin de la tâche.
3. Ne jamais perdre de données. Affichage automatique, restauration du brouillon, répétitions sécurisées.
4. Montrez-moi comment c'est. Règles et exemples avant l'erreur ; Validez prudemment.
5. Disponibilité par défaut. Labels, focus, contraste, navigation clavier.
6. Vitesse prévisible. Première réponse ≤ 100 ms, envoi avec un statut et un progrès explicites.

2) L'architecture de l'information du formulaire

Le but → les étapes → le champ. Commencez par le résultat (par exemple, « paiement ») et mettez en surbrillance l'ensemble minimum de champs.
Groupement au sens : « Données personnelles », « Paiement », « Confirmation ». Chaque groupe ≤ 6 champs.
Divulgation progressive : afficher les champs supplémentaires par condition (toggle/sélection du pays).
L'ordre des champs est comme dans la tête de l'utilisateur, du connu au complexe.

3) Mise en page et grille

Une colonne pour les mobiles et la plupart des tâches - plus rapide dans le regard et l'ordre.
Deux colonnes sont appropriées pour les courts champs interconnectés (date/heure, prénom/nom).
Hauteur de la ligne 40-48 px, distance entre les champs 8-12 px (associés )/16-24 px (groupes).
Alignement des étiquettes en haut du champ ; à droite - ne pas utiliser pour les formes étroites.

4) Labels, playcholders, helpers

Le label est obligatoire. Le placholder est un exemple, pas un remplacement.
Placez le texte helper sous le champ : règles, format, référence d'exemple.
Les champs facultatifs marquent « (facultatif) » au lieu de « » sur les champs obligatoires.

Exemple :

html
<label for = "iban"> IBAN <span class = "muted"> (optional) </span> </label>
<input id="iban" aria-describedby="iban-help">
<small id = "iban-help "> Format A-Z, 0-9; example: DE89 3704 0044 0532 0130 00 </small>

5) Étapes et progrès

Formulaires multisectoriels (ACC/paiements) : 3-5 étapes, progrès clair « Étape 2 sur 4 ».
Enregistrez les étapes terminées ; autorisez le retour sans perte de données.
Boutons de navigation : « Retour », « Suivant », « Confirmer » final - toujours au même endroit.

6) Gestion de l'entrée

Claviers et attributs : 'type', 'inputmode', 'autocoplete' sous le type de données.
Utilisez les masques d'entrée doucement (téléphone, IBAN, PAN, date), gardez les valeurs normalisées.
Ne cassez pas le remplissage automatique : "autocoplete =" given-name "|" cc-number "|" one-time-code ", etc.
Presets de montants/shortcats : « + 50/+ 100/Tous » à côté du champ de montant.

Tableau des attributs (sockr.) :

Champ	type	inputmode	autocomplete
Email	email	email	email
Téléphone	tel	tel	tel
Montant	text	decimal	off
PAN	text	numeric	cc-number
CVC	password	numeric	cc-csc
Date de la carte	text	numeric	cc-exp
OTP	text	numeric	one-time-code

7) Validation et erreurs

Stratégie : avant l'entrée (helper), pendant (conseils doux), après (sur blur/submit).
Les vérifications asynchrones (identifiant unique, limites, risque) sont avec 250-400 ms.
Texte des erreurs : la raison → comment corriger → alternative.
Résumé du panneau au-dessus du formulaire pour plusieurs erreurs + focus sur la première erreur.
Idempotency-Key pour les actions critiques (pari/paiement) et les retraits sécurisés.

8) Boutons et envoi

Le CTA primaire est en surbrillance couleur/taille, disponible par Entrée.
« Busy » - maintien et blocage de la répétition de la clique ; avec un retard> 3-5 s - « En attente de confirmation »....
Après le succès - le statut explicite (toast/écran « Terminé ») + ce qui se passera ensuite.

9) Accessibilité (A11y)

Liens corrects 'label → input', erreurs via 'aria-describedby', critiques - 'role =' alert '.
Visible ': focus-visible', l'ordre de Tabulation correspond au visuel.
Contraste texte/icônes ≥ AA ; le sens n'est pas seulement la couleur.
Prise en charge de 'prefers-reduced-motion' : minimum d'animations.
Pour les groupes radio, 'fieldset/legend', pour les indices, 'role = « status ».

10) Localisation et formats internationaux

Dates/devises/numéros - locaux lors de l'entrée, stockage - ISO/unités mineures.
Admettez différents alphabets dans les noms/adresses ; ne limitez pas les traits d'union/apostrophes.
Gardez votre téléphone en E.164 ; le pays est choisi explicitement ou parmi '+ CC' lors de l'insertion.

11) Performance et stabilité

La première résonance visuelle ≤ 100 мс; Vérifications asynchrones - ne bloquent pas l'écran.
Skeleton au lieu d'un spinner « suspendu », fixez les hauteurs, évitez le CLS.
Virtualisez de longues listes (par exemple pays/banques).
Animez uniquement 'bou/opacity', sans blur/ombres massives.

12) Sécurité et vie privée

Ne pas enregistrer le PAN/CVC/passeport ; ne pas envoyer à RUM/console.
Masquez les champs sensibles, ne les conservez pas dans l'auto.
Ne pas révéler si le compte existe : « Si l'email est enregistré, nous enverrons un email ».
Stockage - minimum nécessaire ; montrez pourquoi KYC est nécessaire.

13) Modèles de scénarios types

13. 1 Paiement/dépôt

Le champ du montant avec les presets, la devise est clairement indiquée.
PAN avec masque doux, contrôle Luhn ; Le CVC est caché ; date 'MM/YY' avec auto '/'.
Texte sur les commissions/délais à proximité, pas dans tooltip.

13. 2 Retraits

Étapes : « Montant → Méthode → Confirmation ».
Progrès et « Habituellement jusqu'à N minutes/heures » (pas de promesses fermes).
Options de méthode par pays ; avertissements sur les limites.

13. 3 KYC

Chargeur de fichiers étape par étape : exigences de format/poids, prépromotion, confidentialité.
Délais de vérification et canal d'état (courrier/notification).

13. 4 Limites et jeu responsable

Unités compréhensibles (par jour/semaine/mois), pré-construction, confirmation des changements, « Entrez en vigueur par »....

14) Anti-modèles

Placeholder à la place du label.
Erreurs « par caractère » sans débonse.
Réinitialiser le formulaire en cas d'erreur.
L'instruction critique n'est cachée que dans tooltip.
Masques durs interdisant les caractères valides/insertion.
Verrouille toute la page pour vérifier un champ.
Envoi sans busy/progression explicite.

15) Snippets de mise en œuvre

Résumé des erreurs + focus sur le premier problème

js function focusFirstError() {
const el = document. querySelector('[aria-invalid="true"]');
if (el) el. focus({ preventScroll:false });
}

Bouton avec busy instantané et idempotence

js btn. addEventListener('click', async () => {
btn. classList. add('is-busy');
try {
const r = await fetch('/api/submit', {
method: 'POST',
headers: { 'Idempotency-Key': crypto. randomUUID() },
body: new FormData(document. querySelector('form'))
});
if (!r.ok) throw new Error();
// success UI
} catch {
// show retry
} finally {
btn. classList. remove('is-busy');
}
});

Cadre HTML du groupe de messages radio disponible

html
<fieldset>
<legend> How to get </legend>
<label><input type="radio" name="method" value="sepa"> SEPA</label>
<label><input type="radio" name="method" value="swift"> SWIFT</label>
</fieldset>

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

json
{
"form": {
"gap": 12,
"groupGap": 20,
"labelSize": 14,
"fieldHeight": 44,
"radius": 10
},
"motion": {
"pressMs": 90,
"hoverMs": 160,
"overlayInMs": 240
},
"validation": {
"debounceMs": 300,
"blurFeedbackMs": 100
},
"a11y": {
"focusRing": { "width": 2, "offset": 2 },
"contrastAA": true
}
}

Presets CSS

css
.form { display:grid; gap:12px; }
.form__group { display:grid; gap:20px; }
label { font-size:14px; }
.input { height:44px; padding:0 12px; border-radius:10px; }
.input:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
.field-error { color: var(--role-danger); font-size:.875rem; margin-top:6px; }

17) Métriques et expériences

Taux de complétion, Time-to-Complete, Taux d'erreur par champ.
Taux de réussite Retry, proportion de formes abandonnées, profondeur d'étape.
CTR conseils/exemples, proportion de remplissage automatique.
A/B : ordre des champs, presets des montants, textes d'erreur, fractionnement par étapes.

18) Liste de vérification QA

Sens et flux

Les champs correspondent à l'objectif ; Il n'y a pas d'excès.
Les groupes sont logiques ; 6 champs maximum par groupe.

Entrée

Correct 'type/inputmode/autocomplete'.
Les masques sont doux, l'insertion ne casse pas, le caret est prévisible.

Validation

Aide avant l'entrée ; erreurs sur blur/submit ; debouns 250-400 ms.
Tableau récapitulatif pour les erreurs multiples ; Focus sur le premier.

Disponibilité

Les labels sont liés ; le contraste ≥ AA ; ': focus-visible' est visible.
Navigation au clavier ; groupes radio avec 'fieldset/legend'.

Performance

Première réponse ≤ 100 ms ; Il n'y a pas de spinners « suspendus ».
Pas de CLS ; les listes longues sont virtualisées.

Sécurité

Pas de logs de champs sensibles ; Le PAN/CVC n'est pas en mode auto.
L'idempotence et les retraits sécuritaires sont inclus.

19) Spécificités iGaming

Taux : champ de somme + presets, instantané 'busy', confirmation optimiste avec la possibilité d'undo (si la réglementation le permet).
Paiements/conclusions : commissions explicites et délais à proximité des champs, pas seulement dans les indices ; vérification des limites et du statut de KYC.
Tournois : formulaire d'inscription avec un ensemble minimal de données, règles et checkbox acceptables sans « patterns sombres ».
Jeu responsable : formes de réglage des limites à intervalles compréhensibles et prévisualisation des résultats (« Votre limite journalière sera de 2 000 ₴ à partir de demain »).

Résumé succinct

Une bonne forme est un objectif clair, un jeu minimal de champs, des règles compréhensibles avant l'erreur, une réponse instantanée et des données stockées. Concevez une structure à partir d'un scénario, respectez l'accessibilité et la localisation, incluez des retraits sécurisés et l'idempotence. C'est ainsi que les formes se sentent rapides et fiables - en particulier dans les scénarios critiques d'iGaming.