Abstände helfen zu erkennen, welche Inhalte zusammengehören. Ein Hilfetext sollte näher an seiner Option stehen als an der nächsten Frage. Mehr Weißraum ist dabei nicht automatisch besser: Wird eine Beziehung durch zu viel Abstand getrennt, erschwert die luftige Gestaltung die Orientierung.
Eine Gruppe besteht aus mehr als ihrer Überschrift
Die fachliche Referenz ist die offizielle GOV.UK-Radio-Variante mit ergänzenden Hinweisen. Jede Option besitzt eine Beschriftung und einen untergeordneten Erklärungstext. Die Einrückung und die Abstände machen sichtbar, welcher Hinweis zu welchem Kreis gehört. Die Referenz illustriert damit eine konkrete Zuordnung statt bloßer dekorativer Leere.
Ergänzend beschreibt die GOV.UK-Layout-Dokumentation begrenzte Inhaltsbreiten und verschiedene Spaltenaufteilungen. Die Regeln gehören zu diesem Designsystem. Sie sind keine universelle Pixelvorgabe für jede Website.
Beziehungen zuerst festlegen
Markiere in einem echten Abschnitt deiner Seite, welche Elemente eine Einheit bilden. Beispielsweise gehören Überschrift, erklärender Satz und Handlung zu einem Angebot. Zwei unterschiedliche Angebote brauchen dagegen eine erkennbare Trennung. Wenn du überall denselben Abstand verwendest, sehen diese unterschiedlichen Beziehungen möglicherweise gleich aus.
Lege anschließend wenige nachvollziehbare Abstandsstufen fest. Entscheide, welche Stufe innerhalb einer Gruppe, zwischen Gruppen und zwischen großen Abschnitten verwendet wird. Die konkreten Werte hängen von Schrift, Inhalt und Bildschirmbreite ab. Der Nutzen liegt zunächst in der konsistenten Bedeutung.
Mobil entsteht eine neue Nachbarschaft
Wenn zwei Spalten untereinander rutschen, können Inhalte plötzlich an andere Elemente grenzen. Ein Hilfetext am Ende der linken Spalte darf dann nicht wie die Einleitung der rechten Spalte wirken. Prüfe deshalb die Reihenfolge und die Abstände gemeinsam.
Auch sehr lange Überschriften verändern die Komposition. Ein Entwurf mit ausschließlich kurzen Beispielen kann falsche Sicherheit geben. Teste echte Produktnamen, mehrzeilige Labels und längere deutschsprachige Begriffe. Nutze keine feste Höhe, um die Inhalte gewaltsam auf dieselbe Linie zu bringen.
Ein kleiner Zuordnungstest
Zeige einen Abschnitt ohne Erklärung und frage, welche Texte zu welcher Handlung gehören. Lass die Person auf die zugehörigen Elemente zeigen. Wenn sie zögert, prüfe zuerst Einrückung, Reihenfolge und Abstand, bevor du weitere Rahmen oder Farben hinzufügst.
Die Vermutung, dass eine neue Gruppierung schneller verstanden wird, bleibt bis zu einem Test eine Hypothese. Aus einer aufgeräumten Oberfläche folgt noch keine gemessene Verbesserung.
Nähe beschreibt eine Beziehung
Ein Label direkt über seinem Feld wird als zusammengehörig gelesen. Wenn der Abstand zum vorherigen Feld kleiner ist, kann diese Zuordnung unklar werden. Prüfe daher nicht nur einzelne Abstände, sondern ihre Verhältnisse. Der Abstand innerhalb einer Gruppe sollte ihre Verbindung unterstützen, während der Abstand zur nächsten Gruppe einen neuen Zusammenhang signalisiert.
Diese Überlegung gilt auch für Überschriften und Absätze. Eine Zwischenüberschrift gehört zum folgenden Inhalt. Wenn sie räumlich stärker am vorherigen Absatz hängt, wird ihre Aufgabe weniger klar. Ein einheitlicher Rhythmus hilft, diese Beziehungen über eine längere Seite hinweg beizubehalten.
Inhalt bestimmt die Gruppe
Nicht jedes Element in derselben Zeile gehört automatisch zusammen. In einer Kontaktansicht können Name und Funktion eine Einheit bilden, während ein danebenstehender Aktionsbutton eine andere Aufgabe hat. Entscheide zuerst inhaltlich, welche Informationen gemeinsam verstanden werden sollen. Erst danach legst du ihre räumliche Anordnung fest.
Zusätzliche Rahmen sind nicht immer nötig. Wenn Nähe, Ausrichtung und Überschriften die Beziehung bereits deutlich machen, können weitere Boxen die Seite unnötig verdichten. Umgekehrt kann eine wichtige Gruppe eine erkennbare Begrenzung benötigen, wenn sie sonst im Umfeld untergeht. Beurteile die Wirkung am vollständigen Layout und nicht an einem isolierten Ausschnitt.
Ein kleiner Maßstab braucht dieselbe Logik
Auf dem Smartphone wird aus einer Reihe häufig eine vertikale Folge. Prüfe, ob die Gruppierung dabei erhalten bleibt. Zwei Elemente, die auf dem Desktop durch ihre gemeinsame Zeile verbunden waren, brauchen möglicherweise eine andere räumliche Beziehung, sobald sie untereinander stehen. Ein unverändert übernommener Abstandswert löst diese Aufgabe nicht automatisch.
Teste mit langen Labels, zusätzlichen Hinweisen und einer Fehlermeldung. Gerade solche Zustände verändern die Höhe einer Gruppe. Wenn danach ein Hinweis näher an der nächsten Frage als an seiner eigenen Eingabe steht, muss die Struktur angepasst werden. Eine robuste Abstandsgestaltung hält diese Varianten aus und zeigt weiterhin, welche Informationen gemeinsam gelesen werden sollen.
Für Lesefluss innerhalb der Textblöcke passt Typografie, die führt. Für die Bedeutung der Gruppenfrage lies Checkbox oder Radiobutton. Abstand unterstützt diese Struktur, kann eine unklare Frage aber nicht ersetzen.
