Allan Day
aday@gnome.org
Calum Benson
Adam Elman
Seth Nickell
Colin Robertson

This work is licensed under a Creative Commons Attribution-Share Alike 4.0 International License.

Anordnung von Elementen in einer Benutzeroberfläche.
Christian Kirbach
christian.kirbach@gmail.com 2014
Mario Blättermann
mario.blaettermann@gmail.com 2016

# Visuelles Layout

Das visuelle Layout von Bedienelementen, Informationen und Inhalten beeinflusst, wie einfach Ihre Anwendung zu verstehen ist. Es ist wichtig zu verstehen, dass das visuelle Design einen bedeutenden Einfluss darauf hat, wie viel Aufwand bei der Arbeit mit einer Anwendung nötig ist. Ein minderwertiges Layout verursacht dem Benutzer zusätzlichen Aufwand, der durch ein gutes und durchdachtes Layout reduziert werden kann.

Ein gutes visuelles Layout macht Anwendungen auch attraktiver und visuell angenehmer.

Diese Richtlinien zum visuellen Layout helfen Ihnen dabei, eine Anwendung zu entwickeln, die schön, einfach zu verstehen und effizient zu benutzen ist.

# Allgemeine Richtlinien

Ein Ausrichtungspunkt ist eine imaginäre vertikale oder horizontale Linie im Fenster, die den Rand von einem oder mehreren Bedienelementen oder Beschriftungen im Fenster berührt. Minimieren Sie die Anzahl solcher Linien – je weniger, umso sauberer und klarer wird das Layout wirken und von Benutzern leichter zu verstehen sein.

Richten Sie Inhalte und Bedienelemente in Ihrem Layout exakt aus. Das Auge ist sehr empfindlich in der Unterscheidung von ausgerichteten und nicht ausgerichteten Elementen. Sind visuelle Elemente nicht »aufgereiht«, sind sie schwerer erkennbar. Nicht ausgerichtete Elemente wirken ablenkend.

Achten Sie auf Konsistenz. Verwenden Sie durchgehend gleiche Auffüllbreiten.

Ordnen Sie zusammengehörige Bedienelemente und Informationen in Gruppen an und verwenden Sie Aufüllungen, um sie zu differenzieren. Dadurch wird eine Benutzeroberfläche viel leichter lesbar und verständlicher.

Als Faustregel sollten Sie zwischen den Elementen ein Vielfaches von 6 Pixeln Platz lassen, der relational vergrößert wird, wenn sich der Abstand zwischen den Elementen vergrößert.

Lassen Sie zwischen Beschriftungen und zugehörigen Komponenten 12 horizontale Pixel Platz.

Für den vertikalen Abstand von Komponentengruppen sind 18 Pixel angemessen.

Eine generelle Aufüllung von 18 Pixeln wird für Dialogfenster zwischen Inhalt und Fensterrändern empfohlen.

Rücken Sie Elemente um 12 Pixel ein, um Hierarchie und Zugehörigkeit darzustellen.

Vermeiden Sie Rahmen mit sichtbaren Rändern, um Gruppen von Bedienelementen voneinander zu trennen – verwenden Sie stattdessen Abstände und Überschriften.

Inkorrekte Abstände und Ausrichtung:

Korrekte Abstände und Ausrichtung:

Korrekte Abstände, mit Einheiten (Pixel):

# Ausrichtung von Beschriftungen

Wenn möglich, sollten Sie Beschriftungen rechtsbündig anordnen (siehe Diagramm unten). Dadurch werden größere Lücken zwischen Beschriftungen und deren zugehörigen Bedienelementen vermieden. Diese Art der rechtsbündigen Anordnung ist nicht möglich, wenn die Bedienelemente einen Einzug haben: Hier sollte stattdessen die linksbündige Anordnung angewendet werden.

# Visuelle Hierarchie

Ordnen Sie visuelle Elemente von oben nach unten und von links nach rechts an. Dies ist die Richtung, in denen Benutzer in westlichen Spracheinstellungen eine Benutzeroberfläche lesen, so dass die Objekte oben links zuerst wahrgenommen werden. Diese Anordnung verleiht Benutzeroberflächen eine Hierarchie: Die zuerst wahrgenommenen Elemente haben Priorität vor den weiteren, die danach kommen. Aus diesem Grund sollten Sie dominante Elemente oberhalb und links von den Inhalten platzieren, auf die sie sich auswirken. Kopfleisten sind ein Designmuster, die dies respektieren.