Explorer
KNOW-REF-065

Références UI UX pour IA : sources, contre-exemples et essais contextualisés

Domaine
dev-general
Type
reference
Priorité
P3

Références UI UX pour IA : sources, contre-exemples et essais contextualisés

Objectif

Donner à l’IA des décisions de conception contextualisées, avec explication, bon/mauvais exemple, contrôle et provenance. Ne pas produire une note universelle de beauté. Séparer composition visuelle, ergonomie, accessibilité, comportement et exactitude des données.

Ressources qualifiées

Carbon — IBM

https://www.carbondesignsystem.com/building-blocks/core/components/data-table/guidelines

  • Qualification : ready ; formats : HTML, code, documented-do-dont.
  • Ce qu’on peut extraire : Anatomie, variantes, tailles et associations entre lignes, en-têtes et barre d’outils.
  • Bon exemple : Un tableau utilise une taille de ligne cohérente et une barre d’outils appropriée.
  • À éviter : Mélanger sans motif des tailles de lignes et d’en-têtes incompatibles.
  • Contrôle : Comparer les styles calculés de chaque taille et inspecter les contenus longs.
  • Limite : Conventions Carbon. Choisir une densité adaptée ; ne pas transformer ses valeurs en constantes universelles.

GOV.UK Design System

https://design-system.service.gov.uk/components/button/

  • Qualification : ready ; formats : HTML, Nunjucks, usage-guidance.
  • Ce qu’on peut extraire : Hiérarchie des appels à l’action, libellés et situations où simplifier une page.
  • Bon exemple : L’action qui poursuit le parcours se distingue des actions secondaires.
  • À éviter : Des commandes secondaires rivalisent visuellement avec la tâche prioritaire.
  • Contrôle : Faire identifier l’action principale et vérifier les libellés dans le parcours.
  • Limite : Contexte de services publics ; conserver l’identité et les contraintes propres au projet.

U.S. Web Design System

https://designsystem.digital.gov/components/button/

  • Qualification : ready ; formats : HTML, code, accessibility-checks.
  • Ce qu’on peut extraire : Priorité visuelle des actions, libellés explicites et contrôles des composants.
  • Bon exemple : Un verbe précis décrit ce que déclenche le bouton important.
  • À éviter : Plusieurs boutons équivalents et vagues obscurcissent la prochaine étape.
  • Contrôle : Contrôler le texte, le type, le focus et le rôle de chaque commande.
  • Limite : Les valeurs de style restent locales ; vérifier les composants dans le projet final.

Microsoft Windows

https://learn.microsoft.com/en-us/windows/apps/develop/ui/controls/lists

  • Qualification : ready ; formats : HTML, Markdown-source, control-guidance.
  • Ce qu’on peut extraire : Choix de la représentation selon la donnée : liste textuelle, grille d’images ou arborescence.
  • Bon exemple : Un journal principalement textuel se consulte dans une liste avec recherche et détails.
  • À éviter : Imposer une galerie de vignettes à des événements textuels pour embellir l’écran.
  • Contrôle : Retrouver une erreur connue, lire ses détails et garder une sélection cohérente.
  • Limite : APIs WinUI documentées ; adapter les principes au framework cible. Le GridView de WinUI et la vue GridView de WPF ne sont pas le même contrôle.

KDE Human Interface Guidelines

https://develop.kde.org/hig/

  • Qualification : ready ; formats : HTML, Markdown-source.
  • Ce qu’on peut extraire : Conventions de logiciels de bureau et choix adaptés à des tâches ciblées.
  • Bon exemple : Le logiciel expose d’abord les fonctions qui servent ses tâches ciblées.
  • À éviter : Multiplier les commandes sans expliciter leur usage ni le public visé.
  • Contrôle : Exécuter les tâches prioritaires puis contrôler l’accès aux fonctions avancées.
  • Limite : Contexte KDE Plasma ; ni identité à recopier en WPF, ni recette d’implémentation complète.

Nielsen Norman Group — dix heuristiques

https://www.nngroup.com/articles/ten-usability-heuristics/

  • Qualification : ready ; formats : HTML, illustrated-principles.
  • Ce qu’on peut extraire : Critères explicites pour décrire un obstacle : état, cohérence, contrôle et récupération.
  • Bon exemple : Une critique nomme le problème, sa conséquence et une correction vérifiable.
  • À éviter : Dire simplement que l’écran est beau ou professionnel.
  • Contrôle : Justifier chaque critique avec un état observable et une tâche.
  • Limite : Heuristiques générales. Ni note automatique de beauté, ni étude des utilisateurs du projet.

W3C ARIA Authoring Practices

https://www.w3.org/WAI/ARIA/apg/

  • Qualification : ready ; formats : HTML, code, keyboard-contracts.
  • Ce qu’on peut extraire : Rôles, états, relations, clavier et focus de widgets accessibles.
  • Bon exemple : Le rôle d’un widget correspond aux interactions réellement implémentées.
  • À éviter : Ajouter un rôle ARIA sans comportement clavier correspondant.
  • Contrôle : Vérifier clavier, nom accessible, état et gestion du focus.
  • Limite : Les exemples sont pédagogiques et doivent être contrôlés avec les navigateurs et technologies d’assistance ciblés.

