Navigation
Bewegen um Aufgaben zu erledigen
Navigieren wird durch unterschiedliche Navigationskomponenten und die Einbettung des Navigationsverhaltens in den Inhalt ermöglicht. Dabei gilt es die unterschiedlichen Plattformeigenheit von Google und Apple zu beachten.
Was ist Navigationsdesign?
Die Informationsarchitektur (IA) und das Navigationsdesign hängen eng miteinander zusammen und müssen in der Praxis klar unterschieden werden. Während die IA die Struktur des digitalen Produkts definiert und die Gestaltung der Navigation mitbestimmt, setzt sich die Navigation des digitalen Produkts aus verschiedenen User Interface-Komponenten und deren Verhalten zusammen.
Menschen neigen dazu, sich der Navigation einer App nicht bewusst zu sein, bis sie ihre Erwartungen nicht erfüllt. Ihre Aufgabe ist es, die Navigation so zu implementieren, dass sie die Struktur und den Zweck Ihrer App unterstützt, ohne die Aufmerksamkeit auf sich zu ziehen. Die Navigation sollte sich natürlich und vertraut anfühlen und sollte nicht die Oberfläche dominieren oder den Fokus vom Inhalt ablenken. Apple, Human Interface Guidelines
Google unterscheidet in den material.io Guidelines die «Seitliche Navigation», die «Vorwärtsnavigation» und die «Rückwärtsnavigation». Ergänzt wird das Thema durch die direkte Navigation mittels Suche. Apple unterscheidet in den Human Interface Guidelines die «Hierarchische Navigation», «Flache Navigation» und die «Inhaltsgesteuerte oder erlebnisorientierte Navigation».
Seitliche Navigation (Apple: Flache Navigation)
bezieht sich auf das Navigieren zwischen Bildschirmen auf derselben Hierarchieebene. Die primäre Navigationskomponente sollte den Zugriff auf alle Ziele auf der obersten Hierarchieebene ermöglichen.
UI-Komponenten für die seitliche Navigation sind
- Global Header
- Side-Bar, Navigation Drawer, Navigation Rail
Vorwärtsnavigation (Apple: Hierarchische Navigation)
bezieht sich auf das Bewegen
- zwischen Screens auf aufeinanderfolgenden Hierarchieebenen
- auf Schritte in einem Ablauf / Flow
- über eine App hinweg
Bei der Vorwärtsnavigation wird das Navigationsverhalten in folgende UI-Komponenten eingebunden:
- Container (wie z.B. Listen, Bilder, Grafiken)
- Buttons
- Links
- Suche
Rückwärtsnavigation
bedeutet, sich rückwärts durch Bildschirme zu bewegen, entweder
- chronologisch (innerhalb einer App oder zwischen verschiedenen Apps)
- hierarchisch (innerhalb einer App)
Vom Bildschirm «xyz» aus können Benutzende auf eine von zwei Arten rückwärts navigieren:
- aufwärts in der Hierarchie zum übergeordneten Bildschirm (z.B. mittels Breadcrumb)
- chronologisch, zu einem Suchergebnisbildschirm, aber nur, wenn der Benutzer von diesem Bildschirm aus navigiert hat
Weiter Anmerkungen und Hinweise zum Thema Rückwärtsnavigation
Umgekehrt chronologisch
Die umgekehrte chronologische Navigation bezieht sich auf das Navigieren in umgekehrter Reihenfolge durch die Historie der zuletzt angezeigten Bildschirme eines Benutzenden.
Benutzende können sich zwischen Bildschirmen innerhalb einer App (oder über mehrere Apps hinweg) bewegen. Beispielsweise ist die Schaltfläche «Zurück» in einem Webbrowser eine Form der umgekehrten chronologischen Navigation. Diese Art der Navigation wird normalerweise vom Betriebssystem oder der Plattform bereitgestellt. Diese definieren das Rückwärtsverhalten und wie Benutzende auf diese Funktionalität zugreifen können.
Aufwärtsnavigation
Die Aufwärtsnavigation ermöglicht es Benutzenden, innerhalb der Hierarchie einer einzelnen App eine Ebene nach oben zu navigieren, bis der Start- oder Top-Level-Bildschirm der App erreicht ist.
Der Pfeil nach oben in der oberen App-Leiste ist zum Beispiel eine Form der Aufwärtsnavigation. Die Aufwärtsnavigation sollte für alle untergeordneten Bildschirme in einer App implementiert werden und den Plattformrichtlinien folgen.
Aus der Praxis
5 Fragen, die in jedem Projekt beantwortet werden müssen:
- Welches Navigationskonzept erwarten die Nutzenden bei dieser Art von Produkt?
- Welche Navigation müssen wir immer anbieten (Suche, Filter, Themen)?
- Wo im Seitenlayout erwarten die Nutzer die Navigationskomponente?
- Können wir das Navigationssystem für Untermenüs auf dem Handy vertikal teilen?
- Benötigen wir wirklich eine tief verschachtelte Navigation (>3 Ebenen)?
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 Nutzenden und den Inhalten des digitalen Produkts dienen.
