Layout

Layout ist die Größe, der Abstand und die Platzierung von Inhalten innerhalb eines Fensters oder einer Seite. Ein effektives Layout ist entscheidend, um benutzern zu helfen, schnell zu finden und das Erscheinungsbild visuell ansprechend zu gestalten. Ein effektives Layout kann den Unterschied zwischen Designs machen, die Benutzer sofort verstehen, und diejenigen, die Benutzer verwirrt und überwältigt lassen.

Hinweis: Richtlinien für Fensterverwaltung werden in einem separaten Artikel vorgestellt. Empfohlene spezifische Kontrollgröße und -abstand werden in den jeweiligen Richtlinienartikeln vorgestellt.

Designkonzepte

Visuelle Hierarchie

Ein Fenster oder eine Seite weist eine klare visuelle Hierarchie auf, wenn ihre Darstellung die Beziehung und Priorität ihrer Elemente angibt. Ohne eine visuelle Hierarchie müssten Benutzer diese Beziehungen und Prioritäten selbst ermitteln.

Die visuelle Hierarchie wird durch eine geschickte Kombination der folgenden Attribute erreicht:

• Brennpunkt. Das Layout gibt an, wo Benutzer zuerst suchen müssen.
• Fluss. Das Auge fließt reibungslos und natürlich durch einen klaren Weg durch die Oberfläche, und es werden Benutzeroberflächenelemente in der für ihre Verwendung geeigneten Reihenfolge gefunden.
• Gruppierung. Logisch verwandte UI-Elemente weisen eine klare visuelle Beziehung auf. Verwandte Elemente werden gruppiert; Nicht verknüpfte Elemente sind getrennt.
• Betonung. Ui-Elemente werden basierend auf ihrer relativen Wichtigkeit hervorgehoben.
• Ausrichtung. Die UI-Elemente verfügen über eine koordinierte Platzierung, sodass sie leicht zu scannen und sortiert angezeigt werden können.

Darüber hinaus weist ein effektives Layout die folgenden Attribute auf:

• Geräteunabhängigkeit. Das Layout wird unabhängig von Schriftart oder Schriftgrad, Punkt pro Zoll (dpi), Anzeige oder Grafikadapter wie beabsichtigt angezeigt.
• Einfach zu scannen. Benutzer können die Inhalte, die sie suchen, auf einen Blick finden.
• Effizienz. Ui-Elemente, die groß sind, müssen groß sein, und Elemente, die klein sind, funktionieren gut klein.
• Veränderbarkeit. Wenn hilfreich, ist die Größe eines Fensters geändert, und das Inhaltslayout ist unabhängig davon wirksam, wie groß oder klein die Oberfläche ist.
• Gleichgewicht. Der Inhalt wird gleichmäßig über die Oberfläche verteilt angezeigt.
• Visuelle Einfachheit. Die Wahrnehmung, dass ein Layout nicht komplizierter ist, als es sein muss. Benutzer fühlen sich nicht von der Darstellung des Layouts überwältigt.
• Konsistenz. Ähnliche Fenster oder Seiten verwenden ein ähnliches Layout, sodass Benutzer immer orientiert sind.

Während die Größenanpassung, der Abstand und die Platzierung einfache Konzepte sind, besteht die Herausforderung beim Layout darin, die richtige Mischung dieser Attribute zu erreichen.

In Windows wird das Layout mithilfe von geräteunabhängigen Metriken wie Dialogeinheiten (DLUs) und relativen Pixeln kommuniziert.

Ein Entwurfsmodell zum Lesen

Benutzer wählen aus, was sie durch die Darstellung und Organisation des Inhalts lesen. Um ein effektives Layout zu erstellen, müssen Sie verstehen, was Benutzer dazu neigen, zu lesen und warum.

Sie können Layoutentscheidungen treffen, indem Sie dieses Entwurfsmodell zum Lesen verwenden:

• Personen lesen in einer von links nach rechts gelesenen, von oben nach unten angeordneten Reihenfolge (in westlichen Kulturen).

• Es gibt zwei Lesemodi: immersives Lesen und Scannen. Das Ziel des plastischen Lesens ist das Verständnis.

  

  In diesem Diagramm wird das immersive Lesen modelliert.

  Im Gegensatz dazu ist das Ziel des Scannens, Dinge zu finden. Der allgemeine Scanpfad sieht wie folgt aus:

  

  Dieses Diagramm modelliert.

  

  Wenn Text am linken Rand einer Seite ausgeführt wird, scannen Benutzer zuerst den linken Rand.

• Bei der Verwendung von Software werden Benutzer nicht in die Benutzeroberfläche selbst, sondern in ihre Arbeit eingetaucht. Daher lesen Benutzer in der Regel keinen UI-Text, den sie scannen. Sie lesen dann Textbits nur dann umfassend, wenn sie glauben, sie brauchen.

• Benutzer neigen dazu, Navigationsbereiche auf der linken oder rechten Seite einer Seite zu überspringen. Benutzer erkennen, dass sie dort sind, sehen sich jedoch nur Navigationsbereiche an, wenn sie navigieren möchten.

• Benutzer neigen dazu, große Blöcke unformatierter Text zu überspringen, ohne sie überhaupt zu lesen.

  

  Benutzer neigen dazu, beim Scannen große Textblöcke und Navigationsbereiche zu überspringen.

• Alle Dinge, die gleich sind, sehen Benutzer zuerst in der oberen linken Ecke eines Fensters, scannen sie über die Seite, und beenden Sie ihren Scan in der unteren rechten Ecke. Sie neigen dazu, die untere linke Ecke zu ignorieren.

  

  Alle Dinge sind gleich, Benutzer lesen diese Zahlen in der folgenden Reihenfolge: 1, 2, 4 und 3.

• Aber in der interaktiven Benutzeroberfläche sind nicht alle Dinge gleich, sodass unterschiedliche UI-Elemente unterschiedliche Aufmerksamkeitsebenen erhalten. Benutzer neigen dazu, interaktive Steuerelemente zu betrachten, insbesondere Steuerelemente oben links und mitte des Fensters und prominenten Text zuerst.

Benutzer konzentrieren sich auf die wichtigsten interaktiven Steuerelemente und die prominente Hauptanweisung und betrachten andere Dinge nur, wenn sie erforderlich sind.

• Benutzer neigen dazu, interaktive Steuerelementbeschriftungen zu lesen, insbesondere diejenigen, die für das Ausführen der betreffenden Aufgabe relevant erscheinen. Benutzer dagegen neigen dazu, statischen Text nur zu lesen, wenn sie der Meinung sind, dass sie es brauchen.
• Elemente, die unterschiedlich erscheinen, wecken aufmerksamkeitserregend. Fett formatierter Text und großer Text hebt sich von normalem Text ab. UI-Elemente mit Farbe oder auf einem farbigen Hintergrund heben sich hervor. Elemente mit Symbolen heben sich von Elementen ohne Symbole ab.
• Benutzer führen keinen Bildlauf durch, es sei denn, sie haben einen Grund. Wenn der Inhalt über der faltbaren keinen Grund zum Scrollen, wird er nicht angezeigt.
• Sobald benutzer entschieden haben, was zu tun ist, beenden sie sofort das Scannen und tun es.
• Da Benutzer das Scannen beenden, wenn sie der Meinung sind, dass sie fertig sind, ignorieren sie in der Regel alles, was als Abschlusspunkt erscheint.

Benutzer beenden das Scannen, wenn sie der Meinung sind, dass sie fertig sind.

