Lois de l'UX appliquées à une landing page : Hick, Fitts, Jakob, Miller, Gestalt…

Ce guide regroupe nos articles consacrés aux lois et principes de l'expérience utilisateur (auparavant un article par loi). Pour chacune : l'étude qui la fonde, sa portée réelle (certaines sont souvent surinterprétées) et son application à une landing page.

Pour la structure complète d'une page, voir l'anatomie d'une landing page qui convertit.

Cécité aux bannières : quand votre propre bloc ressemble trop à une publicité

Vous avez soigné votre plus beau bloc : grand encart coloré, coins arrondis, fond contrasté, message parfaitement écrit. Et personne ne le voit. Depuis la fin des années 1990, la recherche en ergonomie a un nom pour ce phénomène : la cécité aux bannières. Le problème, sur une landing page, c’est qu’elle ne frappe pas les publicités des autres — elle frappe vos propres arguments.

Le phénomène est décrit dès 1998 par Jan Panero Benway dans une communication au titre volontairement ironique, « Banner Blindness: The Irony of Attention Grabbing on the World Wide Web », publiée dans les actes du congrès annuel de la Human Factors and Ergonomics Society. Le protocole est simple : on demande à des participants de trouver une information sur un site, alors que le lien qui y mène prend la forme d’un grand élément coloré, visuellement distinct, du type bannière. Contre toute intuition de designer, les participants passent à côté. Benway observe notamment que les bannières placées le plus haut dans la page — donc les plus éloignées des autres liens de contenu — sont manquées plus souvent que celles placées plus bas, et que les participants les regardent à peine lorsque cliquer dessus n’est pas nécessaire pour accomplir leur tâche. Rendre un élément saillant, s’il l’est à la manière d’une publicité, peut donc le rendre moins visible, pas plus. C’est la limite pratique de l’effet Von Restorff : trancher fonctionne quand la différence signale « contenu important », et échoue quand elle signale « annonce publicitaire ».

Les zones et les formats à haut risque

• Le bandeau supérieur, au-dessus du contenu réel — c’est l’emplacement historique de la bannière publicitaire ; tout ce qui s’y trouve hérite du soupçon. Un message d’offre placé là est structurellement moins lu que le même message intégré à l’accroche du hero.
• La colonne latérale — l’emplacement le plus évité en tâche dirigée. Sur mobile, elle finit de toute façon empilée en bas de page, où plus personne ne descend.
• Tout ce qui défile ou clignote automatiquement — carrousels, compteurs animés, bandeaux défilants. Le mouvement non déclenché par l’utilisateur est le marqueur le plus fiable de « publicité ».
• Les rangées de badges génériques — cinq logos alignés côte à côte sont lus comme un habillage décoratif, pas comme une information : voir les badges de confiance et paiement sécurisé.
• Les encarts isolés du flux de lecture — un bloc qui ne partage ni la largeur, ni le fond, ni la typographie du texte alentour se signale comme extérieur au propos ; le visiteur le traite comme tel.

Loi de Fitts : pourquoi la taille et la position du bouton CTA changent tout sur mobile

Deux landing pages avec le même titre, la même offre et le même CTA peuvent convertir différemment pour une seule raison : la taille du bouton et sa distance au pouce du visiteur. C'est ce que mesure la loi de Fitts depuis 1954 — et ce qu'ont confirmé depuis les études sur l'usage du mobile à une main.

Le psychologue Paul Fitts a montré, dans une étude devenue une référence classique de l'ergonomie (Fitts, 1954, Journal of Experimental Psychology), que le temps nécessaire pour atteindre une cible avec un geste dépend de deux facteurs seulement : la distance à parcourir et la taille de la cible. Plus la cible est loin, plus le geste prend de temps ; plus elle est petite, plus il faut de précision — donc de temps — pour la toucher sans la manquer. Le résultat tient en une intuition simple, mais ses conséquences pour un bouton d'action sont directes : un CTA proche du pouce et suffisamment large se clique plus vite et avec moins d'erreurs qu'un CTA lointain ou minuscule, même si le texte du bouton est identique.

La zone de pouce : ce que les études sur le mobile à une main ont ajouté

• Zone facile — le tiers inférieur de l'écran, atteignable sans changer sa prise en main. C'est là qu'un CTA sticky en bas d'écran tire le meilleur de la zone de pouce, comme détaillé dans notre article sur le CTA sticky mobile.
• Zone d'étirement — le tiers médian, atteignable en tendant le pouce, avec une précision réduite : c'est la zone la plus tolérante à une taille de bouton légèrement généreuse, mais pas la plus rapide.
• Zone difficile — le haut de l'écran, qui oblige souvent à changer de prise ou à utiliser l'autre main. Un CTA unique placé uniquement là, sans répétition plus bas dans la page, part avec un désavantage mesurable.

