Cet article a été rédigé le 6 novembre 2026.
Les outils d’IA évoluent à toute vitesse. Les noms des écrans, eux, restent immuables. Un en-tête (header), un formulaire (form), une boîte de dialogue (dialog) : ces termes désignent les mêmes structures visuelles depuis des décennies. Les libellés de boutons et l’organisation des menus changeront au fil des versions, mais la grammaire de l’interface demeure. Lisez ce guide comme une méthode pour formuler une structure d’écran, et non comme une visite guidée des boutons d’un logiciel en particulier.
La plupart des gens se représentent très clairement l’écran dont ils ont besoin. Le problème réside dans l’incapacité à le nommer précisément. Faute de vocabulaire technique, ils décrivent une impression ou un mouvement : « Quelque chose doit glisser depuis le côté », « Les blocs sont de tailles différentes », « Un pavé surgit au milieu et m’oblige à cliquer ». Un modèle de langage saura générer du code à partir de ces descriptions vagues, mais il devra procéder par devinettes. Ainsi, une personne demandant « quelque chose qui vient du côté » obtiendra selon les cas un menu déroulant, un panneau latéral ou une nouvelle page. Une même phrase pour trois composants distincts.
Ce décalage n’est pas une question de sensibilité esthétique, et il ne signifie pas non plus que certaines langues accusent un retard. Les IA ont assimilé le nom des composants principalement en anglais, à partir de systèmes de conception (design systems) qui emploient ces termes depuis des années. Si votre langue dispose d’un mot usuel et stable, utilisez-le naturellement en indiquant le terme anglais équivalent entre parenthèses lors de sa première apparition dans votre réflexion. Si votre langue ne possède pas de terme établi, inutile d’en inventer un : décrivez la structure en une ligne simple et conservez le nom anglais. C’est ce mot anglais qui servira de référence exacte dans vos consignes (prompts).
Il s’agit d’une approche résolument pragmatique de la traduction. Une réceptionniste à Jakarta, un enseignant à Oulan-Bator ou un commerçant à Tunis ne manquent pas de discernement ; il leur manque simplement le nom anglais concis que le modèle reconnaît d’emblée comme un composant d’interface standard. Dès que ce nom apparaît dans la requête, le modèle cesse d’improviser la structure et se concentre sur son agencement. Votre langue maternelle conserve toute son importance : elle sert à exprimer la finalité humaine de l’interface.
Une consigne explicite que le modèle n’a pas à deviner
Une requête efficace s’articule autour de quatre éléments : le sens exprimé dans votre langue, le nom anglais du composant, l’action déclenchée, et enfin la condition de fermeture.
Vague :
When I press settings, something like a menu should come in from the side.
Précis :
When I press Settings, open a drawer from the start edge. Close it with Escape, or with a tap outside the panel.
Un tiroir (drawer) est un panneau qui glisse depuis le bord de l’écran tout en maintenant la page sous-jacente visible à son emplacement.
La seconde phrase explicative peut figurer dans votre langue sous l’instruction en anglais. La consigne à transmettre au modèle reste en anglais, car c’est sous cette forme que les IA identifient à coup sûr le composant recherché. Préciser le bord de départ (start edge) s’avère bien plus judicieux que d’imposer « la droite ». Sur une interface en arabe ou dans toute autre langue s’écrivant de droite à gauche, le bord de départ se situe à droite. Un tiroir configuré pour s’ouvrir systématiquement depuis la droite semblerait incohérent dans ce contexte. En indiquant « start edge », vous laissez le sens de lecture du système déterminer naturellement le côté d’apparition.
La condition de fermeture constitue le paramètre le plus fréquemment omis, alors qu’elle fait gagner un temps précieux. L’instruction « Open a drawer » n’indique aucunement comment masquer le panneau. Livré à lui-même, le modèle choisira arbitrairement une croix de fermeture, un geste de balayage, voire rien du tout — bloquant ainsi l’utilisateur sur mobile. Il convient de définir le moyen de sortie dans la même phrase que le mode d’entrée : la touche Échap (Escape), un tapotement à l’extérieur du panneau, ou un bouton de fermeture explicite. L’une de ces options suffit ; proposer les trois offre une meilleure ergonomie.
Cette structure en quatre points s’applique à la quasi-totalité des éléments abordés dans cette série. Une boîte de dialogue (dialog) nécessite une justification pour interrompre la navigation, ainsi qu’un moyen clair d’y mettre fin. Une notification éphémère (toast) — ce bref message d’information qui apparaît puis s’efface automatiquement — doit se voir attribuer une durée d’affichage et ne jamais constituer l’unique vecteur d’un message d’erreur. Une carte (card) doit préciser la nature de son contenu, au lieu de se borner à réclamer un « style en cartes ». Nommer un composant sans fixer sa condition d’arrêt revient à lui donner une apparence vide de sens ; fixer une condition sans nommer le composant vous ramène à la formulation vague de départ.
Ce que vous pouvez ignorer au démarrage
L’univers du design regorge de tendances éphémères : effets de verre dépoli floutant l’arrière-plan, grilles aux blocs asymétriques, défilés d’images horizontaux ou arrière-plans animés à des vitesses différentes. Vous croiserez leurs dénominations anglaises plus loin dans un encadré récapitulatif, afin de les identifier si un modèle vous les suggère. Sachez toutefois qu’elles ne sont nullement nécessaires pour publier une première version. Chercher à maîtriser des dizaines d’effets décoratifs avant même de savoir définir un en-tête (header) donne l’illusion d’avancer, mais laisse incapable de structurer l’écran suivant.
Priorité doit être donnée à l’intention fonctionnelle plutôt qu’à l’habillage visuel. L’interaction doit-elle interrompre l’utilisateur, partager l’espace de la page avec lui, ou simplement l’informer ? Il s’agit de trois comportements distincts. Le langage courant a tendance à les confondre sous le terme générique de « popup ». Le vocabulaire technique des interfaces les différencie nettement : voilà pourquoi il est rentable de connaître les termes anglais, même lorsque l’on pense, rédige et conçoit dans sa propre langue. Il ne s’agit pas de basculer sa pensée en anglais, mais d’emprunter un nom précis, à l’image d’un cuisinier utilisant le terme exact pour désigner un ustensile universel.
Tenez à jour une liste restreinte des noms de composants réellement employés au fil de votre travail. Cinq termes suffisent amplement. Si vos besoins de la semaine se sont résumés à un en-tête (header), une carte (card) et un formulaire (form), ces trois notions forment votre socle. Apprendre du vocabulaire technique par anticipation transforme l’apprentissage en contrainte inutile. L’intérêt d’un mot technique réside uniquement dans sa capacité à compléter une phrase que vous cherchiez déjà à formuler.
Ce que cela change au quotidien
Utiliser le nom exact d’un composant simplifie considérablement les échanges avec les modèles d’IA, tout comme avec des collaborateurs parlant une autre langue. Deux personnes désignant un tiroir (drawer) s’accordent immédiatement sur la nature de l’interaction : le travail en cours reste visible en arrière-plan, le panneau latéral est temporaire, et la touche Échap (Escape) permet de le refermer. Sans ce vocabulaire commun, les débats s’éternisent sur des préférences esthétiques ; avec lui, les discussions se concentrent sur la vraie question : cet instant nécessite-t-il réellement d’interrompre l’utilisateur ?
Cette seconde interrogation est la seule qui mérite d’être débattue. Le nom d’un composant ne relève pas de la décoration, mais d’une décision quant à la gestion de l’attention. Une boîte de dialogue (dialog) centrée bloque la navigation sur la page. Un tiroir (drawer) partage l’écran. Une note discrète au bas de l’écran n’interrompt rien du tout. Les personnes qui débutent dans le pilotage d’IA pour créer des logiciels passent souvent leurs premières semaines à exiger du style visuel. Celles qui progressent réellement sont celles qui apprennent à identifier quelle structure interrompt l’utilisateur et laquelle préserve son flux de travail.
Conserver ce vocabulaire au sein d’une seule sphère linguistique comporte un coût social. Les ressources pédagogiques apparaissent prioritairement dans les régions où les modèles sont entraînés, tandis qu’on conseille aux autres utilisateurs de « simplement décrire ce qu’ils veulent » — une formule d’apparence démocratique qui conduit souvent à de l’improvisation. Exprimer son besoin avec ses propres mots reste indispensable, mais y associer le nom technique usuel du composant garantit que votre consigne sera correctement interprétée par le modèle. Une école, un centre de santé ou un commerce local peut ainsi rédiger l’intention fonctionnelle en français, puis insérer la consigne technique en anglais sans risque de mauvaise interprétation. La réflexion reste ancrée localement, tandis que la désignation du composant s’appuie sur un standard partagé.
Nul besoin de mémoriser un vaste glossaire pour concevoir une première page. Il suffit d’identifier le composant souhaité, son nom anglais, et la condition permettant de le fermer. C’est précisément le parcours proposé dans la suite de cette série : structurer l’armature d’une page, solliciter des informations auprès de l’utilisateur, lui faire part d’un résultat, et employer le juste niveau d’animation nécessaire. Maîtriser le nom des composants permet de guider efficacement n’importe quel modèle d’IA, dans n’importe quelle langue, sans devoir attendre la publication d’un dictionnaire spécialisé.