Concevoir quand les agents regardent

L'utilisateur n'est plus seul derrière l'écran. Pendant que l'humain lit le titre, un agent IA parse le DOM, nomme les boutons, juge les sélecteurs et décide si votre produit est quelque chose qu'il peut piloter au nom de quelqu'un d'autre. Concevoir pour un seul utilisateur était un luxe de 2024.

Le changement est structurel, pas cosmétique. Cursor appelle vos boutons. Claude lit vos captures d'écran. Computer Use d'Anthropic clique à travers vos formulaires. OpenAI Operator achète des choses sur votre page de paiement. Chaque surface qu'un humain touche, un agent la touche aussi, avec d'autres critères pour définir ce qui est bien.

Deux publics, un seul écran

En 2026, chaque surface produit a un plan humain et un plan machine empilés dans le même DOM.

Le plan humain, c'est ce que les designers ont toujours livré. Le flux, le goût, la hiérarchie, la confiance qu'on ressent quand un bouton fait ce que son libellé promet. Le plan machine, c'est la même surface lue par un autre utilisateur. Sélecteurs stables, affordances nommées, HTML sémantique, statut lisible par machine, une structure qu'un agent peut parser sans ambiguïté.

L'erreur que font la plupart des équipes, c'est de croire que les deux plans sont le même plan avec des priorités différentes. Ce n'est pas le cas. Un bouton peut sembler parfait à un humain et être invisible pour un agent si son nom accessible est « cliquez ici » ou si son nœud DOM est un div avec un gestionnaire de clic.

Cinq couches où le regard des agents se manifeste

Le regard des agents est une pile. Cinq couches, chacune étant un endroit où le plan humain et le plan machine s'alignent ou s'affrontent : les surfaces d'outils, la stabilité des sélecteurs, la structure lisible par machine, la lisibilité des statuts, les signaux de confiance. Tout produit conçu pour le double utilisateur prend des décisions sur ces cinq couches, même sans les appeler ainsi.

Couche 1 : les surfaces d'outils sont les boutons nommés que les agents appellent

Une surface d'outil est toute capacité du produit qu'un agent peut invoquer par son nom. Les appels d'outils de Cursor, l'utilisation d'outils de Claude, les actions d'écran d'Anthropic Computer Use, les commandes d'exécution de Vercel Sandbox. L'agent ne pense pas en pixels, il pense en verbes nommés.

Chaque action principale de votre produit est une surface d'outil potentielle. Stripe est l'étalon-or, bien antérieur à l'ère des agents : chaque action a une affordance nommée, documentée, prévisible. customers.create fait ce que dit son nom. Un produit dont les actions principales sont enfouies dans des boutons sans libellé est un produit qu'un agent ne peut pas piloter sans deviner.

Le geste de design consiste à traiter chaque action importante comme un outil nommé. Le libellé, la description ARIA, la route, l'endpoint d'API et le gestionnaire du Model Context Protocol devraient tous porter le même verbe. Agents et humains atteignent alors la même affordance par des portes différentes.

Couche 2 : la stabilité des sélecteurs est le contrat du designer avec l'agent

En 2024, un designer pouvait livrer <div onClick={handle}> et passer à autre chose. En 2026, ce même div casse chaque intégration d'agent le jour où quelqu'un refactorise le wrapper.

La stabilité des sélecteurs, c'est s'assurer que les affordances apprises hier par un agent fonctionnent encore demain. Trois décisions. Utiliser du HTML sémantique quand il existe, <button> et pas <div>. Ajouter data-testid à tout ce qu'un agent ou un test runner doit retrouver. Garder les noms accessibles stables d'une version à l'autre, comme on garde stables les noms de champs d'une API.

Linear est exceptionnellement bon là-dessus, parce que Linear a été conçu API d'abord et que l'interface n'est qu'une surface parmi d'autres. Chaque action principale a un sélecteur stable et un nom stable. La plupart des SaaS d'entreprise changent un nom de classe lors d'un refactor et cassent en silence toutes les intégrations qui s'y appuyaient. L'agent ne reçoit aucun avis de dépréciation. Il cesse simplement de fonctionner.

Couche 3 : la structure lisible par machine est l'artefact de design que vous sautiez

L'agent qui lit votre produit lit aussi vos balises Open Graph, votre JSON-LD, votre sitemap et, de plus en plus, vos fichiers llms.txt et AGENTS.md. Chacun de ces éléments est un artefact de design en 2026, pas une corvée de développeur.

AGENTS.md est le nouveau README, sauf que le lecteur est un modèle. Il dit à l'agent ce que fait votre produit, quelles surfaces sont sûres et quelles conventions comptent. Le JSON-LD dit à l'agent ce qu'est chaque page. L'endpoint du Model Context Protocol dit à l'agent quels outils votre produit expose et comment les appeler.

Les designers qui pensent que c'est le territoire des ingénieurs passent à côté du levier. La hiérarchie de ce que l'agent voit en premier, les noms que vous donnez à vos outils, les descriptions que vous écrivez pour chaque surface, tout cela construit le modèle mental que l'agent se fait de votre produit, exactement comme les titres et le microcopy construisent celui de l'humain.

