Kompakt, komfortabel, großzügig: Dichtemodi

Ein Dichtemodus ist dasselbe Layout, aufgelöst gegen unterschiedliche Abstände: Die Komponenten, die Hierarchie und die Schrift bleiben fix, während die semantischen Aliasse für Abstände, auf die sie verweisen — Zeilen-Padding, Zellenabstand, Control-Inset — um eine Skalenstufe nach oben oder unten neu zugeordnet werden. Kompakt bringt mehr auf den Bildschirm, großzügig weniger, und keiner der Modi ist ein Redesign: Alle drei Modi sind ein Design, gelesen gegen drei benachbarte Punkte auf derselben Abstände-Skala.

Auf dieser Rahmung lohnt es sich zu bestehen, denn „wir sollten eine kompakte Ansicht anbieten” klingt nach einem zweiten Produkt und wird oft auch so dimensioniert. Dieser Artikel behandelt, wer Dichtemodi wirklich braucht, den Alias-Mechanismus, der sie zu einem Zuordnungs-Tausch statt zu einer Abspaltung macht, eine Tabellenzeile, durchgerechnet mit echten Zahlen, und die ehrlichen Kosten — alles gestützt auf die Stufenlogik eines Abstände-Systems.

Wer braucht Dichtemodi wirklich?

Datenintensive Tools, in denen geübte Nutzer stundenlang pro Tag arbeiten: Tabellen, Admin-Panels, Monitoring-Dashboards, IDEs. Ein Support-Agent, der eine Warteschlange abarbeitet, oder ein Analyst, der ein Hauptbuch abgleicht, misst den Bildschirm in Zeilen pro Blick — jede Zeile, die passt, ist ein gesparter Scroll, hunderte Male am Tag. Dasselbe Produkt hat fast immer Oberflächen ohne solchen Druck: Einstellungen, Onboarding, Abrechnung. Die bleiben komfortabel, egal was die Tabellen tun.

Die Nachfrage ist beobachtbar, bevor überhaupt etwas gebaut wird: Nutzer zoomen den Browser auf 80 %, exportieren Tabellen in Tabellenkalkulationen, „um alles zu sehen”, oder fragen direkt danach. Dichte ist eine oberflächenspezifische Antwort auf einen nachgewiesenen Experten-Bedarf — ein Punkt, den man festhalten sollte, denn der Kosten-Abschnitt weiter unten ist real.

Wie funktioniert ein Dichtemodus?

Über die zweischichtige Token-Struktur, die viele Systeme ohnehin schon haben. Die untere Schicht ist die Abstände-Skala selbst: Mit einer 16px-Basis, Ratio 2 und zwei Noten pro Verdopplung ergibt sich das Menü 8, 11, 16, 23, 32, 45, 64. Die Schicht darüber ist semantisch — Aliasse wie table-row-padding, table-cell-gap oder control-inset, die auf Stufen zeigen. Komponenten konsumieren nur die Aliasse.

Ein Dichtemodus ist eine Neuzuordnung dieser Zeiger-Schicht und nichts sonst. Komfortabel richtet das Zeilen-Padding auf 16 aus; kompakt richtet es auf 11 neu aus; großzügig auf 23. Keine Komponente ändert sich, und kein Bildschirm wird von Hand neu gezeichnet — eine Zuordnung wird getauscht, ganz ähnlich wie ein Farbthema Hell gegen Dunkel tauscht.

Die Geometrie der Skala ist es, die eine Ein-Stufen-Neuzuordnung kohärent wirken lässt. Jede Stufe ist 2^(1/2) ≈ 1,41× ihre Nachbarin (der ungerundete Wert unter 16 ist 11,31; das Menü rundet ihn auf 11), sodass das Herunterstufen jedes Alias jede Distanz um rund dieselben 30 % komprimiert. Der Abstand innerhalb einer Komponente und der Abstand zwischen Komponenten schrumpfen proportional, und das Layout liest sich als dasselbe Design, enger — nicht als ein anderes Design.

Wie sieht eine Tabellenzeile in jedem Modus aus?

Nimm eine Tabelle mit 16px-Fließtext bei Zeilenhöhe 1,5 — eine 24px-Zeilenbox — und löse dieselben zwei Aliasse in allen drei Modi auf:

Kompakt zeigt 30 % mehr Zeilen als komfortabel im selben Viewport — der ganze Business-Case in einer Zeile — und jeder Abstand in der Tabelle stammt aus drei benachbarten Stufen des kurzen Menüs der Skala: 11, 16, 23.

