Un designer construit une page services. La hiérarchie est propre, le rythme est bon, les sections s'enchaînent. Lue de haut en bas, elle fonctionne.

Puis un système d'IA en extrait une section, environ 200 mots, et la cite à quelqu'un qui n'a jamais vu le reste de la page. Hors contexte, la section donne ceci : « Cette approche réduit sensiblement les délais de livraison. Elle a fait ses preuves chez des clients de plusieurs secteurs. »

Quelle approche. Quels clients. Quelle entreprise. Le passage est fluide, bien composé, et inutilisable. C'est ce mode de défaillance qui nous intéresse ici, et c'est un problème de design bien avant d'être un problème de rédaction.

Ce que la machine prélève réellement

Les systèmes d'IA ne lisent pas une page comme le fait un humain. Ils récupèrent des passages. Le contenu est découpé en fragments au moment de la récupération et, selon les travaux d'Anthropic sur la récupération contextuelle, ces fragments dépassent rarement quelques centaines de tokens, la récupération au niveau du passage se situant couramment entre 100 et 300 mots.

L'exemple de fragment défaillant donné par Anthropic mérite qu'on s'y arrête :

« Le chiffre d'affaires de l'entreprise a progressé de 3 % par rapport au trimestre précédent. »

Parfaitement clair à l'intérieur d'un document. Récupéré seul, il ne précise ni de quelle entreprise ni de quel trimestre il s'agit, ce qui rend la récupération imprécise et l'exploitation difficile. La recherche identifie ce point comme une cause centrale d'échec.

La conséquence pour le design est directe. Votre unité de livraison n'est pas la page. C'est la section. Chaque section finira par être extraite et lue seule, et elle y survit ou elle n'y survit pas.

Quatre décisions qui déterminent la survie d'une section

1. Les titres sont des frontières de fragment : une seule question par section.

Le découpage suit une logique sémantique, et les titres constituent le signal sémantique le plus fort d'une page. Une section couvrant trois sujets vaguement liés sera mal découpée ou récupérée de façon incomplète. Un H2, une question, une réponse. Si une section appelle deux réponses, il faut deux sections.

2. Placer la réponse dans les deux premières phrases.

La plupart des textes éditoriaux montent vers leur conclusion. L'extraction récompense l'inverse. La réponse directe se place immédiatement sous le titre, le contexte, les nuances et les exemples venant ensuite. C'est la pyramide inversée appliquée à la section plutôt qu'à la page, et cela sert accessoirement le lecteur qui parcourt la page sur mobile.

3. Répéter les entités, supprimer les pronoms orphelins.

À l'intérieur d'une section, évitez « cette approche », « l'équipe », « comme vu plus haut », « elle ». Ces références renvoient à un contenu que le système de récupération n'inclura pas. Nommez l'entreprise, nommez le service, nommez la période, dans chaque section. Cela paraît répétitif à la lecture continue. C'est la différence entre un passage citable et un passage inexploitable.

C'est ici que designers et rédacteurs doivent s'accorder, car l'instinct des deux métiers est précisément d'éviter la répétition.

4. Utiliser de vrais titres, pas des div stylés.

Un titre qui n'est qu'un div en grande taille ne porte aucune signification structurelle. L'extraction repose sur la structure du document : une page dont la hiérarchie n'existe que visuellement n'a, pour une machine, aucune hiérarchie. Un seul H1. Des H2 pour les sections. Des H3 imbriqués sous les H2, sans jamais sauter un niveau pour des raisons esthétiques.

Le texte des titres doit énoncer le sujet de la réponse plutôt que chercher l'élégance. « Combien de temps prend un projet de site web » l'emporte systématiquement sur « L'art de la patience », et ne coûte qu'un peu d'amour-propre.

La question des composants, tranchée précisément

La plupart des recommandations design sur ce sujet se trompent dans un sens ou dans l'autre : soit « les accordéons ne posent aucun problème », soit « ne masquez jamais rien ». Ni l'un ni l'autre. La vraie règle est simple.

Ce qui compte, c'est la présence du contenu dans le HTML initial, pas sa visibilité.

Un contenu masqué en CSS mais présent dans le HTML au chargement est explorable et indexable. Google l'a affirmé directement. Un accordéon qui livre ses réponses dans le balisage et les replie en CSS reste lisible.

Un contenu injecté par JavaScript après une interaction relève d'un tout autre cas. Si la réponse n'arrive qu'après un clic, elle peut n'être jamais atteinte, et la situation est pire encore pour les robots d'IA : aucun des principaux n'exécute le JavaScript, donc tout ce qui dépend d'un événement de clic est invisible par construction.

