coastdigitalgroup/coastai-skills

Bottom Navigation System

Zweck

Das Bottom Navigation System bietet ein standardisiertes, Mobile-First-Design-Framework für untere Navigationsleisten, Tab-Leisten und persistente Aktions-Docks auf mobilen Weboberflächen und Progressive Web Apps (PWAs). Moderne mobile Geräte mit großen Seitenverhältnissen bringen Kopfzeilen außerhalb der bequemen einhändigen Reichweite („Daumenbereich“). Die untere Navigation verankert primäre Anwendungsziele und wichtige Aktionen direkt im natürlichen Griffbereich des Daumens des Nutzers.

Ein effektives unteres Navigationssystem erfordert Ausgewogenheit bei der Elementdichte (3 bis 5 Elemente), der visuellen Hierarchie aktiver/inaktiver Zustände, den Touch-Zielgrößen, der Platzierung von Badge-Indikatoren, den Safe-Area-Insets des Viewports (env(safe-area-inset-bottom)), der Einbindung von Floating Action Buttons (FAB) und nahtlosen Desktop-Anpassungsregeln. Dieses Skill verbindet mobiles UX-Design und technische Umsetzung in strikter Übereinstimmung mit den WCAG-AA-Barrierefreiheitsstandards.

Anwendungsfälle

• E-Commerce Mobile Web App: Bereitstellung von sofortigem, einhändigem Daumenzugriff auf Startseite, Suche/Durchsuchen, Gespeicherte Artikel, Warenkorb (mit Artikelanzahl-Badge) und Konto.
• SaaS Mobile Web Applications & PWAs: Strukturierung der primären Navigation für mobile Produktiv-Apps (z. B. Heutige Aufgaben, Feeds, Schnellhinzufügen [+], Nachrichten, Einstellungen).
• Soziale & Content-Plattformen: Verwaltung des häufigen Wechsels zwischen Startseite, Entdecken, Erstellen/Hochladen, Aktivitätsbenachrichtigungen und Benutzerprofil.
• On-Demand- & Logistik-Webdienste: Dauerhafte Einblendung primärer Status-Tabs (Bestellungen, Aktive Lieferkarte, Posteingang, Profil) während der aktiven Verfolgung am unteren Viewport.
• Feldeinsätze & Inspektionsformulare: Verankerung persistenter Aktionsschaltflächen (Entwurf speichern, Foto hochladen, Formular absenden) am unteren Ende langer mobiler Formulare.

Wann NICHT zu verwenden

• Desktop-First-Unternehmens-Web-Apps: Verwende für breite Layouts (>1024 px) bei denen vertikale Seitenleisten oder Kopfzeilen eine bessere räumliche Effizienz bieten, sidebar-navigation-system oder site-navigation-system.
• Inhaltswechsel innerhalb einer Seite: Verwende für den Wechsel von Ansichten oder das Filtern von Inhalten in einem bestimmten Seitenabschnitt oder einer Karte tab-ui-system oder segmented-control-system.
• Kontextuelle Aktionsblätter & Modals: Verwende für temporäre, aufgabenspezifische Overlay-Panels, die über Seiteninhalten eingeblendet werden, accessible-bottom-sheet-implementation oder overlay-and-dialog-system.
• Schwebende sekundäre Aktionsauslöser: Verwende für einzelne schwebende Hilfeschaltflächen, Zurück-nach-oben-Schaltflächen oder Chat-Bläschen sticky-and-floating-ui-system.

Eingaben

1. Informationsarchitektur (IA) Taxonomie: Liste der primären Top-Level-Ziele (maximal 3–5 Elemente) und deren Icon-/Label-Metadaten.
2. Anforderungen an Benachrichtigungen & Badges: Spezifikationen für Indikatoren für ungelesene Inhalte (Punkt-Badges vs. numerische Zähler-Badges).
3. Primäre Aktionshervorhebung (optional): Angabe, ob der mittlere Slot eine erhöhte/schwebende Aktionsschaltfläche (FAB) für primäre Erstellungsaktionen benötigt.
4. Design Tokens: Farbpaletten, Elevation-/Schatten-Tokens, flüssige Typografie, Icon-Sets und Abstandsvariablen (aus accessible-color-system, elevation-and-depth-system und iconography-system).
5. Responsive Desktop-Strategie: Wahl des Desktop-Anpassungsmodus (Auf Desktop ausblenden, In Seitenleiste andocken oder In Kopfzeilennavigation umwandeln).