Die drei Spalten sind ein Menü, gelesen an drei Versätzen: öffne die Abstände-Skala hinter der Zuordnung in Scale Composer — Basis 16, Ratio 2 und zwei Noten pro Verdopplung erzeugen alle sieben Stufen, und jeder Alias oben zeigt auf eine davon.

Wird der Text im kompakten Modus kleiner?

Meistens nein — und das ist die zentrale Erkenntnis des gesamten Musters: Dichte ist eine Entscheidung über Abstände, bevor sie eine Entscheidung über Typografie ist. Abstände komprimieren; die Schrift bleibt weitgehend. Ein Experte scannt Struktur schneller als ein Neuling, aber Expertise verkleinert nicht die Schriftgröße, die ein Leser bequem auflösen kann — diese Grenze setzt die Sehkraft, nicht die Vertrautheit. Die Schrift zusammenzustauchen bringt außerdem wenig: Fließtext von 16 auf 14px zu senken spart 2px pro Textzeile, wo eine Padding-Neuzuordnung 10px pro Tabellenzeile gespart hat, und es kostet jeden Nutzer Lesbarkeit. Manche Data-Grids senken tatsächlich sekundären Zellentext um eine Stufe in ihrem dichtesten Modus, aber das ist der letzte Hebel, gezogen erst, nachdem die Abstände die Arbeit getan haben.

Warum können geübte Nutzer überhaupt dichtere Bildschirme lesen?

Weil Weißraum Kommunikationsarbeit leistet, und wie viel davon nötig ist, hängt davon ab, wer liest. Abstände sind, wie ein Layout seine Struktur vermittelt — welches Label zu welchem Feld gehört, wo ein Datensatz endet und der nächste beginnt. Im Vokabular der Gestaltpsychologie ist das Gruppierung durch Nähe. Ein Erstbesucher stützt sich stark auf diese Hinweise. Ein geübter Nutzer hat die Struktur in seinen Kopf verlagert; der Bildschirm muss sie nicht mehr vermitteln, sodass das Budget für Abstände mit geringen Verständniskosten schrumpfen kann.

Die Ein-Stufen-Neuzuordnung respektiert diesen Mechanismus. Weil jeder Alias dieselbe geometrische Skala hinuntergeht, überlebt der proportionale Kontrast zwischen den Abständen: Der Raum zwischen Datensätzen bleibt sichtbar größer als der Raum innerhalb eines Datensatzes. Kompakt dreht die Lautstärke der Hinweise herunter, ohne ihre Beziehungen durcheinanderzubringen. Es ist auch der Grund, warum an Neulinge gerichtete Oberflächen — Onboarding, Einstellungen, leere Zustände — komfortabel bleiben sollten: Ihre Leser brauchen die Vermittlung noch.

Was kosten Dichtemodi?

QA-Fläche, multipliziert. Jeder Bildschirm hinter einem Dichte-Umschalter existiert jetzt zweimal — dreimal mit großzügig — und jede Variante kann für sich scheitern: Text, der nur bei kompakt abgeschnitten wird, Badges und Fokusringe, die in eine 56px-Zeile passen und in einer 46px-Zeile abgeschnitten werden, Touch-Targets, die die Mindestgrößen-Vorgaben in einem Modus komfortabel erfüllen und in einem anderen kaum. Die Neuzuordnung selbst sind ein paar Zeilen; ihre Folgen zu verifizieren ist eine dauerhafte Steuer auf jeden künftigen Bildschirm. Die Dichte-Richtlinie von Material Design — eine veröffentlichte Behandlung des Musters — behandelt entsprechend wo Dichte gilt, und wo nicht, genauso ernst wie das Wie des Komprimierens.

Daher die Dimensionierungsregel von oben: Füge den Modus hinzu, wenn ein Segment ihn nachweislich braucht, auf den Oberflächen, wo sie ihn brauchen — nicht als Standardfunktion jedes neuen Systems.

Probier die kompakte Neuzuordnung aus

Der Mechanismus lässt sich am leichtesten an Nachbarpaaren beurteilen: Wo immer komfortabel 16 zeigt, zeigt kompakt 11; wo es 23 zeigt, zeigt kompakt 16. Lies dasselbe Menü eine Stufe tiefer und entscheide, welche deiner eigenen Bildschirme den Tausch überleben würden — öffne die kompakte Zuordnung in Scale Composer.