Loi 22/30 · École de la Gestalt · 1923
Loi de similarité
Les éléments qui se ressemblent sont perçus comme liés : la forme et la couleur créent des familles.
Deux éléments qui se ressemblent sont perçus comme parents, quoi qu'en dise leur position. Cette loi de 1923 fonde la grammaire visuelle de toutes les interfaces — le lien bleu, le bouton primaire, le libellé « sponsorisé ». Et elle explique pourquoi la cohérence d'une marque n'est pas un caprice de directeur artistique mais une infrastructure cognitive.
01 · L'origine
Berlin, 1923. Dans ses « Untersuchungen zur Lehre von der Gestalt », Max Wertheimer aligne des points équidistants et fait varier une seule propriété — la couleur, la forme. Aussitôt, l'œil fabrique des colonnes, des rangées, des familles : les éléments qui partagent un trait visuel sont perçus comme appartenant ensemble, sans qu'aucune ligne ne les relie. Le « facteur de similarité » rejoint la proximité et la clôture dans le corpus gestaltiste, que Wolfgang Köhler (1929) puis Kurt Koffka (1935) diffuseront dans le monde anglo-saxon, résumé par la formule de Koffka : le tout est autre que la somme des parties.
Le web transforme cette loi de laboratoire en convention planétaire. Dès les premiers navigateurs, le lien hypertexte se signale par une couleur et un soulignement uniformes — la similarité comme contrat : tout ce qui est bleu se clique. Les design systems industrialisent ensuite le principe : chez Google, IBM ou Airbnb, chaque composant partage tokens de couleur, rayons d'angle et typographies précisément pour que la ressemblance signale la fonction. En 2020, Aurora Harley formalise la doctrine pour le Nielsen Norman Group : ce qui se ressemble doit se comporter pareil — et réciproquement.
02 · Ce que dit la recherche
Les planches de Wertheimer établissent le protocole : dans une grille de points où la proximité est neutralisée (tous équidistants), la seule variation d'une propriété suffit à créer des groupes perçus. La littérature appliquée, synthétisée par le NN/g, établit une hiérarchie des attributs : la couleur est le trait le plus dominant — elle groupe des éléments même de types différents —, devant la forme, puis la taille ; s'y ajoutent l'orientation, le mouvement et le traitement typographique. Un seul trait partagé suffit : les objets n'ont pas besoin d'être identiques, seulement de se ressembler sur une dimension visible.
Les nuances sont tout aussi documentées. La similarité peut être supplantée par des principes plus forts — la région commune et la connexité l'emportent en cas de conflit. Et sa violation a un coût mesuré en utilisabilité : un texte coloré qui n'est pas un lien, un bouton qui n'en est pas un — le NN/g recommande de réserver strictement la couleur des liens aux éléments interactifs. Inversement, une similarité excessive crée des regroupements involontaires : des icônes trop proches visuellement pour des catégories différentes brouillent la navigation autant que l'incohérence.
« Les éléments qui partagent une caractéristique visuelle sont perçus comme plus liés que ceux qui n'en partagent aucune. »
03 · Trois exemples concrets
a.
Le lien bleu, plus vieille convention du web
Depuis les navigateurs des années 1990, le lien hypertexte est bleu et souligné — et Google a conservé le bleu pour ses résultats de recherche jusqu'à aujourd'hui. Cette uniformité est la loi de similarité érigée en contrat de lecture : l'internaute n'apprend qu'une fois ce qui se clique. Le NN/g en tire une règle stricte : ne jamais utiliser la couleur des liens pour du texte inerte, sous peine de fabriquer de fausses promesses de clic.
b.
Material Design et la hiérarchie des boutons
Dans les design systems modernes — Material de Google en tête —, tous les boutons primaires partagent la même couleur pleine, les secondaires le même contour, les tertiaires le même texte nu. Cette ressemblance codifiée fait plus que décorer : elle annonce le niveau d'engagement de chaque action avant toute lecture. Deux boutons de même couleur sont perçus comme d'importance égale — c'est précisément pourquoi un écran ne doit compter qu'un seul bouton primaire.
c.
Publicité native : la similarité comme camouflage
Le marketing connaît aussi l'usage offensif de la loi : la publicité « native » adopte la typographie, la maquette et le ton des contenus éditoriaux pour bénéficier de leur crédit. L'efficacité du procédé — et ses dérives — ont conduit les régulateurs, de la FTC américaine à l'ARPP française, à imposer des mentions explicites (« sponsorisé », « contenu partenaire »). Quand la ressemblance suffit à transférer la confiance, la frontière entre information et réclame devient une question de contraste typographique.
04 · Appliquée sur ce site
Tous les liens du site portent le même soulignement à filet — la forme annonce la fonction, partout.
05 · À l'ère de l'IA
L'IA générative met la similarité sous tension dans les deux sens. Côté production, les design systems outillés de génération automatique (composants produits par Figma AI ou v0 de Vercel à partir de tokens) permettent enfin une cohérence visuelle totale entre des centaines de déclinaisons — bannières, landing pages, emails — là où les déclinaisons manuelles dérivaient. Pour une marque, la ressemblance systématique de ses interfaces et de ses contenus devient un signal d'identité que les utilisateurs, comme les modèles qui indexent le web, apprennent à reconnaître.
Le risque est le camouflage à l'échelle : des contenus générés par IA qui miment la facture éditoriale — mêmes structures, même ton — envahissent les résultats de recherche et les fils sociaux, réactivant le débat de la publicité native avec une puissance industrielle. La parade est la même qu'en 1923 : la distinction visuelle. Les plateformes qui étiquettent explicitement les contenus synthétiques (mentions « généré par IA », filigranes) réappliquent la loi de similarité à l'envers — rompre la ressemblance pour rétablir la vigilance.
06 · À retenir
- Tout ce qui se ressemble doit se comporter pareil — et tout ce qui se comporte pareil doit se ressembler.
- La couleur groupe plus fort que la forme, qui groupe plus fort que la taille : hiérarchiser en conséquence.
- Réserver la couleur des liens et des actions aux seuls éléments interactifs.
- Rompre délibérément la similarité pour faire saillir l'action principale — une fois par écran.