Lecture en Z ou en F : quel schéma visuel pour organiser votre landing page ?

Une page web n'est jamais lue mot à mot dès le premier passage : l'œil la balaie d'abord pour se faire une idée d'ensemble, puis revient se poser sur ce qui a retenu son attention. La recherche en eye tracking a mis en évidence deux trajectoires dominantes selon la nature du contenu — le pattern en Z pour les pages courtes et orientées action, le pattern en F pour les pages denses en texte. Une landing page, par nature courte et construite pour convertir, appelle presque toujours le premier. Comprendre lequel s'applique à votre page — et où placer les éléments qui comptent sur cette trajectoire — change directement ce que vos visiteurs remarquent avant de repartir.

Ce que l'eye tracking montre réellement

Le pattern en F a été documenté par une étude de Shrestha, Lenz, Chaparro et Owens publiée en 2007 : en suivant le regard de participants sur des pages e-commerce, mixant texte et images, les chercheurs ont observé un parcours en deux ou trois balayages horizontaux décroissants en haut de page, suivis d'un balayage vertical le long du bord gauche — la forme d'un F (étude sur Google Scholar). Une seconde étude, menée par Buscher, Cutrell et Morris et présentée à la conférence CHI en 2009 sur 361 pages web vues par 20 participants, confirme que l'attention se concentre massivement en haut et à gauche de l'écran, avec une répartition qui varie selon que le visiteur cherche une information précise ou explore la page (étude sur Google Scholar). Ces deux travaux ne décrivent pas une règle universelle mais une tendance forte : sans hiérarchie visuelle qui guide autrement le regard, l'œil suit le chemin de moindre effort, du coin supérieur gauche vers le bas.

Le pattern en F : le piège des pages trop denses

Le F apparaît sur les pages où l'information est présentée en blocs de texte continus — articles, résultats de recherche, catalogues à description longue. Le lecteur balaie les premières lignes en entier, puis lit de moins en moins loin à chaque bloc suivant, avant de descendre verticalement en scannant les débuts de ligne. C'est un pattern d'exploration économe, pas de lecture complète : tout ce qui se trouve à droite ou en fin de paragraphe risque de ne jamais être vu. Sur une landing page, un F qui s'installe est presque toujours un symptôme — trop de texte non hiérarchisé, pas assez de repères visuels. Notre article sur la lisibilité détaille comment raccourcir les paragraphes et renforcer les repères pour éviter ce glissement.

Le pattern en Z : celui à viser sur une landing page

Le Z apparaît sur les pages courtes, aérées, structurées autour d'un objectif unique — exactement le format d'une landing page. Le regard part du coin supérieur gauche, traverse horizontalement vers la droite, redescend en diagonale vers le coin inférieur gauche, puis traverse à nouveau vers la droite. Quatre points d'ancrage se dessinent : haut-gauche, haut-droite, bas-gauche, bas-droite. C'est ce tracé qu'il faut exploiter, pas subir.

1. Haut-gauche : le logo ou le nom de l'offre — le premier repère qui rassure sur où l'on se trouve.
2. Haut-droite : un élément secondaire de confiance ou de navigation minimale (numéro de téléphone, badge, lien de connexion) — jamais le CTA principal, qui arrive trop tôt dans le parcours.
3. Diagonale centrale : le titre et le sous-titre, sur la trajectoire même du regard — voir notre méthode pour écrire un titre qui accroche.
4. Bas-gauche : un argument de réassurance ou une preuve sociale qui confirme la promesse du titre.
5. Bas-droite : le CTA principal — le point d'arrivée naturel du Z, là où le regard termine sa course après avoir lu la promesse et sa preuve.

Ce placement du CTA en bas-droite du premier écran n'est pas une convention arbitraire : il coïncide avec le point d'atterrissage du regard décrit par les deux études citées plus haut. Il complète ce que notre article sur la ligne de flottaison établit sur les cinq éléments à placer au-dessus du pli — le Z précise où les placer les uns par rapport aux autres, pas seulement lesquels retenir.

Un Z par section, pas seulement pour le premier écran

Le pattern se répète à chaque nouveau bloc de la page, pas uniquement au premier écran. Une section « bénéfices » suivie d'une image alterne naturellement : texte à gauche puis visuel à droite sur une ligne, visuel à gauche puis texte à droite sur la suivante — un Z en zigzag qui garde l'œil en mouvement plutôt que de le laisser retomber dans un F par lassitude. C'est la logique que suit la structure décrite dans notre anatomie d'une landing page qui convertit : chaque section relance l'attention au lieu de simplement l'empiler. Le choix du visuel principal compte aussi ici : une image qui dirige elle-même le regard vers le titre ou le CTA renforce le tracé plutôt que de le contrarier.

Où le Z rejoint les méthodes de copywriting

Le tracé en Z n'est pas qu'une question de mise en page : il recoupe l'ordre que recommandent les méthodes de copywriting comme AIDA — attention en haut-gauche, intérêt sur la diagonale, désir en bas-gauche, action en bas-droite. Le schéma visuel et la structure argumentative pointent vers le même chemin ; les faire coïncider évite d'écrire un bon argumentaire que la mise en page dessert.

Comment vérifier le pattern réel de votre page

• Une heatmap : elle montre le tracé effectif des clics et, avec un outil d'eye tracking ou de webcam, du regard — voir notre article sur les heatmaps.
• Le test des 5 secondes : demandez à quelqu'un de décrire ce qu'il a vu en premier, en deuxième, en dernier ; l'ordre révèle le tracé suivi — méthode complète dans notre article dédié.
• La profondeur de scroll couplée aux clics : si le CTA du bas-droite du premier écran est peu cliqué alors que le scroll est bon, le regard suit peut-être un F et manque l'élément.
• Le CTA collant sur mobile : sur petit écran, le Z se compresse en une colonne verticale ; un CTA fixe en bas d'écran compense la perte du point d'ancrage bas-droite.

Les dix templates LanderKit sont construits sur cette logique de tracé plutôt que sur un remplissage de blocs : logo en haut-gauche, titre et sous-titre sur la diagonale, preuve sociale en bas-gauche, CTA en bas-droite du premier écran, et une alternance texte/visuel section après section pour garder l'œil en mouvement jusqu'au formulaire final.