Compact, confortable, spacieux : les modes de densité

Un mode de densité, c’est la même mise en page résolue contre des valeurs d’espacement différentes : les composants, la hiérarchie et la typographie restent fixes, tandis que les alias sémantiques d’espacement qu’ils référencent — remplissage de rangée, espace de cellule, retrait de contrôle — sont remappés d’un cran vers le haut ou vers le bas sur l’échelle. Le mode compact affiche plus à l’écran, le mode spacieux affiche moins, et aucun n’est une refonte : les trois modes sont une seule conception lue contre trois points voisins de la même échelle d’espacement.

Cette formulation mérite qu’on y insiste, car « nous devrions proposer une vue compacte » sonne comme un second produit et est souvent cadré comme tel. Cet article couvre qui a réellement besoin des modes de densité, le mécanisme d’alias qui en fait un simple échange de correspondances plutôt qu’un embranchement, une rangée de tableau décortiquée avec de vrais chiffres, et le coût réel — le tout reposant sur la logique par crans d’un système d’espacement.

Qui a réellement besoin des modes de densité ?

Les outils riches en données où des utilisateurs aguerris passent des heures chaque jour : tableaux, panneaux d’administration, tableaux de bord de supervision, IDE. Un agent de support qui trie une file d’attente ou un analyste qui rapproche un grand livre mesure l’écran en rangées par coup d’œil — chaque rangée qui tient est un défilement épargné, des centaines de fois par jour. Le même produit possède presque toujours des surfaces qui ne subissent aucune de ces pressions : paramètres, intégration, facturation. Celles-ci restent confortables, quoi que fassent les tableaux.

La demande est observable avant même qu’on ait construit quoi que ce soit : les utilisateurs zooment le navigateur à 80 %, exportent les tableaux vers des tableurs « pour tout voir », ou le demandent carrément. La densité est une réponse propre à chaque surface à un besoin d’expert avéré — un point à garder en tête, car la section sur le coût, plus bas, est bien réelle.

Comment fonctionne un mode de densité ?

Grâce à la structure de tokens à deux couches que beaucoup de systèmes possèdent déjà. La couche du bas est l’échelle d’espacement elle-même : avec une base de 16px, un ratio de 2 et deux crans par doublement, le menu donne 8, 11, 16, 23, 32, 45, 64. La couche du dessus est sémantique — des alias comme table-row-padding, table-cell-gap ou control-inset qui pointent vers des crans. Les composants ne consomment que les alias.

Un mode de densité est un remappage de cette couche de pointeurs, rien de plus. Le mode confortable pointe le remplissage de rangée sur 16 ; le compact le re-pointe sur 11 ; le spacieux sur 23. Aucun composant ne change et aucun écran n’est redessiné à la main — une seule correspondance est échangée, un peu comme un thème de couleur échange le mode clair pour le mode sombre.

C’est la géométrie de l’échelle qui rend cohérent un remappage d’un seul cran. Chaque cran vaut 2^(1/2) ≈ 1,41× son voisin (la valeur non arrondie sous 16 est 11,31 ; le menu l’arrondit à 11), si bien que descendre chaque alias d’un cran comprime chaque distance d’à peu près les mêmes 30 %. L’espace à l’intérieur d’un composant et l’espace entre composants rétrécissent proportionnellement, et la mise en page se lit comme la même conception, en plus serré — pas comme une conception différente.

À quoi ressemble une rangée de tableau dans chaque mode ?

Prenez un tableau avec un corps de texte de 16px à interligne 1,5 — une boîte de ligne de 24px — et résolvez les deux mêmes alias dans les trois modes :

Le mode compact affiche 30 % de rangées de plus que le confortable dans la même fenêtre d’affichage — tout l’argumentaire en une ligne — et chaque valeur d’espacement du tableau provient de trois crans voisins du menu court de l’échelle : 11, 16, 23.

Les trois colonnes sont un seul menu lu à trois décalages : ouvrez l’échelle d’espacement derrière la correspondance dans Scale Composer — une base de 16, un ratio de 2 et deux crans par doublement génèrent les sept crans, et chaque alias ci-dessus pointe vers l’un d’eux.

Le texte devient-il plus petit en mode compact ?

Le plus souvent non — et c’est l’idée clé de tout le motif : la densité est une décision d’espacement avant d’être une décision de typographie. L’espacement se comprime ; la typographie reste largement inchangée. Un expert parcourt la structure plus vite qu’un novice, mais l’expertise ne réduit pas la taille de caractère qu’un lecteur peut résoudre confortablement — cette limite est fixée par la vue, non par la familiarité. Comprimer la typographie rapporte d’ailleurs peu : faire passer le corps de texte de 16 à 14px économise 2px par ligne là où un remappage de padding en économisait 10 par rangée, et cela coûte de la lisibilité à chaque utilisateur. Certaines grilles de données abaissent bien le texte secondaire des cellules d’un niveau dans leur mode le plus dense, mais c’est le dernier levier, actionné une fois que l’espacement a fait le travail.

Pourquoi les utilisateurs aguerris peuvent-ils lire des écrans plus denses ?

Parce que le blanc accomplit un travail de communication, et la quantité nécessaire dépend de qui lit. L’espacement est la façon dont une mise en page enseigne sa structure — quelle étiquette appartient à quel champ, où un enregistrement se termine et où le suivant commence. Dans le vocabulaire de la psychologie de la Gestalt, c’est le regroupement par proximité. Un visiteur qui vient pour la première fois s’appuie fortement sur ces indices. Un utilisateur aguerri a déplacé la structure dans sa tête ; l’écran n’a plus besoin de l’enseigner, si bien que le budget d’espacement peut rétrécir avec un faible coût de compréhension.

Le remappage d’un seul cran respecte ce mécanisme. Comme chaque alias descend la même échelle géométrique, le contraste proportionnel entre les espaces subsiste : l’espace entre enregistrements reste visiblement plus grand que l’espace à l’intérieur d’un enregistrement. Le mode compact baisse le volume des indices sans en brouiller les relations. C’est aussi pourquoi les surfaces destinées aux novices — intégration, paramètres, états vides — devraient rester confortables : leurs lecteurs ont encore besoin de l’enseignement.

Que coûtent les modes de densité ?

La surface de QA, multipliée. Chaque écran derrière un bouton de densité existe désormais en double — en triple avec le spacieux — et chaque variante peut échouer de son côté : du texte qui ne se tronque qu’en compact, des badges et des anneaux de focus qui tiennent dans une rangée de 56px et se coupent dans une de 46px, des cibles tactiles qui respectent confortablement les recommandations de taille minimale dans un mode et à peine dans un autre. Le remappage lui-même tient en quelques lignes ; en vérifier les conséquences est une taxe permanente sur chaque écran à venir. Les recommandations de densité de Material Design — un traitement publié du motif — accordent en conséquence autant de sérieux à où la densité s’applique, et où elle ne devrait pas, qu’à la manière de comprimer.

D’où la règle de cadrage énoncée en tête : ajoutez le mode quand un segment en a démontrablement besoin, sur les surfaces où il en a besoin — pas comme une fonctionnalité par défaut de chaque nouveau système.

Essayez le remappage compact

Le mécanisme se juge le plus facilement sur des paires voisines : partout où le confortable indique 16, le compact indique 11 ; partout où il indique 23, le compact indique 16. Lisez le même menu un cran plus bas et décidez lesquels de vos propres écrans survivraient à l’échange — ouvrez la correspondance compacte dans Scale Composer.