Les cinq décisions d'espacement qui corrigent la plupart des interfaces

Quand une interface sonne faux sans que l’on puisse dire pourquoi, la réponse tient presque toujours à l’espacement. Ni la palette, ni la typographie – les écarts. L’espacement est le système invisible qui indique à l’œil ce qui va ensemble, ce qui est séparé et ce qui compte le plus, et il échoue en silence : aucun linter par défaut ne signale un écart de 13px, aucun relecteur n’écrit « le rythme est cassé ». Après des années passées à auditer mes propres interfaces et celles des autres, presque chaque correction d’espacement que j’apporte relève de l’une des cinq mêmes décisions. {.answer-block}

TL;DR

• Adoptez une échelle, puis refusez tout ce qui en sort. 4, 8, 16, 24, 32, 48, 64. Un écart de 13px n’est pas une décision de design ; c’est de la dérive.
• L’espace entre les groupes doit dépasser l’espace à l’intérieur des groupes. Cette seule règle de Gestalt remplace la plupart des bordures et des cadres.
• Donnez à chaque conteneur une seule valeur de padding, dérivée de son rôle (composant 16, carte 24, section 32-48) plutôt que d’ajuster chaque bord à l’œil.
• Laissez les blancs porter la hiérarchie avant de sortir les séparateurs. Les bordures, c’est l’espacement qui a renoncé.
• Réglez le rythme vertical au niveau du texte – line-height 1.5 minimum, espace après les titres plus petit que l’espace avant eux – sinon rien de ce qui se trouve au-dessus ne pourra sauver la page.

1. Adoptez une échelle, puis refusez tout ce qui en sort

Le choix des valeurs constitue la plus petite moitié de cette première décision ; la plus grande consiste à admettre qu’il existe un jeu de valeurs. Le mien repose sur une base de 4px : 4, 8, 16, 24, 32, 48, 64 – sept valeurs, un token chacune. (Les surfaces denses comme les tableaux de données et les barres d’outils justifient parfois un 12 ; si c’est le cas chez vous, faites-en un token. Le crime, c’est la valeur sans nom, pas le huitième token.)

Les nombres précis importent moins que le refus. Les valeurs arbitraires (13px, 7px, 22px) brisent le rythme d’une manière que l’œil enregistre comme de la négligence sans parvenir à la nommer. La règle que je m’impose : toute valeur d’espacement provient de l’échelle ou s’accompagne d’une raison documentée. Dans les faits, les exceptions documentées survivent rarement à la relecture, car « ça avait l’air bien sur le moment » est précisément la dérive que l’échelle sert à empêcher.

Une échelle réduit aussi le nombre de décisions. Sans elle, chaque écart devient un jugement improvisé, pris à la vitesse de l’implémentation ; avec elle, la plupart des écarts n’admettent qu’un seul token plausible, et la revue de design discute des cas intéressants plutôt que de l’arithmétique.

2. L’espace entre les groupes > l’espace au sein des groupes

Si vous ne retenez qu’une phrase de cet article : l’écart entre les groupes doit être visiblement plus grand que l’écart à l’intérieur de ceux-ci. C’est la proximité de Gestalt qui fait le gros du travail – l’œil lit la distance relative comme une relation, automatiquement et avant les mots.

Un formulaire où le label se tient à 8px de son champ, et où les champs sont séparés de 24px, n’a besoin d’aucun cadre, d’aucun séparateur, d’aucune teinte de fond : le regroupement va de soi. Aplatissez ces distances à un 16px uniforme et le même formulaire devient une brume de lignes équidistantes que l’utilisateur doit analyser consciemment. Les trois mêmes champs, deux fois :

grouped (8 within / 24 between)     flattened (16 everywhere)

Name                                Name
[______________]
                                    [______________]

Email                               Email
[______________]
                                    [______________]

Phone                               Phone
[______________]
                                    [______________]