Couche 4 : la lisibilité des statuts, c'est qu'une machine puisse dire ce qui vient de se passer

Un spinner de chargement convient à un humain et reste invisible pour un agent qui n'a pas les yeux sur l'écran. Un état de succès communiqué uniquement par un flash vert est illisible pour quiconque ne voit pas le vert. Une modale qui se ferme en silence est un changement d'état qui n'a pas eu lieu, du point de vue de l'agent.

La lisibilité des statuts rend chaque état détectable par une machine. L'API de Linear renvoie un objet de réponse stable pour chaque action. La machine à états de déploiement de Vercel a des états nommés, READY, BUILDING, ERROR, avec une charge structurée à chaque transition. Claude Code diffuse chaque appel d'outil et chaque résultat sous forme de texte structuré que l'agent peut parser.

Le geste de design est une couche de statut que l'agent lit à côté de la couche visuelle. Une région ARIA live qui annonce le nouvel état. Un toast avec un role="status" structuré. Un objet de réponse que l'agent récupère quand il a appelé l'outil. L'humain garde le spinner, l'agent reçoit l'événement structuré. Même posture que pour concevoir pour la latence de l'IA, qui doit se lire sur les deux plans à la fois.

Couche 5 : les signaux de confiance bouclent la boucle après l'action de l'agent

Quand un agent fait quelque chose au nom d'un utilisateur, l'utilisateur doit voir ce qu'il a fait, vite. La plupart des produits sautent cette couche, et c'est elle qui décide si quelqu'un fait assez confiance à l'intégration pour l'utiliser deux fois.

L'approbation des diffs de Cursor est l'exemple de manuel. L'agent modifie des fichiers, le diff apparaît en ligne, l'utilisateur accepte ou rejette bloc par bloc. Les artifacts de Claude livrent le même schéma sous une autre forme. GitHub Copilot Workspace est une surface à deux panneaux, planifier puis exécuter, avec accepter-rejeter à chaque étape.

Le signal de confiance n'est pas de la décoration. C'est la surface porteuse qui rend l'autonomie de l'agent supportable. Un produit où l'agent agit et où l'humain ne voit que l'état final perd la confiance dès la première fois que quelque chose tourne mal.

Ce que les produits qui le font bien livrent vraiment

Le cadre du double utilisateur se voit mieux dans les produits livrés. Des analyses courtes, chacune précise.

Cursor. L'approbation des diffs par l'agent est toute la boucle de confiance. Accepter et rejeter en ligne par bloc, diff complet du fichier visible, l'agent ne commit jamais sans consentement.

Claude artifacts. Le panneau d'aperçu de l'artifact est le contrat entre l'agent et l'humain. L'agent produit, l'humain relit, l'artifact a une URL stable et une sortie structurée que l'agent suivant peut reprendre.

Anthropic Computer Use. Les captures d'écran sont le contrat entre l'agent et le produit. Chaque décision de hiérarchie visuelle et de libellé est désormais une décision de lisibilité pour l'agent. Un bouton à icône sans nom accessible est un bouton sur lequel l'agent doit deviner.

Vercel v0. Le contrat entre le prompt humain et le rendu de l'agent est toute la surface. L'utilisateur décrit, l'agent rend, chaque rendu est un artefact révisable.

Linear et Stripe. Tous deux AI-native dans leur posture, API d'abord par architecture. Chaque action principale est nommée, stable, appelable. Tous deux ont livré cette discipline avant l'arrivée de l'ère des agents, ce qui explique pourquoi chaque produit à agents s'intègre proprement avec eux.

Replit Agent, Raycast et GitHub Copilot Workspace complètent la liste. Replit expose le travail de l'agent comme un espace de travail éditable en direct. La palette de commandes de Raycast est une surface que humains et agents partagent nativement. Le schéma à deux panneaux planifier-exécuter de Copilot Workspace fixe le plan par écrit avant l'action, ce qui rend possible la correction en cours d'exécution.

Pour la bibliothèque complète des schémas que ces produits partagent, la synthèse sur les patterns de design d'UI d'agents IA la cartographie, et l'article sur le design de produit AI-native couvre l'architecture en dessous.

Anti-patterns qui cassent les intégrations d'agents

Cinq modes d'échec reviennent sans cesse. Chacun est une décision de design, pas un oubli d'ingénierie.

La soupe de div. Tout élément cliquable enveloppé dans un <div> parce que c'est plus facile à styler. Chaque refactor casse chaque sélecteur. Correctif : du HTML sémantique par défaut avec data-testid sur tout ce qui doit survivre à un changement de nom de classe.

Les affordances cachées qui exigent un survol. Le bouton « modifier » qui n'apparaît qu'au passage de la souris. Les agents ne survolent pas. Correctif : des affordances atteignables au clavier qui apparaissent dans le DOM quel que soit l'état du pointeur.

