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

Un client vous signale que « le prix n’est pas clair » sur votre page. Vous relisez : il est écrit en gros, juste après la description de l’offre. Mais entre la description et le prix, il y a quarante pixels de blanc, et entre le prix et le bloc suivant, dix. Le visiteur ne voit pas « offre + prix » : il voit une offre orpheline, puis un prix collé à autre chose. Rien n’est faux dans le texte — c’est le découpage visuel qui ment. Avant de lire un seul mot, l’œil segmente la page en unités, selon des régularités décrites il y a un siècle par la psychologie de la Gestalt. Les connaître, c’est cesser de corriger en copywriting ce qui relève de l’espacement.

Le visiteur ne lit pas des éléments isolés, il perçoit des groupes

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.

Proximité : l’espacement fait le regroupement

C’est le principe le plus puissant, le plus souvent violé et le moins cher à corriger : deux éléments proches sont perçus comme appartenant au même groupe, indépendamment de leur contenu. La règle opérationnelle est un rapport, pas une valeur absolue : l’espace à l’intérieur d’un groupe doit être nettement plus petit que l’espace qui sépare ce groupe du suivant. Un rapport de un à trois est un point de départ raisonnable — 8 px entre un titre et son sous-titre, 24 à 32 px avant la section suivante. Les fautes classiques sont toujours les mêmes : un label posé au-dessus de son champ mais visuellement plus près du champ précédent, ce qui décale la lecture du formulaire et plaide pour un label explicite et correctement rattaché ; un prix séparé de son offre par la même marge que celle qui le sépare de l’offre voisine ; un bouton isolé de la phrase de bénéfice qui le justifie. Corriger la proximité ne demande ni nouveau design ni nouveau texte : c’est une redistribution du blanc, et souvent le gain de clarté le plus rapide, parce qu’elle réduit la charge cognitive dépensée à reconstituer les associations.

Similarité : ce qui se ressemble est lu comme ayant la même fonction

Les éléments qui partagent une forme, une couleur, une taille ou une graisse sont regroupés — et surtout, ils sont interprétés comme remplissant le même rôle. Un visiteur qui a vu trois rectangles bleus arrondis cliquables déduit que le quatrième l’est aussi ; s’il s’agit d’un encadré informatif, le clic échoue et la confiance baisse d’un cran. L’erreur symétrique est plus dommageable : styliser un lien secondaire (« en savoir plus », « voir la démo ») exactement comme le bouton principal met deux actions d’importance très différente sur un pied d’égalité visuelle, et le visiteur choisit au hasard. La discipline à tenir est simple : un seul style de bouton plein par page, réservé à l’action principale ; tout le reste en lien texte ou en bouton fantôme. La même logique gouverne la typographie — deux niveaux de titre indistinguables se lisent comme un seul, ce qui aplatit la hiérarchie décrite dans l’anatomie d’une landing page qui convertit — et les couleurs, où la teinte du bouton CTA compte moins que son unicité sur la page.

Clôture, région commune et continuité : délimiter et aligner

Une frontière suffit à créer une unité, même sans mot pour l’annoncer. Stephen Palmer (1992), dans Cognitive Psychology, décrit ce facteur sous le nom de common region : des éléments situés à l’intérieur d’une même région délimitée sont perçus comme groupés, et l’effet est assez puissant pour l’emporter sur la proximité et la similarité. Sur une landing page, une carte, un fond légèrement teinté ou un simple filet suffisent donc à faire d’un titre, d’un prix, d’une liste et d’un bouton une offre unique — c’est le mécanisme qui fait fonctionner un tableau de prix à trois colonnes, où chaque contenant dit « ceci est une offre » sans avoir à l’écrire. Piège fréquent : si tous les blocs reçoivent une bordure, la délimitation ne signale plus rien. La continuité et le destin commun, eux, jouent sur le mouvement. L’œil suit spontanément une trajectoire régulière : des éléments alignés sur un même axe sont perçus comme une séquence, d’où l’efficacité d’un bord gauche unique pour titres, textes et boutons — et le coût des axes concurrents, un titre centré, un paragraphe à gauche et un bouton à droite obligeant le regard à trois recalages. Cet alignement est le support matériel des parcours décrits dans l’article sur la lecture en Z ou en F : sans axe continu, il n’y a pas de parcours, seulement des sauts. Le destin commun ajoute que ce qui bouge ensemble est perçu ensemble : une section qui apparaît d’un seul mouvement au défilement se lit comme un bloc, alors que trois animations décalées la fragmentent en trois messages — y compris au-dessus de la ligne de flottaison.

Figure et fond : le CTA doit être la figure

L’organisation figure/fond est la décision perceptive la plus fondamentale : à chaque instant, le système visuel décide ce qui est objet et ce qui est arrière-plan. Sur une landing page, un seul élément a vraiment besoin d’être la figure — le bouton d’action. Or c’est souvent l’inverse qui se produit : un CTA de la même famille chromatique que les cartes environnantes, posé sur un dégradé chargé ou entouré de six autres éléments colorés, devient partie du fond. Les corrections sont peu nombreuses : réserver la couleur la plus saturée au bouton, dégager du blanc autour, éviter tout motif dessous. C’est le raisonnement de l’effet von Restorff appliqué au CTA : un élément n’est saillant que par rapport à un contexte homogène, donc chaque élément supplémentaire mis en valeur retire de la valeur au bouton. Une page où tout est mis en avant est une page sans figure.

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.

Un mot sur le statut de ces principes, parce qu’ils sont souvent survendus. Ce sont des régularités perceptives robustes et bien documentées, mais décrites qualitativement : Wertheimer parlait de facteurs de regroupement, pas de coefficients, et la revue de Wagemans et coll. souligne que leur quantification reste un chantier ouvert. Aucune loi de la Gestalt ne prédit un gain de conversion chiffré : personne ne peut vous dire qu’un rapport d’espacement de un à trois vaut trois points de taux de clic. Ce qu’elles fournissent, c’est un diagnostic : pourquoi une page paraît confuse alors que son texte est correct, et quelles corrections peu coûteuses tenter. La validation reste empirique — test A/B quand le trafic le permet, observation d’utilisateurs sinon.

Les templates LanderKit (89 € l’unité, 229 € le pack de 10) sont construits sur une échelle d’espacement cohérente, un seul style de bouton principal par page et des cartes réservées aux blocs qui doivent former une unité — de quoi partir d’un regroupement correct plutôt que de le rattraper après coup, que ce soit sur une page produit comme e-commerce produit ou sur une page d’inscription comme webinaire & masterclass.