Navigation im Webdesign bezeichnet alle Elemente und Strukturen, die Nutzende dabei unterstützen, sich auf einer Website zu orientieren und gezielt zu den gewünschten Inhalten zu gelangen.
Rubrik: Mediendesign & Digitale Medien · Unterrubrik: Web Design · Niveau: Einsteiger Synonyme / Auch bekannt als: Webseitennavigation, Menüstruktur, Informationsarchitektur
Was ist Navigation im Webdesign?
Navigation ist das Rückgrat jeder Website. Sie beantwortet die drei fundamentalen Fragen, die sich jede besuchende Person stellt: Wo bin ich? Wo kann ich hingehen? Wie komme ich dahin? Gute Navigation macht eine Website intuitiv begehbar, ohne dass Nutzende lange nachdenken müssen. Schlechte Navigation – unklare Labels, versteckte Menüs, zu viele Ebenen – führt zu Frustration und hohen Absprungraten. Navigation ist sowohl eine strukturelle (Informationsarchitektur) als auch eine visuelle (UI-Design) Herausforderung.
Erklärung
Im Webdesign gibt es eine Vielzahl von Navigationsmustern, jedes mit spezifischen Stärken und Einsatzbereichen:
Globale Navigation (Header-Menü): Das prominenteste Navigationselement, typischerweise am oberen Seitenrand. Es erscheint auf jeder Seite und bietet Zugang zu den Hauptbereichen der Website. Für Desktop-Layouts eignen sich horizontale Navigationsleisten; für Mobile-Layouts kompaktere Lösungen.
Hamburger-Menü: Drei horizontale Linien als Icon, das auf Klick oder Touch ein Navigationsmenü ein- und ausblendet. Besonders verbreitet auf mobilen Websites, aber umstritten wegen eingeschränkter Sichtbarkeit.
Tab-Navigation (Bottom Navigation): Auf mobilen Apps und mobil-optimierten Websites sind Navigations-Tabs am unteren Bildschirmrand etabliert (wie bei Instagram, YouTube). Maximal fünf Tabs, dauernd sichtbar.
Breadcrumb: Eine Pfadanzeige (z. B. „Startseite > Produkte > Smartphones") zeigt Nutzenden, wo sie sich in der Hierarchie befinden, und ermöglicht schnelles Zurücknavigieren.
Seitennavigation / Sidebar-Navigation: Vertikale Navigation für inhaltsreiche Websites mit vielen Unterpunkten, z. B. Dokumentationen, Shops oder redaktionelle Portale.
Mega-Menü: Aufgeklappt zeigt es alle Hauptbereiche und Unterkategorien gleichzeitig in einem breiten Panel – häufig auf großen E-Commerce-Sites oder Unternehmenswebsites.
Footer-Navigation: Ergänzende Links am Seitenende – für rechtliche Seiten, Kontakt, Sitemap und weniger prominente Inhaltsbereiche.
Entscheidend für gute Navigation ist die Informationsarchitektur: die logische Strukturierung und Benennung von Inhaltsbereichen. Card Sorting und Tree Testing sind Methoden der Nutzerforschung, die helfen, Menüstrukturen nutzerzentriert zu entwickeln.
Beispiele
- Nachrichtenportal: Ein Mega-Menü mit Rubriken (Politik, Wirtschaft, Sport, Kultur) und darunter aktuellen Themen bietet schnellen Zugang zu relevanten Inhalten.
- Online-Shop: Eine Sidebar-Navigation mit filterbaren Kategorien ermöglicht effizientes Browsen durch Hunderte von Produkten.
- Dokumentationswebsite: Eine linke Sidebar mit expandierbaren Kapitelstrukturen und eine Breadcrumb-Anzeige oben geben Entwicklerinnen und Entwicklern jederzeit Orientierung.
- Persönliche Website / Portfolio: Eine einfache horizontale Navigation mit maximal fünf Punkten (Über mich, Projekte, Blog, Kontakt) ist ausreichend und wirkungsvoll.
- App mit Bottom Navigation: Instagram nutzt fünf fixe Icons am unteren Bildschirmrand – Home, Suche, Reel, Shop, Profil – die dauerhaft sichtbar sind und schnellen Wechsel ermöglichen.
In der Praxis
Die Planung von Navigation beginnt mit der Informationsarchitektur: Welche Inhalte gibt es? Wie gruppieren Nutzende sie mental? Methoden wie Card Sorting (Nutzende sortieren Inhalte in Kategorien) und Tree Testing (Nutzende finden Inhalte in einer Baumstruktur) helfen dabei. Das Ergebnis wird in einem Sitemap-Diagramm visualisiert, bevor das visuelle Design beginnt. Bei der Umsetzung in Figma oder Code sollten aktive Zustände, Hover-Effekte und die Tastaturnavigation berücksichtigt werden. Für internationale Websites muss die Navigation auch für RTL-Sprachen (Arabisch, Hebräisch) adaptierbar sein.
Vergleich & Abgrenzung
Navigation vs. Suchfunktion: Beide helfen, Inhalte zu finden, sind aber komplementär. Navigation ist für das Browsen und Entdecken gedacht; Suche ist für Menschen mit konkreten Zielen. Gute Websites bieten beides. Horizontale vs. vertikale Navigation: Horizontale Navigation eignet sich für wenige Hauptpunkte auf Desktop-Layouts; vertikale Navigation für viele Punkte oder tiefe Hierarchien, besonders in Sidebar-Layouts. Navigation vs. Interaktion: Navigationselemente führen zu anderen Seiten oder Abschnitten; Interaktionselemente (Buttons, Formulare) lösen Aktionen aus. Die Unterscheidung ist in der visuellen Gestaltung wichtig.
Häufige Fragen (FAQ)
Wie viele Navigationspunkte sind ideal? Die „Magical Number Seven plus/minus Two" von George Miller ist in der Navigation eine grobe Orientierung: Sieben Hauptpunkte sind eine kognitive Obergrenze. In der Praxis sind drei bis fünf Hauptnavigationspunkte oft optimal – weniger Auswahl bedeutet schnellere Entscheidungen.
Sollte das Hamburger-Menü auf der Desktop-Version verwendet werden? In der Regel nein. Auf Desktop-Bildschirmen ist genug Platz für sichtbare Navigationspunkte. Das Hamburger-Menü versteckt Navigation und erhöht die Interaktionsschritte. Es ist eine Lösung für mobile Bildschirme, nicht für Desktop-Layouts.
Verwandte Einträge
Weiterführend
- Morville, P. / Rosenfeld, L. / Arango, J. (2015): Information Architecture: For the Web and Beyond. O'Reilly Media.
- Krug, S. (2014): Don't Make Me Think. 3. Auflage. New Riders.
- Nielsen, J. (2000): Designing Web Usability. New Riders.
