Version:

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.

broken_image
Figma

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 ​

  1. 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 )
  2. Badges (optional)

    Können das Objekt auf ersten Blick kategorisieren / markieren / verorten
  3. Untertitel (optional)
    
Dient zusätzlich zur Identifikation, hier können z.B. Identifikationsnummern stehen.
  4. Auf- und zuklappen (erforderlich, wenn Inhalte vorhanden sind)
    Die Kopfzeile lässt sich über eine Taste auf- und zuklappen.
  5. Kopfzeilen Inhalt (optional)
    Schlüssel- und Kontextinformationen werden mit der  Key-Value Facette  dargestellt.
    broken_image
    Figma

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.

broken_image
Figma

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.

broken_image
Figma

Zugeklappter Object Header ohne subtitle

Empty ​

Wird kein Inhalt übergeben, bleibt der Header formal sichtbar, aber leer .

broken_image
Figma

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 .