Cet article a été rédigé le 6 novembre 2026.
Les outils d’IA évoluent à toute vitesse. L’armature d’une page, elle, demeure inchangée. En-tête (header), zone d’accroche (hero), section (section), pied de page (footer), navigation (navigation), carte (card) : maîtriser ces six termes permet déjà d’exprimer clairement la structure d’un premier écran. L’organisation des menus au sein des applications évoluera sans cesse ; lisez ceci comme la carte d’une page, et non comme un manuel d’utilisation d’un éditeur particulier.
Avant tout habillage esthétique, une page web constitue une suite d’intentions bien précises. Un premier composant indique où vous vous trouvez. Un autre exprime immédiatement l’objet du site. Un troisième structure les informations répétitives. Un quatrième oriente vers la suite du parcours. Enfin, un dernier composant vient clore la page. Si ces rôles ne sont pas nommés explicitement, le modèle d’IA a tendance à concevoir une simple affiche : une grande image centrale, du texte flottant et aucune possibilité de défilement logique. Le résultat semble abouti au premier coup d’œil, mais s’avère totalement inexploitable sur un téléphone.
Indiquez le rôle des composants en anglais dans vos consignes, puis détaillez le contenu dans votre propre langue. Si votre langue dispose d’un mot usuel et établi pour désigner l’un de ces éléments, employez-le naturellement en ajoutant le terme anglais entre parenthèses la première fois. S’il n’existe pas de terme consacré, évitez d’en fabriquer un : une explication synthétique assortie du nom anglais convient parfaitement.
Six zones clés, dans l’ordre de la découverte
Un en-tête (header) forme la bande supérieure du site. Il accueille le nom de l’organisation et les accès principaux. Il n’a pas vocation à se substituer à la zone d’accroche : à vouloir placer tous les éléments importants dans l’en-tête, on prive la page de sommet et on crée un encombrement illisible.
La zone d’accroche (hero) constitue le premier grand espace visible. Elle formule une promesse unique, s’appuie sur une phrase explicative et propose une action claire. Une clinique y indiquera sa spécialité avant de proposer « Prendre rendez-vous » ; un commerce y présentera son savoir-faire avec l’option « Découvrir le pain du jour ». Vouloir tout faire figurer dans cet espace revient à coller un dépliant publicitaire en haut d’écran : le reste de la page ne fait alors que se répéter, et l’utilisateur sur mobile n’atteint jamais les tarifs ni l’adresse.
Une section (section) traite d’un sujet précis sous un titre dédié : horaires, tarifs, équipe ou questions fréquentes. C’est grâce aux sections qu’une longue page devient facile à parcourir du regard. Exigez des sections organisées autour des questions concrètes des visiteurs plutôt que d’employer le mot « section » de manière abstraite. Une consigne comme « Une section intitulée Horaires, avec les jours rédigés sous forme de texte brut et non sous forme d’image » résiste parfaitement à la traduction. Une image représentant un tableau d’horaires, en revanche, ne le permet pas.
Le pied de page (footer) conclut la page. Il rassemble les coordonnées, un rappel des horaires si nécessaire, ainsi qu’un moyen de contact. Les visiteurs qui ne trouvent pas une information ont le réflexe de défiler jusqu’au bas du site. Un pied de page réduit à une simple bande décorative manque à son rôle principal.
La navigation (navigation) rassemble les liens essentiels, le plus souvent logés dans l’en-tête. Présenter cinq liens constitue déjà un maximum raisonnable sur écran de téléphone. Au-delà, les options doivent trouver leur place derrière un menu dédié plutôt que de s’entasser dans une ligne de texte minuscule. Ne réclamez pas une navigation qui répète chaque titre de section : ce serait transformer le menu en une table des matières déguisée.
Une carte (card) est un bloc réutilisable destiné à présenter des informations de même nature : un service, une prestation, un produit. Chaque carte conserve la même structure : une illustration si elle s’avère pertinente, un titre, une phrase explicative et un bouton d’action. Des cartes adoptant des mises en page disparates ne forment pas un ensemble cohérent ; elles s’apparentent à la juxtaposition de plusieurs affiches distinctes.
Des cartes identiques sur deux largeurs d’écran
Concevoir une page uniquement pour les écrans d’ordinateur conduit à des dysfonctionnements majeurs dans les contextes où le smartphone constitue le principal outil d’accès au web. Définissez clairement la disposition des colonnes. Sur grand écran : trois cartes côte à côte. Sur écran étroit : les cartes s’empilent les unes sous les autres. Le texte contenu dans les cartes reste inchangé ; c’est l’alignement qui s’adapte. C’est le principe d’une mise en page adaptative (responsive layout), et cela relève d’une règle structurelle, non d’un choix esthétique. La consigne vague « Rendez la page adaptative » laisse le modèle libre d’adopter une disposition qui masque parfois le bouton d’action. La consigne « Trois colonnes sur écran large, une seule colonne sur écran étroit, avec le bouton toujours visible » verrouille le comportement attendu.
Les tablettes peuvent offrir une disposition intermédiaire sur deux colonnes. C’est une option envisageable, mais non obligatoire. Définir le passage d’une à trois colonnes suffit à poser la règle : le contenu forme une liste continue, et la présentation en ligne n’est qu’un privilège lié à la largeur disponible.
Un en-tête fixe (sticky header) — qui demeure ancré en haut de l’écran pendant le défilement — reste facultatif. Il apporte un confort certain lorsque la navigation sert de repère permanent, mais peut devenir gênant s’il ampute le haut d’un petit écran de téléphone. Ne le demandez que si le retour rapide au menu prime sur la lisibilité du texte. Si vous utilisez ce terme anglais dans vos consignes, assortissez-le d’une contrainte claire : l’en-tête doit rester très compact et ne jamais masquer le début du premier titre.
L’exemple d’une page en apparence terminée mais inutilisable
Une structure de soins de proximité avait sollicité l’IA pour obtenir « une belle page d’accueil ». Le modèle avait généré une vaste photo de couloir surmontée d’un slogan, accompagnée d’une rangée d’icônes très sobres sans aucune légende textuelle. Sur l’écran d’un ordinateur de bureau, le rendu paraissait très épuré. En situation réelle sur téléphone, le slogan recouvrait l’entrée, les icônes se chevauchaient de façon illisible et les horaires d’ouverture se trouvaient directement incrustés dans l’image — ce qui empêchait leur traduction tout comme leur lecture par un lecteur d’écran (screen reader). Aucun élément de cette page ne répondait aux définitions d’un en-tête, d’une zone d’accroche, d’une section ou d’une carte : c’était une affiche publicitaire adaptée à l’impression, pas une interface web.
Une seconde consigne a été rédigée en nommant chaque composant de l’armature, sans employer de qualificatifs esthétiques. Un en-tête comportant le nom du centre et trois liens (consultations, horaires, accès). Une zone d’accroche contenant une phrase explicative et un bouton « Prendre rendez-vous ». Trois sections rédigées en texte brut. Un ensemble de cartes présentant les types de consultations (alignées par trois sur grand écran, empilées sur mobile). Un pied de page intégrant l’adresse exacte au format texte. La page est devenue sobre, fonctionnelle et immédiatement exploitable par un patient sur son téléphone. La photo du couloir a pu être conservée au sein de la zone d’accroche, dans un format plus modeste, sans venir étouffer le message. Elle ne faisait plus office de page à elle seule.
Voilà l’apport concret de ces six notions. Elles empêchent le modèle de consacrer toute sa réponse à créer une ambiance visuelle au détriment de l’ergonomie. L’ambiance doit s’inscrire à l’intérieur d’un composant, sans jamais s’y substituer. Que vous prépariez vos consignes en français, en indonésien ou en hindi, inscrivez les nom des six composants en anglais dans l’instruction technique, puis formulez les textes réels dans votre langue. Les structures voyagent d’une langue à l’autre ; le contenu reste ancré là où se trouvent les usagers.
Ce que cela change pour votre première consigne
Une première consigne de cadrage peut tenir en un seul paragraphe :
Build a page with a header (the name and three links), a hero (one sentence and one button), three sections, a row of cards that becomes a single column on a narrow screen, and a footer with the address as text.
À la suite de cette instruction en anglais, détaillez dans votre propre langue le contenu précis des trois sections. Le modèle de langage n’a pas besoin de votre langue maternelle pour positionner un en-tête ; vous avez en revanche besoin de votre langue pour définir si les sections doivent présenter les horaires, les tarifs et l’accès, plutôt qu’une succession de slogans répétitifs.
C’est précisément cette structure dont la grande majorité des projets et petites structures ont réellement besoin. C’est également la structure qu’une IA risque de surcharger d’effets inutiles si on se contente de réclamer un résultat « moderne et épuré ». La modernité ne constitue pas un composant d’interface. L’en-tête, la zone d’accroche, la section, le pied de page, la navigation et la carte en sont. Intégrez ces termes anglais dans vos consignes techniques, et conservez votre langue pour exprimer les informations essentielles destinées aux utilisateurs.
L’étape suivante ne concerne pas l’ajout d’une zone supplémentaire sur la page. Elle traite de l’interaction à adopter lorsque l’interface doit poser une question à l’utilisateur ou afficher des précisions sans le réorienter vers une autre page. C’est un rôle très différent de celui d’une section, et c’est l’objet de l’article suivant.