Ausgaben

1. Anatomiespezifikation der unteren Navigationsleiste: Detaillierter Layout-Plan mit Elementbreiten, vertikalem Stapeln von Icon zu Label, Typografie-Tokens, Badge-Positionskoordinaten und Höhenberechnungen einschließlich Safe-Area-Abständen.
2. Token-Map für interaktive Zustände: Definitionen für Farbkontraste und visuelle Zustände für Standard/inaktiv, Aktiv/ausgewählt, Hover, Focus-Visible und Deaktiviert.
3. Daumenbereichs-Barrierefreiheitskarte: Räumliche Platzierungsregeln, die die am häufigsten genutzten Tabs in Richtung des zentralen Daumenreichweitenbereichs optimieren.
4. Richtlinien für Safe-Area & Viewport-Insets: CSS-Implementierungsregeln unter Verwendung von env(safe-area-inset-bottom) für randlose Notch-Bereiche auf Mobilgeräten (iOS Home-Indikator & Android-Gestenleisten).
5. Responsive Breakpoint- & Desktop-Übergangsplan: Responsive Media-Queries und Layout-Regeln zum Ausblenden oder Überführen der unteren Leiste auf Tablet- und Desktop-Bildschirmen.

---

Arbeitsablauf

1. Anzahl der Elemente und räumliches Raster festlegen

Begrenze die untere Navigationsleiste auf 3 bis 5 Top-Level-Elemente:

• 3 Elemente: Gleiche Breitenverteilung per Flex (width: 33.33%). Am besten für kompakte Web-Apps mit klaren Kernansichten geeignet.
• 4 Elemente: Gleiche Breitenverteilung per Flex (width: 25%). Idealer Ausgleich für E-Commerce- und SaaS-Mobil-Apps.
• 5 Elemente: Gleiche Breitenverteilung per Flex (width: 20%). Maximal empfohlenes Limit für mobile Bildschirmbreiten (320 px – 430 px).
• Fünfer-Regel: Niemals 5 Elemente überschreiten. Bei 6+ Zielen sekundäre Seiten in einem „Mehr“- oder „Konto“-Menü-Tab gruppieren oder niedrigpriore Links in eine seitliche Schublade verschieben.

2. Vertikale Anatomie und Höhen-Tokens definieren

Baue einen festen unteren Container, der am unteren Viewportrand positioniert wird:

• Container-Positionierung: Verwende position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;.
• Basis-Höhe: Setze eine Basis-Content-Höhe von 56 px bis 64 px für Standard-Tab-Leisten, plus padding-bottom: env(safe-area-inset-bottom, 0px), um die Berührung durch iOS Home-Indikatoren oder Android-Gestengriffe zu vermeiden.
• Element-Stapellayout:
  • Icon-Größe: Standardisiere auf 24×24 px SVG-Icons (iconography-system).
  • Label-Typografie: Verwende Schriftgröße 11 px bis 12 px (font-size: 0.75rem; font-weight: 500; line-height: 1.2).
  • Vertikaler Abstand: Icon oben (4 px oberer Innenabstand), 2 px Abstand zwischen Icon und Label, 4 px unterer Innenabstand.
  • Touch-Ziel-Bodenfläche: Stelle sicher, dass jeder Tab-Element einen vollflächigen, vollhöhen Touch-Bereich bietet (min-height: 48px, min-width: 48px).

3. Hierarchie aktiver und inaktiver Zustände festlegen

Erzwinge einen starken visuellen Kontrast zwischen dem aktiven Tab und inaktiven Tabs:

