Formulare

Überblick

Ein Formular ist eine Gruppe von Benutzeroberflächenelementen, die verwendet werden können, um Informationen von einem Benutzer in verschiedenen Kontexten zu sammeln. Es gibt verschiedene Möglichkeiten, Formulare darzustellen, z. B. mit 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 einziges Mittel zum Anzeigen von Daten. Erwägen Sie die Verwendung von Karten und Listenansichten für einfachere Datensätze und Tabellen oder Datenvisualisierungsdiagramme für komplexe Datensätze.

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 knapp ist. Zum Beispiel auf Dashboards, Mobilgeräten und Schrittformularen.
• 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.
• Gruppieren und gruppieren Sie Aktionen zusammen mit dem Inhalt, der bearbeitet wird. Dadurch wird sichergestellt, dass Benutzer die Aktion mit dem Inhalt verknüpfen.

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

Wenn Ihr Formular erfordert, dass Benutzer viele Daten eingeben, gruppieren Sie verwandte Felder zusammen. Dies hilft den Benutzern, die Informationen, die sie eingeben müssen, sinnvoll zu verstehen. Beispielsweise können der Name und das Geburtsdatum eines Benutzers als personenbezogene Daten kategorisiert werden. Die Adresse und Telefonnummer könnten unter Kontaktinformationen fallen.

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 scannen. 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 es bestimmte Anforderungen gibt, die ein Benutzer für die korrekte Dateneingabe befolgen muss, geben Sie die genauen Anweisungen an. Lassen Sie die Benutzer nicht über Dinge wie Passwortanforderungen oder das Formatieren eines Datums rätseln. Bei Hinweisen oder Anweisungen, die zum Ausfüllen des Formulars unerlässlich sind, platzieren Sie diesen Text außerhalb des Feldes, damit er immer sichtbar ist.

Quelle: Nielsen Norman

Platzhaltertext vermeiden

Platzhaltertext verursacht eine Vielzahl von Problemen in Bezug auf die Anwenderfreundlichkeit. Wenn Benutzer zu tippen beginnen, verschwindet der Platzhaltertext. Das belastet das Kurzzeitgedächtnis der Nutzer. Darüber hinaus weist Platzhaltertext häufig einen schlechten Kontrast auf, 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 beisteuern, ein leeres Alt-Attribut (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 (Mobiltelefon) 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)