Loi 21/30 · Stephen Palmer · 1992

Région commune

Des éléments enclos dans une même zone sont perçus comme un groupe — plus fortement encore que par la proximité.

Tracez un cadre autour de n'importe quoi, et l'œil en fera un tout. La « région commune », démontrée par Stephen Palmer en 1992, est le fondement scientifique du composant le plus banal et le plus puissant du design contemporain : la carte. Pour les marques, c'est la grammaire même de la page produit, de la newsletter et, désormais, des réponses générées par IA.

01 · L'origine

Le canon de la Gestalt semblait clos depuis les années 1920 quand Stephen Palmer, professeur de psychologie à Berkeley, y ajoute un chapitre. En 1992, il publie dans Cognitive Psychology (vol. 24, n° 3, p. 436-447) « Common region: a new principle of perceptual grouping ». Sa démonstration : il suffit d'enclore des éléments dans une même zone — un contour, un fond, une frontière — pour qu'ils deviennent un groupe perceptif, même lorsque la proximité ou la similarité suggèrent d'autres alliances. Wertheimer avait cartographié le groupement ; Palmer venait d'en isoler le levier le plus simple : l'enclos.

Le principe met vingt ans à devenir un standard industriel. Les boîtes de dialogue de Windows en usaient déjà empiriquement, avec leurs options rangées derrière des bordures grises. Mais c'est la « carte » — popularisée par Material Design de Google en 2014, généralisée par Pinterest, Trello ou Airbnb — qui en fait la brique universelle des interfaces. En 2020, Aurora Harley canonise la loi pour le Nielsen Norman Group : le conteneur est devenu si omniprésent que la recommandation s'est inversée, et qu'on apprend désormais aux designers à ne pas tout encadrer.

02 · Ce que dit la recherche

Dans ses planches expérimentales, Palmer présente des rangées d'éléments équidistants, puis enclôt certaines paires dans des ovales ou des rectangles. Le résultat est net : les sujets groupent selon les régions, y compris quand celles-ci contredisent la proximité — deux points éloignés dans un même cadre paraissent plus liés que deux points adjacents séparés par une frontière. Le Nielsen Norman Group en tire la définition de référence : les éléments situés à l'intérieur d'une frontière sont perçus comme un groupe et supposés partager une caractéristique ou une fonction commune. L'enclos ne décore pas : il affirme une parenté.

Les travaux ultérieurs de Palmer avec Irvin Rock (1994) ont confirmé la robustesse du groupement par enceinte, tout en le distinguant de la connexité. La littérature appliquée documente aussi ses effets pervers : le NN/g décrit les « faux planchers » — ces sections si nettement délimitées que l'utilisateur croit la page terminée et cesse de défiler — et met en garde contre la surenchère de cadres, qui fragmente la lecture. La recommandation actuelle tient en une nuance : quand l'espacement suffit à structurer, préférer le blanc ; réserver le conteneur aux regroupements que la distance seule ne sait pas dire.

« Les éléments situés à l'intérieur d'une frontière sont perçus comme un groupe et supposés partager une caractéristique ou une fonction commune. »

Aurora Harley, Nielsen Norman Group (2020)

03 · Trois exemples concrets

  • a.

    La boîte de dialogue Imprimer de Windows

    C'est l'exemple canonique repris par le Nielsen Norman Group : la fenêtre d'impression de Microsoft Windows range ses dizaines d'options en trois groupes bordés — imprimante, étendue de pages, nombre de copies. Sans ces cadres, un inventaire indigeste ; avec eux, trois questions lisibles en un regard. Des décennies avant que la « carte » ne devienne un composant à la mode, l'utilitaire le plus ingrat de la bureautique appliquait déjà Palmer à la lettre.

  • b.

    Slack et la couleur comme enclos

    La région commune ne passe pas que par des traits : un fond suffit. Slack, cité par le NN/g, isole sa colonne de navigation par un aplat sombre qui regroupe canaux, messages directs et notifications en une seule unité fonctionnelle, distincte de la zone de conversation claire. L'utilisateur n'a jamais besoin qu'on lui explique la structure de l'écran : la frontière chromatique la lui donne avant toute lecture.

  • c.

    Material Design et le règne de la carte

    En 2014, Google fait de la « card » un composant officiel de Material Design : une surface délimitée, légèrement surélevée, contenant image, titre, texte et actions liés à un même objet. Le NN/g documente le cas de l'application Food Network, dont la refonte en cartes a clarifié des listes de recettes auparavant ambiguës. Dix ans plus tard, du e-commerce aux dashboards, la carte est devenue l'unité de compte des interfaces — la loi de Palmer industrialisée.

04 · Appliquée sur ce site

Chaque loi de cette page vit dans sa carte : le filet qui l'entoure suffit à dire « ceci va ensemble ».

05 · À l'ère de l'IA

Les moteurs de réponse — Perplexity, Google et ses AI Overviews, les chatbots de marque — ne livrent pas des pages mais des blocs : cartes de sources, encarts produits, modules de synthèse. La région commune devient ainsi un enjeu de visibilité pour les marques : un contenu découpé en unités autonomes et clairement délimitées (fiche, tableau, question-réponse) a plus de chances d'être repris proprement dans ces conteneurs générés que la prose continue. Le travail éditorial rejoint le design : penser chaque information comme une carte potentielle, avec son titre, sa frontière et sa source.

Le risque symétrique est celui du mur de texte : les interfaces conversationnelles qui déversent des réponses générées sans conteneurs — pas de blocs, pas de sources encadrées, pas de sections — redeviennent illisibles et minent la confiance. Perplexity a bâti sa différenciation là-dessus : chaque affirmation est adossée à une carte de source visible. Pour un annonceur, la leçon est directe : dans un chatbot de marque, encadrer ce qui vient du catalogue, de la FAQ ou de la promotion en cours, c'est rendre vérifiable ce que le modèle affirme.

06 · À retenir

  • Enclore ce qui va ensemble : un fond ou une bordure regroupe plus fort que la proximité.
  • Ne pas tout encadrer — quand l'espacement suffit, le blanc est un meilleur séparateur.
  • Éviter les « faux planchers » : une section trop fermée fait croire que la page s'arrête.
  • Structurer les contenus en unités autonomes : c'est ce que reprennent les moteurs de réponse IA.

07 · Sources