Navigationskonzepte

Betrachten wir das Wort Navigation aus der Sicht der Etymologie, bedeutet es so viel wie “Kurs- und Standortbestimmung von Schiffen und Flugzeugen”. Es beschreibt also, wie man jemanden auf seiner geplanten Route begleiten und zu seinem Ziel führen kann. Wie bei jeder Erstellung eines Produkts, steht der Nutzer im Fokus. Daher sollte in erster Linie eine durchdachte Navigation erstellt werden. Das Interface spielt hierbei ebenfalls eine Rolle, jedoch entsteht auch trotz kreativsten Lösungen Frust beim Nutzer, wenn es dabei an der Struktur mangelt. Das Menü ist eines der zentralsten Navigationselemente. Es ist ein grafisches Steuerelement, das die Interaktionsmöglichkeiten mit der Anwendung darstellt.

Konzepte

Horizontale Navigationsleiste

Die klassische horizontale Navigationsleiste ist eine weit verbreitete Navigation. Sie befindet sich im Header-Bereich und zeigt auf einem Blick alle Hauptnavigationspunkte. Idealerweise sollten hier nicht mehr als 4 oder 5 Punkte aufgeführt werden. Denn neben den Hauptnavigationspunkten findet man im Header-Bereich oftmals noch Logo, Login, Suche und/oder Warenkorb. Dies könnte auf kleineren Monitoren schnell unübersichtlich und gequetscht aussehen.

Drop-Down Navigation

Auch diese Art der Navigation gehört zu den Klassikern. Beim Auslösen eines Hauptnavigationspunktes erscheinen weitere Punkte. Diese Navigation bietet eine Strukturierung und Übersicht aller Navigationslinks.

Hamburger Menü

Wie der Name schon verrät, erinnert das Symbol an einen Hamburger. Mobil ist es das gängigste Menü, aber auch in Desktop Varianten wird es zunehmend beliebter. Erst beim Klicken erscheint das Menü. Mehr über das Hamburger-Menü findest du hier.

Hamburger-Full-Screen-Navigation

Diese Art der Navigation ist eine Erweiterung des Hamburger Menüs. Die Menüpunkte erscheinen als Full-Screen über den gesamten Bildschirm und es eignet sich besonders, um die Hauptnavigationspunkte in den Fokus zu stellen.

Mega Menü

Das Mega Menü ist ein etablierter Klassiker. Diese Navigation zeigt mehrere Ebenen auf einmal an. Dies kann von links nach rechts (Flyout) oder von oben nach unten (Dropdown) geschehen. Es bietet viele Möglichkeiten der Gestaltung und Spielraum für Kreativität. Das kann aber auch schnell unübersichtlich und überladen werden.

Button Navigation

Bei der Button Navigation stehen Icons im Fokus, welche oft textlich unterstützt werden. Der Schwerpunkt liegt bei dieser Navigation aber auf den Symbolen. Der Nutzer hat also eine zusätzliche visuelle Unterstützung und Platzersparnis.

Slide-Navigation

Diese Art des Menüs ist im “Ruhemodus” recht unauffällig. Die Seite bleibt aufgeräumt und der Inhalt steht im Vordergrund. Beim Auslösen der Navigation schieben sich die Navigationspunkte in den sichtbaren Bereich und der Nutzer kann die auf die Links zugreifen.

Akkordeon Navigation

Dieses Menü ist wie eine Baumstruktur aufgebaut. Diese Art ermöglicht es, viele Menüpunkte unterzubringen und zu komprimieren.

Bottom Navigation

Sie ist besonders gerne bei mobilen Geräten im Einsatz. Wie der Name schon verrät, befindet sich die Navigation am unteren Rand des Produkts und ist daher leicht mit einer Hand zu benutzen. Vorwiegend werden Icons verwendet, da auch der Platz eher begrenzt ist.

Raster-Navigation

Raster-Navigation findet man z. B. bei Streaming-Diensten oder Buchungssystemen. Die Navigation steht klar im Fokus und füllt die gesamte Seite aus. Sie ermöglicht eine schnelle Übersicht und zeigt meist Bilder und Grafiken mit Text als Navigationspunkt.

Welche dieser Varianten zum Einsatz kommt, hängt stark von der Zielgruppe, dem Ausgabemedium und Produkt, sowie weiteren Faktoren ab. Es gibt also nicht die eine richtige Wahl der Navigation, die individuelle Entscheidung ist ausschlaggebend.