W3C Before and After Demonstration

https://www.w3.org/WAI/demos/bad/

  • Qualification : ready ; formats : HTML, paired-pages, evaluation-reports.
  • Ce qu’on peut extraire : Paires de pages avant/après avec défaut, réparation et annotation.
  • Bon exemple : Comparer le même contenu avant et après une correction précise.
  • À éviter : Assimiler l’ancienne apparence de la démo à un défaut esthétique universel.
  • Contrôle : Relier chaque réparation à une barrière décrite dans le rapport.
  • Limite : Démonstration historique ; ni modèle graphique contemporain, ni conformité WCAG 2.2 déduite.

Système de Design de l’État

https://www.systeme-de-design.gouv.fr/version-courante/fr

  • Qualification : restricted ; formats : HTML, code, page-templates.
  • Ce qu’on peut extraire : Vocabulaire et organisation de composants documentés en français.
  • Bon exemple : Étudier l’explication d’une règle et en garder la portée.
  • À éviter : Copier l’identité institutionnelle dans un produit personnel.
  • Contrôle : Vérifier le périmètre d’application avant toute adoption.
  • Limite : Usage du DSFR réservé aux services de l’État ; étude documentaire sans reproduction de son identité pour un autre produit.

Refactoring UI

https://refactoringui.com/

  • Qualification : restricted ; formats : public-HTML, paid-book-not-reviewed.
  • Ce qu’on peut extraire : La page publique illustre des tactiques de correction visuelle.
  • Bon exemple : Utiliser un exemple public explicitement examiné.
  • À éviter : Prétendre avoir validé ou importé le contenu complet.
  • Contrôle : Indiquer exactement la partie consultée et la source.
  • Limite : Livre payant non consulté. Aucune règle n’est attribuée à un chapitre non lu ; aucune copie du livre.

Deceptive Patterns

https://deceptive.design/types/

  • Qualification : exercise ; formats : HTML, taxonomy, case-links.
  • Ce qu’on peut extraire : Taxonomie de mécanismes trompeurs et d’obstacles aux choix.
  • Bon exemple : Identifier l’information cachée et son effet sur le choix.
  • À éviter : Classer un parcours comme bon parce que ses boutons sont élégants.
  • Contrôle : Vérifier que l’utilisateur comprend et peut exercer ses choix.
  • Limite : Une interface trompeuse peut être visuellement soignée ; ne pas confondre éthique et composition.

User Inyerface

https://userinyerface.com/

  • Qualification : exercise ; formats : interactive-demo, limited-text.
  • Ce qu’on peut extraire : Expérience volontairement difficile, à documenter par parcours.
  • Bon exemple : Décrire une interaction réellement observée et sa correction.
  • À éviter : Ingérer le jeu comme une liste de règles déjà démontrées.
  • Contrôle : Effectuer le parcours, enregistrer les obstacles et distinguer les observations des hypothèses.
  • Limite : Page d’accueil consultée ; parcours non exécuté. Ne pas en déduire un benchmark validé.

Trois essais pédagogiques

  • web-service : Préparer une demande de rendez-vous ; la prochaine étape prioritaire est de continuer la demande. Diagnostic : La version initiale ne rend pas la prochaine étape prioritaire identifiable par le traitement des commandes. Correction : Donner une priorité visuelle à Continuer la demande, avec des actions secondaires distinctes. [[KNOW-PAT-261]]
  • dense-table : Parcourir une liste de fichiers et comparer leur statut dans un tableau de type Carbon. Diagnostic : Les hauteurs et la barre d’outils ne suivent pas la variante compacte choisie. Correction : Aligner les hauteurs et choisir la barre compacte pour cet exemple. [[KNOW-PAT-262]]
  • desktop-text-log : Retrouver un événement en erreur dans un journal surtout textuel, puis lire son détail. Diagnostic : Une galerie privilégie la reconnaissance d’images alors que la tâche exige de lire et retrouver des événements textuels. Correction : Une liste avec recherche et panneau de détails correspond mieux à cette tâche. [[KNOW-PAT-263]]

Réutiliser le dossier

Le registre JSON, les cas, les exemples HTML, les extraits XAML et les observations sont conservés sous references/external/ui-quality-20261029/. Les connaissances existantes sur les erreurs de formulaire, les tokens et la transformation d’une référence en décision restent dans leurs fiches dédiées.

Avant de choisir une ressource, écrire tâche, public, nature des données, plateforme, framework et contraintes. Retenir une à trois sources adaptées. Décrire ce qui est à vérifier sans prétendre qu’un contrôle proposé a déjà réussi.

Portée des preuves

Les cas avant/après ont été créés pour ce pilote. Leur contrôle dans Chrome vérifie le rendu et quelques interactions de ces exemples. Ni l’utilisabilité d’un produit réel, ni le jugement esthétique d’une IA indépendante, ni une exécution WPF ne sont établis. Les valeurs numériques illustrées sont locales.

Contrôles proposés

  • Qualification : Relire contexte, accès, version, exemple, contre-exemple et contrôle de chaque source. Critère : Chaque ressource conserve sa portée et aucune réserve d’accès ou de validation n’est effacée.

Sources et liens

[[KNOW-PAT-239]] [[KNOW-REF-060]]