Navigation Patterns

Navigation Patterns sind wiederkehrende Designlösungen für die Hauptnavigation einer Anwendung, die Nutzern helfen, sich zu orientieren und Inhalte effizient zu erreichen.

Rubrik: Mediendesign & Digitale Medien · Unterrubrik: UX/UI Design · Niveau: Fortgeschritten Synonyme / Auch bekannt als: Navigationsstruktur, Menu Patterns, Navigationsmuster

Was ist ein Navigation Pattern?

Ein Navigation Pattern definiert, wie Nutzer zwischen verschiedenen Bereichen einer Anwendung oder Website wechseln. Die Wahl des richtigen Musters beeinflusst maßgeblich, wie intuitiv sich eine Anwendung anfühlt, wie schnell Nutzer ihr Ziel finden und ob sie die Informationsarchitektur überhaupt verstehen. Falsch gewählte Navigationsmuster zählen zu den häufigsten Ursachen für hohe Absprungraten und schlechte Usability-Bewertungen.

Erklärung

Top Navigation Bar

Die horizontale Navigationsleiste am oberen Bildschirmrand ist das klassische Muster für Desktop-Webanwendungen. Sie eignet sich besonders, wenn:

• Wenige Hauptbereiche existieren (ideal: 3–7 Navigationspunkte)
• Die Anwendung flach strukturiert ist (wenige Hierarchieebenen)
• Alle Bereiche gleichwertig sind und keine Unterpunkte dominieren
• Die Zielgruppe primär Desktop-Nutzer sind

Die Top Nav ist sofort sichtbar, benötigt keinen zusätzlichen Klick und kommuniziert klar, welche Hauptbereiche existieren. Ihre Schwäche liegt im begrenzten Platz: Mehr als sieben Punkte werden unlesbar, und auf mobilen Geräten fehlt schlicht die horizontale Breite.

Sidebar-Navigation

Die vertikale Navigation am linken (seltener rechten) Rand eignet sich für:

• Komplexe Anwendungen mit vielen Bereichen und Unterbereichen
• B2B- und SaaS-Tools, die Nutzer täglich verwenden
• Situationen, in denen Icons + Labels die Navigation beschleunigen
• Hierarchische Strukturen (expandierbare Unterpunkte)

Die Sidebar kann kollabiert (Icon-only) oder expandiert werden, was auf unterschiedlichen Bildschirmbreiten flexibel funktioniert. Google Workspace, Slack, Figma und Notion setzen alle auf Sidebar-Navigation, weil sie die Hauptnavigation dauerhaft sichtbar halten, ohne den Inhaltsbereich zu dominieren.

Bottom Tab Bar

Das mobile Standard-Navigationsmuster für native Apps platziert 3–5 Hauptbereiche am unteren Bildschirmrand — innerhalb der natürlichen Daumenreichweite. Apple Human Interface Guidelines und Google Material Design empfehlen dieses Muster explizit für mobile Apps mit gleichwertigen Hauptbereichen.

Vorteile der Bottom Tab Bar:

• Daumenfreundlich: Erreichbar ohne Griffumpositionierung
• Immer sichtbar: Keine Navigation nötig, um zur Navigation zu gelangen
• Kontexterhalt: Jeder Tab behält seinen eigenen Navigationszustand

Instagram, Spotify, YouTube und TikTok nutzen alle die Bottom Tab Bar als primäres Navigationsmuster.

Hamburger-Menü

Das Dreizeilenicon (☰) verbirgt die Navigation hinter einem Klick. Es spart Bildschirmfläche, erzeugt aber immer einen Interaktionsschritt Mehraufwand. Forschungen von Luke Wroblewski und NNG zeigen konsistent, dass versteckte Navigation die Nutzung der verborgenen Bereiche signifikant reduziert.

Hamburger-Menü ist sinnvoll bei:

• Sekundärer Navigation (Einstellungen, Konto, Hilfe)
• Sehr vielen Navigationspunkten, die selten gebraucht werden
• Ergänzung zur Bottom Tab Bar (sekundäre Aktionen)

