En 1923, dans le Berlin de l’entre-deux-guerres, trois psychologues — Max Wertheimer, Wolfgang Köhler et Kurt Koffka — publient une série d’articles qui vont changer la manière dont nous comprenons la perception visuelle. Ils démontrent que le cerveau humain ne traite jamais une image comme une collection de pixels isolés, mais comme une totalité structurée. Un siècle plus tard, ces neuf principes pilotent silencieusement chaque interface qui fonctionne, d’Apple à Stripe en passant par Notion. Voici ce qu’ils disent, et pourquoi vos visiteurs les ressentent sans jamais les voir.
Le cerveau organise avant même que vous ne regardiez
Lorsqu’un visiteur arrive sur votre page d’accueil, son cortex visuel commence à grouper les éléments avant que sa conscience n’ait formulé une seule pensée. C’est un travail automatique, instantané, antérieur au jugement esthétique. Selon une étude conduite par Gitte Lindgaard à l’Université Carleton, le premier jugement esthétique d’un site se forme en 50 millisecondes — soit avant même que le visiteur n’ait eu le temps de lire un seul mot.
Ce premier jugement repose presque entièrement sur la manière dont les éléments sont organisés dans l’espace. Et cette organisation suit neuf principes universels, identifiés voici un siècle par l’École de Berlin, et toujours valides aujourd’hui.
1. Proximité — ce qui est proche est perçu comme lié
Le principe le plus simple et le plus puissant. Deux éléments rapprochés sont automatiquement perçus comme appartenant à la même famille, indépendamment de leur ressemblance graphique. Un titre collé à son paragraphe forme un bloc. Un titre éloigné de son paragraphe forme deux blocs.
Concrètement, dans un formulaire, un label collé à 4 pixels de son champ fait corps avec lui. Le même label éloigné de 24 pixels semble flotter. Les analyses du Baymard Institute montrent qu’une mauvaise gestion de la proximité dans les formulaires génère jusqu’à 26% d’erreurs supplémentaires.
Apple applique ce principe à l’extrême : sur la page produit de l’iPhone, le titre, le prix et le bouton d’achat forment un cluster compact, isolé du reste par une marge généreuse. Notion fait exactement la même chose dans son interface : les blocs apparentés respirent à l’intérieur, mais sont nettement séparés des blocs voisins.
C’est la même logique qu’une table de famille au restaurant. Quatre chaises rapprochées, c’est un dîner. Les mêmes chaises dispersées dans la salle, c’est quatre solitudes.
2. Similarité — ce qui se ressemble est perçu comme groupé
Wertheimer a démontré que des éléments partageant une caractéristique visuelle (couleur, forme, taille, orientation) sont automatiquement perçus comme appartenant à une même catégorie, même s’ils sont éloignés dans l’espace.
C’est ce qui permet de scanner une page de résultats sans réfléchir : les liens sont bleus et soulignés, les boutons sont colorés et rectangulaires, les titres sont plus gros et en gras. Le cerveau saute de catégorie en catégorie sans avoir à lire.
Stripe l’applique magistralement dans sa documentation : tous les éléments interactifs partagent un même bleu signature, tandis que le contenu purement informatif reste en noir et gris. Les développeurs qui scannent la doc savent en une fraction de seconde où ils peuvent cliquer.
Dans une vitrine de pâtisserie, les éclairs sont alignés ensemble, les tartes ensemble, les viennoiseries ensemble. Personne n’a besoin d’étiquette pour comprendre l’organisation.
3. Continuité — l’œil suit le flux
Le cerveau préfère les lignes douces aux ruptures brusques. Lorsqu’une série d’éléments est alignée le long d’une trajectoire visuelle, l’œil les parcourt naturellement dans cet ordre.
C’est ce qui explique le succès des grilles. Une grille à 12 colonnes, ce n’est pas un caprice de développeur : c’est un dispositif qui crée des lignes invisibles le long desquelles l’œil voyage sans effort. Les études de Nielsen Norman Group en eye-tracking montrent que les utilisateurs lisent en suivant les alignements, et qu’un élément hors-grille casse cette lecture et augmente le temps de traitement de 30%.
Linear, l’outil de gestion de produits qui a conquis les startups de la Silicon Valley, pousse ce principe à son extrême : chaque ligne, chaque marge, chaque ombre suit une grille rigoureuse. Le résultat est une interface où le regard ne s’accroche jamais.
Pensez à un parquet à lattes droites. Le pied avance naturellement le long des planches. Un parquet brisé désordonné, et le pied hésite.
4. Fermeture — le cerveau complète les formes manquantes
L’expérience la plus célèbre de Köhler montre que le cerveau perçoit une forme complète même quand des morceaux manquent. Trois angles disposés correctement forment un triangle, même si aucun côté n’est tracé.
C’est ce principe qui fait fonctionner les logos minimalistes. Le panda de WWF n’a pas de contour fermé — votre cerveau le complète. Le paon de NBC, fait de plumes colorées sans corps tracé, est perçu comme un oiseau entier. Carrefour, Toblerone : tous exploitent la fermeture pour graver une marque mémorable en quelques traits.
En interface, on l’utilise pour les icônes minimales. Une icône de loupe schématique suffit, même si elle n’est pas dessinée en détail. Le cerveau remplit le vide.
C’est la silhouette d’un ami aperçu de loin. Vous ne voyez ni ses yeux ni sa bouche, et pourtant vous le reconnaissez sans hésiter.
5. Figure/fond — toute image se découpe en avant-plan et arrière-plan
Le psychologue danois Edgar Rubin a popularisé en 1915 le célèbre « vase de Rubin », cette image ambiguë où l’œil oscille entre voir un vase blanc ou deux visages noirs. Cette expérience démontre que le cerveau distingue toujours une « figure » (l’objet, ce qui est important) et un « fond » (le reste, ce qui est secondaire).
En webdesign, ce principe gouverne la lisibilité. Un texte noir sur fond blanc fonctionne. Un texte gris clair sur fond gris légèrement plus clair épuise les yeux en quelques secondes. Le ratio de contraste recommandé par les WCAG 2.1 est de 4,5:1 minimum pour le texte courant, 3:1 pour les gros titres.
Stripe et Linear maintiennent un fond presque blanc immaculé pour donner toute leur force aux éléments interactifs. À l’inverse, certains sites artistiques jouent volontairement sur l’ambiguïté figure-fond pour créer une expérience contemplative — c’est un choix éditorial parfaitement défendable, à condition qu’il soit assumé.
Au théâtre, le projecteur isole le comédien du décor sombre. Sans cette séparation, plus de spectacle.
6. Symétrie et ordre — la stabilité rassure
Le cerveau humain préfère les compositions symétriques aux compositions chaotiques. Une étude de l’Université de Liverpool publiée dans Acta Psychologica a montré que les sujets jugent les visages symétriques 15 à 20% plus attractifs que les visages asymétriques, et cette préférence se transfère intégralement au design d’interface.
Cela ne signifie pas que tout doit être miroir parfait. Mais cela signifie qu’une page d’accueil doit présenter un équilibre visuel global : la masse à gauche compense la masse à droite, le haut compense le bas. C’est ce qu’on appelle l’équilibre asymétrique, et c’est la version mature de la symétrie pure.
Le site d’Aesop, qui mise depuis quinze ans sur une sobriété quasi monastique, n’est jamais strictement symétrique — mais chaque page respire un équilibre subtil entre images, blancs et typographie. C’est un sentiment de calme, et ce sentiment se traduit en confiance.
C’est la différence entre une pièce bien rangée où l’on a envie de s’asseoir, et une pièce en désordre où l’on cherche d’abord à quoi se raccrocher.
7. Destin commun — ce qui bouge ensemble est perçu ensemble
Lorsque plusieurs éléments se déplacent ou changent simultanément dans la même direction, ils sont perçus comme un groupe, même s’ils étaient visuellement disparates au départ.
Sur le web, ce principe est devenu critique avec l’animation. Un menu déroulant dont tous les items apparaissent d’un même mouvement est instantanément compris comme un ensemble. Un menu où chaque item apparaît dans un ordre et une direction différente crée du chaos cognitif. Selon les recommandations de la Interaction Design Foundation, les transitions coordonnées augmentent la perception de qualité d’une interface de manière mesurable.
Apple a fait du destin commun une signature : sur macOS, lorsqu’on minimise une fenêtre, elle ne disparaît pas brusquement, elle « voyage » en une animation fluide vers le Dock. L’utilisateur comprend instantanément où elle est passée.
Pensez à une volée d’oiseaux. Cinquante individus, mais un seul mouvement. Le cerveau perçoit un troupeau, pas des oiseaux séparés.
8. Région commune — partager un cadre, c’est partager une identité
Lorsque plusieurs éléments sont enfermés dans un même cadre — une bordure, un fond coloré, une carte — le cerveau les perçoit comme appartenant à la même catégorie, même s’ils sont par ailleurs très différents.
C’est tout le principe de la « carte » en webdesign moderne. Une grille d’articles de blog, chaque vignette dans son rectangle blanc avec son ombre légère : le lecteur comprend immédiatement qu’il a sous les yeux une collection homogène. Un dashboard SaaS qui regroupe des chiffres dans des cartes distinctes laisse le cerveau scanner sans confusion.
Notion utilise massivement les « blocs » pour isoler chaque type de contenu. C’est exactement le principe de région commune appliqué à un éditeur de documents : chaque bloc est un univers fermé, identifiable d’un coup d’œil.
Comme dans un musée, où chaque tableau est encadré séparément. Le cadre dit « ceci est une œuvre, distincte de la suivante », même quand toutes les œuvres traitent du même sujet.
9. Connectedness — un trait suffit à lier deux éléments
Identifié plus tardivement par Stephen Palmer en 1992, le principe de connectedness établit que des éléments reliés par une ligne, un trait ou un connecteur visuel sont perçus comme appartenant ensemble — et ce, encore plus fortement que par la proximité ou la similarité.
C’est ce qui rend les organigrammes lisibles. Des cases reliées par des lignes hiérarchiques sont comprises instantanément, même quand l’organisation est complexe. C’est aussi ce qui structure les schémas de design system, les diagrammes de flux d’utilisateur, ou les onboardings en plusieurs étapes reliées par une barre de progression.
Linear l’utilise pour ses vues de roadmap : les tâches reliées par des dépendances sont littéralement connectées par des traits, ce qui rend la lecture intuitive même sur de grands projets.
C’est la logique d’une chaîne de wagons. Les wagons sont distincts, mais leurs attelages les transforment en un seul train.
Pourquoi ces principes restent vrais cent ans après Berlin
L’École de Gestalt a été développée dans les années 1920, à une époque où l’écran d’ordinateur n’existait pas encore. Et pourtant, chaque interface qui réussit aujourd’hui les applique, consciemment ou pas. La raison est simple : ces principes ne décrivent pas une mode esthétique, ils décrivent le fonctionnement biologique du cerveau visuel humain. Ce câblage neurologique n’a pas changé depuis Wertheimer. Il ne changera pas avant que l’évolution biologique en décide autrement.
Les designers qui maîtrisent ces neuf principes ne créent pas des interfaces « à la mode ». Ils créent des interfaces que le cerveau humain ne combat pas. Et c’est précisément cette absence de friction qui rend les sites mémorables.
Notre pratique chez NEWP
Lors de la phase de wireframing d’une refonte, nous testons systématiquement chaque écran contre cette grille de neuf principes. Proximité respectée ? Similarité cohérente ? Figure/fond suffisamment contrasté ? L’exercice prend une heure par page, et il évite des semaines de retouches en aval. Ce n’est pas une checklist administrative — c’est une manière de vérifier que ce que nous concevons sera lu par le cerveau, et pas seulement par les yeux.
Pour creuser ces sujets, parcourez la page de notre agence webdesign, ou explorez les grands styles graphiques contemporains dans notre guide complet. Si vous voulez comprendre comment ces principes visuels s’articulent avec les lois cognitives plus larges, lisez nos articles dédiés aux 12 lois UX/UI essentielles et au duo Hick + Fitts pour la conversion.
·
