Seitennavigationssystem

Sidebar-Navigationssystem

Zweck

Das Sidebar-Navigationssystem bietet eine Methodik zur Gestaltung persistenter vertikaler Navigationsstrukturen. Im Gegensatz zu horizontalen Kopfzeilen sind Sidebars für informationsdichte Architekturen optimiert und unterstützen tiefe Verschachtelung, sekundäre Dienstprogrammaktionen und Arbeitsbereichswechsel. Dieses System stellt sicher, dass Benutzer komplexe Anwendungen mit minimaler kognitiver Belastung navigieren können, während sie stets eine klare Vorstellung von ihrer aktuellen Position innerhalb eines hierarchischen Umfelds behalten.

Anwendungsfälle

• SaaS-Dashboards: Verwalten mehrerer Arbeitsbereiche, Tools und Datenansichten.
• Admin-Panels: Organisation umfangreicher Verwaltungsfunktionen und Systemeinstellungen.
• Dokumentationsseiten: Navigation durch tiefe Hierarchien von Artikeln, Abschnitten und API-Referenzen.
• Interne Tools: Strukturierung komplexer Workflows und Dateneingabemodule.
• Content-Management-Systeme (CMS): Wechseln zwischen Seitenbearbeitung, Medienbibliotheken und Benutzerberechtigungen.

Wann NICHT verwenden

• Marketing-Landingpages: Wo ein einfacher horizontaler Header für eine conversionsorientierte Navigation besser geeignet ist.
• Einfache Blog-Seiten: Wo Breadcrumbs und Links auf oberster Ebene ausreichend Orientierung bieten.
• Mobile-First-Consumer-Apps: Wo eine untere Tab-Leiste für die Interaktion im primären Daumenbereich besser geeignet ist.
• Immersive Narrative Sites: Wo persistente UI-Elemente vom Storytelling-Erlebnis ablenken könnten.

Eingaben

1. Informationsarchitektur (IA): Eine Karte aller Seiten und Tools, gruppiert nach funktionaler Beziehung.
2. Benutzerkontexte: Identifizierung verschiedener Benutzerrollen und ihrer primären Aufgaben.
3. Arbeitsbereichsebenen: Bestimmen, ob die App das Wechseln zwischen verschiedenen Konten oder Projekten erfordert.
4. Markenstil-Token: Farben, Typografie und Abstände aus dem bestehenden Designsystem.
5. Interaktives Komponenteninventar: Standardisierte Icons, Badges (für Benachrichtigungen) und Schaltflächen.

Ausgaben

1. Sidebar-Anatomie-Spezifikation: Definierte Bereiche (Branding, Arbeitsbereichswechsler, primäre Navigation, sekundäre Navigation, Benutzer-Footer).
2. Interaktionsmatrix: Verhalten für Hover, Fokus, aktive Zustände und Verschachtelung (Auf-/Zuklappen).
3. Responsive-Zuordnung: Regeln, wie die Sidebar transformiert wird (z. B. Fixiert -> Zusammengeklappte Schiene -> Mobiler Drawer).
4. Zustandsspezifikationen: Definierte visuelle Behandlungen für verschiedene Navigationsebenen und Benachrichtigungsindikatoren.

Workflow

1. Navigationsebenen definieren

Organisieren Sie die IA in eine vertikale Hierarchie:

• Ebene 1 (Direkt): Kernabschnitte, die immer in der primären Liste sichtbar sind.
• Ebene 2 (Verschachtelt): Unterabschnitte, die durch Aufklappen oder Drill-down sichtbar werden.
• Globale Aktionen: Sekundäre Dienstprogramme wie „Einstellungen“, „Hilfe“ oder „Benachrichtigungen“, die normalerweise unten platziert werden.

2. Die visuelle Anatomie festlegen

Teilen Sie die Sidebar in funktionale Zonen auf:

• Kopfzeile: Markenlogo und Arbeitsbereichs-/Kontowechsler.
• Hauptbereich (scrollbar): Die primäre Navigationsliste.
• Fußzeile (fixiert): Benutzerprofil, Systemeinstellungen und Auf-/Zuklappen-Auslöser.

3. Das Verschachtelungsmuster entwerfen

Wählen Sie, wie tiefe Hierarchie behandelt werden soll:

• Akkordeon: Aufklappende Abschnitte, die andere Elemente nach unten verschieben. Am besten für 2 Ebenen geeignet.
• Flyout: Untermenüs, die bei Hover/Klick neben der Sidebar erscheinen. Am besten für schmale „Schienen“-Sidebars geeignet.
• Drill-down: Die gesamte Sidebar-Ansicht wird gegen eine Unterebenenansicht ausgetauscht. Am besten für sehr tiefe Strukturen geeignet.

4. Die Zustandsmatrix erstellen

Wenden Sie konsistentes visuelles Feedback an (aus dem interaktiven-zustandssystem):

• Aktiver Zustand: Verwenden Sie einen kontrastreichen Indikator (z. B. Farbbalken oder Hintergrundverschiebung), um die aktuelle Seite anzuzeigen.
• Hover/Fokus: Dezente Hintergrundänderung, um die Interaktivität anzuzeigen.
• Benachrichtigungs-Badges: Verwenden Sie das badge-und-tag-system, um ungelesene Elemente oder Status anzuzeigen.