Natürlich gibt es Ausnahmen von diesem allgemeinen Modell. Eye Tracking-Geräte deuten darauf hin, dass das Verhalten realer Benutzer ziemlich unerwischt ist. Das Ziel dieses Modells ist es, Ihnen zu helfen, gute Entscheidungen und Kompromisse zu treffen, nicht das Benutzerverhalten genau zu modellieren. Aber wie Sie diese Liste gelesen haben, haben Sie hoffentlich auch viele Ihrer eigenen Lesemuster erkannt.

Entwerfen für das Scannen

Benutzer lesen nicht, sie scannen, sodass Sie UI-Oberflächen für das Scannen entwerfen sollten. Gehen Sie nicht davon aus, dass Benutzer den Text wie in einer von links nach rechts geschriebenen, von oben nach unten geschriebenen Reihenfolge lesen, sondern dass sie sich die UI-Elemente ansehen, die ihre Aufmerksamkeit wecken.

So entwerfen Sie das Scannen:

• Gehen Sie davon aus, dass Benutzer mit dem schnellen Scannen des gesamten Fensters beginnen und dann die UI-Elemente in ungefähr der folgenden Reihenfolge lesen:
  • Interaktive Steuerelemente in der Mitte
  • Die Commit-Schaltflächen
  • Interaktive Steuerelemente, die an anderer Stelle gefunden wurden
  • Hauptanweisung
  • Ergänzende Erläuterungen
  • Text, der mit einem Warnsymbol angezeigt wird
  • Fenstertitel
  • Anderer statischer Text im Haupttext
  • Fußnoten
• Platzieren Sie UI-Elemente, die eine Aufgabe in der oberen linken Ecke oder in der oberen Mitte initiieren.
• Platzieren Sie UI-Elemente, die eine Aufgabe in der unteren rechten Ecke abschließen.
• Platzieren Sie nach Möglichkeit wichtige Texte auf interaktive Steuerelemente anstelle statischen Texts.
• Vermeiden Sie wichtige Informationen in der unteren linken Ecke oder am unteren Rand eines langen bildlauffähigen Steuerelements oder einer langen Bildlaufseite.
• Stellen Sie keine großen Textblöcke dar. Vermeiden Sie unnötigen Text. Verwenden Sie die invertierte Pyramide Präsentationsformat.
• Wenn Sie etwas tun, um die Aufmerksamkeit der Benutzer zu wecken, stellen Sie sicher, dass die Aufmerksamkeit garantiert ist.

Arbeiten Sie nach Möglichkeit mit diesem Modell zusammen, anstatt es zu bekämpfen; es gibt jedoch Situationen, in denen Sie bestimmte UI-Elemente hervorheben oder die Betonung aufheben müssen.

So heben Sie primäre UI-Elemente hervor:

• Platzieren Sie primäre UI-Elemente im Scanpfad.

• Platzieren Sie eine beliebige Benutzeroberfläche, um eine Aufgabe in der oberen linken Ecke oder in der oberen Mitte zu initiieren.

• Platzieren Sie Commit-Schaltflächen in der unteren rechten Ecke.

• Platzieren Sie die verbleibende primäre Benutzeroberfläche in der Mitte.

• Verwenden Sie Steuerelemente, die Aufmerksamkeit wecken, z. B. Befehlsschaltflächen, Befehlslinks und Symbole.

• Verwenden Sie prominenten Text, einschließlich großem Text und fett formatiertem Text.

• Benutzer von Text müssen in interaktiven Steuerelementen oder mit Symbolen oder auf Bannernlesen.

• Verwenden Sie dunklen Text auf einem hellen Hintergrund.

• Umgeben Sie die Elemente mit großzügigem Raum.

• Sie benötigen keine Interaktion, z. B. Zeigen oder Daraufzeigen, um das Element anzuzeigen, das Sie hervorheben.

  

  Dieses Beispiel zeigt viele Möglichkeiten, primäre UI-Elemente hervorzuheben.

So heben Sie sekundäre UI-Elemente auf:

• Platzieren Sie sekundäre UI-Elemente außerhalb des Scanpfads.

• Platzieren Sie alles, was Benutzer normalerweise nicht in der unteren linken Ecke oder unten im Fenster sehen müssen.

• Verwenden Sie Steuerelemente, die keine Aufmerksamkeit wecken, z. B. Aufgabenlinks anstelle von Befehlsschaltflächen.

• Verwenden Sie normalen oder grauen Text.

• Verwenden Sie hellen Text auf einem dunklen Hintergrund. Weißer Text auf einem dunkelgrauen oder blauen Hintergrund funktioniert gut.

• Umgeben Sie die Elemente mit minimalem Platz.

• Erwägen Sie die Verwendung progressiven Offenlegung, um sekundäre UI-Elemente auszublenden.

  

  Dieses Beispiel zeigt viele Möglichkeiten, sekundäre UI-Elemente zu deaktivieren.

Effektive Nutzung des Bildschirmbereichs

Die effektive Verwendung des Bildschirmbereichs erfordert, dass Sie mehrere Faktoren ausgleichen: Zu viel Platz verwenden und ein Fenster fühlt sich verschwenderisch und sogar schwierig, basierend auf Fitts'Lawzu verwenden.

Falsch:

In diesem Beispiel ist das Fenster zu groß für den Inhalt.

Verwenden Sie dagegen zu wenig Platz, und ein Fenster fühlt sich krampfhaft, unangenehm und einschüchternd an, und schwierig zu verwenden, wenn es Scrollen und andere Manipulationen erfordert.

Falsch:

In diesem Beispiel ist das Fenster zu klein für den Inhalt.

Während die kritische Benutzeroberfläche in die mindest unterstützte effektive Auflösungpassen muss, gehen Sie nicht davon aus, dass die Verwendung des Bildschirmbereichs effektiv bedeutet, dass Fenster so klein wie möglich sein sollten. Effektives Layout hat Respekt vor offenem Raum und versucht nicht, alles in den kleinsten möglichen Raum zu gliedern. Moderne Displays verfügen über einen erheblichen Bildschirmbereich und es ist sinnvoll, diesen Platz effektiv zu nutzen, wenn Sie können. Aus diesem Grund ist es nicht zu wenig, sondern zu viel Platz auf dem Bildschirm zu verwenden. Dadurch fühlen sich Ihre Fenster leichter und näherungsfähiger.

Sie wissen, dass ein Layout den Bildschirmbereich effektiv verwendet, wenn:

• Fensterbereiche und Steuerelemente müssen nicht geändert werden, damit sie verwendet werden können. Wenn benutzer zuerst die Größe eines Fensters, eines Bereichs oder eines Steuerelements ändern, ist die Größe falsch.
• Daten werden nicht abgeschnitten. Die meisten Daten in Listenansichten und Strukturansichten weisen keine Auslassungspunkte auf, und Daten in anderen Steuerelementen werden nicht abgeschnitten, es sei denn, die Datenlänge ist ungewöhnlich groß. Daten, die gelesen werden müssen, um eine Aufgabe auszuführen, sollten nicht abgeschnitten werden.
• Die Fenster und Steuerelemente werden entsprechend angepasst, um unnötige Bildläufe zu vermeiden. Es gibt nur wenige horizontale Bildlaufleisten und keine unnötigen vertikalen Bildlaufleisten.
• Steuerelemente verwenden meist ihre Standardgrößen. Versuchen Sie, die Anzahl der Steuerelementgrößen zu verringern, indem Sie beispielsweise nur eine oder zwei Befehlsschaltflächenbreiten auf einer Oberfläche verwenden.
• Die Ui-Oberfläche ist ausgeglichen. Es gibt keine großen nicht verwendeten Bildschirmbereiche.

