Formulare

Überblick

Ein Formular ist eine Gruppe von Benutzeroberflächenelementen, mit denen in verschiedenen Kontexten Informationen von einem Benutzer erfasst werden können. Es gibt verschiedene Möglichkeiten, Formulare darzustellen, z. B. in einem Drawer, als Teil eines Prozesses oder auf einer Seite. Formulare enthalten Informationen in logischen Blöcken, die für Benutzer leicht zu verstehen und zu nutzen sind.

Zu verwenden

• Wenn in einer Anwendung Daten von einem Benutzer erfasst werden müssen
• Wenn der Benutzer verfügbare Daten anzeigen möchte

Nicht zu verwenden

Verwenden Sie Formulare nicht als einzige Möglichkeit zum Anzeigen von Daten. Für einfachere Datensätze können Sie Karten und Listenansichten verwenden, für komplexe Datensätze Tabellen oder Datenvisualisierungsdiagramme.

Aufbau

1. Seiten- oder Formulartitel: Gibt den Zweck der Seite oder des Formulars an. Verwenden Sie für den Seiten- oder Formulartitel die h1-Textformatierung.
2. Abschnittstitel: Gibt den Zweck eines Abschnitts oder einer Informationsgruppe an. Verwenden Sie für Abschnittstitel die h2-Textformatierung.
3. Benutzeroberflächenelement in Formularen: Ermöglicht Benutzern die Eingabe oder Auswahl von Daten.
4. Schaltflächengruppe: Ermöglicht Benutzern, die im Formular eingegebenen Daten zu übermitteln oder zu verwerfen.

Allgemeine Richtlinien

Struktur, Abstände und Layout

• Verwenden Sie einen geeigneten Titel, um den Zweck des Formulars anzugeben. Für Seiten- oder Formulartitel wird die h1-Textformatierung verwendet.
• Strukturieren Sie Formulare logisch und mit Blöcken, damit Informationen leichter verständlich und erinnerbar sind.
• Verwenden Sie verschiedene Abschnitte mit geeigneten Überschriften für spezifische Informationsgruppen. Für Abschnittsüberschriften wird die h2-Textformatierung verwendet.
• Unterteilen Sie bei größeren Formularen den Ablauf in verschiedene Schritte, Phasen oder Abschnitte, indem Sie Benutzeroberflächenelemente wie Karten, Accordion-Komponenten, Fortschrittsanzeigen oder Registerkarten verwenden.
• Achten Sie auf angemessene Abstände zwischen dem Titel, den Steuerelementen des Formulars und zwischen den verschiedenen Abschnitten des Formulars.

Gruppierung von Informationen mit Karten	Gruppierung von Informationen mit Seitenabschnitten

Mehrspaltige Formulare

• Verwenden Sie einspaltige Formulare, wenn der Platz begrenzt ist. Zum Beispiel in Dashboards, auf Mobilgeräten und in mehrstufigen Formularen.
• Verwenden Sie für größere Geräte und wenn ein einspaltiges Layout störend sein kann, mehrspaltige Layouts und nutzen Sie so den verfügbaren Platz.
• Ordnen Sie Gruppen oder Abschnitte in der natürlichen Lesereihenfolge der Benutzer an, und zwar so, dass ein Abschnitt zum nächsten führt.

Aktionen in Formularen oder Abschnitten

• Verwenden Sie eine primäre Schaltfläche für die Hauptaktion und eine tertiäre Schaltfläche für den Abbruch.
• Bündeln und gruppieren Sie Aktionen mit den bearbeiteten Inhalten. Dadurch wird sichergestellt, dass Benutzer die Aktion mit dem Inhalt in Verbindung bringen.

Validierung

• Verwenden Sie je nach Komplexität des Formulars und Anwendungsfall die clientseitige oder die serverseitige Validierung von Formularen.
• Verwenden Sie Statusmeldungen auf Feldebene, um die Ergebnisse der clientseitigen Validierung einzelner Felder anzuzeigen.
• Geben Sie den Feldstatus mit entsprechenden Meldungen an, damit Benutzer Fehler beheben können.
• Verwenden Sie Popover-Benachrichtigungen, um Meldungen der serverseitigen Formularvalidierung anzuzeigen.
• Wenn Serveraufrufe der Validierung voraussichtlich zu Verzögerungen führen, verwenden Sie den Loader zum Anzeigen des Systemstatus.

Benutzeroberflächenelemente in Formularen

Typ	Zweck
Texteingabe und Textbereich	Eingeben von Text und Zahlen in Dateneingabefeldern
Optionsfelder	Auswählen nur einer Option aus einer Liste mit maximal 6 Optionen
Dropdown, Lookup	Auswählen nur einer Option aus einer Liste mit mehr als 6 Optionen
Kontrollkästchen	Auswählen einer oder mehrerer Optionen aus einer Liste
Umschaltfläche	Auswählen gegensätzlicher Optionen
Datumsauswahl	Auswählen eines Datums, einer Uhrzeit oder eines Datumsbereichs
Datei-Uploader	Hochladen einer oder mehrerer Dateien in ein Formular
Schieberegler	Auswählen eines numerischen Werts innerhalb eines angegebenen Bereichs
Stepper	Schrittweises Erhöhen oder Verringern eines numerischen Werts

