Formularlayouts
Inhaltsverzeichnis reduzieren
Inhaltsverzeichnis erweitern

Richtlinien für Formularlayouts

Entwerfen Sie Formulare, die sich mühelos per Toucheingabe ausfüllen lassen, den Bildschirmbereich optimal nutzen und Verschiebung/Bildlauf in Ihrer Windows Store-App minimieren.

Sehen Sie dieses Feature in unserer Reihe App-Features von A bis Z in Aktion:  Benutzerinteraktion: Toucheingabe... und vieles mehr

Empfehlungen

  • Verwenden Sie ein Formularlayout, dass zum Inhalt und zur App passt.
  • Verwenden Sie für alle Steuerelemente in einem Formular die gleiche Beschriftungsplatzierung.
  • Verwenden Sie Inlineplatzhaltertext, wenn der Formularinhalt einfach bzw. leicht verständlich ist.
  • Verwenden Sie kein mehrspaltiges Layout, wenn das Formular viel in vertikaler Richtung verschoben werden muss.
  • Platzieren Sie keine Beschriftungen links neben den Steuerelementen, wenn sich die Länge der Beschriftungen stark unterscheidet.
  • Die Bildschirmtastatur sollte nicht automatisch starten, sondern erst, wenn eine Toucheingabe erfolgt ist.

Weitere Hinweise zur Verwendung

Überlegen Sie sich beim Entwerfen eines Formular- und Steuerelementlayouts, wie der Benutzer das Formular ausfüllen soll und wie sich Verschiebung und Bildlauf auf die Benutzerfreundlichkeit auswirken können. Berücksichtigen Sie auch die Auswirkung der Bildschirmtastatur (sie kann im Querformat bis zu 50 % des Bildschirms belegen) und von Inlinefehlerbenachrichtigungen (sofern verwendet).

Einspaltige Layouts

Verwenden Sie in den folgenden Fällen ein einspaltiges Layout für Ihr Formular:

  • Sie möchten, dass Benutzer das Formular in einer bestimmten Reihenfolge ausfüllen.
  • Das Formular umfasst mehrere Seiten.
  • Die App-Größe wird auf ein hohes, schmales Layout geändert.
  • In der App werden zusätzliche Hinweise, Informationen, Anweisungen oder Branding-/Werbeelemente angezeigt.

Hier sehen Sie ein Beispiel für ein kurzes Formular mit einspaltigem Layout:

Kurzes Formular mit einspaltigem Layout

Hier sehen Sie ein Beispiel für ein längeres Formular mit einspaltigem Layout:

Längeres Formular mit einspaltigem Layout

Anstatt zu versuchen, eine Vielzahl von Steuerelementen in einem überlangen Formular unterzubringen, sollten Sie die Aufgabe ggf. in Gruppen oder in mehrere aufeinander folgende Formulare unterteilen. Hier sehen Sie ein Beispiel für ein längeres, in Gruppen unterteiltes Formular:

Längeres Formular mit Gruppen

Hier sehen Sie ein Beispiel für ein längeres Formular, das auf mehrere Seiten aufgeteilt wurde:

Längeres Formular mit Gruppen

Hier sehen Sie ein Beispiel für ein Formular, für das ein einspaltiges Layout verwendet wird, da die Benutzeroberfläche zusätzliche Hinweise und Informationen enthält:

Formular mit zusätzlichen Hinweisen und Informationen

Verwenden eines zweispaltigen Layouts

Zweispaltige Layouts eignen sich für kurze Formulare mit wenig Verschiebung in vertikaler Richtung. Beim zweispaltigen Layout wird der Bildschirmbereich im Querformat am besten genutzt. Denken Sie daran, ausreichend Abstand zwischen den beiden Spalten zu lassen.

Hier sehen Sie ein Beispiel für ein Formular mit zwei Spalten:

Formular mit zwei Spalten