Loi de Hick sur une landing page : pourquoi moins de choix convertit mieux

Un visiteur qui hésite entre cinq liens de menu, trois offres et deux boutons n’hésite pas par manque d’intérêt : il hésite parce que chaque option supplémentaire allonge mathématiquement son temps de décision. C’est ce que mesure la loi de Hick depuis 1952 — et ce qu’elle dit très précisément à faire d’une landing page trop généreuse en choix.

Le psychologue britannique William Edmund Hick a montré, dans une étude publiée en 1952 dans le Quarterly Journal of Experimental Psychology, que le temps nécessaire pour choisir entre plusieurs options augmente de façon logarithmique avec le nombre de ces options — pas de façon linéaire. Concrètement : passer de deux à quatre choix ralentit sensiblement la décision, mais passer de huit à dix choix ralentit beaucoup moins en proportion. Chaque option ajoutée pèse le plus lourd au début ; c’est justement pour cela qu’une landing page qui passe d’un CTA unique à trois CTA différents perd davantage, toutes choses égales, qu’une page qui passerait de huit à dix liens de menu.

Où la loi de Hick s’applique sur une landing page

• Le menu de navigation — chaque lien supplémentaire est une option de plus à évaluer avant même que le visiteur ait lu l’offre ; notre guide du menu de navigation d’une landing page détaille pourquoi la plupart des landing pages de conversion n’en ont pas besoin du tout.
• Le nombre de CTA — « Réserver un appel », « Télécharger la brochure » et « Voir une démo » sur le même écran forcent le visiteur à trancher entre trois intentions avant de trancher sur l’offre elle-même ; notre article combien de CTA sur une landing page chiffre l’arbitrage.
• Les offres et grilles tarifaires — au-delà de trois formules, le temps de comparaison croît plus vite que la clarté gagnée ; notre étude de l’effet de compromis dans un tableau de prix montre comment structurer trois options sans ralentir la décision.
• Les champs d’un formulaire — chaque champ optionnel supplémentaire est un micro-choix (le remplir ou non) qui s’ajoute avant la soumission ; voir notre guide combien de champs dans un formulaire.

Loi de Jakob : pourquoi une landing page « originale » convertit moins

Un visiteur arrive sur votre landing page avec, en mémoire, les centaines de pages qu’il a vues avant la vôtre. Il ne les a pas apprises consciemment, mais il sait déjà où doit se trouver le logo, à quoi ressemble un bouton d’achat et où cliquer pour revenir en arrière. La loi de Jakob dit simplement ceci : chaque fois que votre page contredit cette mémoire, elle facture au visiteur un temps d’apprentissage qu’il n’avait pas prévu de payer.

L’énoncé tient en une ligne : les utilisateurs passent l’essentiel de leur temps sur d’autres sites que le vôtre ; ils s’attendent donc à ce que le vôtre fonctionne comme les autres. Ce n’est pas un principe esthétique, c’est un constat de répartition du temps. Un visiteur qui arrive sur votre page y passera peut-être quarante secondes ; il a passé les vingt années précédentes sur des milliers d’autres pages. Cette exposition massive a construit chez lui un modèle mental par défaut — où se trouve le logo, à quoi ressemble un lien, ce que fait une icône de panier — et votre page de quarante secondes n’a aucune chance de reprogrammer ce modèle. Elle peut seulement s’y conformer, ou le contredire et en payer le prix.

Les conventions qu’un visiteur francophone attend en 2026

La loi de Miller sur une landing page : le vrai sujet n’est pas « 7 items », c’est le chunking

« Sept, plus ou moins deux » est probablement la statistique la plus citée et la plus mal comprise de l’UX. L’article de George Miller ne prescrit pas un nombre maximal d’éléments à l’écran : il décrit une limite de la mémoire immédiate, et surtout la manière de la contourner — le chunking. Sur une landing page, cette nuance change tout : au lieu de compter les items, on cherche à ce que le visiteur n’ait rien à retenir.