À gauche, chaque label appartient sans ambiguïté à son champ. À droite, chaque label intérieur flotte à égale distance de deux champs – la proximité ne vote plus, et le lecteur déduit l’appartenance de l’ordre de lecture plutôt que du regard.

Le mode de défaillance est presque toujours une compression au mauvais niveau : un designer resserre l’écart entre groupes pour faire tenir davantage au-dessus de la ligne de flottaison, le rapport s’effondre, puis – sentant le regroupement se dissoudre – il ajoute des bordures pour le rétablir. Ce qui nous amène à la quatrième décision. Mais d’abord :

3. Un seul padding par conteneur, dérivé du rôle

Les conteneurs accumulent du padding asymétrique comme les cuisines accumulent les tiroirs fourre-tout – un léger décalage ici pour caser un bouton, un ajustement là pour une icône, jusqu’à ce qu’une carte affiche 18px en haut, 14px à gauche, et que personne ne se souvienne pourquoi. Le remède est une dérivation permanente : le padding d’un conteneur découle de son rôle, pas de son contenu.

• Composants (boutons, champs de saisie, chips) : 16px
• Cartes et contenus groupés : 24px
• Sections : 32-48px
• Zones au niveau de la page et zones hero : 48-64px

Quand un contenu ne tient pas dans le padding de son rôle, c’est le contenu qui ne convient pas au conteneur – divisez-le, raccourcissez-le, ou faites monter le conteneur d’un niveau. Ajuster le padding pour sauver un enfant récalcitrant casse le rythme de tous ses voisins, et l’asymétrie se lit comme un bug, même chez les utilisateurs qui n’en parleront jamais.

4. Les blancs avant les bordures

La plupart des séparateurs sont des excuses. La bordure sous chaque ligne de liste, le cadre autour de chaque section de formulaire, le filet entre chaque carte – chacun est un espacement qui a renoncé. Les frontières créent bel et bien des groupes (le principe de région commune de la Gestalt est réel), mais c’est le remède fort : visuellement bruyant, additif, cumulatif. Chaque bordure est une ligne de plus que l’œil doit traiter.

Mon ordre de travail : essayer d’abord le rapport de proximité (décision deux). Si les groupes refusent encore de se détacher, tenter un changement de fond avant un trait – une teinte crée une région sans ajouter de ligne, c’est le regroupement par région commune dans sa version la plus discrète, et il l’emporte sur une bordure chaque fois qu’un groupe a besoin de cohésion mais pas d’un bord ; les lignes alternées dans les tableaux en sont la forme la plus familière. Sortez les bordures quand des zones réclament vraiment des bords francs – tableaux, zones éditables, cartes imbriquées – puis tenez-vous-y. Une interface qui alterne regroupement par les blancs ici et regroupement par bordures là se lit comme deux design systems en conflit.

Le test que j’applique en relecture : supprimer toutes les bordures qui ne marquent pas un bord franc autorisé – tableaux, champs éditables – et regarder ce qui reste. Tout regroupement qui survit était réel ; tout ce qui se dissout était une dette d’espacement que les bordures remboursaient.

5. Réglez le rythme vertical au niveau du texte

Les systèmes d’espacement meurent par le bas. Si le texte courant tourne à line-height 1.2, aucune quantité d’espacement entre sections ne sauve la page – les paragraphes eux-mêmes paraissent à l’étroit, et tout ce qui repose dessus hérite de cette tension. Le plancher : corps de 16px, line-height 1.5 (jusqu’à 1.75 en format long), et une justification d’environ 65ch. La partie line-height est la partie empirique : les recommandations d’accessibilité citent 1.5 pour une raison, et un interlignage serré est le premier tueur de rythme sur le web. Le plafond de 65ch relève de la pratique plutôt que de la loi : de longues lignes peuvent très bien passer un test isolé, mais le retour à la ligne suivante devient plus difficile à viser, et les lecteurs rencontrent le mur de texte bien avant de rencontrer l’argument.

