UX-Gesetz 7

Common Region verständlich erklärt

Common Region beschreibt, dass Elemente als zusammengehörig wahrgenommen werden, wenn sie sich innerhalb eines gemeinsamen abgegrenzten Bereichs befinden. Ein Rahmen, eine Fläche oder ein Container kann dadurch Gruppenzugehörigkeit sichtbar machen.

Gemeinsame Bereiche vergleichen Zu den Anwendungsbeispielen

Was beschreibt Common Region?

Wenn mehrere Elemente innerhalb derselben visuell abgegrenzten Fläche liegen, werden sie von Usern meist als Gruppe interpretiert. Dieser Effekt ist oft stärker als bloße Nähe. Selbst wenn Elemente nicht besonders dicht beieinanderstehen, kann ein gemeinsamer Container ihre Zugehörigkeit sehr klar vermitteln.

Für UX ist das wichtig, weil komplexe Inhalte, Formulare, Einstellungen oder Dashboard- Bereiche so leichter strukturiert werden können. Ein gemeinsamer Bereich macht deutlich, welche Informationen und Aktionen zusammengehören.

Typische Anwendungsbeispiele

In Formularen können persönliche Daten, Zahlungsinformationen oder Einstellungen in getrennten Bereichen zusammengefasst werden. In Dashboards können Kennzahlen und zugehörige Aktionen in einer gemeinsamen Karte erscheinen. Hinweise, Warnungen oder Infoboxen werden oft gerade durch ihre umschlossene Region als eigener Block verstanden.

Besonders nützlich ist Common Region dann, wenn reine Abstände oder visuelle Ähnlichkeit nicht ausreichen, um Gruppen eindeutig sichtbar zu machen.

Interaktive Demonstration

Links befinden sich mehrere Elemente innerhalb klar sichtbarer gemeinsamer Regionen. Rechts sind ähnliche Elemente ohne umschließende Bereiche verteilt. Die Demo zeigt damit genau den Kern des Gesetzes: Zugehörigkeit entsteht hier vor allem durch den gemeinsamen Container.

Mit gemeinsamer Region

Gruppe A

Titel

Beschreibung

Aktion

Gruppe B

Titel

Beschreibung

Aktion

Die Elemente wirken als Einheit, weil sie sich jeweils in einem eigenen gemeinsamen Bereich befinden.

Ohne gemeinsame Region

Titel

Beschreibung

Aktion

Titel

Beschreibung

Aktion

Hier fehlen die gemeinsamen Container. Die Elemente müssen stärker über Interpretation als über klare Regionsbildung zusammengefasst werden.

Noch keine Auswahl getroffen.

✓

Gesetz präzise getroffen
Die Demo zeigt Gruppierung durch umschlossene Bereiche und nicht bloß durch Nähe oder identisches Styling.

✓

Klare Containerstruktur
Karten und abgegrenzte Flächen auf dieser Seite setzen Common Region direkt im Layout um.

✓

Vergleich mit ungerahmter Variante
Erst die Gegenüberstellung macht sichtbar, wie stark ein gemeinsamer Bereich die Zugehörigkeit prägt.