L’article fondateur est « The Magical Number Seven, Plus or Minus Two: Some Limits on Our Capacity for Processing Information », publié par George A. Miller dans la Psychological Review (1956, vol. 63, p. 81-97). Miller y rassemble des travaux sur deux capacités distinctes : le jugement absolu (combien de niveaux d’un stimulus — hauteur d’un son, intensité d’un goût — on sait discriminer sans se tromper) et l’empan mnésique immédiat (combien d’éléments on peut répéter après une seule écoute). Il observe que les deux plafonnent autour de la même zone, aux alentours de sept, et il s’en amuse d’ailleurs ouvertement : il évoque « la persécution par un nombre entier » plutôt qu’une loi de la nature. Le passage réellement important vient ensuite : Miller montre que la limite ne porte pas sur la quantité d’information brute mais sur le nombre d’unités, de chunks. Une suite de vingt et un chiffres binaires est irretenable telle quelle ; regroupée par paquets de trois et recodée, elle devient sept unités et redevient mémorisable. Autrement dit, la capacité est fixe, mais ce qu’on met dans chaque unité ne l’est pas — et c’est là que le design a une marge de manœuvre.

La conséquence n°1 : ne demander aucun effort de mémoire

• Le prix reste visible au moment de l’engagement — répéter le prix, la durée et ce qui est inclus juste à côté du bouton, plutôt que de compter sur le tableau tarifaire situé deux sections au-dessus, et cela à chaque bouton répété dans la page.
• Le formulaire rappelle l’offre — un formulaire d’inscription posé nu, sans rappel de ce à quoi on s’inscrit, oblige le visiteur à maintenir l’offre en mémoire pendant qu’il tape son adresse. Un résumé d’une ligne au-dessus des champs suffit à décharger cette tenue en mémoire.
• Aucune comparaison à distance — si deux informations doivent être mises en relation (un prix et ce qu’il contient, une caractéristique et son bénéfice), elles doivent être physiquement adjacentes, pas séparées par un écran de défilement.
• Les libellés se comprennent seuls — un bouton « Continuer » exige de se rappeler à quoi on continue ; « Voir les 10 templates » se comprend sans contexte antérieur.
• Rien à recopier — une référence, un code promo ou un e-mail à retenir d’un écran à l’autre est le cas le plus coûteux : il faut l’afficher au moment où on en a besoin, ou le pré-remplir.

La loi de Pareto sur une landing page : où concentrer vraiment ses efforts d’optimisation

Une équipe passe une semaine à peaufiner la couleur des liens du footer pendant que le titre du hero, lui, n’a pas changé depuis un an malgré un taux de conversion médiocre. Ce déséquilibre de priorité porte un nom : la loi de Pareto. Voici ce qu’elle dit vraiment d’une landing page, et où elle s’arrête.

En 1896, l’économiste italien Vilfredo Pareto publie le premier tome de son Cours d’économie politique, dans lequel il documente que la répartition des terres et des revenus en Italie suit une régularité frappante : une petite minorité de propriétaires en détient la grande majorité. Pareto en tire une observation statistique — plus tard généralisée sous le raccourci « 80/20 » — qui décrit une distribution très inégale plutôt qu’une loi physique exacte : dans de nombreux systèmes, une minorité de causes explique la majorité des effets.

Les quelques éléments qui pèsent sur la majorité des conversions

• Le titre et la proposition de valeur du hero — vu par 100 % des visiteurs, il décide en quelques secondes si la page mérite d’être lue. Voir notre guide sur écrire une proposition de valeur.
• Le CTA principal — son libellé, sa couleur et son emplacement, traités dans nos articles sur la couleur du bouton et le nombre de CTA à afficher.
• La première preuve sociale visible sans scroller — un chiffre, un logo client ou un avis noté, détaillée dans notre article sur la preuve sociale.
• L’image ou la vidéo du hero — le second élément regardé juste après le titre selon les études d’eye-tracking, couvert dans notre guide sur l’image hero.

Loi de Parkinson sur une landing page : pourquoi une deadline change le comportement d'achat

« Le travail s'étend de façon à occuper le temps disponible pour son achèvement » : c'est la loi de Parkinson, formulée en 1955 pour se moquer de la bureaucratie britannique. Appliquée à une landing page, elle explique pourquoi une offre ouverte indéfiniment finit presque toujours par être remise à demain — et ce qu'une deadline bien construite change réellement à la décision d'achat.

L'historien naval britannique Cyril Northcote Parkinson a formulé, dans un essai satirique publié en 1955 dans The Economist, le principe selon lequel « le travail s'étend de façon à occuper le temps disponible pour son achèvement ». Son exemple resté célèbre : une personne sans autre occupation peut consacrer une journée entière à rédiger et poster une simple carte postale à sa nièce, alors que la même tâche prend deux minutes à quelqu'un de pressé. Le mécanisme n'est pas une question de motivation ou de compétence — c'est le temps disponible lui-même qui dicte le temps réellement consacré à la tâche. Sur une landing page, la « tâche » est la décision d'achat, et le « temps disponible » est la durée pendant laquelle l'offre reste accessible sans condition. Une offre ouverte indéfiniment ne rend pas la décision plus facile : elle la rend simplement plus facile à reporter, encore et encore, jusqu'à l'oubli pur et simple.

