Creative Technologies Lab | dokuWiki

Repository of academic adventures, experimental technology, accidental brilliance, and collaborative nerdery.

User Tools

Site Tools


extras:wissikon:media-design:ten-ux-laws:proximity

This is an old revision of the document!


Proximity

Dieses Gesetz ist Teil der Ten Laws of UX, einer Sammlung wichtiger Prinzipien für die Gestaltung nutzerfreundlicher digitaler Produkte. Eine Übersicht über alle zehn Gesetze mit kurzen Zusammenfassungen und weiterführenden Links findest du auf der Seite Ten Laws of UX.

Einführung

Proximity ist ein Gestaltprinzip und beschreibt, dass Elemente, die räumlich nah beieinander liegen, von Usern als zusammengehörig wahrgenommen werden. Dabei ist nicht entscheidend, ob diese Elemente tatsächlich inhaltlich verbunden sind, sondern wie sie visuell angeordnet sind. Nähe erzeugt also eine implizite Beziehung.

Für die Gestaltung von Benutzeroberflächen ist dieses Prinzip besonders wichtig, weil User Strukturen oft schneller über räumliche Anordnung erfassen als über ausführliche Erklärungen. Eine Oberfläche wirkt klar und verständlich, wenn zusammengehörige Inhalte nah beieinander stehen und voneinander unabhängige Inhalte ausreichend Abstand haben. Fehlt diese räumliche Ordnung, entsteht schnell Verwirrung.

Warum ist das relevant?

Bei der Nutzung digitaler Produkte lesen User eine Oberfläche nicht wie einen fortlaufenden Text. Sie erfassen vielmehr visuelle Gruppen, Beziehungen und Muster. Abstände spielen dabei eine zentrale Rolle. Schon kleine Unterschiede im Layout können beeinflussen, ob zwei Elemente als zusammengehörig oder getrennt wahrgenommen werden.

Proximity hilft zu verstehen, warum manche Interfaces sofort übersichtlich wirken und andere trotz gleicher Inhalte unruhig oder missverständlich erscheinen. Das Gesetz betrifft also nicht nur ästhetische Fragen, sondern direkt die Verständlichkeit und Orientierung in einem System. Gute UX nutzt Abstände bewusst als Mittel der Informationsstruktur.

Genaues Prinzip

Das Prinzip besagt, dass räumliche Nähe als Hinweis auf inhaltliche Zugehörigkeit interpretiert wird. Wenn zwei oder mehr Elemente dicht beieinander stehen, gehen User meist davon aus, dass sie in einem gemeinsamen Zusammenhang stehen. Wenn zwischen Elementen größere Abstände liegen, werden sie als voneinander getrennt wahrgenommen.

Für die Praxis bedeutet das, dass Gruppen nicht erst durch Linien, Farben oder zusätzliche Markierungen entstehen müssen. Oft reicht bereits eine saubere räumliche Anordnung. Gleichzeitig bedeutet das auch, dass ungewollte Nähe zu Fehlinterpretationen führen kann. Ein schlechtes Layout kann Beziehungen suggerieren, die gar nicht gemeint sind.

Ausführliche Anwendungsbeispiele

Beispiel 1: Formulare und Feldbeschriftungen

Ein besonders wichtiges Anwendungsfeld ist das Formular-Design. User erwarten, dass die Beschriftung eines Eingabefelds zu genau dem Feld gehört, unter oder neben dem sie steht. Wenn ein Label zu weit von seinem Feld entfernt ist oder zwischen mehreren Eingaben steht, kann Unsicherheit entstehen. Der User muss dann erst überlegen, welche Information wohin gehört.

Wird die Beschriftung dagegen klar und nah am jeweiligen Eingabefeld platziert, entsteht sofort eine verständliche Zuordnung. Besonders bei längeren Formularen mit mehreren Feldern ist das entscheidend. Ein sauberer Abstand zwischen zusammengehörigen Elementen und ein größerer Abstand zur nächsten Gruppe erleichtern die Orientierung erheblich. Auf diese Weise wird ein Formular nicht nur optisch ruhiger, sondern auch inhaltlich klarer.

Beispiel 2: Produktkarten in einer Übersicht

