coastdigitalgroup/coastai-skills

Système de Design de Formulaires

Objectif

La compétence Système de Design de Formulaires fournit une méthodologie pour concevoir le cadre visuel et spatial des formulaires web. Alors que l'implémentation technique gère le « comment » et l'optimisation de la croissance le « pourquoi », le système de design définit le « quoi » et le « où ». Il garantit que les éléments du formulaire — étiquettes, champs de saisie, choix et actions — sont organisés en une interface prévisible, accessible et génératrice de confiance, qui réduit la charge cognitive et prévient les erreurs utilisateur.

Cas d'utilisation

• Concevoir une bibliothèque de composants UI ou un système de design pour les formulaires.
• Établir des normes visuelles pour les interfaces de saisie de données complexes à plusieurs étapes.
• Auditer des formulaires existants pour détecter des incohérences visuelles ou des frictions spatiales.
• Concevoir des mises en page de formulaires responsives qui préservent la hiérarchie sur tous les appareils.
• Standardiser les motifs de visualisation des erreurs et de validation.

Quand ne PAS l'utiliser

• Barres de recherche génériques : Les champs de recherche simples et uniques nécessitent rarement un traitement complet du système de design.
• Médias interactifs expérimentaux : Lorsque l'interaction de type formulaire est secondaire par rapport à une expérience narrative ou artistique.
• Micro-interactions à faible enjeu : Comme un pouce vers le haut/vers le bas ou un simple interrupteur sans saisie de données associée.

Entrées

1. Anatomie des informations : Les points de données spécifiques à collecter et leurs relations.
2. Points de rupture des appareils : Exigences responsives provenant du responsive-grid-system.
3. Styles de marque : Échelles typographiques, palettes de couleurs et jetons d'espacement (provenant du fluid-spacing-system).
4. Exigences d'interaction : Si le formulaire nécessite une validation en temps réel, des téléchargements de fichiers ou des sélections de choix complexes.

Résultats

1. Spécification d'anatomie des champs : Définitions visuelles pour les étiquettes, les champs, le texte d'aide, les icônes et les messages d'erreur.
2. Plan de mise en page : Règles spatiales pour le regroupement des champs, l'alignement (en haut ou à gauche) et le placement des actions.
3. Cartographie des composants de choix : Définitions indiquant quand utiliser le bouton radio, la case à cocher, l'interrupteur ou la liste déroulante.
4. Matrice des états et de la rétroaction : Traitements visuels pour les états de survol, de focus, de désactivation, de succès et d'erreur.

Processus de travail

1. Définir l'anatomie des composants

Établir une structure cohérente pour chaque « Groupe de champs ». Un champ doit se composer de :

• L'étiquette : Un texte clair et concis identifiant le champ.
• Le champ de saisie : Le conteneur interactif (texte, sélecteur, etc.).
• Texte d'aide / d'instruction : Un guide persistant (par exemple, « Le mot de passe doit comporter 8 caractères »).
• Message d'erreur : Un retour contextuel qui apparaît uniquement lorsque la validation échoue.

2. Établir la disposition spatiale et l'alignement

Déterminer la relation entre les étiquettes et les champs :

• Étiquettes alignées en haut (recommandé) : Idéal pour la lisibilité et la réactivité mobile.
• Étiquettes alignées à gauche : Uniquement pour les interfaces de bureau riches en données où l'espace vertical est critique.
• Regroupement : Utiliser un espacement logique (par exemple, --space-l) entre les groupes et un espacement plus petit (par exemple, --space-s) à l'intérieur des groupes.

3. Sélectionner les motifs d'interaction

Assigner des motifs UI aux types de données :

• Choix binaires : Utiliser des cases à cocher pour « Oui/Non » ou la sélection multiple.
• Exclusivité mutuelle : Utiliser des boutons radio pour 2 à 5 options ; utiliser la liste déroulante pour 6 options ou plus.
• Interrupteurs immédiats : Utiliser des interrupteurs pour les paramètres qui prennent effet immédiatement sans action « Envoyer ».

4. Concevoir la boucle de rétroaction

Créer une hiérarchie visuelle pour la validation :