Comment l'appliquer concrètement cette semaine

• Donner une échéance à toute offre, même généreuse — une réduction, un bonus ou un accès anticipé sans date de fin affichée perd la totalité de son effet Parkinson ; la date ne doit pas nécessairement être courte, mais elle doit exister et être visible.
• Préférer une granularité fine dans les dernières heures — heures, minutes et secondes plutôt que « J-3 » une fois l'échéance proche, conformément à l'effet mesuré par Chou (2019) sur la perception du temps restant.
• Fixer une deadline pour le suivi d'un lead, pas seulement pour l'offre elle-même — notre guide speed-to-lead montre que le même mécanisme joue côté vendeur : sans échéance interne de rappel, le suivi commercial s'étire lui aussi jusqu'à ne plus avoir lieu.
• Donner une date de fin d'inscription ferme à un webinaire plutôt qu'une inscription ouverte jusqu'au jour J — le format déjà structuré du template webinaire et masterclass intègre ce compte à rebours par défaut.
• Annoncer un délai de réponse précis après un formulaire (« réponse sous 24 h » plutôt que « nous vous recontacterons ») : la deadline s'applique aussi à l'attente perçue par le visiteur, pas seulement à sa propre décision.

Loi de Tesler sur une landing page : la complexité ne disparaît pas, elle change de camp

« On a simplifié le formulaire, il ne reste que l’email. » La phrase est à moitié vraie : le formulaire est plus court, mais les informations supprimées restent nécessaires — elles seront obtenues par téléphone, par relance ou à la main. La loi de Tesler dit exactement cela : dans tout système, une part de complexité est irréductible, et la seule question est de savoir qui la porte.

Ce que la recherche apporte, en revanche, c’est la mesure de ce que coûte cette complexité une fois qu’elle atterrit chez l’utilisateur. Dans une étude publiée en 1988 dans la revue Cognitive Science, le psychologue John Sweller a posé les bases de la théorie de la charge cognitive : la mémoire de travail a une capacité limitée, et l’effort consacré à des opérations étrangères à la tâche — la charge cognitive extrinsèque — se fait au détriment des ressources disponibles pour la tâche elle-même. Sur une landing page, chaque décision que le visiteur prend à votre place — deviner dans quelle catégorie il entre, reconstituer un prix, arbitrer entre trois formules mal différenciées — consomme une attention qui n’ira pas à votre offre. Notre guide de la charge cognitive sur une landing page détaille ce mécanisme, et notre article sur la loi de Hick en donne la version chronométrée.

Le formulaire court ne supprime rien, il déménage

Loi de Weber-Fechner sur une landing page : quelle réduction de prix un visiteur remarque vraiment

Deux remises de 10 € : la première sur un article à 20 €, la seconde sur un article à 300 €. La première change tout, la seconde ne change presque rien — et ce n’est pas une impression, c’est une loi mesurée en laboratoire depuis 1860. Ce qu’elle dit précisément d’une réduction, d’un tableau de prix ou d’un order bump.