Inhalt

Allgemeine Richtlinien fürs Schreiben

• Verwenden Sie die Großschreibung des ersten Worts und von Substantiven für alle Aspekte der Gestaltung von Guidewire-Produktschnittstellen. Schreiben Sie nicht alles groß.
• Verwenden Sie in den meisten Situationen Verben im Präsens und im Aktiv.
• Verwenden Sie gebräuchliche Abkürzungen, um Ihrem Text einen natürlichen und informellen Ton zu verleihen.
• Verwenden Sie eine einfache Sprache. Vermeiden Sie unnötigen Jargon und komplexe Sprache.
• Halten Sie Wörter und Sätze kurz.

Felder logisch gruppieren

Gruppieren Sie zusammengehörige Felder, wenn Benutzer in einem Formular viele Daten eingeben müssen. Auf diese Weise können Benutzer die Informationen, die sie ausfüllen müssen, besser zuordnen. Beispielsweise können der Name und das Geburtsdatum eines Benutzers als personenbezogene Daten kategorisiert werden. Die Adresse und Telefonnummer können unter Kontaktinformationen zusammengefasst werden.

Quelle: Nielsen Norman

Pflichtfelder markieren

Markieren Sie erforderliche Felder mit einem Sternchen. Das Sternchen sollte der Feldbeschriftung vorangestellt werden. Benutzer können so leicht herausfinden, welche Felder erforderlich sind, indem sie nur das Zeichen ganz links in der Beschriftung prüfen. Auch wenn es nicht obligatorisch ist, können Sie auch optionale Felder markieren und so die kognitive Belastung der Benutzer weiter verringern.

Quelle: Nielsen Norman

Eingabe- und Formatierungsvorgaben erläutern

Wenn ein Benutzer bei der Eingabe von Daten spezifische Vorgaben erfüllen muss, geben Sie die entsprechenden Anweisungen präzise an. Benutzer sollen nicht raten müssen, wie z. B. ein Kennwort einzugeben oder ein Datum zu formatieren ist. Platzieren Sie bei Hinweisen oder Anweisungen, die zum Ausfüllen des Formulars wichtig sind, den entsprechenden Text außerhalb des Felds, damit er immer sichtbar ist.

Quelle: Nielsen Norman

Platzhaltertext vermeiden

Platzhaltertext verursacht eine Reihe von Problemen mit Blick auf die Benutzerfreundlichkeit. Sobald der Benutzer mit der Eingabe beginnt, verschwindet der Platzhaltertext. Das belastet das Kurzzeitgedächtnis der Nutzer. Außerdem ist Platzhaltertext oft kontrastarm, was bedeutet, dass Benutzer mit eingeschränktem Sehvermögen Schwierigkeiten beim Lesen haben können.

Quelle: Nielsen Norman

Barrierefreiheit

• Alle Felder müssen ein entsprechendes „aria-label“-Attribut enthalten, das den Zweck des jeweiligen Felds angibt.
• Verwenden Sie aria-describedby für längeren unterstützenden Text, der für Benutzer mit Screenreadern zugänglich ist.
• Farbe darf nicht als einziges Mittel zur Signalisierung von Fehlerszenarios verwendet werden. Verwenden Sie unterstützenden Text und Symbole, damit Screenreader Fehler und Live-Regionen ausgeben können, wenn Fehler global auftreten.
• Geben Sie bei rein dekorativen Bildern, die keine zusätzlichen Informationen zum Inhalt der Seite liefern, einen leeren Alt-Text (alt="") an, damit sie von assistiven Technologien ignoriert werden. Quelle: W3C Web Accessibility Initiative - Decorative Images

Reaktionsfähigkeit

Mehrspaltige Formularlayouts werden so umbrochen, dass die Spalten auf schmalen Bildschirmen (Mobilgeräte) untereinander angezeigt werden und die Bilder dieselbe Breite wie die darunter liegenden Benutzeroberflächenelemente haben. Bilder können entfernt oder so platziert werden, dass sie keine wesentlichen Elemente beeinträchtigen, die für Benutzer angezeigt werden.

Theming

Standardmäßig entsprechen Theming und Branding der Anwendung, es sei denn, sie werden überschrieben.

Muster können mit Themes gestaltet werden, um bestimmte Markenanforderungen und Kundenwünsche zu erfüllen. Dazu gehören visuelle Elemente wie Farben, Typografie, Symbole, Schaltflächen und andere Komponenten und grafische Elemente.

Erfahren Sie mehr über das Theming mit Design-Token

Verwandte Komponenten

• Datumsauswahl
• Umschaltfläche
• Link
• Schaltfläche
• Zeitauswahl

Ressourcen

Laden Sie eine ZIP-Datei mit sämtlichen aktuellen Jutro-Mustern herunter und beginnen Sie mit der Gestaltung.

Jutro-Musterbibliothek (19.6 MB)