UX-Gesetz 5

Proximity verständlich erklärt

Proximity beschreibt, dass Elemente, die räumlich nah beieinander liegen, von Usern als zusammengehörig wahrgenommen werden. Nähe erzeugt also Bedeutung, noch bevor Inhalte bewusst gelesen oder interpretiert werden.

Nähe in der Demo vergleichen Zu den Anwendungsbeispielen

Was beschreibt Proximity?

User lesen Oberflächen nicht nur über Text, sondern stark über visuelle Struktur. Wenn Elemente eng beieinander stehen, wird meist angenommen, dass sie inhaltlich zusammengehören. Sind die Abstände größer, werden sie als getrennte Einheiten wahrgenommen.

Dieses Prinzip ist besonders wirksam, weil es sehr schnell verarbeitet wird. Gute UX nutzt räumliche Nähe deshalb gezielt, um Gruppen, Hierarchien und Beziehungen verständlich zu machen. Ein schlecht gesetzter Abstand kann dagegen falsche Zusammenhänge suggerieren.

Typische Anwendungsbeispiele

In Formularen sollten Labels dicht an den zugehörigen Eingabefeldern stehen. In Produktübersichten sollten Bild, Titel, Preis und Aktion eng beieinanderliegen, damit sie als Einheit erkannt werden. In Navigationen helfen Abstände dabei, Hauptpunkte von Unterpunkten oder voneinander getrennte Bereiche klar zu unterscheiden.

Proximity ist überall dort besonders relevant, wo User Beziehungen schnell erfassen sollen, ohne jeden Zusammenhang ausführlich lesen zu müssen.

Interaktive Demonstration

Links siehst du eine Anordnung mit enger Gruppierung. Rechts ist dieselbe Art von Inhalt mit deutlich größeren Abständen verteilt. Beide Varianten enthalten ähnliche Elemente, erzeugen aber eine andere Wahrnehmung von Zugehörigkeit.

Nahe Anordnung

Titel

Beschreibung

Aktion

Titel

Beschreibung

Aktion

Klare Gruppen Schnelle Zuordnung

Verteilte Anordnung

Titel

Beschreibung

Aktion

Titel

Beschreibung

Aktion

Schwächere Gruppen Mehr Interpretationsaufwand

Noch keine Auswahl getroffen.

✓

Enge Gruppierung inhaltlich verwandter Elemente
Karteninhalte, Texte und Aktionen stehen auf dieser Seite sichtbar nah beieinander.

✓

Deutliche Trennung unterschiedlicher Bereiche
Zwischen unabhängigen Abschnitten liegt absichtlich mehr Raum.

✓

Direkt erfahrbare Demo
Die Gegenüberstellung macht deutlich, wie Nähe Zugehörigkeit kommuniziert.