Dans les années 1830, le physiologiste allemand Ernst Heinrich Weber a montré qu’un individu ne perçoit pas une différence entre deux stimuli (un poids, une luminosité, un son) en valeur absolue, mais en proportion du stimulus de départ : il faut une variation d’autant plus grande, en valeur absolue, que le stimulus initial est déjà élevé, pour qu’elle devienne « juste perceptible ». Le psychophysicien Gustav Fechner a formalisé ce résultat en 1860 dans son ouvrage fondateur Elemente der Psychophysik (voir l'étude), en montrant que l’intensité perçue d’un stimulus croît de façon logarithmique avec son intensité physique réelle : au-delà d’un certain seuil, chaque unité supplémentaire ajoutée à un stimulus déjà important se remarque de moins en moins. Appliqué à un prix, le principe se traduit ainsi : ce qui compte pour la perception d’une réduction n’est pas le montant retranché, mais son rapport au prix de départ.

Où ça change concrètement une landing page

• Le prix barré — une remise affichée en dessous du seuil proportionnel (« -8 € » sur un article à 250 €) n’ajoute quasiment rien à la perception de l’offre ; notre article sur le prix barré et sa réglementation aborde la « règle des 100 » (pourcentage sous 100 €, montant au-dessus) — la loi de Weber-Fechner est la raison psychophysique précise de cette règle empirique.
• Le tableau de prix à plusieurs offres — l’écart entre deux formules doit lui aussi être proportionnellement perceptible pour que le visiteur distingue clairement leur valeur respective ; voir notre étude de l’effet de compromis dans une grille tarifaire.
• L’order bump et l’upsell — un supplément proposé au moment du paiement se remarque d’autant moins qu’il est faible en proportion du montant déjà engagé ; c’est justement ce qui rend un order bump bien calibré presque indolore, alors que le même montant proposé seul, sans ancrage, choquerait.
• L’abonnement mensuel vs annuel — annoncer une économie « de 96 € par an » se lit très différemment de « 8 € de moins par mois » sur le même service, alors que le montant total économisé est identique ; notre comparatif mensuel ou annuel détaille l’effet de cadrage.
• Le pack vs le produit à l’unité — une réduction de 80 € sur un pack à 229 € (soit environ 35 %) franchit largement le seuil perceptible ; la même réduction de 80 € sur un article à 900 € resterait, elle, en dessous du seuil et se remarquerait à peine.

Loi de Yerkes-Dodson : pourquoi trop d'urgence fait fuir vos visiteurs (et pas assez ne convertit pas)

Une landing page trop plate n'incite personne à agir maintenant. Une landing page saturée de comptes à rebours et de popups fait fuir avant même la lecture de l'offre. Entre les deux existe un point optimal, décrit dès 1908 par une loi de psychologie expérimentale toujours citée aujourd'hui : la loi de Yerkes-Dodson.

En 1908, les psychologues Robert Yerkes et John Dodson publient une étude devenue un classique de la psychologie expérimentale (Yerkes & Dodson, 1908, Journal of Comparative Neurology and Psychology) : la performance sur une tâche augmente avec le niveau d'activation (l'éveil, la pression, le stress) — mais seulement jusqu'à un certain point. Au-delà de ce point, plus de pression ne produit plus de meilleurs résultats : elle en produit de moins bons. Représentée graphiquement, la relation entre activation et performance dessine un U inversé : trop peu de stimulation laisse la performance basse par manque de motivation, un niveau modéré la fait culminer, et un excès de stimulation la fait rechuter par saturation, anxiété ou évitement.

Le sommet de la courbe : le niveau qui fait réellement convertir

• Un seul signal d'urgence à la fois — une deadline ou une rareté, jamais les deux empilés avec un troisième signal (notifications d'achat en direct, popup de sortie) sur la même page.
• Une échéance vérifiable — une date affichée, un compte à rebours qui correspond à une vraie fin de fenêtre, comme détaillé dans notre guide sur les dark patterns à éviter.
• Un ton qui informe plutôt qu'il n'ordonne — « l'offre se termine dimanche » active davantage que « ne ratez surtout pas ça », qui commence déjà à ressembler à une pression sociale plutôt qu'à une information.
• Un espace de respiration dans la page — une section preuve sociale ou FAQ entre l'argumentaire et le CTA final laisse le visiteur redescendre légèrement avant de décider, plutôt que de le maintenir en tension du hero jusqu'au bouton.

Les 10 heuristiques d’utilisabilité de Nielsen appliquées à une landing page

La plupart des guides de conversion parlent de copywriting, de preuve sociale ou de tests A/B. Il existe un référentiel plus ancien et plus général, conçu pour repérer les problèmes d’une interface avant même de la tester sur de vrais visiteurs : les 10 heuristiques d’utilisabilité de Jakob Nielsen.

En 1990, Jakob Nielsen et Rolf Molich publient Heuristic evaluation of user interfaces, une étude menée lors de la conférence ACM CHI qui montre qu’un petit groupe d’évaluateurs, en confrontant une interface à une liste de principes ergonomiques, détecte la majorité des problèmes d’usage sans avoir besoin de recruter de vrais utilisateurs. L’étude est frappante sur un point précis : un seul évaluateur ne repère que 20 à 51 % des problèmes, mais un groupe de trois à cinq évaluateurs indépendants en couvre l’essentiel — d’où l’intérêt de faire lire sa page par plusieurs regards plutôt qu’un seul. Nielsen affine la méthode en 1994 et fixe la liste à dix principes, devenue depuis un standard des audits UX, bien au-delà des logiciels pour lesquels elle avait été pensée.

Les 10 heuristiques traduites pour une landing page

Les principes de la Gestalt sur une landing page : le visiteur perçoit des groupes, pas des éléments

Placez un prix à quarante pixels de son offre et à dix pixels du bloc suivant : le visiteur rattachera ce prix au bloc suivant, quoi que dise le texte. Ce n’est pas de l’inattention, c’est de la perception normale. Les principes de la Gestalt décrivent comment l’œil regroupe les éléments d’une page avant même de les lire — et comment un espacement, un cadre ou un contraste mal choisis peuvent réécrire votre message sans changer un mot.

