Seitenkopf-System

Was macht Seitenkopf-System?

Zweck

Das Seitenkopf-System bietet eine Methodik zur Gestaltung des obersten Strukturbereichs einer einzelnen Seite (zu unterscheiden vom globalen Site-Header). Es stellt sicher, dass Benutzer sofort erkennen, wo sie sich befinden (Wegfindung), den Status oder die Metadaten der aktuellen Ansicht verstehen und auf die primären Aktionen zugreifen können, die zur Erledigung ihrer Aufgabe erforderlich sind, ohne in Menüs suchen zu müssen.

Anwendungsfälle

• Gestaltung von Kopfzeilen für komplexe Dashboard-Ansichten (z. B. „Projektdetails“).
• Strukturierung der Einleitung von Long-Form-Artikeln oder Dokumentationsseiten.
• Organisation von Einstellungs- oder Profilseiten, bei denen Kontext und Speicheraktionen entscheidend sind.
• Standardisierung von Kopfzeilenmustern in einer SaaS-Anwendung oder einer großen Inhaltsseite.
• Verwaltung von Breadcrumbs, Titeln und Statusindikatoren in einem einheitlichen Layout.

Wann NICHT verwenden

• Globale Site-Navigation: Verwenden Sie site-navigation-system für den Hauptkopf, der auf der gesamten Website persistent ist.
• Einfache Landing Pages: Wenn der „Hero“-Abschnitt (siehe hero-section-optimization) als Seitenkopf dient.
• Splash-Screens / Modale: Wenn der Inhalt temporär oder minimal ist; verwenden Sie overlay-and-dialog-system für modale Kopfzeilen.

Eingaben

1. Seitentitel & Hierarchie: Der primäre Name der Seite (H1) und ihre Position in der Seitenstruktur.
2. Wegfindungsanforderungen: Benötigt der Benutzer Breadcrumbs oder eine „Zurück“-Schaltfläche?
3. Metadaten & Status: Kritische Details wie „Zuletzt aktualisiert“, „Entwurf/Live“ oder Besitzerinformationen.
4. Aktionspriorität: Was ist die primäre Aufgabe auf dieser Seite? (z. B. Bearbeiten, Teilen, Erstellen).
5. Marken-/System-Tokens: Abstände, Typografie und Farb-Tokens.

Ausgaben

1. Kopfanatomie-Spezifikation: Definition der Zonen (Wegfindung, Titel, Metadaten, Aktionen).
2. Layout-Blueprint: Regeln für Ausrichtung (links vs. zentriert) und Abstände.
3. Responsive-Strategie: Wie sich der Kopf von Desktop zu Mobil anpasst.
4. Interaktions-Spezifikation: Verhalten von fixierten Kopfzeilen und Priorität der Aktionsschaltflächen.

Workflow

1. Den Navigationspfad definieren (Wegfindung)

Bestimmen Sie, wie der Benutzer auf diese Seite gelangt ist und wie er zurückkommt:

• Breadcrumbs: Für tiefe Hierarchien verwenden (z. B. Startseite > Projekte > Design).
• Zurück-Schaltfläche: Für lineare Aufgaben oder wenn zu einer bestimmten Listenansicht zurückgekehrt werden soll.
• Elternlink: Ein einfaches „<- Zurück zu [Eltern]“ für 2-stufige Tiefen.

2. Den Inhaltskern etablieren (Titel & Metadaten)

Wenden Sie visual-hierarchy-system auf die Kopfmitte an:

• H1-Titel: Das markanteste Textelement.
• Kontextuelle Metadaten: Sekundäre Informationen (z. B. Tags, Zeitstempel, Status-Badges) in der Nähe des Titels platziert.
• Thumbnail/Avatar: Wenn die Seite eine bestimmte Entität repräsentiert (z. B. ein Benutzerprofil oder ein Produkt).

3. Seitenebenen-Aktionen organisieren