Wählen Sie Fenstergrößen aus, die nur groß genug sind, um ihren Zweck gut zu erfüllen. (Und wenn die Größe des Fensters geändert werden kann, gilt dieses Ziel für seine Standardgröße.) Eine Kombination aus abgeschnittenen Daten oder Bildlaufleisten und viel verfügbarer Bildschirmfläche ist ein deutliches Zeichen für ein unwirksames Layout.

Größe des Steuerelements

Normalerweise besteht der erste Schritt bei der effektiven Verwendung des Bildschirmbereichs darin, die richtige Größe für die verschiedenen UI-Elemente zu bestimmen. Lesen Sie die Steuerelementgrößestabelle sowie die empfohlene Größenanpassung in den spezifischen Steuerelementrichtlinienartikeln.

Fitts' Gesetz besagt, dass das kleinere Ziel ist, desto länger dauert es, um es mit der Maus zu erwerben. Darüber hinaus sollten Sie bei Computern, die Windows Tablet- und Touch-Technologie verwenden, tatsächlich ein Stift oder der Finger des Benutzers sein. Daher sollten Sie alternative Eingabegeräte bei der Bestimmung von Größen für kleine Steuerelemente in Betracht ziehen. Eine Steuerelementgröße von relativen Pixeln von 16 x 16 ist eine gute Mindestgröße für jedes Eingabegerät. Im Gegensatz dazu sind die standardmäßigen relativen 15 x 9 Pixel-Drehsteuerungsschaltflächen zu klein, um effektiv von Stiften verwendet zu werden.

Abstand

Die Bereitstellung großzügiger (aber nicht übermäßiger) Platz macht das Layout bequemer und einfacher zu analysieren. Effektiver Platz ist kein nicht verwendeter Platz, es spielt eine wichtige Rolle bei der Verbesserung der Fähigkeit, dass Benutzer scannen können, und fügt auch zur visuellen Attraktivität Ihres Designs hinzu. Informationen zu Richtlinien finden Sie in der Tabelle "Abstand".

Bei Computern, die Windows Tablet- und Touchtechnologie verwenden, kann die "Maus" tatsächlich ein Stift oder der Finger des Benutzers sein. Die Zielbestimmung ist schwieriger, wenn Sie einen Stift oder Finger als Zeigegerät verwenden, was dazu führt, dass Benutzer außerhalb des beabsichtigten Ziels tippen. Wenn interaktive Steuerelemente sehr nahe beieinander platziert werden, aber nicht tatsächlich berühren, können Benutzer auf inaktiven Platz zwischen den Steuerelementen klicken. Da das Klicken auf den inaktiven Bereich kein Ergebnis oder visuelles Feedback hat, sind Die Benutzer oft unsicher, was schief gegangen ist. Wenn kleine Steuerelemente zu eng angeordnet sind, muss der Benutzer mit Genauigkeit tippen, um das Tippen auf das falsche Objekt zu vermeiden. Um diese Probleme zu beheben, sollten die Zielbereiche interaktiver Steuerelemente entweder berühren oder mindestens 3 DLUs (5 relative Pixel) zwischen ihnen haben.

Sie wissen, dass ein Layout einen guten Abstand hat, wenn:

• Insgesamt fühlt sich die UI-Oberfläche wohl und fühlt sich nicht eng an.
• Der Raum erscheint einheitlich und ausgeglichen.
• Verwandte Elemente sind eng zusammen und nicht verwandte Elemente sind relativ weit auseinander.
• Es gibt keinen leeren Abstand zwischen Steuerelementen, die zusammen sein sollen, z. B. Symbolleistenschaltflächen.

Fenster in der Größe ändern

Veränderbare Fenster sind auch ein Faktor bei der effektiven Verwendung des Bildschirmbereichs. Einige Fenster bestehen aus festen Inhalten und profitieren nicht davon, dass die Größe geändert werden kann, aber Fenster mit verkleinerbaren Inhalten sollten die Größe ändern. Der Grund, warum Benutzer die Größe eines Fensters ändern, besteht natürlich darin, den zusätzlichen Bildschirmbereich zu erweitern, sodass der Inhalt entsprechend erweitert werden sollte, indem mehr Platz für die UI-Elemente bereitgestellt wird, die es benötigen. Windows mit dynamischen Inhalten, Dokumenten, Bildern, Listen und Bäumen profitiert am meisten von fensterveränderbaren Fenstern.

In diesem Beispiel ändert die Größe des Fensters die Größe des Listenansichtssteuerelements.

Das heißt, Fenster können zu breit gestreckt werden. Beispielsweise werden viele Systemsteuerungsseiten unübersichtlich, wenn der Inhalt größer als 600 relative Pixel ist. In diesem Fall ist es besser, die Größe des Inhaltsbereichs nicht über diese maximale Breite hinaus zu ändern oder den Ursprung des Inhalts zu ändern, da die Größe des Fensters größer ist. Behalten Sie stattdessen eine maximale Breite und einen festen oberen linken Ursprung bei.

Text wird schwer zu lesen, wenn die Zeilenlänge zunimmt. Ziehen Sie bei Textdokumenten eine maximale Zeilenlänge von 80 Zeichen in Betracht, damit der Text leicht lesbar ist. (Zeichen umfassen Buchstaben, Satzzeichen und Leerzeichen.)

Falsch:

In diesem Beispiel erleichtert die lange Textlänge das Lesen.

Schließlich müssen veränderbare Fenster auch den Bildschirmbereich effektiv verwenden, wenn sie kleiner gemacht werden, indem sie die Größe von Inhalten verkleinert und Platz aus UI-Elementen entfernt, die ohne sie effektiv funktionieren können. Irgendwann wird das Fenster oder seine UI-Elemente zu klein, um verwendbar zu sein, sodass ihnen eine Mindestgröße zugewiesen werden sollte oder einige Elemente vollständig entfernt werden sollten.

In diesem Beispiel weist der Bereich eine Mindestgröße auf.

Einige Programme profitieren von der Verwendung einer völlig anderen Präsentation, um den Inhalt in kleineren Größen nutzbar zu machen.

In diesem Beispiel ändert Windows Media Player sein Format, wenn das Fenster für das Standardformat zu klein wird.

Brennpunkt

Ein Layout hat den Fokus, wenn es einen offensichtlichen Ort gibt, an dem zuerst gesucht werden kann. Der Fokus ist wichtig, um Benutzern zu zeigen, wo Sie mit dem Scannen Ihres Fensters oder ihrer Seite beginnen. Ohne klaren Fokus wird das Auge des Benutzers ziellos wandern. Der Schwerpunkt sollte etwas Wichtiges sein, das die Benutzer schnell finden und verstehen müssen und die größte visuelle Hervorhebung haben sollten. Die obere linke Ecke ist der natürliche Fokus für die meisten Fenster.

Es sollte nur ein Schwerpunkt liegen. Genau wie im realen Leben kann sich das Auge nur auf eine Sache gleichzeitig konzentrieren, die Benutzer können sich nicht auf mehrere Orte gleichzeitig konzentrieren.

Um ein UI-Element zum Mittelpunkt zu machen, können Sie es visuell hervorheben, indem Sie:

• Platzieren Sie sie im oberen linken oder oberen Mittleren Teil der Oberfläche.
• Verwendung interaktiver Steuerelemente, die wichtig und leicht verständlich sind.
• Verwenden von prominentem Text, z. B. einer Hauptanweisung.
• Festlegen der Standardauswahl und des anfänglichen Eingabefokus für Steuerelemente.
• Platzieren der Steuerelemente in einem anderen farbigen Hintergrund

