Garde-corps d'interface utilisateur générative : concevoir selon l'intention sans casser votre système de conception
Comment l'UX change lorsque l'IA crée l'interface à la volée, et comment structurer les composants, les jetons et les contrôles afin que l'interface utilisateur générée reste accessible et conforme à la marque.
À retenir
L'interface utilisateur générative signifie qu'un modèle d'IA assemble une partie de l'interface pour chaque requête. Pour le garder utilisable, laissez le modèle choisir parmi un catalogue de composants approuvé plutôt que d'écrire des styles bruts, transmettez-lui vos jetons de conception, validez sa sortie (contraste, échelle de type, ordre de mise au point, mouvement réduit) avant le rendu et conservez un cadre fixe de navigation et de contrôles autour de la zone générée.
Des mises en page fixes à la conception intentionnelle
Dans une disposition fixe, les concepteurs décident de chaque écran à l'avance. Avec l'interface utilisateur générative, un modèle d'IA décide quelle interface afficher pour une demande spécifique. Google décrit l'interface utilisateur générative comme un modèle générant non seulement du contenu, mais une expérience complète, et propose désormais des expériences basées sur cela dans l'application Gemini et en mode IA dans la recherche Google. Dans les outils de développement, le SDK Vercel AI décrit une version plus simple : le modèle appelle un outil et le résultat de cet appel d'outil est rendu sous forme de composant React.
Quels changements pour l'UX
Les concepteurs arrêtent de dessiner chaque écran et commencent à concevoir les règles : quels composants existent, quand chacun est approprié et ce qui ne doit jamais changer. Le cadre autour du contenu généré, tel que la navigation, la saisie, l'annulation et les paramètres, doit rester fixe afin que les gens ne perdent jamais leur place. Les zones générées doivent être clairement marquées et les utilisateurs doivent pouvoir passer à une vue claire et prévisible.
Guardrail 1 : un catalogue de composants homologué
Le modèle le plus sûr consiste à laisser le modèle choisir et remplir les composants, et non à les inventer. A2UI, un protocole ouvert créé par Google, fonctionne de cette manière : les agents envoient des descriptions déclaratives de composants et le client les restitue avec ses propres widgets natifs, sans exécuter de code arbitraire depuis l'agent. Votre catalogue peut être petit : tableaux, cartes, graphiques, formulaires, listes, chacun construit et testé par votre équipe.
Guardrail 2 : des jetons au lieu de valeurs brutes
Donnez au modèle des jetons sémantiques, tels que color.text.primary ou space.4, et rejetez la sortie qui utilise des valeurs hexadécimales brutes ou des tailles de police arbitraires. Cela conserve le contraste, la typographie et l'espacement à l'intérieur du système, et des thèmes tels que le mode sombre ou le contraste élevé continuent de fonctionner automatiquement.
Garde-corps 3 : validez avant de rendre
Exécutez des vérifications automatiques sur la sortie générée avant de l'afficher : champs obligatoires présents, contraste des couleurs, ordre des titres, étiquettes sur les entrées, ordre de mise au point, taille de la cible tactile et prise en charge des mouvements réduits. Si une vérification échoue, revenez à une présentation simple et connue plutôt que d’afficher une interface utilisateur défectueuse.
- Validation du schéma : uniquement les composants et propriétés connus
- Accessibilité : contraste, étiquettes, rôles, ordre de mise au point
- Limites de contenu : éléments maximum, longueur du texte, tailles d'image
- Solution de secours : une liste simple ou une réponse textuelle si la validation échoue
Principes clés à retenir
- Generative UI = le modèle assemble l'interface pour chaque requête
- Conserver un cadre fixe (navigation, saisie, annulation) autour des zones générées
- Laissez le modèle choisir dans un catalogue approuvé au lieu d'écrire une interface utilisateur brute
- Transmettre les jetons sémantiques et rejeter les valeurs brutes
- Validez l'accessibilité avant le rendu et conservez une solution de repli
Questions fréquentes
Sources
- Generative UI: A rich, custom, visual interactive user experience for any prompt — Recherche Google
- A2UI: A Protocol for Agent-Driven Interfaces — a2ui.org
- Generative User Interfaces — Documentation du SDK Vercel AI
- Design tokens overview — Material Design 3