Cet article a été rédigé le 6 novembre 2026.
Les outils d’IA évoluent à toute vitesse. Le choix d’interrompre l’utilisateur, d’afficher un panneau latéral ou de faire glisser un volet depuis le bas reste immuable. Boîte de dialogue (dialog), tiroir (drawer), feuille inférieure (bottom sheet), menu déroulant (dropdown), onglets (tabs), accordéon (accordion) : autant de façons de solliciter une action ou de structurer l’information. L’agencement des menus d’applications évoluera constamment ; lisez ceci comme une réflexion sur la gestion des interruptions, et non comme un répertoire à apprendre par cœur.
Une section classique sur une page accueille des données permanentes : l’adresse, les tarifs, les horaires. D’autres informations deviendraient gênantes si elles restaient affichées en permanence, tout en étant trop secondaires pour justifier le chargement d’une nouvelle page. C’est le cas des filtres de recherche, d’une demande de confirmation rapide ou d’un détail technique que peu de visiteurs consultent. Le réflexe courant consiste à qualifier l’ensemble de ces éléments de « popup ». C’est précisément l’emploi de ce mot vague qui pousse les modèles d’IA à improviser. Pour formuler un besoin clair, répartissez votre décision entre trois questions simples : L’utilisateur doit-il impérativement s’arrêter ? La page principale doit-elle rester visible en arrière-plan ? S’agit-il simplement d’afficher une autre vue d’un même ensemble ?
Interrompre, partager ou basculer
Une boîte de dialogue (dialog) — souvent appelée modale (modal) — s’affiche au centre de l’écran et assombrit le reste de la page. Utilisez-la uniquement lorsque l’utilisateur doit prendre une décision avant toute autre action : confirmer la suppression d’un élément, valider une réservation ou corriger un champ obligatoire manquant. C’est un choix inadapté pour présenter un long texte, un menu de navigation ou une annonce publicitaire. Tant que la boîte de dialogue reste ouverte, la focalisation du clavier (focus) doit être confinée à l’intérieur de celle-ci. La touche Échap (Escape) ou une action d’annulation explicite doit la fermer et restituer la focalisation au bouton qui l’a déclenchée. Sans cette instruction précise, le modèle d’IA génère souvent un bloc sans issue pour la navigation au clavier, bloquant totalement les personnes qui n’utilisent pas de souris. Ce n’est pas un détail technique secondaire, c’est la condition d’usage fondamentale.
Un tiroir (drawer) glisse depuis le bord de départ (start edge) et conserve la page principale bien visible en arrière-plan. Il convient parfaitement aux tâches qui complètent le contenu affiché : appliquer des filtres sur une liste, consulter le détail d’un élément ou modifier des paramètres secondaires. Sa fermeture doit pouvoir s’effectuer via la touche Échap (Escape) ou par un simple tapotement en dehors du panneau. Sur une interface rédigée de droite à gauche (comme en arabe), le bord de départ se situe à droite. Spécifiez toujours « start edge » dans vos consignes au lieu d’imposer « la droite », sous peine de voir le tiroir s’ouvrir à l’opposé du sens de lecture naturel.
Une feuille inférieure (bottom sheet) surgit depuis le bas de l’écran du téléphone. C’est l’équivalent du tiroir adapté à l’usage du smartphone à une main. Elle est idéale pour proposer rapidement quelques actions sur l’élément sélectionné : appeler, enregistrer ou partager. Évitez de l’employer pour déployer un formulaire complexe de vingt champs. La feuille doit s’arrêter à mi-hauteur ou laisser apercevoir le contenu sous-jacent, et se refermer par un glissement vers le bas ou via la touche Échap (Escape). Si votre langue ne possède pas de terme technique équivalent, n’en inventez pas : l’association d’une courte description (« un volet qui monte depuis le bas ») et du terme anglais bottom sheet exprime parfaitement l’intention.
Au même endroit, une perspective différente
Un menu déroulant (dropdown) fait apparaître une liste restreinte d’options à proximité immédiate d’un bouton d’action, puis se referme dès qu’un choix est effectué. Il s’utilise pour choisir une langue, définir un ordre de tri ou sélectionner une quantité. Ce n’est ni un menu de navigation secondaire, ni un espace destiné à accueillir des paragraphes de texte. Si la liste dépasse une dizaine d’éléments, elle requiert une page dédiée ou un tiroir (drawer), et non un menu flottant qui déborderait de l’écran du téléphone.
Les onglets (tabs) permettent de regrouper plusieurs sous-ensembles d’informations au même endroit. L’utilisateur bascule latéralement d’une vue à l’autre. Les contenus présentés sont de même niveau hiérarchique : « Cette semaine » et « Semaine prochaine », ou « Description » et « Ingrédients ». L’ensemble des intitulés d’onglets doit rester constamment visible. Dissimuler des onglets à l’intérieur d’un menu déroulant équivaut à dénaturer leur rôle premier.
Un accordéon (accordion) empile des blocs de texte qui s’déploient vers le bas, soit un par un, soit simultanément — précision qu’il convient de préciser dans le prompt. Il s’emploie pour présenter des contenus secondaires que la majorité des visiteurs ne lisent pas systématiquement : les conditions d’expédition ou une foire aux questions détaillée. Ne masquez jamais l’unique affichage d’un tarif à l’intérieur d’un accordéon fermé. Considérer qu’une information fermée par défaut n’est pas essentielle constitue une erreur lorsqu me concerne des tarifs, car les usagers cherchent cette donnée en priorité.
Onglets et accordéons sont fréquemment confondus au motif que tous deux « économisent de l’espace ». Les onglets remplacent le contenu affiché tout en conservant leurs accès visibles en haut. L’accordéon décale le reste de la page vers le bas et masque la réponse tant qu’on n’a pas cliqué dessus. Indiquer simplement à un modèle d’IA d’« économiser de l’espace » conduira à l’obtention aléatoire de l’une ou l’autre de ces structures. Nommez précisément le composant qui correspond à la démarche de l’utilisateur.
Deux mauvais choix pour un même outil
L’interface de gestion d’un espace d’enseignement nécessitait deux types d’actions distinctes. La première présentait un risque : annuler l’inscription d’un élève. La seconde était usuelle : filtrer la liste pour n’afficher que les cours du soir. Dans la première version conçue par l’IA, ces deux fonctions avaient été placées au sein du même « popup », car c’était le seul mot figurant dans la demande initiale. Résultat : le bouton d’annulation risquait d’être déclenché par erreur, et le filtre du soir masquait la liste que l’enseignant tentait de consulter. Un même mot générique pour deux besoins opposés a produit deux interfaces défaillantes.
La correction a consisté à différencier nettement les composants. L’annulation d’inscription déclenche désormais une boîte de dialogue (dialog) centrée. Le reste de la page s’assombrit. Le texte précise clairement les conséquences de l’action. La touche Échap (Escape) ainsi qu’un bouton d’annulation explicite permettent de fermer la fenêtre, et la focalisation du clavier (focus) revient immédiatement sur le bouton d’origine. De son côté, le filtrage des cours du soir s’ouvre dans un tiroir (drawer) depuis le bord de départ (start edge), la liste reste parfaitement visible à côté, et un simple clic à l’extérieur referme le panneau. Sur smartphone, ce même filtre s’affiche sous forme de feuille inférieure (bottom sheet), la main de l’utilisateur se trouvant naturellement au bas de l’appareil. L’utilisateur n’a pas à réapprendre l’ergonomie de l’application : il identifie immédiatement si l’action en cours interrompt son travail ou le complète.
Rédigez cette distinction fonctionnelle dans votre langue afin qu’elle soit parfaitement claire pour vos équipes, et insérez les noms techniques en anglais dans vos consignes afin que le modèle d’IA ne les fusionne pas à nouveau en un « popup » indifférencié. Si votre langue ne possède pas de mot courant pour désigner un tiroir (drawer), la formule « un panneau latéral au bord de l’écran qui ne masque pas la liste » en constitue la définition exacte. Ne perdez pas de temps à chercher un néologisme : c’est le comportement de l’interface qui importe.
Une consigne de cadrage type
On the list page, put filters in a drawer from the start edge, not in a dialog. Close the drawer with Escape or a tap outside. Keep focus inside the drawer while it is open, and return focus to the filter button when it closes.
À la suite de cette instruction en anglais, nommez précisément dans votre langue les filtres à intégrer. Le modèle d’IA sait parfaitement structurer un tiroir (drawer) sans avoir besoin de savoir à l’avance que vos filtres portent sur les quartiers ou les tarifs. À l’inverse, vous seul pouvez définir le métier et la logique des données. Le composant technique est universel ; les données réelles restent locales.
Les débats sur la modernité des composants sont souvent stériles. La seule question pertinente est de savoir si le composant respecte l’activité de l’utilisateur. Interrompre une personne au milieu de sa navigation simplement pour lui demander un ordre de tri constitue une mauvaise pratique ergonomique. À l’inverse, dissimuler une action irréversible d’annulation au fond d’un simple menu déroulant s’avère dangereux. Une fois ces règles établies, cette étape du travail est acquise. La suivante est plus discrète mais tout aussi essentielle : indiquer clairement à l’utilisateur, sans recharger la page, si son action a bien été prise en compte.