Betrachten Sie die Windows-Suche. Der Fokus für Windows Search sollte das Suchfeld sein, da es sich um den Ausgangspunkt für die Aufgabe handelt. Es befindet sich jedoch in der oberen rechten Ecke, um mit der standardmäßigen Suchfeldplatzierung konsistent zu sein. Das Suchfeld hat den Eingabefokus, aber angesichts seiner Position im Scanpfad reicht dieser Hinweis allein nicht aus.

Um dieses Problem zu beheben, gibt es eine prominente Anweisung im oberen mittleren Teil des Fensters, um Benutzer an die richtige Position zu leiten.

akzeptabel:

In diesem Beispiel leitet eine prominente Anweisung im oberen mittleren Teil des Fensters Benutzer zum Suchfeld weiter.

Ohne die Anweisungen hätte das Fenster keinen offensichtlichen Fokus.

Falsch:

Dieses Beispiel hat keinen offensichtlichen Fokus. Benutzer wissen nicht, wo sie suchen sollen.

Wenn Sie einem UI-Element visuelle Hervorhebung verleihen, stellen Sie sicher, dass die Aufmerksamkeit garantiert ist. Im vorherigen falschen Windows Search-Beispiel befindet sich die hervorgehobene Schaltfläche "Alle" in der oberen linken Ecke und weist die visuellste Hervorhebung auf, ist aber nicht der beabsichtigte Fokus. Benutzer sehen sich diese Schaltfläche möglicherweise nicht mehr an, um herauszufinden, was damit zu tun ist.

Falsch:

Ohne die prominente Anweisung als Fokuspunkt ist die hervorgehobene Schaltfläche "Alle" ein unbeabsichtigter Fokuspunkt.

Fluss

Ein Layout hat Einen Fluss, wenn Benutzer reibungslos und natürlich durch einen klaren Pfad durch die Oberfläche geführt werden, um UI-Elemente in der für ihre Verwendung geeigneten Reihenfolge zu finden. Sobald Benutzer den Fokus identifizieren, müssen sie bestimmen, wie die Aufgabe abgeschlossen werden soll. Die Platzierung der UI-Elemente vermittelt ihre Beziehung und sollte die Schritte zum Ausführen der Aufgabe spiegeln. In der Regel bedeutet dies, dass die Schritte des Vorgangs natürlich in einer von links nach rechts und von oben nach unten angeordneten Reihenfolge (in westlichen Kulturen) fließen sollten.

Sie wissen, dass ein Layout einen guten Fluss hat, wenn:

• Die Platzierung der UI-Elemente spiegelt die Schritte wieder, die Benutzer zum Ausführen der Aufgabe benötigen.
• UI-Elemente, die eine Aufgabe initiieren, befinden sich in der oberen linken Ecke oder in der oberen Mitte.
• UI-Elemente, die eine Aufgabe abschließen, befinden sich in der unteren rechten Ecke.
• Verwandte UI-Elemente sind zusammen; Nicht verknüpfte Elemente sind getrennt.
• Erforderliche Schritte befinden sich im Hauptfluss.
• Optionale Schritte befinden sich außerhalb des Hauptflusses, möglicherweise durch Verwendung eines geeigneten Hintergrunds oder einer progressiven Offenlegung.
• Häufig verwendete Elemente werden vor selten verwendeten Elementen im Scanpfad angezeigt.
• Benutzer wissen immer, was als Nächstes zu tun ist. Es gibt keine unerwarteten Sprünge oder Unterbrechungen im Aufgabenfluss.

Falsch:

In diesem Beispiel wissen Benutzer nicht, was als Nächstes zu tun ist. Es gibt unerwartete Sprünge und Unterbrechungen im Aufgabenfluss.

Richtig:

In diesem Beispiel spiegelt die Darstellung der UI-Elemente die Schritte zum Ausführen der Aufgabe wieder.

Gruppierung

Ein Layout hat Gruppierung, wenn logisch verwandte UI-Elemente eine klare visuelle Beziehung haben. Gruppen sind wichtig, da benutzer eine Gruppe verwandter Elemente einfacher verstehen und sich darauf konzentrieren können, als die Elemente einzeln. Gruppen machen ein Layout einfacher und einfacher zu analysieren.

Sie können die Gruppierung auf folgende Weise anzeigen (bei zunehmender Schwere):

• Layout. Sie können verwandte Steuerelemente nebeneinander gruppieren und zusätzlichen Abstand zwischen nicht verknüpften Steuerelementen platzieren.

  

  In diesem Beispiel wird das Layout allein verwendet, um Steuerelementbeziehungen anzuzeigen.

• Trennzeichen. Ein Trennzeichen ist eine horizontale oder vertikale Linie, die eine Gruppe von Steuerelementen vereint. Trennzeichen bieten ein einfacheres, übersichtlicheres Aussehen. Im Gegensatz zu Gruppenfeldern funktionieren sie jedoch am besten, wenn sie sich über die gesamte Oberfläche erstrecken.

  

  In diesem Beispiel werden beschriftete Trennzeichen verwendet, um Steuerelementbeziehungen anzuzeigen.

• Aggregatoren. Ein Aggregator ist eine Grafik, die eine visuelle Beziehung zwischen stark verwandten Steuerelementen erstellt.

  

  In diesem Beispiel wird ein Begrenzungsaggregator verwendet, um die Beziehung zwischen den Steuerelementen hervorzuheben und sie als einzelnes Steuerelement anstelle von acht zu fühlen.

• Gruppenfelder. Ein Gruppenfeld ist ein rechteckiger Rahmen, der einen Satz verwandter Steuerelemente umgibt.

  

  In diesem Beispiel wird ein Gruppenfeld umgeben und beschriftet eine Reihe verwandter Steuerelemente.

• Hintergründe. Sie können Hintergründe verwenden, um verschiedene Arten von Inhalten hervorzuheben oder zu deaktivieren.

  

  In diesem Beispiel wird der Aufgabenbereich der Systemsteuerung verwendet, um verwandte Aufgaben und Systemsteuerungselemente zu gruppieren.

  Um visuelle Unübersichtlichkeit zu vermeiden, ist die leichteste Gewichtsgruppierung, die die Arbeit gut macht, die beste Wahl. Weitere Informationen finden Sie unter Gruppenfelder, Registerkarten, Trennzeichen und Hintergründe.

Unabhängig von der Gruppierungsformatvorlage können Sie das Einrücken verwenden, um die Beziehung der Steuerelemente in einer Gruppe anzuzeigen. Steuerelemente, die Peers miteinander sind, sollten linksbündig ausgerichtet sein, und abhängige Steuerelemente werden 12 DLUs oder 18 relative Pixel eingezogen.

Abhängige Steuerelemente werden 12 DLUS oder 18 relative Pixel eingezogen. Dies ist der Abstand zwischen Kontrollkästchen und Optionsfeldern von ihren Beschriftungen.

Sie wissen, dass ein Layout eine gute Gruppierung hat, wenn:

• Das Fenster oder die Seiten verfügen über höchstens 7 Gruppen.
• Der Zweck jeder Gruppe ist offensichtlich.
• Die Beziehung von Steuerelementen innerhalb jeder Gruppe ist offensichtlich, insbesondere die Abhängigkeit von Steuerelementen.
• Die Gruppierung vereinfacht den Inhalt, anstatt ihn komplexer zu machen.