In einer Produktübersicht oder auf einer Kategorieseite eines Shops zeigt sich Proximity sehr deutlich. Informationen wie Produktbild, Titel, Preis, Bewertung und Kaufoption sollten so angeordnet sein, dass sie eindeutig zu einem bestimmten Produkt gehören. Wenn der Abstand innerhalb einer Produktkarte zu groß ist oder verschiedene Karten zu dicht nebeneinanderstehen, kann die Zuordnung schwerfallen.

Ein gutes Layout hält alle Informationen eines Produkts eng zusammen und trennt unterschiedliche Produkte klar voneinander. Dadurch erkennt der User auf einen Blick, welche Informationen zusammengehören. Das reduziert Fehlinterpretationen und macht den Vergleich zwischen verschiedenen Angeboten leichter.

Beispiel 3: Navigation und Unterpunkte

Auch in Navigationssystemen spielt räumliche Nähe eine wichtige Rolle. Wenn Hauptpunkte und zugehörige Unterpunkte nah zusammenstehen, ist ihre Beziehung schnell erkennbar. Werden Unterpunkte jedoch zu weit entfernt oder uneinheitlich platziert, kann der Eindruck entstehen, dass sie eigenständige Bereiche sind.

Das ist besonders relevant in komplexeren Menüs oder Dashboards. Dort hilft Proximity dabei, Hierarchien sichtbar zu machen, ohne jede Beziehung textlich erklären zu müssen. User orientieren sich dann nicht nur an Bezeichnungen, sondern auch an der räumlichen Logik der Oberfläche.

Beispiel 4: Aktionsbereiche und zugehörige Informationen

Ein weiteres Beispiel sind Aktionsbereiche mit begleitenden Informationen. Wenn etwa ein Button ‘‘Jetzt buchen’’ neben Preis, Verfügbarkeit und relevanten Bedingungen platziert ist, erkennt der User schnell, dass diese Informationen zusammengehören. Wird derselbe Button weit entfernt oder in einem anderen Bereich der Seite angezeigt, entsteht eine Unterbrechung im Verständnis. Der User muss dann gedanklich verbinden, was visuell nicht zusammengeführt wurde.

Gerade bei entscheidungsrelevanten Inhalten ist das problematisch. Proximity sorgt hier dafür, dass wichtige Informationen nicht nur vorhanden sind, sondern im richtigen Zusammenhang wahrgenommen werden.

Was für die Nutzung besonders wichtig ist

Aus Sicht des Users entsteht gute Orientierung oft nicht durch mehr Erklärung, sondern durch klare visuelle Struktur. Wenn eine Oberfläche logisch gruppiert ist, wirkt sie leichter verständlich, selbst bei komplexeren Inhalten. Nähe ist dabei eines der stärksten Mittel, um Zusammenhänge sichtbar zu machen.

Proximity ist besonders wichtig in Interfaces mit vielen Informationen, in Formularen, in Listen, in Navigationssystemen und überall dort, wo Beziehungen zwischen Elementen schnell erkannt werden müssen. User achten meist nicht bewusst auf Abstände, reagieren aber sehr deutlich darauf, wenn diese nicht stimmen. Ein unruhiges oder unlogisches Layout wird oft als anstrengend oder unklar erlebt, auch wenn der genaue Grund nicht sofort benannt werden kann.

Typische Missverständnisse

Ein häufiges Missverständnis besteht darin, Proximity nur als Frage von dekorativem Layout zu verstehen. Tatsächlich geht es nicht bloß um optische Ordnung, sondern um die Wahrnehmung von Beziehungen. Abstände kommunizieren Bedeutung. Sie sagen dem User, was zusammengehört und was getrennt ist.

Ein weiteres Missverständnis ist die Annahme, dass möglichst wenig Abstand grundsätzlich gut sei. Das Gegenteil kann der Fall sein. Wenn alles zu dicht beieinandersteht, verschwimmen Gruppen und Hierarchien. Gute UX nutzt Nähe gezielt, nicht pauschal. Entscheidend ist die richtige Balance zwischen Zusammengehörigkeit innerhalb einer Gruppe und Trennung zwischen unterschiedlichen Gruppen.

This website uses cookies. By using our website, you agree with storing cookies on your computer. Also you acknowledge that you have read and understand our Privacy Policy. If you do not agree leave the website. Privacy Policy
/var/www/vhosts/ct-lab.info/wiki.ct-lab.info/data/attic/extras/wissikon/media-design/ten-ux-laws/proximity.1776759598.txt.gz · Last modified: by Felix Hardmood Beck