Au-dessus du paragraphe, la règle qui organise tout le reste : un titre se place plus près du contenu qu’il introduit que du contenu qui le précède. Espace avant plus grand que l’espace après – le double, en général. Un titre qui flotte à égale distance entre deux sections n’appartient à aucune ; c’est l’asymétrie qui le lie à son propre contenu. Le même titre, deux fois :

bound (before wide / after tight)   floating (equal both sides)

...end of previous section.         ...end of previous section.


Shipping address                    Shipping address
[Street___________]
[City_____________]
                                    [Street___________]
                                    [City_____________]

À gauche, le titre possède visiblement ses champs. À droite, il plane entre deux sections, et le lecteur l’attribue par convention plutôt que par le regard. C’est de nouveau la décision deux, appliquée à l’intérieur de la colonne de texte, et c’est bien là le point : le rythme vertical n’est pas une discipline à part, c’est la règle de proximité appliquée à la plus petite échelle.

L’audit

Les cinq décisions se condensent en une check-list de relecture que je passe sur n’importe quel écran :

1. Tous les écarts sont-ils sur l’échelle ? (Inspectez les valeurs étranges – ce sont toujours des accidents.)
2. Chaque écart entre groupes est-il plus grand que les écarts à l’intérieur de ces groupes ?
3. Chaque conteneur porte-t-il un seul padding dérivé de son rôle ?
4. Une bordure pourrait-elle être supprimée après correction de l’espacement qu’elle masque ?
5. La colonne de texte tient-elle son propre rythme – line-height de 1.5 ou plus, titres liés à leur contenu ?

La plupart des écrans échouent sur deux ou trois de ces points, et les corriger change davantage le ressenti que n’importe quel changement de palette ou de typographie. Dans mes propres applications iOS, la première question est vérifiée mécaniquement : avant qu’un commit ne parte, la barrière de relecture cherche dans le diff les valeurs de padding brutes, et tout ce qui n’est pas un token du kit doit avancer une raison nommée pour survivre. L’espacement, c’est là que se cache le métier, précisément parce que personne ne peut le montrer du doigt.

Questions fréquentes

Quelle échelle d’espacement un design system doit-il utiliser ?

Une échelle de base 4px – 4, 8, 16, 24, 32, 48, 64 – couvre presque tous les besoins d’une interface. Les valeurs exactes comptent moins que l’exclusivité : chaque écart vient de l’échelle ou s’accompagne d’une justification documentée. Les valeurs arbitraires (7px, 13px, 22px) brisent le rythme visuel d’une façon que les utilisateurs ressentent sans pouvoir la nommer.

Comment grouper des éléments d’interface sans bordures ?

Avec le rapport de proximité : l’espace entre les groupes doit dépasser visiblement l’espace à l’intérieur de ceux-ci. Un écart de 8px entre le label et son champ, avec 24px avant le label suivant, structure un formulaire sans le moindre cadre. Réservez les bordures aux zones qui exigent des bords francs – tableaux, zones éditables – et privilégiez un changement de fond comme étape intermédiaire.

Quel padding faut-il donner aux cartes et aux boutons ?

Dérivez-le du rôle du conteneur : ~16px pour les composants (boutons, champs de saisie), 24px pour les cartes, 32-48px pour les sections, davantage pour les zones hero. Une seule valeur par conteneur – si un contenu ne tient pas dans le padding de son rôle, changez le contenu ou faites monter le conteneur d’un niveau plutôt que d’ajuster les bords à la main.

Qu’est-ce que le rythme vertical en typographie ?

Le motif d’espacement constant le long d’une colonne de texte : un corps de 16px minimum avec un line-height de 1.5-1.75, environ 65 caractères par ligne, et des titres placés plus près du contenu qu’ils introduisent que de celui qui les précède. Tout ce qui est plus grand hérite de ce niveau – si les paragraphes sont à l’étroit, aucun espacement entre sections ne répare la page.