Teilen Sie die Aktionen in Prioritätsstufen ein:

• Primäre Aktion: Die eine „Level-1“-Schaltfläche (normalerweise eine kontrastreiche, gefüllte Schaltfläche).
• Sekundäre Aktionen: „Level-2“-Schaltflächen (Umriss- oder Ghost-Stile) für weniger häufige Aufgaben.
• Tertiäre Aktionen: Überlaufmenüs (…) für seltene administrative Aufgaben.

4. Ein räumliches Muster wählen

• Standard linksbündig (SaaS/Dashboard): Breadcrumbs/Titel links, Aktionen rechts. Am besten für Produktivität.
• Zentriert (Inhalt/Artikel): Alle Elemente zentriert. Am besten für Lesbarkeit und Storytelling.
• Geteiltes Layout: Titel und Aktionen durch Leerraum getrennt, um Abstand zu betonen.

5. Klebe- und Scrollverhalten definieren

• Fixierter Kopf: Halten Sie den Seitenkopf sichtbar, wenn Aktionen (wie „Speichern“) beim Scrollen häufig benötigt werden.
• Verdichtender Kopf: Verkleinern Sie die Kopfhöhe oder blenden Sie Breadcrumbs aus, wenn der Benutzer nach unten scrollt, um den Inhaltsbereich zu maximieren.

Entscheidungsregeln

• Die Breadcrumb-Regel: Wenn eine Website mehr als 2 Ebenen tief ist, sind Breadcrumbs im Seitenkopf obligatorisch.
• Die „Ein H1“-Regel: Der Seitenkopf MUSS das eindeutige H1-Tag der Seite enthalten.
• Aktionsausrichtung: Auf Desktop primäre Aktionen oben rechts ausrichten. Auf Mobil sollte für primäre Aktionen eine fixierte untere Leiste in Betracht gezogen werden, wenn der Kopf zu überladen wird.
• Status-Sichtbarkeit: Kritische Status (z. B. „Zahlung überfällig“) müssen unmittelbar neben dem Titel mit einem Badge oder Icon platziert werden.

Einschränkungen

• Barrierefreiheit: Kopftitel müssen <h1> verwenden. Breadcrumbs müssen <nav> mit aria-label="Breadcrumb" verwenden.
• Kontrast: Status-Badges und Aktionen müssen die WCAG-AA-Kontrastanforderungen erfüllen. Aktionsschaltflächen müssen WCAG 2.2 SC 2.5.8 Zielgröße erfüllen (mindestens 24x24px, 44x44px bevorzugt auf mobilen fixierten Leisten).
• Responsiveness: Kopfzeilen müssen lange Titel ordnungsgemäß behandeln (Abschneiden vs. Umbruch).

Häufige Fehlermuster

• Die Aktionsüberlastung: Zu viele Schaltflächen im Kopf platzieren, was die primäre Aufgabe verwirrt.
• Fehlende Wegfindung: Vergessen von Breadcrumbs auf tiefen Seiten, wodurch sich Benutzer „verloren“ fühlen.
• Titel-Quetschen: Nicht genügend Platz für lange Titel auf Mobilgeräten, wodurch sie Aktionen überlappen.
• Redundanter Site-Header: Den Seitenkopf zu ähnlich zum globalen Site-Header gestalten, was visuelle Verwirrung stiftet.

Validierungskriterien

• Kopf enthält einen klaren H1, der dem Navigationslabel entspricht.
• Wegfindung (Breadcrumbs/Zurück) ist für die Site-Tiefe angemessen.
• Primäre Aktion ist visuell von sekundären Aktionen unterscheidbar.
• Layout bleibt auf mobilen Viewports funktional und lesbar.
• Semantisches HTML wird verwendet (<nav> für Breadcrumbs, <h1> für Titel).
• Statusindikatoren (falls vorhanden) sind kontrastreich und leicht erkennbar.