D'où les règles par composant :

• Accordéons. Acceptables, à condition que le contenu de chaque panneau figure dans le HTML initial et soit replié en CSS. Inacceptables si les panneaux se chargent à la demande. Ajoutez un schéma FAQPage, rendu côté serveur.
• Onglets. Le contenu de tous les onglets doit figurer dans le HTML initial, la bascule se faisant en CSS. Un onglet qui charge au clic masque tout ce qui n'est pas le premier.
• Carrousels. Toutes les diapositives pré-rendues dans le DOM. Un carrousel qui monte ses slides progressivement ne livre que la première.
• Modales et infobulles. Jamais de définition, de prix ou de spécification exclusivement à l'intérieur. Si l'information mérite d'être citée, elle a sa place dans le flux de la page.
• Données comparatives. Un vrai tableau HTML, avec de vrais th et td. Une grille de div stylés donne le même rendu et ne porte aucune des relations qui rendent une comparaison extractible.
• Définitions et chiffres. En texte. Un chiffre magnifiquement composé dans une image est un chiffre qu'aucun système ne peut lire ni citer.

L'objection, qui est réelle

Rien de tout cela ne signifie qu'il faille tout exposer. Un test documenté a rendu entièrement visible un contenu de FAQ jusque-là replié : les sessions ont chuté de 21 %, le temps d'engagement de 63 %, les impressions de 4 %, et le positionnement s'est dégradé. Déverser toutes les réponses sur la page au nom de la lisibilité machine a rendu la page moins bonne pour les humains auxquels elle était destinée, et moins performante en conséquence.

La résolution n'est pas un compromis, c'est une distinction. Les réponses principales, celles que vous voulez voir citées, se placent visibles et haut dans la page. Le matériel secondaire peut vivre dans des composants repliables, à condition d'être livré dans le HTML. Le repli sert à gérer l'attention, ce n'est pas un lieu de stockage pour ce qui compte.

Ce qui change dans le design system

C'est la partie que l'on saute. Rien de ce qui précède ne tient si cela repose sur la mémoire de chaque designer. Cela doit vivre dans les composants.

• Des gabarits de section qui rendent le titre et le paragraphe de réponse solidaires, pour que la réponse ne puisse pas glisser en bas de section.
• Des composants accordéon et onglets documentés comme bascule CSS uniquement, le chargement différé étant explicitement proscrit.
• Un vrai composant tableau dans la bibliothèque, pour que personne n'en reconstruise un en div par gain de temps.
• Des styles de titre liés aux niveaux de titre plutôt qu'aux tailles, afin qu'un designer choisissant une apparence ne choisisse pas silencieusement une structure.
• Les recommandations de contenu dans la documentation des composants, pas dans un guide de style que personne n'ouvre.

Ce sont des décisions Figma et design system. Elles se prennent des mois avant que quiconque n'écrive le contenu qui sera extrait.

Une revue de cinq minutes pour n'importe quelle maquette

Prenez une section d'une maquette, isolément, et demandez-vous :

• Le titre dit-il à quelle question cette section répond ?
• La réponse figure-t-elle dans les deux premières phrases sous ce titre ?
• Si je ne lis que cette section, est-ce que je sais de quelle entreprise, de quel produit et de quelle période il s'agit ?
• Y a-t-il des pronoms renvoyant à des éléments hors de la section ?
• Chaque titre est-il un vrai titre ?
• Un élément essentiel vit-il dans un composant qui se charge à l'interaction ?

Six questions. Si une section échoue à deux d'entre elles ou plus, elle ne sera pas citée, quelle que soit sa qualité en maquette.

Où se situe Genesis Digital Factory

Nous construisons des design systems et des gabarits de production pour des agences, en marque blanche. Le brief inclut de plus en plus ce point : non seulement l'apparence de la page, mais la capacité de sa structure à survivre au démontage par une machine. Cela rejoint le rendu et la surface de crawl dans une même question, celle de savoir si le site d'un client peut être lu.

Envoyez-nous une page, une frame Figma ou une URL en ligne. Nous annotons les sections qui survivent à l'extraction, celles qui s'effondrent hors contexte, et ce qu'il faut changer dans le composant plutôt que dans le texte. Gratuitement, sous 48 heures. Découvrez nos réalisations UX et UI, ou notre offre de sous-traitance en marque blanche.