Digital
Information
Design.

Icon Digital Information Design white Designsensor AG

Navigationsdesign

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

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 Produktes aus einer Sammlung von verschiedenen User Interface-Komponenten.

Teilen macht Freude

Was ist Navigationsdesign?

Die Navigation eines digitalen Produktes besteht aus einer Sammlung von UI-Komponenten. Die Aufgabe einer guten Navigation ist es, den Nutzern das Auffinden von Informationen und Funktionen zu erleichtern und sie aufzufordern, die gewünschten Aktionen durchzuführen.

Für jeden einzelnen Navigationspunkt müssen vorab folgende Fragen beantwortet werden:

  • Nutzungshäufigkeit: Wie wichtig ist die entsprechende Navigationskomponente?
  • Anordnung: Wo erwarten die Nutzer die Navigationskomponente? Auf welchen Seiten? Wo im Seitenlayout?
  • Pattern: Welches Navigationsdesign-Pattern unterstützt den Nutzer bei der entsprechenden Tätigkeit am besten?

Wichtig

  • 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 Produktes dienen.

Guidelines zu Navigation

Navigationsdesign Praxisbeispiele

Quelle: Migros Klubschule

  1. Service-Navigation / Sprachwahl
  2. Suche
  3. Hauptmenü
  4. Inhaltsnavigation Detail
  5. Inhaltsnavigation Übersicht
  6. Fusszeile / Sitemap
  7. Fusszeile / Service
Typische Navigationskomponenten:
  • Hauptmenü (Meta-Navigation)
  • Breadcrumb-Navigation
  • Inhalts-Navigation
  • Filter
  • Kontextbezogene Navigation
  • Fusszeilen «Fat Footers»
  • Sitemap
  • Tag Cloud
  • Blätterfunktion (Paging)
  • Schrittweise Navigation (Wizard)
  • Suche

Quelle: Hochschule Luzern

  1. Login / Sprachwahl / Suche
  2. Service-Navigation
  3. Hauptmenü
  4. Inhalts-Navigation (Thema)
  5. Inhaltsnavigation (Bereich)
  6. Footer
  7. Inhaltsnavigation (Anspruchsgruppe)

Quelle: Evernote

  1. Hauptmenü / Login
  2. Filter
  3. Filter Detail
  4. Liste / Card
  5. Button