Ausrichtung

Die Ausrichtung ist die koordinierte Platzierung von UI-Elementen. Die Ausrichtung ist wichtig, da inhalte leichter zu scannen und die Wahrnehmung der visuellen Komplexität des Benutzers beeinflussen.

Es gibt mehrere Ziele, die Beim Bestimmen der Ausrichtung berücksichtigt werden müssen:

• Erleichterte horizontale Überprüfung. Benutzer können horizontal lesen und verwandte Elemente nebeneinander finden, ohne ungünstige Lücken.
• Erleichterte vertikale Überprüfung. Benutzer können Spalten verwandter Elemente scannen und sofort finden, wonach sie suchen, mit minimaler horizontaler Augenbewegung.
• Minimale visuelle Komplexität. Benutzer nehmen an, dass ein Layout visuell komplex ist, wenn es unnötige vertikale Ausrichtungsrasterlinien aufweist.

Horizontale Ausrichtung

Linksausrichtung

Aufgrund der Leserichtung von links nach rechts eignet sich die linksbündige Ausrichtung für die meisten Inhalte gut. Die linke Ausrichtung erleichtert das vertikale Scannen von Spaltendaten.

Rechtsausrichtung

Die richtige Ausrichtung ist die beste Wahl für numerische Daten, insbesondere Spalten numerischer Daten. Die rechte Ausrichtung eignet sich auch gut für Commit-Schaltflächen sowie steuerelemente, die am rechten Fensterrand ausgerichtet sind.

In diesem Beispiel wird das Steuerelement für die progressive Offenlegung der erweiterten Suche rechtsbündig ausgerichtet, da es am rechten Fensterrand platziert wird.

Zentrieren

Die zentrierte Ausrichtung ist am besten für Situationen reserviert, in denen links- oder rechtsbündig oder unausgewogen angezeigt wird.

In diesem Beispiel wird das Media Player-Steuerelement zentriert, um ein ausgewogenes Erscheinungsbild zu verleihen.

Zentrieren Sie den Fensterinhalt nicht, um Platz zu füllen.

Falsch:

In diesem Beispiel wird der Inhalt in einem fenster mit geänderter Größe falsch zentriert, um Platz zu füllen.

Vertikale Ausrichtung

element tops

Aufgrund der Lesereihenfolge von oben nach unten eignet sich die obere Ausrichtung für die meisten Inhalte gut. Die obere Ausrichtung erleichtert das horizontale Scannen von UI-Elementen.

Textbasislinien

Wenn Sie Steuerelemente vertikal an Text ausrichten, richten Sie die Textbasislinien aus, um einen reibungslosen horizontalen Lesefluss zu ermöglichen.

Richtig:

Falsch:

Im richtigen Beispiel werden das Steuerelement und dessen Beschriftung vertikal von ihren Textbasislinien ausgerichtet.

Sie wissen, dass ein Layout eine gute Ausrichtung hat, wenn:

• Es ist einfach, sowohl horizontal als auch vertikal zu scannen.
• Es hat ein einfaches visuelles Erscheinungsbild.

Beschriftungsausrichtung

Die allgemeinen Ausrichtungsregeln gelten für Steuerelementbeschriftungen, aber es ist ein häufiges Problem, das besondere Aufmerksamkeit verdient. Die Ausrichtung von Bezeichnungen hat folgende Ziele:

• Erleichterte vertikale Überprüfung, um das richtige Steuerelement zu finden.
• Erleichterte horizontale Überprüfung, um Beschriftungen ihren Steuerelementen zuzuordnen.
• Einfache Lokalisierung, Behandlung von Bezeichnungen, die sich in verschiedenen Sprachen unterscheiden.
• Funktioniert gut mit einer Mischung verschiedener Etikettenlängen.
• Ermöglicht eine effiziente Nutzung des verfügbaren Platzes, ohne abgeschnittenen Text zu vermeiden.

Das Gesamtziel besteht darin, die Menge der Augenbewegungen zu reduzieren, die erforderlich sind, um zu finden, wonach Benutzer wahrscheinlich suchen, aber die Art der Steuerelemente und die gesuchten Benutzer hängen vom Kontext ab.

Es gibt vier gängige Bezeichnungsplatzierungs- und Ausrichtungsstile, die jeweils ihre Vorteile haben:

• Links ausgerichtete Beschriftungen über Steuerelementen
• Linksbündige Beschriftungen links neben Steuerelementen
• Linksbündige Beschriftungen links neben Steuerelementen, auf links geknackte Steuerelemente
• Rechts ausgerichtete Beschriftungen links von Steuerelementen

Linksbündige Beschriftungen über Steuerelementen

Diese Formatvorlage ist am einfachsten zu lokalisieren, da das Layout nicht von der Länge der Beschriftungen abhängt, aber der vertikalste Platz benötigt.

Diese Formatvorlage nimmt den vertikalsten Platz ein, ist jedoch am einfachsten zu lokalisieren. Es ist eine bessere Wahl für die Bezeichnung hauptsächlich interaktiver Steuerelemente.

Am besten geeignet, wenn:

• Die beschrifteten Steuerelemente sind interaktiv (nicht nur Text).
• Die Benutzeroberfläche wird lokalisiert. Dieser Stil bietet oft Platz, um die Länge des Etiketts zu verdoppeln oder sogar zu dreifachen.
• Die Benutzeroberfläche verwendet eine feste Layouttechnologie (z. B. Win32).
• Es gibt zehn oder weniger Steuerelemente. Mit mehr Steuerelementen sind die Bezeichnungen schwer zu scannen.
• Es ist ausreichend vertikaler Platz vorhanden, um die Etiketten aufzunehmen.
• Das Layout muss frei formatiert sein, nicht nur Spalten.

Linksbündige Beschriftungen links neben Steuerelementen

Diese Formatvorlage ist am einfachsten, vertikal zu scannen und funktioniert auch gut, wenn Bezeichnungen stark in der Länge unterscheiden, aber es ist schwieriger, die Beschriftung dem Steuerelement zuzuordnen. Diese Formatvorlage kann bei Bedarf mehrzeilige Bezeichnungen verwenden.

Dieser Stil funktioniert gut. Es gibt jedoch zwei Spalten, aber visuell sieht es so aus, als ob es vier gibt, sodass die Daten komplexer erscheinen.

Am besten geeignet, wenn:

• Benutzer werden wahrscheinlich vertikal scannen, um bestimmte Bezeichnungen zu finden.
• Benutzer lesen die Bezeichnungen und Steuerelemente wahrscheinlich nicht links nach rechts, von oben nach unten.
• Es gibt ausreichend horizontalen Platz, um die Beschriftungen aufzunehmen.
• Die Etiketten variieren erheblich in der Länge.
• Es gibt viele Steuerelemente, z. B. mit Formularen.
• Es gibt nur wenige Spalten. Die Beschriftungen und Steuerelemente werden visuell als zwei einzelne Spalten angezeigt.

Linksbündige Beschriftungen links neben Steuerelementen, die auf der linken

Diese Formatvorlage erleichtert das vertikale Scannen der Etiketten sowie der Etiketten und Steuerelemente horizontal und ist sehr effizient. aber es ist schwieriger, die Steuerelemente vertikal zu scannen. Die Steuerelemente sind richtig gerechtfertigt, um den verfügbaren Platz vollständig zu nutzen.

Diese Formatvorlage ist kompakt und einfach zu lesen, aber es ist schwierig, Steuerelemente vertikal zu scannen.

Am besten geeignet, wenn:

