<page xmlns="http://projectmallard.org/1.0/" type="topic" id="visual-layout" xml:lang="de">

  <info>

    <credit type="author">

      <name>Allan Day</name>

      <email>aday@gnome.org</email>

    </credit>

    <credit>

      <name>Calum Benson</name>

    </credit>

    <credit>

      <name>Adam Elman</name>

    </credit>

    <credit>

      <name>Seth Nickell</name>

    </credit>

    <credit>

      <name>Colin Robertson</name>

    </credit>

    <include xmlns="http://www.w3.org/2001/XInclude" href="legal.xml"/>

    <desc>Anordnung von Elementen in einer Benutzeroberfläche.</desc>

    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">

      <mal:name>Christian Kirbach</mal:name>

      <mal:email>christian.kirbach@gmail.com</mal:email>

      <mal:years>2014</mal:years>

    </mal:credit>

    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">

      <mal:name>Mario Blättermann</mal:name>

      <mal:email>mario.blaettermann@gmail.com</mal:email>

      <mal:years>2016</mal:years>

    </mal:credit>

  </info>

<title>Visuelles Layout</title>

Das visuelle Layout von Bedienelementen, Informationen und Inhalten beeinflusst, wie einfach Ihre Anwendung zu verstehen ist und auch den ästhetischen Eindruck. 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.

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

<section id="general-guidelines">

<title>Allgemeine Richtlinien</title>

<list>

<item>
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.
</item>

<item>
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.
</item>

<item>
Achten Sie auf Konsistenz. Verwenden Sie durchgehend gleiche Auffüllbreiten.
</item>

<item>
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.

<list>

<item>
As a rule of thumb, leave space between elements in increments of 6 pixels, going up as the relationship between related elements becomes more distant.
</item>

<item>
Lassen Sie zwischen Beschriftungen und zugehörigen Komponenten 12 horizontale Pixel Platz.
</item>

<item>
Für den vertikalen Abstand von Komponentengruppen sind 18 Pixel angemessen.
</item>

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

</list></item>

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

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

</list>

Inkorrekte Abstände und Ausrichtung:

<media type="image" mime="image/svg" src="figures/visual-alignment-incorrect.svg"/>

Korrekte Abstände und Ausrichtung:

<media type="image" mime="image/svg" src="figures/visual-alignment-correct.svg"/>

Korrekte Abstände, mit Einheiten (Pixel):

<media type="image" mime="image/svg" src="figures/visual-alignment-spacing.svg"/>

</section>

<section id="label-alignment">

<title>Ausrichtung von Beschriftungen</title>

If possible, right-justify labels (see the diagram below). This will avoid large gaps between labels and their associated controls. This type of right-justification is not possible if you have indented controls: here left-justification should be used instead.

<media type="image" mime="image/svg" src="figures/label-alignment.svg"/>

</section>

<section id="hierarchy">

<title>Visuelle Hierarchie</title>

Organize visual elements from top-to-bottom and left-to-right. This is the direction that people from western locales tend to read an interface, so that the items at the top-left will be encountered first. This ordering gives interfaces a hierarchy: those components that are viewed first are perceived to have priority over those that come after them. For this reason, you should place dominant controls above and to the left of the controls and content that they affect. Header bars are a key design pattern in this respect.

</section>

</page>