5. Responsive Anpassung planen

Ordnen Sie das Verhalten der Sidebar über Breakpoints hinweg zu:

• Desktop (>1200px): Fixierte, breite Sidebar (240px-280px).
• Tablet (768px-1200px): Zusammengeklappte „Schiene“, die nur Icons anzeigt und bei Hover/Klick aufklappt.
• Mobilgerät (<768px): Standardmäßig ausgeblendet, erscheint als Vollbild-Drawer, der durch ein Hamburger-Icon ausgelöst wird. Wenden Sie das inert-Attribut (oder ein Äquivalent) auf den Hauptinhalt an, während der Drawer geöffnet ist, damit Tastatur- und Screenreader-Benutzer nicht in den dahinter verborgenen Inhalt tabben können.

Entscheidungsregeln

• Die „Sieben-Elemente“-Regel: Begrenzen Sie Gruppen auf oberster Ebene auf sieben oder weniger, um sicherzustellen, dass sie ohne Scrollen leicht überflogen werden können.
• Icon-Anforderung: Verwenden Sie immer Icons für Elemente der Ebene 1. Icons bieten einen visuellen Anker, der die Erkennung erleichtert, insbesondere in zusammengeklappten Zuständen.
• Label-Persistenz: Labels sollten in der Desktop-Ansicht niemals ausgeblendet werden, es sei denn, der Benutzer klappt die Sidebar explizit zusammen.
• Visuelle Unterscheidung: Stellen Sie sicher, dass Elemente der Ebene 2 visuell von denen der Ebene 1 zu unterscheiden sind (z. B. durch Einrückung, kleinere Schriftgröße oder dezentere Farbe).
• Sichtbarkeit der aktiven Seite: Der Indikator der aktiven Seite muss der prominenteste visuelle Zustand in der Sidebar sein.

Einschränkungen

• Barrierefreiheit: Die Sidebar muss in ein <nav> mit einem eindeutigen aria-label eingebettet sein. Verwenden Sie aria-expanded für verschachtelte Elemente. Wenn die Sidebar oder ihre Flyouts Inhalte überlagern, stellen Sie sicher, dass das aktuell fokussierte Element niemals vollständig hinter einer anderen Ebene verborgen ist (WCAG 2.2, 2.4.11 Focus Not Obscured).
• Reaktionsfähigkeit: Die Sidebar darf auf dem Desktop keinen Inhalt überlappen; sie sollte den Hauptinhaltsbereich verschieben oder zusammendrücken.
• Visuelle Hierarchie: Branding und Arbeitsbereichswechsler müssen oben sein; Benutzereinstellungen und Hilfe müssen unten sein.
• Berührungsziele: Alle Links und Aufklapp-Auslöser müssen mindestens die WCAG 2.2 Mindestgröße von 24x24px (2.5.8) erfüllen; 44x44px wird für primäre Navigationselemente bevorzugt, da sie häufig verwendet werden.

Häufige Fehlermuster

• Scroll-in-Scroll: Eine scrollbare Sidebar und ein scrollbarer Inhaltsbereich, die um die Benutzeraufmerksamkeit konkurrieren, was zu einem Gefühl der „Scroll-Entführung“ führt.
• Der „unsichtbare aktive“ Zustand: Den Indikator der aktuellen Seite so dezent gestalten, dass der Benutzer den Überblick verliert.
• Übermäßige Verschachtelung: Tiefer als 3 Ebenen gehen, sodass sich die Navigation eher wie ein Dateisystem als wie eine Anwendung anfühlt.
• Versteckter Auf-/Zuklappen-Auslöser: Die Schaltfläche „Schließen“ oder „Zuklappen“ an einem Ort verstecken, an dem Benutzer sie nicht finden können.
• Unbeschriftete Icons: Icons ohne Textbeschriftung in der primären Ansicht verwenden, was zu einer „Mystery-Meat“-Navigation führt.

Validierungskriterien

• Die Sidebar ist in klare Zonen strukturiert (Kopfzeile, Hauptbereich, Fußzeile).
• Der aktive Zustand ist klar von Hover- und Standardzuständen zu unterscheiden.
• Alle Elemente der Ebene 1 haben ein eindeutiges und erkennbares Icon.
• Verschachtelte Elemente sind ihren übergeordneten Elementen visuell untergeordnet.
• Die Sidebar ist vollständig per Tastatur navigierbar (Tab- und Pfeiltasten).
• Mobile und Tablet-responsive Zustände sind definiert und funktionsfähig.
• ARIA-Landmarks und -Zustände sind korrekt implementiert.
• Kontrastverhältnisse für Text und Indikatoren erfüllen WCAG AA (4,5:1).
• Berührungsziele erfüllen mindestens das WCAG 2.2 Minimum von 24x24px.
• Der mobile Drawer wendet inert (oder ein Äquivalent) auf den Hintergrundinhalt an, während er geöffnet ist.