• Die Benutzeroberfläche verwendet eine variable Layouttechnologie (z. B. Windows Presentation Foundation).
• Benutzer werden wahrscheinlich vertikal scannen, um bestimmte Bezeichnungen zu finden.
• Benutzer lesen die Bezeichnungen und Steuerelemente wahrscheinlich links nach rechts, von oben nach unten.
• Benutzer werden die Steuerelemente wahrscheinlich nicht vertikal scannen.
• Der Steuerelementtext variiert in der Länge und würde wahrscheinlich abgeschnitten, wenn eine andere Formatvorlage verwendet wurde.
• Die Steuerelemente sind schreibgeschützt, z. B. schreibgeschützte Textfelder. Bei anderen Steuerelementen sieht diese Ausrichtung schlampig aus. Die Steuerelemente können jedoch beim Klicken bearbeitet werden.
• Es gibt viele Spalten, aber nur wenige Steuerelemente in einer Spalte.

Rechts ausgerichtete Beschriftungen links neben Steuerelementen

Diese Formatvorlage ist am einfachsten, horizontal zu lesen, um die Bezeichnungen ihren Steuerelementen zuzuordnen, aber es ist schwierig, die Bezeichnungen vertikal zu scannen und funktioniert nicht gut, wenn "labelsList" mit eingerückten Bezeichnungen und Steuerelementen stark in der Länge unterschiedlich ist.

Diese Formatvorlage ermöglicht ein einfaches vertikales Scannen der Steuerelemente, macht es aber schwierig, die Beschriftungen vertikal zu scannen.

Am besten geeignet, wenn:

• Benutzer lesen die Bezeichnungen und Steuerelemente wahrscheinlich links nach rechts, von oben nach unten.
• Benutzer werden wahrscheinlich nicht vertikal scannen, um bestimmte Bezeichnungen zu finden, möglicherweise weil:
  • Es gibt nur wenige Steuerelemente.
  • Die Etiketten sind bekannt.
  • Die Steuerelemente sind meist selbsterklärend und sind selten leer (möglicherweise mit Standardwerten, um leere Steuerelemente zu verhindern).
• Es gibt ausreichend horizontalen Platz, um die Beschriftungen aufzunehmen.
• Die Etiketten variieren nicht erheblich in der Länge.
• Es gibt viele Spalten. Die Beschriftungen und Steuerelemente werden visuell als einzelne Spalte angezeigt.

Bevor Sie jedoch eine dieser Stile übernehmen, sollten Sie zwei weitere Faktoren berücksichtigen:

• Bevorzugen Sie eine Formatvorlage, die Sie konsistent in Ihrem Programm verwenden können.
• Links ausgerichtete Bezeichnungen über Steuerelementen links von Steuerelementen sind die am häufigsten verwendeten Formatvorlagen, daher sollten sie bevorzugt werden.

Gleichgewicht

Ein Fenster oder eine Seite weist ein Gleichgewicht auf, wenn der Inhalt gleichmäßig über die Oberfläche verteilt angezeigt wird. Wenn die Oberfläche physisch die gleiche Gewichtung wie visuell aufweist, würde ein ausgewogenes Layout nicht auf eine Seite kippen.

Das häufigste Gleichgewichtsproblem besteht darin, auf der linken Seite eines Fensters oder einer Seite zu viel Inhalt zu haben. Sie können ein Gleichgewicht auf folgende Weise erstellen:

• Verwenden Sie größere Ränder auf der linken Seite als die rechte Seite.
• Platzieren von UI-Elementen, die zum Ausführen einer Aufgabe auf der rechten Seite verwendet werden.
• Platzieren von UI-Elementen, die während der gesamten Aufgabe in der Mitte verwendet werden.
• Längenänderungsgröße oder mehrzeilige Steuerelemente.
• Strategische Verwendung der Mittelausrichtung.

Dieses gut ausgewogene Seitenlayout des Assistenten zeigt einen größeren linken Rand als rechts an, um das Gleichgewicht zu verbessern.

Wenn diese Techniken kein Gleichgewicht erzielen, sollten Sie die Breite des Fensters oder der Seite verringern, um den Inhalt besser abzugleichen.

Für größenveränderbare Oberflächen zentrieren Sie nicht nur Inhalte, um ein Gleichgewicht zu erzielen. Behalten Sie stattdessen einen festen linken oberen Ursprung bei, definieren Sie einen maximalen Oberflächenbereich, und ausgleichen Sie den Inhalt innerhalb des verwendeten Raums.

Gitter

Ein Raster ist ein unsichtbares zugrunde liegendes Ausrichtungssystem. Raster können symmetrisch sein, aber asymmetrische Raster funktionieren genauso gut. Wenn sie von einem einzelnen Fenster oder einer einzelnen Seite verwendet werden, helfen Raster beim Organisieren von Inhalten innerhalb einer Oberfläche. Bei der Wiederverwendung erstellen Raster ein einheitliches Layout über Oberflächen hinweg.

Die Anzahl der Gitternetzlinien wirkt sich auf die Wahrnehmung der visuellen Komplexität aus. Ein Layout mit weniger Gitternetzlinien wird einfacher als ein Layout mit mehr Gitternetzlinien angezeigt.

visuell komplex:

visuell einfach:

Unnötige Gitternetzlinien schaffen visuelle Komplexität.

Sie wissen, dass ein Layout Raster effektiv verwendet, wenn:

• Windows oder Seiten mit ähnlichen Inhalten oder Funktionen weisen ein ähnliches Layout auf.
• Wiederholte Designelemente werden an ähnlichen Positionen über Fenster und Seiten hinweg angezeigt.
• Es gibt keine unnötigen vertikalen und horizontalen Ausrichtungsrasterlinien.

Visuelle Einfachheit

Die visuelle Einfachheit ist die Wahrnehmung, dass ein Layout nicht komplizierter ist, als es sein muss.

Sie wissen, dass ein Layout visuelle Einfachheit hat, wenn es:

• Entfernt unnötige Ebenen von Fensterchrom.
• Stellt den Inhalt mit höchstens sieben leicht identifizierbaren Gruppen dar.
• Verwendet einfache Gruppierung, z. B. Layout- und Trennzeichen anstelle von Gruppenfeldern.
• Verwendet einfache Steuerelemente, z. B. Links anstelle von Befehlsschaltflächen für sekundäre Befehle, und Dropdownlisten anstelle von Listen für Auswahlmöglichkeiten.
• Reduziert die Anzahl der vertikalen und horizontalen Ausrichtungsrasterlinien.
• Reduziert die Anzahl der Steuerelementgrößen, indem beispielsweise nur eine oder zwei Befehlsschaltflächenbreiten auf einer Oberfläche verwendet werden.
• Verwendet die progressive Offenlegung, um UI-Elemente auszublenden, bis sie benötigt werden.
• Verwendet ausreichend Platz, damit sich das Fenster oder die Seite nicht verkrampft fühlt.
• Passt die Größe von Fenstern und Steuerelementen an, um unnötige Bildläufe zu vermeiden.
• Verwendet eine einzelne Schriftart mit einer kleinen Anzahl von Größen und Textfarben.

Wenn ein Layoutelement generell eliminiert werden kann, ohne die Effektivität der Benutzeroberfläche zu beeinträchtigen, sollte es wahrscheinlich sein.

Leitlinien

Bildschirmauflösung und DPI

