Patterns
Un composant répond à « comment afficher ». Un pattern répond à « comment résoudre ». Douze problèmes récurrents, et la réponse que le système recommande.
1. Formulaires
Un formulaire est une conversation. On ne demande que ce dont on a besoin, dans l'ordre où l'utilisateur y pense.
- Une colonne, des libellés au-dessus des champs, toujours visibles.
- Les champs facultatifs sont signalés, pas les obligatoires, quand ces derniers sont majoritaires.
- Validation au moment où l'utilisateur quitte le champ, jamais pendant la frappe.
- Les données déjà connues ne sont pas redemandées (critère WCAG 2.2 « saisie redondante »).
2. Erreurs
Un message d'erreur répond à deux questions : que s'est-il passé, que faire maintenant. Il s'affiche à côté de la cause.
À faire
- « Le fichier dépasse 10 Mo. Compressez-le ou choisissez un autre fichier. »
- À la soumission, résumé des erreurs en haut avec des liens vers chaque champ, et focus sur ce résumé.
À éviter
- « Une erreur est survenue. »
- Vider le formulaire après une erreur.
- Signaler l'erreur uniquement par la couleur rouge.
3. États vides
Un écran vide est une occasion d'expliquer ce qui apparaîtra ici et comment commencer.
Aucun cas d'usage pour l'instant
Déclarez votre premier usage de l'IA pour l'ajouter au registre et obtenir son niveau de risque.
4. Chargement
Moins d'une seconde : rien. Une à dix secondes : squelette ou indicateur. Au-delà : progression chiffrée et possibilité de continuer à travailler.
| Durée | Réponse |
|---|---|
| < 1 s | Aucun indicateur, il créerait un clignotement. |
| 1 à 10 s | Skeleton qui réserve la place du contenu, ou bouton en état de chargement. |
| > 10 s | Barre de progression, estimation du temps restant, notification à la fin. |
| Réponse générée par IA | Affichage progressif du texte, bouton « Arrêter » disponible. |
5. Actions destructrices
Préférer l'annulation à la confirmation : supprimer immédiatement et proposer « Annuler » dans un toast pendant quelques secondes. La modale de confirmation est réservée aux actions irréversibles.
6. Navigation
- Six entrées au maximum dans la navigation principale ; le reste se range dans des sections.
- La page courante est indiquée visuellement et par
aria-current="page". - Chaque état important a une URL : on doit pouvoir partager un filtre, un onglet, une section.
- Le bouton retour du navigateur fait ce que l'utilisateur attend.
7. Recherche et filtres
La recherche tolère les fautes et les accents. Les filtres actifs sont visibles et retirables un par un. Le nombre de résultats est annoncé aux lecteurs d'écran.
8 résultats
8. Tableaux de données
- En-têtes de colonnes figés au défilement, tri indiqué par une icône et
aria-sort. - Chiffres alignés à droite, chiffres tabulaires, unités dans l'en-tête.
- Sur mobile, défilement horizontal du tableau seul, jamais de la page.
- Actions de ligne regroupées en fin de ligne, actions groupées au-dessus du tableau.
9. Prise en main
On apprend en faisant. Plutôt qu'une visite guidée de six écrans, un premier état rempli d'exemples marqués comme tels et une aide contextuelle au moment où la fonction sert.
10. Notifications
| Besoin | Composant |
|---|---|
| Confirmer une action | Toast |
| Informer sur l'état d'une page | Alert |
| Exiger une décision | Modal |
| Signaler un statut | Badge |
11. Responsive
On conçoit d'abord pour le petit écran, puis on enrichit. Les points de rupture suivent le contenu. Aucune page ne défile horizontalement ; les cibles tactiles font au moins 24 px, 44 px de préférence.
12. Interfaces IA
Une fonction d'IA doit être reconnaissable, vérifiable et corrigible. Ce pattern s'applique à toute réponse générée affichée à un utilisateur.
Pour ajouter un variant au composant Bouton, ouvrez une demande de contribution avec le cas d'usage, les maquettes et l'impact sur l'accessibilité. La revue a lieu chaque semaine.
- Transparence : l'utilisateur sait qu'il lit un contenu généré ou qu'il échange avec une IA.
- Sources : chaque affirmation importante renvoie à son document d'origine.
- Contrôle : arrêter, régénérer, modifier, signaler. L'humain garde la main.
- Limites : dire ce que l'assistant ne sait pas faire, et vers qui se tourner.
- Retour : chaque signalement rejoint le jeu d'évaluation, et l'équipe y répond.