• Inaktiver Zustand:
  • Icon-Füllung/Kontur: Dezente Sekundärfarbe (z. B. var(--text-tertiary, #6B7280)).
  • Label-Farbe: Sekundärtextfarbe (var(--text-secondary, #4B5563)).
  • Schriftstärke: Normal oder Medium (400 oder 500).
• Aktiver/ausgewählter Zustand:
  • Icon-Füllung/Kontur: Primäre Markenfarbe oder kontrastreicher Akzent (var(--brand-primary, #2563EB)). Verwende gefüllte Icon-Variante falls verfügbar.
  • Label-Farbe: Primärtext- oder Markenfarbe (var(--text-primary, #111827) oder var(--brand-primary)).
  • Schriftstärke: Halbfett (600).
  • Aktiver Indikator (optional): Ein 3 px oberer Rand oder Pillen-Indikator (background: var(--brand-primary)), oder subtile Hintergrund-Kapsel-Füllung (var(--brand-subtle, #EFF6FF)).
• Kontrastanforderung: Stelle sicher, dass inaktiver und aktiver Text beide das WCAG-AA-Mindestkontrastverhältnis von 4,5:1 gegenüber der Hintergrundfarbe der Leiste bestehen.

4. Badges und Benachrichtigungsindikatoren integrieren

Badges informieren Benutzer über ungelesene Nachrichten, ausstehende Aktionen oder Warenkorbmengen:

• Badge-Positionierung: Positioniere Badges relativ zur oberen rechten Ecke des 24×24 px Icon-Containers des Tabs (position: absolute; top: -2px; right: -6px;).
• Punkt-Badges (Ungelesen-Indikator): 8×8 px solider kreisförmiger Punkt (background: var(--badge-danger, #EF4444)).
• Numerische Badges (Zahlen-Indikator): Pillen-Badge (height: 16px; min-width: 16px; padding: 0 4px; border-radius: 999px; font-size: 10px; font-weight: 700; color: #FFFFFF; background: var(--badge-danger);). Kürze Zählungen über 99 auf 99+.
• Barrierefreier Text: Füge immer einen nur für Screenreader lesbaren Text innerhalb oder neben dem Badge ein (<span class="sr-only">3 ungelesene Benachrichtigungen</span>).

5. Viewport-Safe-Areas und Oberflächengestaltung handhaben

Stelle sicher, dass die untere Navigationsoberfläche über scrollendem Inhalt lesbar bleibt:

• Hintergrundunschärfe & Transluzenz: Verwende einen durchscheinenden Hintergrund mit Backdrop-Filter (background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); border-top: 1px solid var(--border-subtle, #E5E7EB);). Verwende für den Dunkelmodus (background: rgba(17, 24, 39, 0.85)).
• Safe-Area-Inset-Regel: Verwende CSS:

  .bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--nav-bg);
    border-top: 1px solid var(--nav-border);
  }
  

• Seitenunterer Freiraum: Füge dem Haupt-Scroll-Container des Seiteninhalts einen unteren Innenabstand in Höhe der unteren Leistenhöhe plus Safe-Area-Inset hinzu (padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px))), um eine Abschneidung von Inhalten hinter der festen Leiste zu verhindern.

6. Responsive Desktop-Anpassung implementieren

Bottom-Navigationsleisten sind für Touch-Bildschirme optimiert und wirken auf breiten Desktop-Viewports (>1024 px) unnatürlich gestreckt.

• Breakpoint-Strategie:
  • Mobil (<768 px): Rendere feste untere Navigationsleiste.
  • Tablet (768 px – 1023 px): Entweder die untere Leiste zentriert/eingeschränkt lassen (max-width: 480px; margin: 0 auto; border-radius: 16px 16px 0 0;) oder in eine obere Kopfzeile umwandeln.
  • Desktop (≥1024 px): Untere Navigationsleiste ausblenden (display: none). Primäre Ziele wechseln in die obere Kopfzeile (site-navigation-system) oder eine vertikale Seitenleiste (sidebar-navigation-system).

---

Entscheidungsregeln

Wahl des Bottom-Bar-Layoutmusters

Muster	Elementstruktur	Idealer Anwendungsfall	Schlüsselinteraktion
Standard-Tab-Leiste	3 bis 5 gleich breite Elemente mit Icon + Text-Label.	E-Commerce, SaaS-Navigation, Content-Portale.	1-Tap sofortige Ansichtsnavigation.
Center FAB Dock	4 Tabs + 1 erhöhte zentrale Aktionsschaltfläche (z. B. „+ Erstellen“).	Soziale Beiträge, Aufgabenverfolgung, Medien-Erstellungs-Apps.	Zentrale Schaltfläche öffnet Erstellungsmodal/Sheet; äußere Tabs navigieren Ansichten.
Beschriftete Icon-Leiste	4–5 Elemente mit persistenten Icons und sichtbaren 11 px Text-Labels.	Standard für die meisten mobilen Web-Apps; höchste Benutzerfreundlichkeit und Klarheit.	Sofortige Erkennung ohne Icon-Raten.
Icon-Only Kompaktleiste	4–5 Elemente nur mit Icons (Labels erscheinen in aria-label).	Hochvertraute Verbraucher-Apps (z. B. Instagram-ähnliche Schnittstellen).	Vorsicht walten lassen: Nur verwenden, wenn Icons universell erkannt werden.

Badge-Stilauswahl

• Punkt-Badge (Rot/Akzent-Punkt): Verwenden, wenn der Benutzer wissen muss „es gibt neue Aktivität“, die genaue Menge jedoch irrelevant ist (z. B. neuer Blog-Beitrag verfügbar, Systemupdate).
• Numerisches Badge (Zahl): Verwenden, wenn die genaue Elementanzahl das Benutzerverhalten direkt beeinflusst (z. B. „3 Artikel im Warenkorb“, „5 ungelesene Nachrichten“).

---

Einschränkungen

• Barrierefreiheit (WCAG 2.1 / 2.2 AA):
  • SC 2.1.1 Tastaturzugänglichkeit: Untere Navigations-Tabs müssen mit standardmäßigem <nav> mit semantischen <a>-Links oder <button role="tab">-Steuerelementen implementiert werden, die über die Tab-Taste oder die Pfeil-Tasten navigierbar sind.
  • SC 2.4.7 Fokus sichtbar: Fokussierte untere Navigationselemente müssen einen nicht abgeschnittenen Fokusring mit einem Mindestkontrastverhältnis von 3:1 gegenüber dem Hintergrund aufweisen.
  • SC 2.5.8 Zielgröße (Minimum): Touch-Ziele müssen mindestens 48×48 px messen (oder 24×24 px mit umgebendem Abstand, der eine 48 px Touch-Zone gewährleistet).
  • SC 1.4.3 Visueller Kontrast: Inaktive Tab-Labels und Icons müssen mindestens 4,5:1 Kontrast zur Hintergrundfüllung aufweisen.
• Scrollverhalten: Untere Navigationsleisten müssen während des Touch-Momentum-Scrollens zuverlässig fixiert bleiben (position: fixed), ohne Flackern oder vertikales Zittern.
• Safe-Area-Insets: Müssen env(safe-area-inset-bottom) enthalten, um eine Überlappung von Hardware-Home-Indikatoren auf gestenbasierten mobilen Viewports zu vermeiden.

---

Häufige Fehlermuster

• Die fehlende Safe-Area-Lücke: Versäumnis, env(safe-area-inset-bottom) anzuwenden, wodurch untere Nav-Labels von iOS-Gestenleisten oder Bildschirmausschnitten überlappt werden.
• Übermäßige Elementdichte: Erzwingen von 6 oder 7 Elementen in einer unteren Leiste, wodurch Touch-Ziele unter 40 px komprimiert werden und häufige versehentliche Fehltipper entstehen.
• Die gestreckte Desktop-Leiste: Zulassen, dass eine 4-Elemente-Leiste über 1920 px Breite auf einem Desktop-Monitor mit riesigen leeren Lücken zwischen den Icons gespannt wird.
• Unbeschriftete Mystery-Icons: Weglassen von Text-Labels für mehrdeutige Icons (z. B. Verwendung eines Stern-Icons, ohne zu beschriften, ob es „Favoriten“, „Bewertungen“ oder „Belohnungen“ bedeutet).
• Inhaltsabschneidung hinter fester Navi: Vergessen, dem Seitencontainer padding-bottom hinzuzufügen, sodass Fußzeileninhalte und primäre Formular-Senden-Schaltflächen dauerhaft hinter der festen unteren Leiste verdeckt werden.

---

Validierungskriterien

• Die untere Navigation enthält zwischen 3 und 5 primäre Ziele.
• Jeder Tab bietet einen Touch-Zielbereich, der mindestens 48×48 px groß ist.
• Aktive und inaktive Zustände sind visuell unterscheidbar und erfüllen die WCAG-AA-4,5:1-Kontrastanforderungen.
• Das CSS enthält padding-bottom: env(safe-area-inset-bottom) zur Unterstützung von Safe-Area-Insets.
• Der Hauptseiteninhalts-Container enthält einen unteren Innenabstand, sodass Seiteninhalte niemals hinter der festen Leiste verborgen werden.
• Badges enthalten barrierefreien, nur für Screenreader lesbaren Text (z. B. sr-only).
• Die Navigation ist vollständig über die Tastatur erreichbar (Tab und Shift+Tab oder Pfeil-Tasten mit klaren :focus-visible-Indikatoren).
• Auf Viewports ≥1024 px blendet die untere Leiste sauber aus oder wechselt in eine Desktop-Kopfzeile oder Seitenleiste.