• Unterstützen Sie die minimale effektive Windows-Auflösung von 800 x 600 Pixeln. Für kritische UIs, die im abgesicherten Modus funktionieren müssen, unterstützen Sie eine effektive Auflösung von 640 x 480 Pixeln. Achten Sie darauf, den von der Taskleiste verwendeten Platz zu berücksichtigen, indem Sie 48 vertikale relative Pixel für Fenster reservieren, die mit der Taskleiste angezeigt werden.
• Optimieren Sie veränderbare Fensterlayouts für eine effektive Auflösung von 1024 x 768 Pixeln. Ändern Sie die Größe dieser Fenster für niedrigere Bildschirmauflösungen automatisch so, dass sie weiterhin funktionsfähig ist.
• Testen Sie Ihre Fenster in 96 Punkten pro Zoll (dpi) (bei 800x600 Pixel), 120 DPI (bei 1024 x768 Pixel) und 144 DPI (bei 1200x900 Pixel) Modi. Überprüfen Sie auf Layoutprobleme, z. B. das Ausschneiden von Steuerelementen, Text und Fenstern sowie das Strecken von Symbolen und Bitmaps.
• Optimieren Sie für Programme mit Touch- und mobilen Verwendungsszenarien 120 dpi. Bildschirme mit hohem DPI-Wert sind derzeit auf Touch- und mobilen PCs verbreitet.

Fenstergröße

• Wählen Sie eine Standardfenstergröße aus, die für den Inhalt geeignet ist. Sie haben keine Angst, größere Anfangsfenstergrößen zu verwenden, wenn Sie den Platz effektiv nutzen können.
• Verwenden Sie ein ausgewogenes Seitenverhältnis zwischen Höhe und Breite. Ein Seitenverhältnis zwischen 3:5 und 5:3 wird bevorzugt, obwohl für Meldungsdialogfelder (z. B. Fehler und Warnungen) ein Seitenverhältnis von 1:3 verwendet werden kann.
• Verwenden Sie veränderbare Fenster, wenn dies praktisch ist, um Bildlaufleisten und abgeschnittene Daten zu vermeiden. Windows mit dynamischen Inhalten, Dokumenten, Bildern, Listen und Bäumen profitiert am meisten von fensterveränderbaren Fenstern.
• Für Textdokumente sollten Sie eine maximale Zeilenlänge von 80 Zeichen berücksichtigen, damit der Text leicht lesbar ist. (Zeichen umfassen Buchstaben, Satzzeichen und Leerzeichen.)
• Fenster mit fester Größe:
  • Fenster mit fester Größe müssen vollständig sichtbar und angepasst werden, damit sie in den Arbeitsbereich passen.
• Fenstergröße ändern:

  • Verkleinerbare Fenster sind möglicherweise für höhere Auflösungen optimiert, werden jedoch nach Bedarf zur Anzeige bis zur tatsächlichen Bildschirmauflösung verkleinert.

  • Progressive größere Fenstergrößen müssen schrittweise weitere Informationen anzeigen. Stellen Sie sicher, dass mindestens ein Fensterteil oder Steuerelement über veränderbare Inhalte verfügt.

  • Lassen Sie den oberen linken Ursprung des Inhalts fest, wenn die Größe des Fensters geändert wird. Verschieben Sie den Ursprung nicht, um den Inhalt auszugleichen, wenn sich die Fenstergröße ändert.

  • Legen Sie eine maximale Inhaltsgröße fest, wenn der Inhalt zu breit gestreckt werden kann. Wenn der Inhalt unübersichtlich wird, ändern Sie die Größe des Inhaltsbereichs nicht über die maximale Breite hinaus, oder ändern Sie den Ursprung des Inhalts, wenn die Größe des Fensters vergrößert wird. Behalten Sie stattdessen eine maximale Breite und einen festen oberen linken Ursprung bei.

  • Legen Sie eine Mindestfenstergröße fest, wenn eine Größe vorhanden ist, unter der der Inhalt nicht mehr verwendet werden kann. Legen Sie für größenveränderbare Steuerelemente mindestgrößerbare Elementgrößen auf ihre kleinsten funktionalen Größen fest, z. B. minimale funktionale Spaltenbreiten in Listenansichten. Optionale UI-Elemente sollten vollständig entfernt werden.

  • Erwägen Sie, die Präsentation zu ändern, um den Inhalt in kleineren Größen nutzbar zu machen.

    

    In diesem Beispiel ändert Windows Media Player sein Format, wenn das Fenster für das Standardformat zu klein wird.

Steuerelementgröße

• Stellen Sie alle interaktiven Steuerelemente mindestens relativ 16 x 16 Pixel bereit. Dies funktioniert gut für alle Eingabegeräte, einschließlich Windows Tablet und Touch-Technologie.

• Größensteuerelemente, um abgeschnittene Daten zu vermeiden. Kürzen Sie keine Daten ab, die gelesen werden müssen, um eine Aufgabe auszuführen. Größe von Listenansichtsspalten, um abgeschnittene Daten zu vermeiden.

• Größensteuerelemente, um unnötiges Scrollen zu vermeiden. Machen Sie Steuerelemente etwas größer, wenn dies geschieht, wird eine Bildlaufleiste entfernt. Es sollten nur wenige vertikale Bildlaufleisten und keine unnötigen horizontalen Bildlaufleisten vorhanden sein.

  

  In diesem Beispiel wird die Dropdownliste so angepasst, dass die Bildlaufleiste entfernt wird.

• Verringern Sie die Anzahl der Steuerelementgrößen auf einer Oberfläche. Verwenden Sie lieber die empfohlenen Standardsteuerelementgrößen und verwenden Sie bei Bedarf ein paar immer größere oder kleinere Steuerelemente. Versuchen Sie, eine einzelne Breite für Listenfelder und Strukturansichten und nicht mehr als drei Breiten für Befehlsschaltflächen und Dropdownlisten zu verwenden. Textfeld- und Kombinationsfeldbreiten sollten jedoch die Länge ihrer längsten oder erwarteten Eingabe vorschlagen.

  

  In diesem Beispiel wird eine Listenfeld- und Befehlsschaltflächengröße konsistent verwendet.

• Bei Steuerelementen, die basierend auf ihrem Text angepasst werden, fügen Sie für jeden Text, der lokalisiert wird, einen zusätzlichen 30 Prozent (bis zu 200 Prozent für kürzeren Text) hinzu. In dieser Richtlinie wird davon ausgegangen, dass das Layout mit englischem Text entworfen wurde. Beachten Sie auch, dass diese Richtlinie auf lokalisierten Text und nicht auf Zahlen verweist.

• Erweitern Sie statische Textsteuerelemente, Kontrollkästchen und Optionsfelder auf die maximale Breite, die in das Layout passt. Auf diese Weise wird verhindert, dass Text und Lokalisierung mit variabler Länge abgeschnitten werden.

  Falsch:

  

  In diesem Beispiel wird der Steuerelementtext unnötig abgeschnitten.

Steuern des Abstands

• Wenn Steuerelemente nicht berührt werden, verfügen Sie über mindestens 3 DLUs (5 relative Pixel) zwischen ihnen. Andernfalls können Benutzer auf inaktiven Platz zwischen den Steuerelementen klicken. Da das Klicken auf den inaktiven Bereich kein Ergebnis oder visuelles Feedback hat, sind Die Benutzer oft unsicher, was schief gegangen ist.

Platzierung

