Infografik Userinterfacedesig Information Architecture 01

Das passende Navigationsmodell definieren

Die Navigation hilft den Nutzenden den Umfang und Inhalt der App zu verstehen.

Navigieren oder suchen

Die (mobile) Navigation muss die Nutzenden bei ihren Tätigkeiten unterstützen und sollte gleichzeitig möglichst wenig wertvollen Platz für sich beanspruchen. Eine grosse Herausforderung bei der Implementierung der mobilen Navigation ist der Spagat zwischen dem Inhalt, der immer höchste Priorität haben sollte und der Gestaltung der Navigation, die gut erreichbar und auffindbar sein muss. Jedes Navigations-Muster hat sein Vor- und Nachteile.

Wenn Nutzende nicht genau wissen nach was sie suchen, erfolgt der Einstieg in der Regel über die Navigation. Ausserdem ist es für die Nutzenden einfacher und mit weniger mentaler Anstrengung verbunden, mit dem Finger auf einen Navigations-Link zu taben, als eine gute Suchanfrage zu tippen.

Navigationsmodelle

Die Baumstruktur

Die Baumstruktur (meistens als Liste dargestellt) bietet eine hierarchische Nutzerführung von einem Screen zum nächsten.
Die Baumstruktur ist ein bewährtes Navigationsmodell und eignet sich für die übersichtliche Darstellung mehrer Kategorien. Gleichwertige Informationen werden in scrollbaren Listen angeordnet. Über die Listeneinträge wird in tiefer liegende Hierarchieebenen navigiert.

Tab-Bar-Navigation

In der Tab-Bar-Navigation (permanente Liste am oberen oder unteren Rand) sind die wichtigsten Navigationspunkte über Schaltflächen jederzeit erreichbar. In den einzelnen Tabs werden in der Regel maximal fünf Funktionen oder Modi abgebildet.

Blatt-für-Blatt-Navigation

Die Blatt-für-Blatt- Navigation bietet eine einfach, lineare Bedienlösung mit flacher Hierarchie (links und rechts, allenfalls auch nach oben und unten) und eignet sich für Produkte mit überschaubaren und gleichwertige Inhalte.

Grid-Navigation

Die Grid-Navigation eignet sich für die Darstellung vieler Navigationspunkte mit einheitlichen Inhalten wie zum Beispiel eine Fotogalerie oder Portfolio. Bei der Grid-Navigation stehen Bilder im Vordergrund  um die Inhalte für due Nutzenden zu differenzieren.

Hub & Spoke

Die Hub & Spoke-Navigation hat hierarchische Eigenschaften. Sie hat eine zentrale Startseite, aus der der Nutzer navigieren kann – dem Hub. Der Anwender sieht also nach dem Starten der App einen Hub-Screen mit Icons. Bei einer Unterseite spricht man von einem Spoke, der wiederum ein Hub sein kann. Möchte der Nutzer nun in einen anderen Spoke wechseln, muss er wieder zurück zum letzten Hub.

Sidebar-Navigation

Die Sidebar-Navigation ist auf den ersten Blick für die Nutzenden nicht sichtbar. Erst durch die Interaktion mit dem Hamburger-Icon, schiebt sich das Navigations-Menu in den sichtbaren Bereich. Hier hat es Platz für beliebig viele Navigationspunkte.

Dashboard

Ein Dashboard zeigt alle Funktionen und Menüs übersichtlich auf der Startseite. Der einzelne Navigationspunkt wird mit einem Icon und kurzen Text dargestellt. Auf dem Dashboard werden die Inhalte in der Regel gleichwertig dargestellt. Der Fokus der Hauptanwendung kann dabei verloren gehen.

Kombinierte und individuelle Navigationsmodelle

Um eine App benutzerfreundlich und leicht zugänglich zu machen, kann es auch sinnvoll sein, eine kombinierte Navigationsform (z.B. Tab Bar als Hauptnavigation und eine Grid-Navigation auf der sekundären Stufe) einzusetzen. Bei einer Rechner-App oder Kompass-App ist hingegen eine individuelle Navigation sicher am sinnvollsten.

Wann eignet sich welches Navigationsmodell?

Navigationsstandards in iOS und Android

 

iOS Human Interface Guidelines – Navigation

Android – Navigation