Verwenden Sie kein mehrspaltiges Layout, wenn das Formular viel in vertikaler Richtung verschoben werden muss. Um das Formular auszufüllen, muss der Benutzer das Ende der ersten Spalte erreichen, zum Anfang der zweiten Spalte wechseln und anschließend wieder nach unten gehen. Bei eingeblendeter Bildschirmtastatur wird das Ganze noch umständlicher.

Hier sehen Sie ein Beispiel für ein Formular, das sich nicht für ein zweispaltiges Layout eignet:

Formular, das sich nicht für ein zweispaltiges Layout eignet

Verwendung von drei oder mehr Spalten

Verwenden Sie drei oder mehr Spalten, um den sichtbaren Bildschirmbereich im Querformat optimal zu nutzen. Dieses Layout eignet sich für Bildschirme mit fester Ansicht oder horizontaler Verschiebung, nicht aber für Bildschirme mit vertikaler Verschiebung. Verwenden Sie dieses Layout nur, wenn die Eingabereihenfolge keine Rolle spielt.

Formular mit drei Spalten

Platzierung von Beschriftungen

Die meisten Steuerelemente benötigen eine Beschriftung.

  • Platzieren Sie Beschriftungen über oder links neben dem Steuerelement.
  • Verwenden Sie für alle Steuerelemente in einem Formular die gleiche Beschriftungsplatzierung.

Platzieren der Beschriftung oberhalb des Steuerelements

Im Allgemeinen sollten Beschriftungen über den Steuerelementen platziert werden. Bei mehrspaltigen Formularlayouts müssen sich die Beschriftungen immer über den Steuerelementen befinden.

Durch das Platzieren der Beschriftungen über den Steuerelementen lässt sich eine Beschriftung problemlos dem zugehörigen Steuerelement zuordnen. Außerdem erhalten Sie ein übersichtliches Layout, da alle Beschriftungen und Steuerelemente linksbündig ausgerichtet werden können. Die Platzierung der Beschriftung über dem Steuerelement vereinfacht die Darstellung langer Zeichenfolgen sowie die Lokalisierung und Implementierung von Barrierefreiheit.

Hier sehen Sie zwei Beispiele für die Beschriftungsplatzierung über dem Steuerelement.

Formular mit Beschriftungen oberhalb der zugehörigen Steuerelemente

Platzieren der Beschriftung links neben dem Steuerelement

In einspaltigen Formularen, in denen möglichst wenig Platz in vertikaler Richtung beansprucht werden darf, können Sie die Beschriftungen links neben den Steuerelementen platzieren, sofern folgende Voraussetzungen erfüllt sind:

  • Die Beschriftungszeichenfolgen sind kurz und in etwa gleich lang.
  • In horizontaler Richtung ist ausreichend Platz für die längste der Beschriftungszeichenfolgen verfügbar (und zwar in jedem Gebietsschema).

Das folgende Beispiel zeigt ein Formular mit Beschriftungsplatzierung links neben dem Steuerelement.

Formular mit Beschriftungsplatzierung auf der linken Seite

Platzieren Sie Beschriftungen nicht links neben dem Steuerelement, wenn die Länge der Beschriftungen stark variiert. Andernfalls sind einige Beschriftungen zu weit von ihrem Steuerelement entfernt.

Formular, das sich nicht für die Beschriftungsplatzierung auf der linken Seite eignet

Platzieren Sie Beschriftungen in mehrspaltigen Formularlayouts nicht links neben dem Steuerelement. Die Beschriftungen können sonst selbst wie eine separate Spalte aussehen.

Formular, das sich nicht für die Beschriftungsplatzierung auf der linken Seite eignet

Inlineplatzhaltertext

