Formularseite
Overview
Intro
Die Formularseite ist die bevorzugte Lösung, um Objekte mit einfacher bis mittlerer Komplexität anzulegen, darzustellen und zu bearbeiten.
Formularseite
Verwendung
| 👍 Do | 👎 Don't | 👍 Do |
|---|---|---|
| ...wenn einzelne Datensätze, die eine einfache Komplexität haben, hinzugefügt, vollständig angezeigt und bearbeitet werden sollen. (Einfache Objekte: 1-20 Felder, keine 1-N Relationen, keine oder wenige Fremdschlüssel) | ...wenn einzelne Datensätze eine hohe Komplexität haben. Verwende dazu die Objektseite. (Komplexe Objekte: 20+ Felder, 1-N Relationen, beliebig viele Fremdschlüssel) | Formularseiten werden sowohl im Rahmen vom einfachem Master Detail Bedienmuster genutzt, als auch um Sektionen einer Objektseite zu bearbeiten. |
Guidelines
Aufbau
Aufbau der Formularseite
Global Header
Der Global Header ist die oberste Leiste der Benutzeroberfläche und bietet Zugang zu anwendungsübergreifenden Funktionen.
Breadcrumbs
Breadcrumbs zeigen Nutzenden, wo sie sich befinden und erlauben es, schnell eine oder mehrere hierarchische Ebenen zurück zu gehen.
Object Header und Seitenüberschrift
Die Seitenüberschrift dient zur Orientierung. Sie sollte die dargestellte Seite beschreiben und/oder das Objekt bzw. den Kontext wie z.B. in welcher Funktion sich der Nutzer derzeit befindet, kommunizieren.
Aktuell ist im Design System kein globaler Standard für Seitentitel festgelegt.
Die Verantwortung für die Definition und Dokumentation des jeweils richtigen Seitentitels liegt auf Produktebene.
Siehe den Abschnitt Seitenüberschrift und Object Header unter UX Writing in Foundations.
Wenn eine Formularseite auf das Bearbeiten einer Sektion einer Objektseite folgt, muss weiterhin der Object Header angezeigt werden.
Formularfehlerliste (Optional)
Fehlermeldungen, die z.B. Formularfelder abgreifender Natur sind oder erst nach dem Absenden des gesamten Formulars identifiziert werden können, werden in der Formularfehlerliste mit einem Callout angezeigt.
Siehe Formulare für weitere Informationen bzgl. Formularvalidierungen
Formular
Die Daten vom Objekt werden in Form eines Formular-Layouts in diesem Bereich präsentiert.
Siehe Formulare für weitere Informationen bzgl. Layout Empfehlungen und Funktionsweise.
Function Bar
In der Function Bar befinden sich die Funktionen, um mit den angezeigtem Objekt zu interagieren.
Inhalt der Funktionsleiste:
- Speichern-Taste (erforderlich)
- Abbrechen-Taste (erforderlich)
- Löschen-Taste (optional)
Weitere Tasten stehen zur Verfügung wenn sich das Formular z.B. in einem Wizard befindet s. Wizard .
Verhalten
MATE Formularseite Verhalten
- Formularseiten stellen entweder Objekte, die zu einer Kollektion gehören, oder ein Objekt, das zu einem komplexen Objekt gehört, dar. Daher implementieren die Breadcrumbs die hierarchische Navigation. Siehe Master-Detail-Muster und Navigationlogik unter Patterns & Pagetypes. Die Seitenüberschrift wird dynamisch angezeigt. Siehe dazu den Abschnitt Seitenüberschrift und Object Header in unter UX Writing in Foundations.
- Auf Formularseiten kann der Object Header optional verwendet werden, um Informationen zum dargestellten Objekt hervorzuheben. Entscheidet man sich gegen die Anzeige eines Object Headers, muss stattdessen eine separate Seitenüberschrift gesetzt werden.
- Bei Bedarf kann die Formularfehlerliste in einem Callout angezeigt werden. Diese schiebt das darunter liegende Formular runter, ggf. auch über den unteren Bildschirm hinaus.
- Siehe Formulare für detaillierte Informationen für das Verhalten von Formularen
- Die Function Bar befindet sich permanent am unteren Bildschirmrand und beinhaltet Funktionen die sich auf das gesamte Objekt beziehen. Sie bietet mindestens die Funktionen zum Abbrechen und Speichern. Optional sind weitere Funktionen, die sich auf das gesamte Objekt beziehen wie z.B. Löschen, in der Funktionsleiste anzuordnen.
- Der Inhalt zwischen Titelleiste und Funktionsleiste lässt sich, falls nicht der gesamte Inhalt angezeigt werden kann, vertikal scrollen.
Barrierefreiheit
Siehe Barrierefreiheit unter Formulare für weitere Informationen.
Spezifische Punkte für die Barrierefreiheit der Formularseite sind außerdem:
- Formularfehlerliste: Sollte eine Formularfehlerliste angezeigt werden müssen, dann muss der Fokus auf die Überschrift gelegt werden.
- Dynamisch Eingeblendete Elemente: Es muss sichergestellt werden, dass alle Elemente - auch dynamisch eingeblendete - von einem Screenreader erfasst werden und über die Tastatur ansteuerbar sind.