Hamburger-Menü ist Anti-Pattern bei:

• Primärer Navigation in mobilen Apps mit häufigen Bereichswechseln
• Anwendungen, bei denen alle Bereiche gleichwertig frequentiert werden

Beispiele

1. Spotify (Mobile): Bottom Tab Bar mit Home, Suche und Bibliothek — die drei Kernfunktionen sind immer einen Daumentipp entfernt. Weitere Aktionen landen im Profil-Icon.
2. Google Drive (Desktop): Sidebar-Navigation mit expandierbaren Ordnern. Die kollabierbare Struktur erlaubt maximale Arbeitsfläche bei Bedarf.
3. Amazon (Desktop): Top Navigation mit Megamenü — Kategorien auf oberster Ebene, Unterkategorien im Dropdown. Ideal für flache, breite Katalogstrukturen.
4. Airbnb (Mobile): Bottom Tab Bar mit Suche, Reisen, Merkliste und Profil. Jeder Tab repräsentiert einen eigenständigen Nutzungsfluss ohne Überschneidung.
5. Notion (Desktop): Sidebar als primäre Navigation, die sowohl flache Seiten als auch tief geschachtelte Wikis abbildet. Der "kollabiert"-Modus gibt Schreibfläche frei.

In der Praxis (Figma-Umsetzung)

Top Navigation: Erstelle einen Auto-Layout-Frame mit Horizontal-Richtung, Höhe 64 px, Hintergrundfarbe aus dem Design Token. Nutze Figma-Varianten für normale, hover und active States. Verwende Sticky-Position im Prototyping-Modus.

Bottom Tab Bar: Frame mit fester Höhe 56–80 px (zzgl. Safe Area auf iOS: +34 px). Auto Layout mit Space Between für gleichmäßige Verteilung. Jedes Tab-Item: Icon 24 px + Label 10 px, zusammen min. 44 × 44 px Touchfläche (Fitts' Law).

Sidebar: Verwende einen Frame mit fester Breite (expandiert: 240 px, kollabiert: 64 px). Nutze Figma-Varianten mit dem Boolean-Property collapsed: true/false. Overflow Hidden verhindert, dass Inhalte beim Kollabieren herausfallen.

Hamburger-Overlay: Overlay-Komponente in Figma mit Position: Fixed, Animation Move In von links, Backdrop-Opacity 40 %. Schließen via Overlay-Dismiss-Klick auf den Backdrop-Bereich.

Vergleich & Abgrenzung

Das häufigste Fehler-Pattern ist der Einsatz des Hamburger-Menüs auf Mobil als Ersatz für eine Bottom Tab Bar — allein weil es Platz spart. Platz ist weniger wichtig als Auffindbarkeit.

Häufige Fragen (FAQ)

Kann ich Top Nav und Sidebar kombinieren? Ja, in komplexen Desktop-Anwendungen ist das eine valide Lösung. Die Top Nav übernimmt globale Aktionen (Suche, Benachrichtigungen, Profil), die Sidebar die kontextuellen Arbeitsbereiche. Salesforce und Jira nutzen dieses hybride Muster.

Wie viele Punkte sollte eine Bottom Tab Bar haben? Apple und Google empfehlen maximal 5. Mit 3–4 ist die kognitive Last am niedrigsten. Mehr als 5 macht die einzelnen Touch-Targets zu klein und den visuellen Scan unübersichtlich.

Verwandte Einträge

• Tabs — Sekundäre Navigation innerhalb eines Bereichs
• Breadcrumb Navigation — Orientierung in hierarchischen Strukturen
• Progressive Disclosure — Komplexität schrittweise enthüllen

Weiterführend

• Norman, D. A. (2013). The Design of Everyday Things (überarbeitete Ausgabe). Basic Books.
• Wroblewski, L. (2011). Mobile First. A Book Apart.
• Hoober, S. (2013). How Do Users Really Hold Mobile Devices? UX Matters.
• Nielsen Norman Group (2016). Hamburger Menus and Hidden Navigation Hurt UX. nngroup.com.