App-Navigationsfluss: So gestalten Sie intuitive Reisen

Die Navigation ist das Rückgrat jeder App. Definiert, wie Benutzer zwischen Bildschirmen wechseln, Funktionen finden und Aufgaben erledigen. Schlechte Navigation verwirrt und frustriert. In diesem Leitfaden erfahren Sie, wie Sie intuitive Abläufe entwerfen.

Warum Navigation wichtig ist

Erste Erfahrung

Der Benutzer muss sich sofort zurechtfinden.

Effizienz

Erreichen Sie Ihr Ziel mit einem Minimum an Handgriffen.

Entdeckung

Finden Sie Funktionen, von denen Sie nicht wussten, dass sie existieren.

Reduzierung der kognitiven Belastung

Weniger nachdenken, mehr handeln.

Navigationsmuster

Tab-Leiste

Hauptnavigation auf der Basis. 3-5 Artikel. Standard-iOS und Android.

Untere Navigation

Ähnlich der Tab-Leiste. Materialdesign.

Schublade/Hamburger

Seitenmenü. Mehr Elemente, weniger sichtbar.

Tab-Layout (oben)

Tabs oben. Verwandte Inhalte.

Gestenbasiert

Wischen Sie zum Navigieren. Weniger Chrom, mehr Inhalt.

Navigationshierarchie

Primäre Navigation

Hauptabschnitte. Immer erreichbar.

Sekundärnavigation

Innerhalb von Abschnitten. Drilldown.

Kontextbezogen

Aktionen im Zusammenhang mit aktuellen Inhalten.

Dienstprogramm

Einstellungen, Profil, Hilfe.

Informationsarchitektur

Kartensortierung

Benutzer organisieren Inhalte. Enthüllt das mentale Modell.

Baumtests

Testaufbau ohne Visualisierung. Finden Benutzer Artikel?

Sitemap

Visualisierung der gesamten Struktur.

Flussdiagramme

Dokumentierte Benutzerreisen.

Flussmuster

Hub and Spoke

Zentraler Bildschirm, Zweige. Kehren Sie zum Hub zurück.

Hierarchisch

Progressiver Drilldown. Paniermehl.

###Linear

Reihenfolge der Schritte. Assistent, Onboarding.

Stapel

Gestapelte Bildschirme. Rückstapel.

Übergänge und Animationen

Zweck

Kommunizieren Sie die Beziehung zwischen Bildschirmen.

Push/Pop

Hierarchische Navigation. Die Richtung gibt die Tiefe an.

Modal

Temporärer Fokus. Rücksendungen ablehnen.

Gemeinsames Element

Gemeinsame Elemente bewegen sich zwischen den Bildschirmen.

Verblassen

Sanfter Übergang für subtile Veränderungen.

Deep Linking

Was ist das?

URL, die Sie zu dem spezifischen Bildschirm in der App führt.

Anwendungsfälle

Benachrichtigungen, E-Mail, Teilen.

Implementierung

Routing, das URLs interpretiert.

Universelle Links / App-Links

Der gleiche Link funktioniert in der App und im Web.

Navigationsgesten

Zurückwischen

iOS: Wischen Sie von der Kante, um zurück zu gehen.

Android-Gestennavigation

Gestensystem für die globale Navigation.

Zum Aktualisieren ziehen

Inhalt aktualisieren.

Wischaktionen

Aktionen für Listenelemente.

Navigation in komplexen Apps

Mehrere Streams

Jede Registerkarte kann einen eigenen Stapel haben.

Verschachtelung

Tabs innerhalb von Tabs. Seien Sie vorsichtig mit der Komplexität.

###Suchen

Globale Suche als alternative Navigation.

Zustandswiederherstellung

Kehren Sie dorthin zurück, wo Sie aufgehört haben.

Benutzeranleitung

Positionsindikatoren

Wo bin ich in der App?

Semmelbrösel

Weg genommen.

Fortschrittsindikatoren

In linearen Strömungen.

###Titel

Der Bildschirmtitel kommuniziert den Kontext.

Barrierefreiheit

Screenreader

Die Navigation funktioniert mit VoiceOver/TalkBack.

Fokusreihenfolge

Logische Tab-Reihenfolge.

Links überspringen

Sich wiederholende Navigation überspringen.

Große Touch-Ziele

Groß genug berührbare Elemente.

Plattformen

iOS

Bevorzugte Tab-Leiste. Zurück oben links. Kantengesten.

###Android

Untere Navigation. Auf-Taste. Gemeinsame Schublade.

Plattformübergreifend

Standards an die Plattform anpassen oder bewusst vereinheitlichen.

Navigationstests

Aufgabenerfolg

Erledigen Benutzer Aufgaben?

Zeit für Aufgabe

Wie lange dauert es, das Ziel zu erreichen?

Fehlerrate

Falsche Berührungen, Sackgassen.

Erster Klick

Die richtige erste Berührung sagt den Erfolg voraus.

Häufige Fehler

Hamburger für alles

Versteckt wichtige Navigation.

Viele Artikel

Eine überfüllte Tab-Leiste ist verwirrend.

Inkonsistenz

Verschiedene Muster auf verschiedenen Bildschirmen.

Tiefe Hierarchien

Viele Ebenen tief.

Sackgassen

Kein offensichtlicher Weg zurück.

Dokumentation

Benutzerflüsse

Reisediagramme.

Bildschirminventar

Liste aller Bildschirme.

Navigationsmatrix

Wer führt zu wem.

Fazit

Eine gut gestaltete Navigation ist unsichtbar, Benutzer finden, was sie brauchen, ohne darüber nachzudenken. Verwenden Sie vertraute Muster, wahren Sie die Konsistenz und testen Sie sie mit echten Benutzern. Intuitive Abläufe sind die Grundlage nutzbarer Apps.

##FAQs

1) Tab-Leiste oder Schublade? Tab-Leiste für Hauptelemente (bis zu 5). Schublade für weitere Gegenstände oder eine informationsreiche App.

2) Wie viele Hierarchieebenen? Idealerweise 3 oder weniger. Mehr als das ist verwirrend.

3) Wie teste ich die Navigation? Baumtests für Struktur, Usability-Tests für Abläufe.

4) Sind Deeplinks notwendig? Für Apps mit Freigabe oder Benachrichtigungen ja.

5) Kann ich unterschiedliche iOS-/Android-Standards verwenden? Das ist möglich, aber Benutzer erwarten Vertrautheit. Vermeiden Sie es sorgfältig.