Na­vi­ga­ti­ons­kon­zep­te

Wo finde ich die Inhalte auf einer Website, die mich interessieren? Oft ist es diese oder eine ähnliche Frage, die sich User*innen stellen, wenn sie das erste Mal eine Website besuchen. Um die User*innen zu ihren gesuchten Inhalten zu führen, wird ein geeignetes Navigationskonzept benötigt. Anderenfalls wird der gesuchte Inhalt schwer aufzufinden sein und die Website wird verlassen. 

Was ist eine Navigation?

Unter einer Navigation einer Website versteht man in der Regel die Listen von Inhaltskategorien oder Funktionen, welche die User*innen als Menüpunkte visuell wahrnehmen. Diese Listen werden meist als Gruppe von Links oder Symbolen dargestellt und verlinken üblicherweise zu internen Seiten. 

Über die Jahre hinweg gab es immer wieder neue Konzepte und Ideen, wie sich die User*innen auf einer Website bewegen können. Nachfolgend gehen wir auf ein paar Navigationskonzepte ein und stellen diese kurz vor. 

Horizontal Navigation Bar / Top-Bar Navigation

Das wohl möglichst weit verbreitete Navigationskonzept ist die Top-Bar Navigation oder auch Horizontal Navigation Bar genannt. Diese Navigation zeichnet sich durch eine horizontale Leiste aus, welche oftmals direkt ober- oder unterhalb des Seitenkopfs platziert ist. Die Menüpunkte werden nebeneinander abgebildet und stellen die primäre Navigation der Website dar. Diese Menüleiste verbleibt auf der gesamten Website identisch, auch wenn sich die User*innen auf einer Unterseite befinden. Diese Eigenschaft erleichtert es den User*innen, auf die wesentlichen Seiten der Website zu jedem Zeitpunkt zurückzukehren. 

Weiterhin ist die Top-Bar / Navigation Bar oftmals der oberste Einstiegspunkt einer Website und dient bei sehr einfachen Websites (Landingpage oder One-Pagern), sowie auch bei komplexen Websites (Online-Shops) als gutes Navigationskonzept. Sobald die Navigationsarchitektur viele unterschiedliche Hierarchien abbildet, kann die Top-Bar Navigation über ein Drop-Down oder ein Mega-Menu erweitert werden. 

Geeignet ist dieses Navigationskonzept vor allem für eine geringe Anzahl an Menüpunkten der primären Navigationsebene. Eine definierte Limitierung gibt es zwar nicht, jedoch umfasst die Menüleiste in der Regel 6 – 9 Menüpunkte. Neben der beschränkenden Breite der Menüleiste sind Faktoren wie die Schriftart und Schriftgröße ebenfalls zu berücksichtigen.

Vertical Navigation Bar / Sidebar Navigation

Ein weiteres sehr populäres Konzept ist die Vertical Navigation Bar bzw. Sidebar Navigation. Ähnlich wie bei der Top-Bar Navigation werden die Menüpunkte hierbei allerdings vertikal übereinander platziert. Meist wird diese Menüleiste am linken Seitenrand der Website platziert und ist vor allem bei mehrspaltigem Layout oft im Einsatz. Diese Positionierung hat den Vorteil, dass eine Vielzahl an Menüpunkten dargestellt werden können. Zudem können bei Bedarf auch weitere Navigationsebenen initial angezeigt werden oder diese über ein Fly-Out in die vertikale Navigation integriert werden. Jedoch hat diese Position auch den Nachteil, dass die Menüleiste viel Platz der Website in Anspruch nimmt und somit der verfügbare Raum für den wesentlichen Inhalt kleiner ausfällt. 

Dieses Navigationskonzept wird vorwiegend auf komplexen Websites mit einer Vielzahl an Menüpunkten der obersten Ebene verwendet. Um weiterhin eine klare Struktur zu gewährleisten, sollten die Verlinkungen gruppiert werden oder die Untermenüpunkte in Fly-Out Menüs ausgelagert werden.

Drop-Down / Fly-Out