L’idée fondatrice de la Gestalt : la perception n’additionne pas des points isolés, elle impose d’emblée une organisation, et cette organisation précède la reconnaissance du contenu. Max Wertheimer la formalise dans « Untersuchungen zur Lehre von der Gestalt II », publié en 1923 dans la revue Psychologische Forschung et traduit plus tard sous le titre « Laws of organization in perceptual forms » : à partir de simples rangées de points et de traits, il montre que le regroupement perçu obéit à des facteurs prévisibles — la distance, la ressemblance, la fermeture, la bonne continuation. Un siècle plus tard, Johan Wagemans et ses coauteurs (2012) consacrent à cet héritage une revue en deux parties dans Psychological Bulletin : les principes de regroupement et l’organisation figure/fond y sont décrits comme solidement établis et largement confirmés par la vision expérimentale moderne, même si leur formulation d’origine reste qualitative. Pour une landing page, la conséquence est directe : votre page est d’abord perçue comme un ensemble de blocs, et seulement ensuite comme un texte. C’est ce qui rend le test des 5 secondes si révélateur — en cinq secondes, le visiteur n’a perçu que la structure.

Diagnostic : voir les groupes réellement perçus

• Plisser les yeux devant la page à cinquante centimètres, jusqu’à ne plus distinguer le texte : il ne reste que des masses grises. Ce sont les groupes que le visiteur perçoit réellement, avant toute lecture.
• Flouter une capture d’écran avec un flou gaussien de 6 à 10 pixels donne le même résultat, en version partageable et comparable.
• Compter les masses obtenues : au-dessus de sept ou huit dans une même section, la page n’a pas de structure perceptible et il faut regrouper avant d’ajouter.
• Vérifier les appariements : chaque prix est-il dans la même masse que son offre, chaque label que son champ, chaque bouton que la promesse qui le justifie ?
• Identifier la figure : sur l’image floutée, l’élément le plus saillant doit être le CTA. Si c’est une illustration ou un bandeau, la hiérarchie est inversée.
• Confirmer avec un visiteur par un test des 5 secondes : ce qu’il restitue de mémoire correspond presque toujours aux groupes visuels, jamais au texte.

Le paradoxe de l’utilisateur actif : pourquoi vos visiteurs ne liront jamais votre mode d’emploi

Vous avez écrit une section « Comment ça marche » claire, un tutoriel avant le premier clic, une FAQ complète juste au-dessus du CTA. Presque personne ne les lit. Ce n’est pas un défaut d’attention du visiteur : c’est un comportement documenté depuis 1987 sous le nom de paradoxe de l’utilisateur actif, et il change la façon d’écrire une landing page.

La même équipe a testé la conséquence pratique de ce constat. Dans une étude publiée en 1987 dans la revue Human-Computer Interaction, « The Minimal Manual », Carroll et ses coauteurs (Smith-Kerker, Ford et Mazur-Rimetz) comparent des utilisateurs novices apprenant un logiciel de traitement de texte soit avec un manuel exhaustif classique, soit avec un support réduit au strict nécessaire pour démarrer, organisé autour de tâches réelles plutôt que de fonctionnalités. Les utilisateurs équipés du manuel minimal complètent leurs tâches plus vite, réussissent davantage, et obtiennent de meilleurs résultats à un test de compréhension a posteriori — pendant qu’une partie notable du temps du groupe « manuel complet » se perd à récupérer d’erreurs que la version courte évitait simplement en ne proposant pas le chemin qui y menait. La leçon ne porte pas sur la longueur en tant que telle : elle porte sur le fait qu’un support organisé autour de ce que l’utilisateur essaie de faire fonctionne mieux qu’un support organisé autour de tout ce que le système sait faire — exactement la différence entre une landing page structurée autour du résultat promis et une landing page structurée autour de la liste des fonctionnalités.

Les pièges classiques d’une landing page qui suppose qu’on va la lire

• Une section « Comment ça marche » avant le CTA principal — utile en complément, coûteuse en obstacle : elle doit informer un visiteur qui hésite déjà, pas conditionner l’accès au bouton d’action.
• Un tutoriel ou une visite guidée imposée au premier chargement, avant que le visiteur ait pu voir le produit ou l’offre par lui-même — le paradoxe de production prédit exactement l’abandon à cet endroit.
• Des instructions de format cachées en petit texte sous un champ de formulaire (« utilisez le format JJ/MM/AAAA ») au lieu d’un champ qui accepte tous les formats raisonnables ou d’un exemple visible dans le placeholder lui-même.
• Une FAQ qui répond à des questions posées trop tard — si trois questions de la FAQ reviennent sur ce qu’est l’offre elle-même, c’est le signe que le haut de page ne s’explique pas seul et qu’aucun visiteur ne descend jusqu’à la FAQ pour combler ce manque.
• Un bouton dont le libellé ne dit pas ce qu’il produit — « Continuer », « Suivant » ou « Envoyer » exigent d’avoir lu ce qui précède pour être compris, alors qu’un intitulé qui décrit le résultat (« Recevoir mon devis », « Voir la démo ») se comprend sans contexte, comme détaillé dans notre guide des CTA qui convertissent.

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

