Apps, Web-Applikationen und Webseiten sind mit Inhalten vollgepackt. Wie gestaltet man diese so, dass die Nutzer:innen sich gleich zurechtfinden und die gesuchten Inhalte ohne Umwege erreichen?  Eine gut durchdachte Navigation soll genau dafür sorgen. Die User möchten keine technischen Geräte bedienen oder sich lange damit beschäftigen, wie sie bestimmte Funktionen aufrufen können, sondern einfach nur mit der Software ihre Aufgaben bearbeiten. Eine Navigation muss dafür sorgen, dass die Inhalte und Funktionen jederzeit problemlos aufgerufen werden können.

Die Navigationskonzepte von mobilen Apps, Webseiten und auch von Desktop-Anwendungen sind sich in der letzten Zeit zunehmend ähnlicher geworden. Ein Grund dafür ist, dass Web-Applikationen heute auf nahezu allen Geräten, vom Smartphone bis zum Desktop, ausgeführt werden, demzufolge wird das User Interface meist responsiv gestaltet. Ein weiterer wichtiger Punkt ist der Einsatz von Touch-Bildschirmen. Wenn Nutzer:innen auf Inhalte mit dem Finger klicken bzw. Winsch- und Drehgesten ausführen können, dann führt dieses zu einer anderen Arte von Navigation, als wenn man lediglich die Maus nutzen kann.

Grundsätzlich wird zwischen vertikaler und horizontaler Navigation unterschieden.

  • Horizontale Navigation: Diese gilt als „alter Standard“. Dabei handelt es sich um eine uns allen bekannte Vorgehensweise: Über die typischen Menüpunkte Datei öffnen…, Datei neu… und Datei schließen, werden Dokumente geöffnet, neu angelegt und geschlossen. Diese Art der Navigation kann auch in Form von einer horizontalen Navigationsleiste ausgeführt werden. Eine Erweiterung um ein Dropdown-Menü oder um ein Flyout mit weiteren Optionen ist ebenso denkbar. Heutzutage findet man eine horizontale Navigation immer noch bei den meisten Desktop-Anwendungen. Ein typisches Beispiel ist Microsoft Word mit dem bekannten Anwendungsmenü. Die Nutzeri:innen sind mit dem logischen Aufbau und der strengen Hierarchie vertraut. Dieser Art der Navigation beansprucht jedoch viel Platz und ist daher hauptsächlich für Desktop-Anwendungen, d.h. große Bildschirme geeignet.  Die Tab-Leiste ist eine weitere Form der horizontalen Navigation. Eine Tab-Navigation kann grundsätzlich sowohl auf Smartphones, Tablets und Desktop-PCs angewendet werden. Folgt man den Vorgaben der beiden mobilen Betriebssysteme, so wird die Tab-Leiste auf Android am oberen und auf iOS am unteren Rand platziert. Man kann aber die Tab-Leiste auch manuell anordnen. Verwendet man eine Tab-Leiste kommt es darauf an, aussagekräftige Icons und Beschriftungen zu finden. Wichtig ist, dass anhand der Icons und Beschriftungen der erwartete Inhalt bzw. die Funktion eindeutig identifiziert werden können. Man sollte sich an gut verständlichen und häufig verwendeten Symbolen orientieren und keine Rätsel aufgeben. Auf mobilen Geräten muss man beachten, dass der verfügbare Platz für den die Beschriftung knapp bemessen ist. Man muss daher mit einem oder maximal zwei Wörtern auskommen.
  • Vertikale Navigation: Eine vertikale Navigation stellt eine Alternative zu der o.g. horizontalen Navigation dar. Ein typisches und uns allen bekanntes Beispiel ist das Hamburger-Menü. Mit einem Klick auf das Icon wird das eigentliche Menü eingeblendet. Das Hamburger-Menü wird meist durch drei horizontale Striche dargestellt. Es dient insbesondere dazu, wertvollen Bildschirmplatz einzusparen. Es ist sinnvoll bei Apps, wo mit weiteren Klicks sehr umfangreiche Inhalte angezeigt werden sollen. Auf einem mobilen Device erwarten die Anwender:innen ein solches Menü durchaus. Ebenso fallen die drei Menüpunkte auch auf, denn die Bildschirmfläche nicht so groß ist, dass das Icon übersehen wird. Das Hamburger Menü kann auch für Desktop Anwendungen genutzt werden. Ab einer bestimmten Bildschirmbreite wird das Menü unterhalb des Hamburger-Icons ständig eingeblendet. Es gibt weitere Varianten des Hamburger-Menüs, zum Beispiel das Hamburger-Menü mit Fullscreen-Darstellung. Bei einem Klick auf das Hamburger-Icon, dann wird der gesamte Bildschirm mit dem Menüeinträgen belegt. Es ist nicht eindeutig definiert, an welcher Seite das Hamburger-Icon eingeblendet wird. Beide Positionen, d.h. links oben und rechts unten sind möglich und findet man auch in der Praxis.

Es gibt weitere Navigationskonzepte. Die Gaming-Navigation eignet sich für kreative Projekte. Mit der Navigation wird ein Erlebnis geschaffen. Der Nutzer wird in einer spielerischen Art und Weise herangeführt. Die Navigation wird als Spiel dargestellt und daher eignet sich diese Variante nicht für jeden Projekt und nicht für jede Nutzergruppe. Die Button-Navigation setzt, wie der Name bereits sagt, auf Buttons und bietet mehr Platz, um die Informationen und Icons zu platzieren. Wichtig ist es derartige Icons zu verwenden, dass die Benutzer erkennen können, welche Funktion sich hinter einzelnen Punkten verbirgt. Die Off-Canvas-Navigation funktioniert wie ein Slider (Bild 1). In diesem Fall befindet sich das Menü zunächst außerhalb des Bildschirms und wird bei Bedarf hineingeschoben. 

Bild 1: Die Off-Canvas-Navigation funktioniert wie ein Slider.

Weitere Navigationskonzepte sind beispielsweise das Pull-down-Menü, das Mobile Button-Menü, das Mega-Drop-Down-Menü, die Tab-Icon-Menü.

Bei der Wahl des Navigationskonzeptes soll man sich in der ersten Linie auf das Unternehmens- bzw. Gesamtkonzept, die zugrunde liegende Philosophie und die Zielgruppe orientieren und sich mit folgenden Fragen beschäftigen:

  • Welche Informationen sucht die Zielgruppe vorrangig?
  • Wie kann man die Informationen sinnvoll vermitteln?
  • Wie kann man diese Suche erleichtern?

In diesem Sinne: Die passende Navigation ist wichtig, dass die Inhalte auch gefunden werden. Niemand nützt es etwas, wenn die relevanten Informationen erst über die dritte Ebene erreicht werden können.