• État de focus : Utiliser un anneau à fort contraste pour indiquer le champ actif.
• État d'erreur : Utiliser la couleur (généralement rouge), des icônes et l'épaisseur de la bordure pour signaler les erreurs.
• État de succès : Utiliser des indices subtils (comme une coche verte) pour les champs à enjeux élevés (par exemple, disponibilité du nom d'utilisateur).

5. Planifier les adaptations responsives

Cartographier la manière dont le formulaire s'adapte aux fenêtres d'affichage plus petites :

• Empilement : Les mises en page multi-colonnes sur ordinateur de bureau doivent s'empiler en une seule colonne sur mobile.
• Cibles tactiles : S'assurer que toutes les zones interactives (boutons radio, cases à cocher, boutons) mesurent au moins 24x24 px (minimum WCAG 2.2 SC 2.5.8) ; 44x44 px est préféré et doit être la valeur par défaut pour les actions principales d'envoi.

Règles de décision

• La règle de la colonne unique : Utiliser une mise en page à colonne unique pour la majorité des formulaires afin de maintenir un chemin de balayage vertical clair et de réduire la fatigue oculaire lors du suivi.
• Alignement des étiquettes : Par défaut, utiliser des étiquettes alignées en haut. Elles réduisent le nombre de fixations oculaires nécessaires pour traiter le formulaire.
• Espaces réservés vs étiquettes : Ne jamais utiliser les espaces réservés comme étiquettes. Les étiquettes doivent rester visibles même après que l'utilisateur a commencé à taper.
• Hiérarchie des boutons : L'action « Envoyer » principale doit être la plus visible visuellement. Les actions secondaires (par exemple, « Annuler ») doivent être des liens textuels ou des boutons à faible contraste.
• Proximité : Placer le texte d'aide et les messages d'erreur aussi près que possible du champ (généralement juste en dessous).

Contraintes

• Accessibilité : Les étiquettes doivent être liées par programme aux champs (<label for> ou enveloppement). Les rapports de contraste pour le texte et les bordures doivent respecter le niveau WCAG AA (4.5:1 pour le texte, 3:1 pour les composants UI). Les messages d'erreur doivent être associés par programme à leur champ via aria-describedby, et les champs invalides doivent définir aria-invalid="true". Les indicateurs de focus ne doivent pas être cachés derrière des en-têtes collants, des toasts ou des superpositions (WCAG 2.4.11 Focus Not Obscured).
• Réactivité : Les champs de formulaire ne doivent jamais déborder de leur conteneur ni avoir des largeurs fixes qui dépassent les fenêtres d'affichage mobiles.
• Hiérarchie visuelle : Les messages d'erreur doivent être visuellement distincts du texte d'aide pour garantir qu'ils ne soient pas ignorés.

Motifs d'échec courants

• Le piège de « l'étiquette d'espace réservé » : Utiliser des espaces réservés à la place des étiquettes, ce qui fait perdre le contexte à l'utilisateur lorsqu'il tape.
• Colonnes écrasantes : Utiliser des mises en page multi-colonnes qui perturbent le chemin de balayage naturel de haut en bas de l'utilisateur.
• Erreurs vagues : Visualiser une erreur uniquement avec la couleur (par exemple, simplement rendre la bordure rouge) sans icône ni message texte.
• Cibles tactiles petites : Concevoir des boutons radio ou des cases à cocher trop petits pour une interaction au pouce sur mobile.
• Le focus « invisible » : Ne pas fournir un anneau de focus clair, rendant la navigation impossible pour les utilisateurs de clavier.

Critères de validation

• Chaque champ possède une étiquette persistante et visible.
• Le formulaire suit un chemin de balayage vertical logique à colonne unique.
• Les états d'erreur utilisent une combinaison de couleur, d'icônes et de texte.
• Les indicateurs de focus sont à fort contraste et clairement visibles.
• Les éléments interactifs (champs, boutons) respectent le minimum de cible tactile WCAG 2.2 de 24x24 px (44x44 px recommandé).
• La disposition passe gracieusement à une seule colonne sur les fenêtres d'affichage mobiles.
• Les actions principales, secondaires et tertiaires ont une hiérarchie visuelle claire.