Loi 06/30 · École de la Gestalt · ≈ 1920

Loi de proximité

Des éléments proches sont perçus comme un groupe. L'espacement est une information avant d'être une décoration.

L'espacement n'est pas du vide : c'est le langage le plus économe du design. Avant toute couleur, tout trait, tout cadre, la simple distance entre deux éléments dit s'ils vont ensemble — et l'œil tranche en une fraction de seconde. Pour une marque, maîtriser les blancs, c'est maîtriser ce que le public comprend sans lire.

01 · L'origine

Berlin, début des années 1920. Max Wertheimer, entouré de Kurt Koffka et Wolfgang Köhler, publie en 1923 ses « Untersuchungen zur Lehre von der Gestalt », le texte qui fonde la psychologie de la forme. Sa démonstration de la proximité tient en une planche d'une simplicité désarmante : des rangées de points équidistants ne sont qu'un champ informe ; resserrez certains intervalles, et des colonnes ou des paires surgissent, irrépressibles. Aucun trait n'a été tracé, aucune couleur ajoutée — la distance seule a créé des objets. Parmi les lois de groupement que décrit l'école berlinoise, celle-ci est la plus puissante et la moins coûteuse.

Le principe migre d'abord vers le graphisme — la typographie moderniste et le style suisse font de la grille et du blanc actif leurs instruments premiers — avant d'être codifié par l'interaction homme-machine. Dans les années 1990, Irvin Rock et Stephen Palmer prolongent la liste historique de Wertheimer avec la région commune et la connexité, précisant la hiérarchie des groupements. Côté praticiens, le Nielsen Norman Group en a fait une doctrine opérationnelle : Aurora Harley y consacre en août 2020 un article de référence, exemples de sites publics à l'appui, qui érige la proximité en règle d'or de la mise en page numérique.

02 · Ce que dit la recherche

Le protocole originel de Wertheimer — des treillis de points dont on fait varier les intervalles — reste le paradigme de base des études de groupement perceptif : la perception bascule d'une organisation à l'autre au seul jeu des distances, sans apprentissage ni consigne. La littérature applicative en tire des règles précises. Le Nielsen Norman Group formule la plus opérante : l'espacement entre groupes doit être nettement supérieur à l'espacement au sein d'un groupe. Et il chiffre l'effet de structure sur la charge perçue : un formulaire de douze champs découpé en trois groupes de quatre paraît sensiblement plus simple que le même formulaire d'un seul bloc — à contenu strictement identique.

Les travaux ultérieurs documentent aussi les limites. La proximité peut être supplantée par d'autres indices — similarité de couleur ou de forme, et surtout région commune et connexité, que Palmer et Rock ont montrées dominantes en cas de conflit. Elle se dégrade par excès : l'Interaction Design Foundation prévient que trop d'éléments trop serrés produisent « une mise en page bruyante et surchargée » où plus rien ne se groupe. Enfin, le responsive introduit un risque propre au web : un regroupement juste sur grand écran peut se disloquer au reflow mobile, faisant naître des associations que le concepteur n'a jamais voulues.

« Des éléments proches les uns des autres sont perçus comme membres d'un même groupe, partageant une fonction ou des traits communs. »

Aurora Harley, Nielsen Norman Group (2020)

03 · Trois exemples concrets

  • a.

    Le bouton « Add » égaré de l'EDD californien

    Dans son article de 2020, le Nielsen Norman Group dissèque un formulaire du site de l'Employment Development Department de Californie : le bouton « Add », qui sert à valider une ligne du tableau de saisie, est aligné avec « Next », « Save as Draft » et « Cancel » — des actions de page, sans rapport avec lui. Éloigné du tableau qu'il commande et collé à des boutons étrangers, il devient invisible pour sa fonction réelle. Un pixel de frontière mal placé, et c'est le dossier de l'allocataire qui part incomplet.

  • b.

    Kayak : éloigner pour hiérarchiser

    L'application mobile de Kayak, citée dans la même étude du NN/g, illustre l'usage volontaire de la distance : le lien « Skip », qui permet de sauter une étape, est relégué en haut à gauche de l'écran, loin des appels à l'action principaux. La proximité fonctionne ici en négatif — en écartant physiquement l'option secondaire du parcours nominal, le design la rend disponible sans la rendre concurrente. L'espacement sert la hiérarchie commerciale aussi sûrement que la taille ou la couleur des boutons.

  • c.

    Transport for London, victime du responsive

    Toujours selon le NN/g, la page « Driving » du site Transport for London groupait correctement, sur ordinateur, les liens relatifs aux zones à faibles émissions — colonnes voisines, relation évidente. Passée sur mobile, la mise en page se replie et les mêmes liens se retrouvent éloignés les uns des autres : le groupement perceptif disparaît, l'utilisateur ne voit plus que des items isolés. Leçon pour tout responsable de site : les groupements doivent être re-testés à chaque point de rupture, car un design qui se replie peut se mettre à mentir.

04 · Appliquée sur ce site

Sur ce site, la hiérarchie passe par les blancs et les filets — presque jamais par des encadrés ou des fonds de couleur.

05 · À l'ère de l'IA

À l'heure où l'on génère des pages, des emails et des créas par prompt, la proximité devient un critère de recette. Les interfaces produites par IA échouent rarement sur le contenu, souvent sur la respiration : blocs collés, libellés flottants, hiérarchies d'espacement incohérentes. Les équipes qui industrialisent la génération d'UI l'ont compris en encodant leurs échelles d'espacement dans des design tokens que le modèle est contraint de respecter — la grille devient un contrat, pas une suggestion. Même enjeu côté conversationnel : une réponse de chatbot bien groupée (titre, blocs, aération) est comprise et créditée bien mieux que le même contenu en pavé continu.

Le risque spécifique tient à la recomposition dynamique. Quand la personnalisation ou les tests générateurs de variantes réagencent les blocs d'une page ou d'un email à la volée, ils peuvent briser des groupements porteurs de sens : une mention légale qui se colle à l'offre, un prix qui dérive vers le mauvais produit, et le lecteur infère une relation qui n'existe pas. À l'inverse, une marque qui audite systématiquement l'espacement de ses variantes générées transforme cette rigueur invisible en avantage : ses messages restent lisibles là où ceux des concurrents se brouillent.

06 · À retenir

  • L'espacement entre groupes doit être nettement supérieur à l'espacement au sein d'un groupe — sinon la structure ment.
  • Chaque libellé colle à son champ, chaque légende à son image : c'est la distance qui crée le lien, pas le balisage.
  • Avant d'ajouter un trait ou un cadre, essayer le blanc : c'est le séparateur le plus économe.
  • Re-vérifier tous les groupements à chaque point de rupture responsive et sur chaque variante générée.

07 · Sources