Manchmal können Sie Ihr Layout vereinfachen, indem Sie anstelle von Beschriftungen Inlineplatzhaltertext verwenden. Die Verwendung von Inlineplatzhaltertext eignet sich in folgenden Fällen:

  • Das Muster des Formulars ist für eine breite Zielgruppe verständlich (beispielsweise ein Steuerelement für Benutzeranmeldungen oder ein Feld für die Kennworteingabe).
  • Die Beschriftung kann nach der Dateneingabe in das Eingabefeld problemlos abgeleitet werden (Hinweistext wird nach der Dateneingabe ausgeblendet).
  • Es sind nur wenige Eingabefelder vorhanden.

Hier sehen Sie ein Beispiel für ein Formular mit Inlineplatzhaltertext:

Formular mit Inlineplatzhaltertext

Platzierung von Schaltflächen

Richten Sie Formularschaltflächen rechtsbündig aus, es sei denn, es sind mehrere Schaltflächen in andere Steuerelemente eingebettet. Ein Formular wirkt stimmiger, wenn Schaltflächen der Ausrichtung dieser anderen Steuerelemente entsprechen. Die eingebetteten Schaltflächen im Bildschirm PC-Einstellungen sind z. B. linksbündig ausgerichtet:

Bildschirm mit PC-Einstellungen und linksbündig ausgerichteten Schaltflächen

Weitere Informationen zur Platzierung von Schaltflächen finden Sie unter Richtlinien für Schaltflächen.

Fokus und Navigation

Das Steuerelement, mit dem der Benutzer im Formular navigiert, hat den Fokus. Der Benutzer kann mithilfe der TAB-TASTE auf der Tastatur zwischen den Steuerelementen des Formulars wechseln. Dies gilt auch für Steuerelemente, die momentan außerhalb des sichtbaren Bereichs sind. Stellen Sie sicher, dass der verschiebbare Bereich mit dem Steuerelement, das den Fokus hat, automatisch verschoben wird, sodass das gesamte Steuerelement zu sehen ist. Der Abstand zwischen dem Steuerelement mit dem Fokus und dem Bildschirmrand bzw. oberen Rand der Bildschirmtastatur (sofern sichtbar) muss mindestens 30 Pixel betragen, damit für Bewegungen und UI-Elemente an den Bildschirmrändern sowie für das Textauswahl-Ziehelement genügend Platz zur Verfügung steht.

Formular mit und ohne Bildschirmtastatur

Manchmal müssen bestimmte UI-Elemente dauerhaft auf dem Bildschirm zu sehen sein. Gestalten Sie die Benutzeroberfläche so, dass sich die Formularsteuerelemente in einer verschiebbaren Region befinden und die wichtigen UI-Elemente statisch sind. Beispiel:

Formular mit Bereichen, die immer sichtbar sein sollen

Ein- und Ausblenden der Bildschirmtastatur

Bei Geräten mit Touchunterstützung wird die Bildschirmtastatur angezeigt, wenn der Benutzer in ein Eingabefeld tippt. Die App darf die Bildschirmtastatur nicht automatisch ohne diese Interaktion starten.

Die Tastatur kann auf zwei Arten ausgeblendet werden:

  • Wenn das Formular gesendet wird.
  • Der Befehl Tastatur ausblenden wird wie gezeigt aufgerufen.

    Der Befehl zum Ausblenden der Tastatur auf der Bildschirmtastatur

Die Bildschirmtastatur bleibt in der Regel sichtbar, während der Benutzer zwischen Steuerelementen in einem Formular navigiert. Dieses Verhalten kann je nach den anderen Steuerelementtypen innerhalb des Formulars variieren.

Weitere Informationen finden Sie unter Tastaturentwurfsrichtlinien.

Layoutbeispiele

Hier sehen Sie ein Beispiel für ein Registrierungsformular gemäß den Richtlinien dieses Dokuments:

Registrierungsformular

Das folgende Diagramm zeigt empfohlene Größen für verschiedene Elemente und Richtlinien für die Abstände:

Größe und Abstände für das Registrierungsformular

Verwandte Themen

Für Designer
Richtlinien für Schaltflächen
Tastaturentwurfsrichtlinien

 

 

Anzeigen:
© 2017 Microsoft