<?xml version="1.0" encoding="utf-8"?>
<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>

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

<p>Ein gutes visuelles Layout macht Anwendungen auch attraktiver und visuell angenehmer.</p>

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

<section id="general-guidelines">
<title>Allgemeine Richtlinien</title>

<list>
<item><p>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.</p></item>
<item><p>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.</p></item>
<item><p>Achten Sie auf Konsistenz. Verwenden Sie durchgehend gleiche Auffüllbreiten.</p></item>
<item><p>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.</p>
<list>
<item><p>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.</p></item>
<item><p>Lassen Sie zwischen Beschriftungen und zugehörigen Komponenten 12 horizontale Pixel Platz.</p></item>
<item><p>Für den vertikalen Abstand von Komponentengruppen sind 18 Pixel angemessen.</p></item>
<item><p>Eine generelle Aufüllung von 18 Pixeln wird für Dialogfenster zwischen Inhalt und Fensterrändern empfohlen.</p></item>
</list></item>
<item><p>Rücken Sie Elemente um 12 Pixel ein, um Hierarchie und Zugehörigkeit darzustellen.</p></item>
<item><p>Vermeiden Sie Rahmen mit sichtbaren Rändern, um Gruppen von Bedienelementen voneinander zu trennen – verwenden Sie stattdessen Abstände und Überschriften.</p></item>
</list>

<p>Inkorrekte Abstände und Ausrichtung:</p>
<media type="image" mime="image/svg" src="figures/visual-alignment-incorrect.svg"/>

<p>Korrekte Abstände und Ausrichtung:</p>
<media type="image" mime="image/svg" src="figures/visual-alignment-correct.svg"/>

<p>Korrekte Abstände, mit Einheiten (Pixel):</p>
<media type="image" mime="image/svg" src="figures/visual-alignment-spacing.svg"/>

</section>

<section id="label-alignment">
<title>Ausrichtung von Beschriftungen</title>

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

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

</section>

<section id="hierarchy">
<title>Visuelle Hierarchie</title>

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

</section>

</page>
