Skip to main content

Navigation

Navigation bezeichnet den Akt des Bewegens zwischen den Bildschirmen einer App, um bestimmte Aufgaben zu erledigen

navigation design

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.

Links zum Thema Accessibility

Weitere Beiträge zum Thema

designsensor infografik designaudit

Designaudit

| Beyond Interface, Brand Design, Design Strategy, Designmethoden, Designsensor, Expertise Design Strategy, Wissen | No Comments
Designmethode – Designaudit Wie Sie Markenrichtlinien konsistent auf den Punkt bringen Beim Designaudit werden Einsatz und Wirkung von Design intern in der Organisation und extern (zum Beispiel in Produkten, Dienstleistungen,…
designsensor infografik experience principles erlebnisprinzipien

Experience Principles

| Beyond Interface, Brand Design, Designmethoden, Designsensor, Expertise, Expertise Design Strategy, Expertise Human Machine Interface, User Experience Design, Wissen | No Comments
Designmethode – Experience Principles Wie Sie mit Erlebnisprinzipien Kundenbedürfnisse und Markenpersönlichkeit in Einklang bringen Experience Principles (deutsch: Erlebnisprinzipien) beschreiben wie Kundinnen und Kunden einer Marke deren Produkte und Dienstleistungen konsistent…
Zurück zur Übersicht

Weitere Beiträge

designsensor infografik designaudit

Designaudit

| Beyond Interface, Brand Design, Design Strategy, Designmethoden, Designsensor, Expertise Design Strategy, Wissen | No Comments
Designmethode – Designaudit Wie Sie Markenrichtlinien konsistent auf den Punkt bringen Beim Designaudit werden Einsatz und Wirkung von Design intern in der Organisation und extern (zum Beispiel in Produkten, Dienstleistungen,…
designsensor infografik experience principles erlebnisprinzipien

Experience Principles

| Beyond Interface, Brand Design, Designmethoden, Designsensor, Expertise, Expertise Design Strategy, Expertise Human Machine Interface, User Experience Design, Wissen | No Comments
Designmethode – Experience Principles Wie Sie mit Erlebnisprinzipien Kundenbedürfnisse und Markenpersönlichkeit in Einklang bringen Experience Principles (deutsch: Erlebnisprinzipien) beschreiben wie Kundinnen und Kunden einer Marke deren Produkte und Dienstleistungen konsistent…
Zurück zur Übersicht

Kontakt

Haben Sie ein spannendes Projekt oder brauchen Sie Unterstützung beim Lösen einer Herausforderung?

Wir freuen uns auf Ihre Kontaktaufnahme!

Kommen Sie uns besuchen, laden Sie uns ein oder rufen Sie uns an unter +41 31 970 30 90

Kontaktformular