Object Header
Der Object Header dient dazu ein fachliches Objekt auf der Objektseite jederzeit eindeutig zu identifizieren.
Overview
Intro
Der Object Header bietet zusätzlich Raum für weitere Schlüsselinformationen und gibt den Nutzern alle notwendigen Kontextinformationen.
Intro Object Header
Verwendung
| 👍 Do | 👎 Don't |
|---|---|
| ...wenn die Detailansicht eines Objekts angezeigt wird. ...wenn Titel oder Namen eines Objekts prominent dargestellt werden sollen (Objektseiten und Formularseiten). ...wenn sekundäre Informationen wie Status, Typ oder ID immer sichtbar sein sollen. | ...wenn er als Überschrift für reine Übersichtsseiten verwendet werden soll – dafür einen normalen Titel einsetzen. ...wenn zu viele Informationen angezeigt werden sollen, die wichtigsten Information müssen ausgewählt werden. |
Guidelines
Aufbau
- Titel (erforderlich)
Dient zur Identifikation, verwende hier einen sprechenden Titel. Auf Seiten, bei denen der Object Header zum Einsatz kommt, muss kein zusätzlicher Seitentitel gesetzt werden, da der Titel des Object Headers diese Funktion übernimmt und als offizieller Seitentitel dient. (s. auch UX Wrtiting ) - Badges (optional)
Können das Objekt auf ersten Blick kategorisieren / markieren / verorten - Untertitel (optional)
Dient zusätzlich zur Identifikation, hier können z.B. Identifikationsnummern stehen. - Auf- und zuklappen (erforderlich, wenn Inhalte vorhanden sind)
Die Kopfzeile lässt sich über eine Taste auf- und zuklappen. - Kopfzeilen Inhalt (optional)
Schlüssel- und Kontextinformationen werden mit der Key-Value Facette dargestellt.
Aufbau
Der Object Header verwendet das Flex Layout, die Breite der Key value facet groups passt sich dem Inhalt an und haben einen 48px Abstand zur nächsten Gruppe.
Anordnung & Gruppierung
Objektseite
Die Kopfzeile ist permanent oberhalb der Anchor-Nav zu sehen und scrollt nicht mit dem Inhalt mit.
Um Schlüsselinformationen und den notwendigen Kontext für den Nutzer in der Kopfzeile zu kommunizieren, können durchaus Inhalte aus den Sektionen wiederholt und verdichtet werden.
Bearbeitungsansicht
Auch in der Bearbeitungsansicht wird die Kopfzeile oberhalb des Formulars angezeigt und scrollt nicht mit dem Inhalt mit.
INFO
Achte darauf die Kopfzeile klar zu strukturieren und nicht mit Informationen zu überfrachten.
Varianten/Typen
Der Object Header kann in drei möglichen Varianten dargestellt werden:
Mit Subtitle
Zeigt den Titel , zusätzliche Informationen (z. B. Badges, Labels) sowie einen Untertitel . Der Untertitel erscheint in kleinerer Schriftgröße unter dem Titel.
Zugeklappter Object Header mit Subtitle
Ohne Subtitle
Nur der Titel und ggf. zusätzliche Informationen (z. B. Badges, Labels) werden angezeigt. Es entsteht kein Leerraum an der Stelle, wo sonst der Untertitel stünde.
Zugeklappter Object Header ohne subtitle
Empty
Wird kein Inhalt übergeben, bleibt der Header formal sichtbar, aber leer .
Zugeklappter Object Header ohne Name-Wert Facetten
Verhalten
Interaktives Verhalten
Der Header kann ein- und ausgeklappt werden. Über den Button „ Aufklappen “ (bzw. „ Zuklappen “) wird der erweiterte Inhaltsbereich ein- oder ausgeblendet. Der Zustand (ein-/ausgeklappt) wird von Nutzer:innen gesteuert.
Barrierefreiheit
Die Tastaturbedienung der „Aufklappen“ und „Zuklappen“ Buttons erfolgt wie bei den Buttons .
Develop Flow
Der Showcase ist innerhalb des AKDB Netzwerks zu finden unter: https://mate-ds-flow-components-showcase-25.core-platform.kubt.akdb.net/?src=component%252Fdetails%252FOBJECT_HEADER