Les liens « cliquez ici ». Cinq liens « cliquez ici » sur la même page sont cinq affordances identiques pour tout ce qui lit le DOM. Correctif : un texte de lien qui nomme la destination.

Les états de succès transmis uniquement par la couleur. Une bordure verte, un flash vert, une icône verte. Rien de cela n'est détectable sans modèle de vision. Correctif : un événement structuré, une région ARIA live ou un objet de réponse en plus du signal visuel.

Les modales sans fermeture repérable. Le « X » qui est un <svg> sans libellé. Correctif : un bouton de fermeture avec un nom accessible sur chaque modale et un comportement d'échappement documenté.

Le point commun des cinq : tout ce qui dépend d'un œil ou d'un pointeur humain est invisible pour la moitié de vos utilisateurs.

L'audit double utilisateur

Lancez-le sur toute surface avant sa sortie. Sept questions, trois minutes.

1. Action nommée. Chaque action principale a un nom accessible stable et un sélecteur stable.
2. État machine. Chaque changement d'état émet un événement structuré.
3. Diff visible. Chaque changement piloté par un agent apparaît comme un artefact révisable avant validation.
4. Parcours clavier. Chaque affordance accessible uniquement au survol est aussi atteignable sans pointeur.
5. Sélecteur stable. Chaque élément interactif a un data-testid ou un équivalent sémantique qui survit à un refactor.
6. Humain dans la boucle. Les actions destructrices sont verrouillées, les actions catastrophiques doublement verrouillées, les actions réversibles s'exécutent avec annulation.
7. Surface documentée. Le produit livre un AGENTS.md ou équivalent qui dit à un agent ce qu'il y a ici, ce qui est sûr et quelles conventions comptent.

Une surface qui valide sept sur sept est complète pour le double utilisateur. Une surface qui en rate trois ou plus est livrée avec l'agent à la porte, aussi bon que soit le plan humain.

L'audit est une habitude, pas un exercice ponctuel. Chaque nouvelle surface, chaque refactor, chaque refonte de marque passe par ces sept questions avant de sortir, comme chaque refonte passe par l'accessibilité. La lisibilité pour les agents est la nouvelle accessibilité, et elle se cumule de la même façon.

Pour la version de cette discipline côté entrée, voir les surfaces de prompt. Pour le corollaire sur les états vides, voir les états vides sont le produit. Pour les fondations, les principes du web design expliquent pourquoi la structure est désormais esthétique.

FAQ

Que signifie concrètement concevoir pour les agents IA en 2026 ?

Traiter l'agent comme un utilisateur à part entière de votre produit, pas comme un bot dont se défendre. L'agent lit votre DOM, appelle vos boutons et juge votre interface selon des critères que l'humain ne verra jamais. Chaque surface a besoin d'un plan humain et d'un plan machine qui partagent les mêmes affordances, le même état et le même vocabulaire.

En quoi est-ce différent du design d'accessibilité ?

La majeure partie se recoupe. Des noms accessibles stables, du HTML sémantique, l'accessibilité au clavier, un statut structuré, tout cela relève de la discipline d'accessibilité appliquée à un nouvel utilisateur. La nouvelle couche, ce sont les surfaces d'outils et la structure lisible par machine, y compris les endpoints MCP, les fichiers AGENTS.md et le JSON-LD. Voyez l'accessibilité comme la fondation et la lisibilité pour les agents comme l'étage du dessus.

Ai-je besoin d'un serveur MCP pour être prêt pour les agents ?

Pas dès le premier jour. Un produit avec un DOM propre, des actions nommées, des sélecteurs stables, un statut structuré et des artefacts révisables est déjà prêt à 80 % pour les agents. Un serveur MCP rend le travail de l'agent plus rapide et plus fiable, mais livrez d'abord la structure, ensuite le protocole.

Deux utilisateurs, un écran, une mission

L'agent n'est pas une menace pour le design. C'est un second utilisateur avec d'autres besoins, et les produits qui le traitent ainsi prennent déjà de l'avance sur ceux qui ne l'ont pas fait.

La plupart des équipes conçoivent encore pour un seul utilisateur. Le brief de marque parle de l'humain, le moodboard montre l'humain, les entretiens de recherche interrogent l'humain. L'agent débarque après le lancement, quand une demande d'intégration arrive, et l'équipe doit rétrofitter sélecteurs, noms, structure, confiance. Rétrofitter coûte toujours plus cher que concevoir les deux plans dès le premier jour.

Le changement n'est pas technique, c'est une posture. Traitez chaque surface comme double usage, lancez l'audit avant la sortie, donnez à l'agent le même soin qu'à l'humain. Refusez, et le produit de quelqu'un d'autre récupère le trafic des agents, le partenariat et le chiffre d'affaires.

Si vous voulez une équipe qui livre identité de marque et UI produit avec les deux plans conçus en même temps plutôt que recousus après coup, engagez Brainy. Nous concevons le plan humain comme nous l'avons toujours fait, et le plan machine comme le second utilisateur qu'il est réellement.