• Ordnen Sie die UI-Elemente innerhalb einer Oberfläche so an, dass sie natürlich in einer von links nach rechts, von oben nach unten angeordneten Reihenfolge (in westlichen Kulturen) fließen. Die Platzierung der UI-Elemente vermittelt ihre Beziehung und sollte die Schritte zum Ausführen der Aufgabe spiegeln.
• Platzieren Sie UI-Elemente, die eine Aufgabe in der oberen linken Ecke oder in der oberen Mitte initiieren. Weisen Sie dem UI-Element zu, das Benutzer zuerst die größte visuelle Hervorhebung betrachten sollten.
• Platzieren von UI-Elementen, die eine Aufgabe in der unteren rechten Ecke ausführen.
• Ordnen Sie verwandte UI-Elemente zusammen, und trennen Sie nicht verwandte Elemente.
• Platzieren Sie die erforderlichen Schritte im Hauptfluss.
• Optionale Schritte außerhalb des Hauptflusses platzieren, möglicherweise durch Verwendung eines geeigneten Hintergrunds oder einer progressiven Offenlegung hervorgehoben.
• Häufig verwendete Elemente vor selten verwendeten Elementen im Scanpfad platzieren.

Brennpunkt

• Wählen Sie ein einzelnes UI-Element aus, das benutzer zuerst betrachten müssen, um den Fokus zu haben. Der Schwerpunkt sollte etwas Wichtiges sein, das benutzer schnell finden und verstehen müssen.
• Platzieren Sie den Fokus in der oberen linken Ecke oder in der oberen Mitte.
• Geben Sie dem Fokus die größte visuelle Hervorhebung, wie prominenter Text, Standardauswahl oder anfänglicher Eingabefokus.

Ausrichtung

• Verwenden Sie normalerweise die linke Ausrichtung.
• Verwenden Sie die rechte Ausrichtung für numerische Daten, insbesondere Spalten numerischer Daten.
• Verwenden Sie die rechte Ausrichtung für Commit-Schaltflächen sowie Steuerelemente, die am rechten Fensterrand ausgerichtet sind.
• Verwenden Sie die zentrierte Ausrichtung, wenn eine links- oder rechtsbündige Ausrichtung unangemessen ist oder unausgewogen angezeigt wird.
• Wenn Sie Steuerelemente vertikal an Text ausrichten, richten Sie die Textbasislinien aus, um einen reibungslosen horizontalen Lesefluss zu ermöglichen.
• Informationen zur Beschriftungsausrichtung finden Sie im Abschnitt Bezeichnungsausrichtung Abschnitt in Entwurfskonzepten.

Zugänglichkeit

• Verwenden Sie das Layout nicht als einzige Möglichkeit, wichtige Informationen zu einer Benutzeroberfläche zu vermitteln. Benutzer mit Sehbehinderungen können diese Präsentation möglicherweise nicht interpretieren. Stellen Sie beispielsweise sicher, dass Steuerelemente bezeichnungen ihre Beziehung zu anderen Elementen kommunizieren.

• Betten Sie untergeordnete Steuerelemente nicht in Steuerelementbeschriftungen ein, um einen Satz oder Ausdruck zu erstellen. Solche Zuordnungen basieren ausschließlich auf dem Layout und werden von Tastaturnavigations- oder Barrierefreiheits-Hilfstechnologien nicht gut behandelt. Darüber hinaus ist diese Technik nicht lokalisierbar, da sich die Satzstruktur je nach Sprache unterscheidet.

  Falsch:

  

  In diesem Beispiel wird das Textfeld in der Beschriftung des Kontrollkästchens falsch platziert.

  Richtig:

  

  Hier wird das Textfeld nach der Beschriftung des Kontrollkästchens platziert.

• Machen Sie die Gruppierung barrierefrei. Gruppen, die von Fensterbereichen, Gruppenfeldern, Trennzeichen, Textbeschriftungen und Aggregatoren definiert werden, werden automatisch durch Barrierefreiheitshilfen behandelt. Gruppen, die nur durch Platzierung und Hintergründe definiert sind, sind jedoch nicht und müssen programmgesteuert für die Barrierefreiheit definiert werden.

Weitere Richtlinien finden Sie unter Barrierefreiheit.

Empfohlene Größenanpassung und Abstand

Steuerelementgröße

Die folgende Tabelle enthält die empfohlenen Größen (Breite x Höhe oder Höhe, wenn eine einzelne Zahl) für allgemeine UI-Elemente (für 9 Pt. Segoe UI bei 96 dpi). Die Breiten, die auf dem längsten Element in Englisch basieren, fügen 30 Prozent für die Lokalisierung (bis zu 200 Prozent für kürzeren Text) für jeden Text (aber keine Zahlen) hinzu, der lokalisiert wird.

Beispiel	Steuerung	Dialogeinheiten	Relative Pixel
	Kontrollkästchen	10	17
	Kombinationsfelder	Breite des längsten Elements + 30% x 14	Breite des längsten Elements + 30% x 23
	Befehlsschaltflächen	50 x 14	75 x 23
	Befehlslinks	25 (eine Zeile) oder 35 (zwei Zeilen)	41 (eine Zeile) oder 58 (zwei Zeilen)
	Dropdownlisten	Breite der längsten gültigen Daten + 30% x 14	Breite des längsten Elements + 30% x 23
	Listenfelder	Breite des längsten Elements + 30% x eine integrale Anzahl von Elementen (mindestens 3 Elemente)
	Listenansichten	Spaltenbreiten, die abgeschnittene Daten x eine integrale Anzahl von Elementen vermeiden
	Statusanzeigen	107 oder 237 x 8	160 oder 355 x 15
	Optionsfelder	10	17
	Schieber	15	24
	Text (statisch)	8	13
	Textfelder	Breite der längsten oder erwarteten Eingabe + 30% x 14 (eine Zeile) + 10 für jede zusätzliche Zeile	Breite der längsten gültigen Daten + 30% x 23 relative Pixel (eine Zeile) + 16 für jede zusätzliche Zeile
	Strukturansichten	Breite des längsten Elements + 30% x eine integrale Anzahl von Elementen (mindestens 5 Elemente)

Abstand

In der folgenden Tabelle sind die empfohlenen Abstände zwischen allgemeinen UI-Elementen (für 9 Pt. Segoe UI bei 96 dpi) aufgeführt.

	Element	Dialogeinheiten	Relative Pixel
	Dialogfeldränder	7 auf allen Seiten	11 auf allen Seiten
	Zwischen Textbeschriftungen und den zugehörigen Steuerelementen (z. B. Textfelder und Listenfelder)	3	5
	Zwischen verwandten Steuerelementen	4	7
	Zwischen nicht verknüpften Steuerelementen	7	11
	Erstes Steuerelement in einem Gruppenfeld	11 unten vom oberen Rand des Gruppenfelds; Vertikal am Gruppenfeldtitel ausrichten	16 unten vom oberen Rand des Gruppenfelds; Vertikal am Gruppenfeldtitel ausrichten
	Zwischen Steuerelementen in einem Gruppenfeld	4	7
	Zwischen horizontal oder vertikal angeordneten Schaltflächen	4	7
	Letztes Steuerelement in einem Gruppenfeld	7 über dem unteren Rand des Gruppenfelds	11 über dem unteren Rand des Gruppenfelds
	Vom linken Rand eines Gruppenfelds	6	9
	Textbezeichnung neben einem Steuerelement	3 unten vom oberen Rand des Steuerelements	5 unten vom oberen Rand des Steuerelements
	Zwischen Textabsätzen	7	11
	Kleinster Platz zwischen interaktiven Steuerelementen	3 oder kein Leerzeichen	5 oder kein Leerzeichen
	Kleinster Abstand zwischen einem nicht interaktiven Steuerelement und einem anderen Steuerelement	2	3