Avant même de lire un mot, l'œil d'un visiteur a déjà parcouru une trajectoire sur votre page. Deux schémas dominent la recherche en eye tracking — le Z et le F — et ils n'appellent pas la même mise en page.

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 (voir l'étude). 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 (voir l'étude). 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 Z : celui à viser sur une landing page

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.

Ligne de flottaison : que placer au-dessus du pli sur une landing page ?

La « ligne de flottaison » — la limite basse de ce qui s'affiche sans scroller — n'a jamais cessé d'exister, même à l'ère du scroll infini. Ce qui se trouve au-dessus est vu par tout le monde ; ce qui se trouve dessous, seulement par ceux que le premier écran a convaincus de continuer.

La recherche par oculométrie confirme la concentration de l'attention en haut de page. Une étude de Djamasbi, Siegel et Tullis publiée en 2010 dans l'International Journal of Human-Computer Studies a suivi le regard de participants sur des pages web réelles : les fixations se concentrent massivement sur la zone visible sans scroll, et les pages jugées les plus attrayantes combinaient une image principale forte, peu de texte et une hiérarchie visuelle claire dans cette zone (voir l'étude). Cela ne veut pas dire que personne ne scrolle — la plupart des visiteurs scrollent — mais que la décision de scroller se prend au-dessus du pli, en quelques secondes, sur la foi de ce premier écran. C'est le même mécanisme de tri initial que décrit notre article sur le temps passé sur une landing page.

Les 5 éléments du premier écran d'une landing page

1. Le titre : la promesse principale, formulée du point de vue du visiteur. C'est l'élément le plus lu de toute la page — notre méthode complète est dans l'article sur les titres.
2. Le sous-titre : une ligne qui précise pour qui et comment. Il transforme une promesse séduisante en promesse crédible.
3. Le CTA principal : visible sans scroller, même si le visiteur ne cliquera souvent qu'après avoir lu la suite. Sa présence annonce l'action attendue — les formulations qui marchent sont dans nos exemples de CTA.
4. Un élément de preuve : une note, un nombre de clients, un logo de média — une seule ligne de preuve sociale suffit à ce stade.
5. Un visuel qui montre l'offre : capture du produit, photo du résultat, aperçu du document — pas une illustration décorative qui pourrait accompagner n'importe quelle offre.

Charge cognitive : pourquoi une landing page qui fait réfléchir fait fuir

Votre visiteur dispose d’un budget mental limité pour comprendre votre page. Chaque option, chaque animation, chaque terme de jargon en consomme une part — et ce qui est dépensé à comprendre n’est plus disponible pour décider. Voici comment repérer et supprimer cette taxe invisible.

La théorie de la charge cognitive a été formalisée par le psychologue John Sweller dans un article fondateur publié en 1988 dans la revue Cognitive Science (Sweller, 1988). Son constat, issu de l’étude de la résolution de problèmes : la mémoire de travail humaine est étroitement limitée, et la manière dont une information est présentée détermine l’effort mental nécessaire pour la traiter — le même contenu peut être facile ou épuisant selon sa forme. La théorie distingue trois types de charge, qu’on peut traduire simplement pour une landing page :

Les trois types de charge cognitive, sans jargon

• La charge intrinsèque : la complexité réelle de votre offre. Un logiciel de paie B2B est objectivement plus complexe à expliquer qu’un ebook à 19 €. Cette charge-là ne se supprime pas ; elle se découpe et se dose.
• La charge extrinsèque : la complexité inutile ajoutée par le design et la rédaction — options concurrentes, mise en page confuse, jargon, décorations. C’est du gaspillage pur, et c’est elle qu’on attaque dans cet article.
• La charge utile (dite « germane ») : l’effort qui aide réellement à décider — comparer votre offre à sa situation, se projeter, lever une objection. C’est le seul effort que vous voulez que le visiteur fournisse.

Largeur du texte sur une landing page : quelle longueur de ligne pour la lisibilité ?

Un bloc de texte centré qui s'étire sur toute la largeur d'un écran 27 pouces, et l'œil du visiteur peine à retrouver le début de la ligne suivante. La règle des « 50 à 75 caractères par ligne » circule dans tous les guides de design depuis des décennies — mais les études qui l'ont vraiment testée sur des pages web donnent un résultat plus nuancé que la règle elle-même.

Une seconde étude, celle de Shaikh et Chaparro (2005, Human Factors and Ergonomics Society), va à l'encontre de l'intuition la plus répandue : en testant des lignes de 35, 55, 75 et 95 caractères sur des articles d'actualité en ligne, ce sont les lignes les plus longues (95 caractères) qui ont produit la vitesse de lecture la plus rapide. La satisfaction déclarée, elle, n'a pas suivi la vitesse : les participants ont exprimé une préférence marquée pour les deux longueurs extrêmes — très courte ou très longue — plutôt que pour le compromis médian que recommandent la plupart des guides de style.

Ce qu'on met en pratique, section par section

• Titre du hero — laisser respirer sur toute la largeur du conteneur (souvent 700-900 px) ; à cette taille de police, une ligne de 40-50 caractères occupe déjà tout l'espace visuel sans poser de problème de lecture.
• Sous-titre et paragraphe d'intro — contraindre à environ 60-70 caractères par ligne (souvent une classe max-w-xl à max-w-2xl en Tailwind, ou max-w-prose qui vise 65 ch) : c'est la zone où le confort perçu, documenté par Ling et van Schaik, joue le plus.
• Blocs d'arguments et de bénéfices — même logique que le paragraphe d'intro ; éviter qu'un bloc de trois phrases s'étale sur toute la largeur d'une colonne de 800 px si le texte n'est pas structuré en liste.
• Listes à puces — moins sensibles à la largeur : chaque item est court et se scanne indépendamment plutôt qu'en continu, la contrainte peut être plus souple.
• FAQ — les réponses gagnent à rester dans la même fourchette que le paragraphe d'intro ; voir notre article sur la FAQ d'une landing page pour la structure de section complète.

Navigation au clavier sur une landing page : focus visible, ordre de tabulation et pièges à éviter

Appuyer sur Tab et regarder où le focus se pose est le test d'accessibilité le plus rapide qu'on puisse faire sur une landing page — et pourtant l'un des plus rarement effectués. Focus invisible, ordre de tabulation incohérent, modale qui laisse le focus s'échapper : trois problèmes concrets, leurs correctifs en Next.js, et pourquoi ils concernent bien plus que les seuls utilisateurs de lecteur d'écran.

Shari Trewin et Helen Pain, dans « Keyboard and mouse errors due to motor disabilities », publiée en 1999 dans l'International Journal of Human-Computer Studies (voir l'étude), documentent les erreurs de frappe et de ciblage que rencontrent les utilisateurs ayant un handicap moteur lorsqu'une interface suppose un contrôle précis de la souris — un constat qui justifie directement pourquoi le clavier doit rester une voie de navigation complète, et non un simple repli technique. Jonathan Lazar, Aaron Allen, Jason Kleinman et Chris Malarkey, dans « What Frustrates Screen Reader Users on the Web: A Study of 100 Blind Users », publiée en 2007 dans l'International Journal of Human-Computer Interaction, montrent que les formulaires mal étiquetés et le comportement imprévisible du focus figurent parmi les principales sources de frustration relevées par les 100 utilisateurs aveugles de l'étude — or un lecteur d'écran se pilote quasi entièrement au clavier, ce qui relie directement ce constat à l'état du focus sur une page.

Erreurs fréquentes à corriger en premier

• outline: none; sans remplacement — supprime le focus visible pour tout le monde plutôt que de le styliser ; :focus-visible permet de personnaliser l'indicateur sans jamais le retirer complètement.
• Modale sans piège de focus — la tabulation continue derrière l'overlay, ce qui rend la page inutilisable au clavier tant que la popup est ouverte.
• Focus qui ne revient pas après fermeture — fermer une modale sans replacer le focus sur l'élément déclencheur oblige à retrouver sa position en retabulant depuis le début de la page.
• Bandeau ou CTA sticky mobile qui s'intercale — un élément fixé en bas d'écran ajouté après coup dans le DOM peut se retrouver hors de l'ordre logique de tabulation par rapport au contenu qu'il recouvre visuellement.
• Champ anti-spam (honeypot) focusable — un champ invisible destiné aux robots doit être retiré de l'ordre de tabulation (tabindex="-1" et aria-hidden="true"), sinon un utilisateur clavier tombe dessus sans comprendre à quoi il correspond.

Les templates LanderKit appliquent ces principes par construction : un objectif par page, un appel à l'action dominant, une lecture en une colonne sur mobile.