Drop-Down und Fly-Out sind im eigentlichen Sinn keine eigenständigen Navigationskonzepte. Als Erweiterung für die Top-Bar Navigation (Drop-Down) und die Vertical Navigation Bar (Fly-Out) bieten sie allerdings die Möglichkeit, tiefere Navigationsebenen mit darzustellen, ohne dass die Navigation unübersichtlicher wird. 

Der Unterschied zwischen Drop-Down und Fly-Out ist sehr gering. Als Drop-Down bezeichnet man ein Menü, welches sich nach unten (vertikal) öffnet. Hingegen öffnet sich beim Fly-Out das Menü nach rechts oder links (horizontal). 

Zu beachten ist, dass beim Drop-Down und Fly-Out Menüpunkte für die User*innen nicht direkt sichtbar sind. Um den User*innen zu signalisieren, dass ein Menüpunkt ein Untermenü enthält, sollte ein Indikator (Pfeil o.Ä.) verwendet werden.

Mega-Menu

Ein Mega-Menu zeichnet sich aus, mehrere Navigationsebenen auf einmal anzeigen zu können. Komplexe Strukturen werden dadurch gut dargestellt und die User*innen erlangen schnell einen Überblick über die wesentlichen Informationen. Die verschiedenen Ebenen werden durch Layout und Typografie sichtbar voneinander getrennt. 

Neben den eigentlichen Menüpunkten bietet ein Mega-Menu auch die Option, weitere Inhalte wie z. B. Bilder oder Icons zu platzieren. Diese Möglichkeit darf allerdings keinesfalls überstrapaziert werden. Das Mega-Menü muss für die User*innen weiterhin gut zu erfassen sein.

Hamburger Menu

Das Hamburger Menu (kurz Burger Menu) beschreibt in der Regel ein Menü, welches über einen Hamburger-Icon-Button (drei horizontal übereinander liegende Striche) zu erreichen ist. Das eigentliche Menü ist initial für die User*innen visuell nicht sichtbar und wird erst nach Interaktion mit dem Button angezeigt. 

Dieses Menu wurde zunächst für kleine Viewports (Smartphones) entwickelt, um wiederkehrende Navigationselemente zentral an einer Stelle im Zugriff zu haben. Mittlerweile wird dieses Navigationskonzept unabhängig von der Größe des Viewports eingesetzt und User*innen haben gelernt, dass sich weitführende Navigationselemente hinter dem Hamburger-Icon befinden. 

Allerdings führt das initial ausgeblendete Menü auch dazu, dass die Navigation weniger Aufmerksamkeit erhält und somit die Interaktion mit den User*innen abnimmt. Dass weitere Seiten vorhanden sind, ist nicht direkt wahrzunehmen. 

Off-Canvas

Ein Off-Canvas Menü ist für die User*innen initial nicht zu sehen, da dieses Menü sich außerhalb des Viewports befindet. Erst durch eine Interaktion, z.B. ein Klick auf einen Button oder eine Touch-Swipe Geste, wird das Menü eingeblendet. Hierdurch wird dann die Website entweder überlagert/verdeckt (Drawer) oder teilweise aus dem Viewport geschoben (Slide-Out).  

Ähnlich wie beim Hamburger Menu wirkt sich die zunächst ausgeblendete Navigation negativ auf die Interaktion mit den User*innen aus.

Wann welches Navigationskonzept eingesetzt wird, hängt von vielen Kriterien ab. Eine genaue Anforderungsanalyse sowie das Prüfen der Usability mithilfe von interaktiven Prototypen kann die Entscheidung vereinfachen. 

Es gibt noch viele weitere Navigationskonzepte, auf die wir in diesem Artikel nicht eingegangen sind. Dazu zählen unter anderem Footer-Navigation, Breadcrumbs, Tabs oder Tags Navigation. Auf diese gehen wir in einem späteren Blogbeitrag genauer ein. Eine gelungene Website-Navigation ist in jedem Fall der Schlüssel zum Erfolg und sollte für jede Website individuell entschieden werden, um zum Konzept und den Anforderungen der User*innen zu passen.