Navigationsdesign und Navigationskonzepte

Infografik userinterfacedesign Navigationskonzepte und Navigationsdesign

Die Navigation führt die Nutzenden durch die verschiedenen Teile des digitalen Produkts

Die Informationsarchitektur (IA) und das Navigationsdesign hängen eng miteinander zusammen, müssen aber in der Praxis klar unterschieden werden. Während die IA die Struktur des digitalen Produktes definiert und das Design der Navigation mitbestimmt, besteht die Navigation des digitalen Produkts aus verschiedenen User Interface-Komponenten.

Was ist Navigationsdesign?

Horizontale Navigationsleisten sind im Headerbereich oberhalb des Inhaltsbereichs platziert. Die Hauptmenüpunkte, im Idealfall nicht mehr als vier bis fünf Themen, werden in Form vom von Textlinks und Icons aufgeführt. Die Hauptmenüpunkte teilen sich bei der horizontalen Navigation den wertvollsten Platz im Headerbereich mit dem Logo, der Suche und allenfalls Login und Warenkorb.

Grundlegende Navigationskonzepte

Horizontale Navigationsleiste und Tableiste

Horizontale Navigationsleisten sind im Headerbereich oberhalb des Inhaltsbereichs platziert. Die Hauptmenüpunkte, im Idealfall nicht mehr als vier bis fünf Themen, werden in Form vom von Textlinks und Icons aufgeführt. Die Hauptmenüpunkte teilen sich bei der horizontalen Navigation den wertvollsten Platz im Headerbereich mit dem Logo, der Suche und allenfalls Login und Warenkorb.

Navigationsmenü mit Burger Icon (Hamburger-Menü / Sidebar)

Die Menüpunkte beim Navigationsmenü mit Burger Icon sind hinter einem Icon mit oder ohne Textlabel versteckt und öffnet sich erst auf Klick/Touch. Das Menü legt sich über den Inhalt, bei Smartphones oft über den ganzen Screen. Nach dem Schliessen des Hauptmenüs sind die Menüpunkte für die Nutzenden nicht mehr sichtbar. Dieses Navigationskonzept bietet viel Platz für eine grosse Anzahl an Menüpunkten.

Navigationshub / Dashboard

Der Navigationshub / das Dashboard führt auf dem Startbildschirm die Menüpunkte auf, die am häufigsten verwendet werden. Diese Navigationskonzept ist ein sehr effizienter Verteilungspunkt und eignet sich für digitale Produkte, mit denen Nutzende wenige spezifische Aufgaben erledigen (z.B. Musik hören, Ticket buchen, Check-In …).

Mega-Dropdown

Das Mega-Dropdown öffnet sich beim Mouseover auf einen Menüpunkt. Angezeigt werden in Kategorien gruppierte Unterpunkte. Mittels Typografie, Icons und Bilder werden die einzelnen Links so gestaltet, das die Nutzenden schnell einen Überblick über die Zugänge erhalten. Wichtig ist, dass sich das Mega-Dropdown gut vom eigentlichen Inhalt unterscheidet.

Akkordeon-Menü (Baumstruktur)

Das Akkordeon-Menü kann zahlreiche Menüpunkte komprimiert darstellen. Mittels Touch/Klick auf eine Oberkategorie öffnet sich der Bereich darunter mit den jeweiligen Unterkategorien. Oft wird das Akkordeon-Menü für mobile Anwendungen als Pendant zum Mega-Dropdown vom Desktop eingesetzt.

Off-Canvas-Navigation / Off-Canvas-Flyout

Bei der Off-Canvas-Navigation sind die Navigationspunkte seitlich ausserhalb des Anzeigebereichs angeordnet. Wie bei der Navigation mit Burger-Icon schieben sich die Navigationspunkte bei Tab / Klick auf das Icon von der Seite her in den sichtbaren Bereich.

Aus der Praxis

Checkliste

Beantworten Sie folgende Fragen :

  • Welches Navigationskonzept erwarten die Nutzenden bei dieser Art von Produkt?
  • Welches Navigationskonzept unterstützt den Nutzer bei seiner Tätigkeit am besten?
  • Wo im Seitenlayout erwarten die Nutzer die Navigationskomponente?
  • Gibt es Plattformstandards, (siehe Guidelines unten) die beachtet werden müssen?

Tipps

  • Definieren Sie die IA bevor Sie mit dem Design der Navigation beginnen.
  • Die IA muss nicht unbedingt vollständig fertig sein, damit Sie mit Wireframes und ersten Prototypen starten können – aber es ist zwingend notwendig zu wissen, wie komplex und umfangreich das geplanten digitale Produkt wird.
  • Treffen Sie Entscheide für bestimmte Navigationskomponenten nicht nach dem Aussehen und ihren persönlichen Präferenzen.
  • Setzen Sie Navigationskomponenten ein, die den Bedürfnissen und Erwartungen der Nutzer und den Inhalten des digitalen Produkts dienen.

Guidelines zu Navigation