Der Page Header definiert den primären Kontext einer ganzseitigen Ansicht und bietet Zugriff auf wichtige Aktionen im Zusammenhang mit dieser Ansicht. Er vermittelt den Nutzern sofort Klarheit darüber, was sie gerade sehen und was sie als Nächstes tun können, mit einem einheitlichen Layout, das sich an verschiedene Inhaltstypen anpasst.
Diese Komponente wird oben auf einer Seite angezeigt und ist so konzipiert, dass sie reaktionsschnell, barrierefrei und an verschiedene Bildschirmgrößen und Inhaltanforderungen anpassbar ist.
Zweck
-
Vermittelt klar den Inhalt und Zweck der aktuellen Seite.
-
Verankert die Nutzerorientierung und unterstützt das Erkennen gegenüber dem Erinnern.
-
Hosts-Aktionen und Metadaten, die für die gesamte Seite relevant sind.
Struktur
-
Nutzerkontext: Wird angezeigt, wenn die Seite im Kontext eines anderen Benutzers oder einer anderen Gruppe aufgerufen wird. Hilft Administratoren oder Managern, im Namen anderer zu handeln.
-
Pfadnavigation: Zeigt die Stelle des Nutzers innerhalb der Plattformstruktur an. Unterstützt die Aufwärtsnavigation über die Eltern-Kind-Hierarchie. (Hinweis: Dies ist kein historischer Pfad.)
-
Zurück zur Navigation: Ermöglicht es Nutzern, zum vorherigen Bildschirm zurückzukehren, wobei ihre ursprünglichen Filter, die Stelle und der Status beibehalten werden.
-
Titel: Vermittelt klare Kommunikation des Hauptthemas oder des Zwecks der Seite.
-
Untertitel: Bietet zusätzliche Informationen oder Kontext zur Ergänzung des Seitentitels.
-
Beschreibung: Bietet einen kurzen und informativen Überblick über den Inhalt oder Zweck der Seite.
-
Eigenschaftenliste: Zeigt eine Liste relevanter Eigenschaften oder Attribute an, die mit dem Seitenkontext verbunden sind.
-
Linearer Fortschritt: Zeigt den Fortschritt eines linearen Prozesses oder einer Aufgabe an.
-
Tab: Ermöglicht die Navigation zwischen den Abschnitten der Seite.
-
Primäre Aktion: Die wichtigste Aktion auf dem Haupt-Level oder die wichtigste Aktion, die ein Nutzer ausführen kann.
-
Sekundäre Wirkung: Bietet zusätzliche, oft ergänzende Aktionen auf Seitenebene für Nutzer.
-
Symbolleiste: Ein Container für verschiedene Tools und Optionen, der die Interaktion zwischen Nutzern und die Funktionalität verbessert.
-
Bild: Wird verwendet, um visuellen Kontext hinzuzufügen (z. B. Kurs-Miniaturansichten)
-
Kreisförmiger Fortschritt: Zeigt den Fortschritt einer zyklischen oder fortlaufenden Aufgabe an. Der lineare Fortschritt ❽ ist dem zyklischen Fortschritt vorzuziehen.
Layoutvarianten
Es stehen mehrere Layoutstile zur Verfügung, und das System wählt das am besten geeignete Layout basierend auf dem Typ und dem Zweck der Seite aus.
Auch wenn Sie den Layoutstil nicht direkt auswählen können, können Sie sicher sein, dass jede Variante passend zum Kontext und Inhalt der Seite ausgewählt wurde.
Standard (❶): Dieser Stil legt den Schwerpunkt auf den Seitentitel und globale Aktionen und bietet Nutzern einen klaren Überblick über den Inhalt und sofortigen Zugriff auf wichtige Funktionen.
Promo (❷): Zielt darauf ab, das Kontextbild hervorzuheben und eine visuell ansprechende Einführung in das Thema der Seite zu schaffen.
Admin (❸): Konzentrieren Sie sich weiterhin auf den Seitentitel, während Sie gleichzeitig das kontextbezogene Bild anzeigen. So schaffen Sie ein Gleichgewicht zwischen Informationen und visuellen Elementen.
Überführung (❹): Bei Bildlauf wird die Kopfzeile fixiert, um den Kontext beizubehalten.
Diese Layout-Entscheidungen werden von unserem Designteam auf der Grundlage umfangreicher UX-Untersuchungen und Usability-Tests getroffen. Dadurch wird sichergestellt, dass Nutzer stets die beste visuelle Balance und kontextuelle Klarheit erhalten, ohne dass eine manuelle Konfiguration notwendig ist.
Responsive und barrierefrei durch Design
-
Auf Mobilgeräten werden alle Header-Inhalte vertikal gestapelt.
-
Tab-Registerkarten können horizontal gescrollt werden, um eine kompakte Navigation zu ermöglichen.
-
Alle Kopfzeilenelemente sind über die Tastatur zugänglich und für Screenreader geeignet.
Tipps für ein besseres Erlebnis
Um sicherzustellen, dass die Page Header Zeile übersichtlich ist und die Nutzererfahrung unterstützt:
-
Halten Sie Titel kurz, klar und spezifisch (unter 80 Zeichen).
-
Verwenden Sie Untertitel und Beschreibungen nur, wenn sie einen Mehrwert hinzufügen.
-
Hinzufügen von Bildern, die zur Orientierung oder Erkennung beitragen und keinen Text enthalten.
---
Der Page Header unterstützt eine Vielzahl von Anwendungsfällen auf der gesamten Plattform und sorgt unabhängig vom Zweck der Seite für Konsistenz und Klarheit. Es handelt sich um eine flexible und konsistente Komponente, die den Nutzern das Gefühl gibt, die Kontrolle zu haben, unabhängig davon, wo sie sich auf der Plattform befinden.