Navigationsmuster für mobile Apps: Tabs, Menüs und verschachtelte Abläufe

Beginnen Sie mit der Struktur, nicht mit der Komponente

Listen Sie die Ziele der App auf und gruppieren Sie sie nach dem mentalen Modell des Benutzers. Ein Ziel wie die Suche kann als Peer neben der Startseite stehen. Die Details eines gespeicherten Elements gehören unter „Gespeichert“. Wenn Menschen häufig zwischen Gleichgesinnten wechseln müssen, sollten Sie diese Auswahlmöglichkeiten sichtbar halten. Wenn sie normalerweise von einer Sammlung zu einem Element und dann zurück wechseln, kommuniziert ein Stapel oder ein verschachtelter Fluss diese Beziehung auf natürliche Weise.

Trennen Sie Ziele von Aktionen. Verfassen, teilen, filtern und sortieren Sie Änderungen oder reagieren Sie auf den aktuellen Kontext. Normalerweise handelt es sich dabei nicht um Orte in der App. Fügen Sie sie in eine Symbolleiste, ein Menü oder ein kontextbezogenes Steuerelement ein, anstatt jede Aktion in ein primäres Navigationselement umzuwandeln.

• Nennen Sie die Aufgaben, die Menschen immer wieder erledigen, und legen Sie fest, welche Bereiche von überall aus erreichbar sein müssen.
• Zeichnen Sie Eltern-Kind-Beziehungen, bevor Sie Navigationssteuerelemente auswählen.
• Sorgen Sie dafür, dass Ziele visuell und verhaltensmäßig auf derselben Hierarchieebene bleiben.

Vergleichen Sie die drei Muster

Eine Tab-Leiste oder Navigationsleiste macht einige Ziele der obersten Ebene sichtbar und schnell umschaltbar. Das funktioniert, wenn die Bereiche gleichrangig sind und ihre Bezeichnungen selbsterklärend sind. Der aktuelle Bereich sollte ausgewählt bleiben. Vermeiden Sie es, unzusammenhängende Aktionen in die Navigationsleiste zu stopfen oder wichtige Ziele im Überfluss verschwinden zu lassen.

Eine Navigationsleiste kann einen größeren, gruppierten Satz von Zielen und manchmal auch den Wechsel zwischen Konten und Arbeitsbereichen enthalten. Ein modales Navigationsmenü spart Platz auf dem Bildschirm, erfordert jedoch einen zusätzlichen Schritt zum Öffnen und Auswählen und deckt den Inhalt vorübergehend ab. Bei kompakten Telefonen können diese Kosten dazu führen, dass häufige Ziele begraben wirken. Die aktuelle Android-Version von Material 3 bevorzugt eine Navigationsleiste für drei bis fünf kompakte Ziele und passt die Navigation für größere Fenstergrößen an; Ältere Materialleitfäden, die Schubladen für fünf oder mehr Ziele empfehlen, sollten nicht mit einem allgemeingültigen festen Schwellenwert verwechselt werden.

Die verschachtelte Navigation verwendet eine Liste, eine Karte oder einen Link, um eine untergeordnete Ansicht zu öffnen, mit einem Titel und einem Zurück-Steuerelement, das den Pfad beibehält. Das passt zu Kategorien, Einstellungen, Produktdetails und Schritt-für-Schritt-Aufgaben. Eine tiefe Verschachtelung wird frustrierend, wenn die Hierarchie verborgen ist, das Rückverhalten inkonsistent ist oder Benutzer sich immer wieder zurückziehen müssen, um zu einem anderen Bereich derselben Ebene zu gelangen. Fügen Sie eine Suche, Verknüpfungen oder eine klarere Struktur auf der obersten Ebene hinzu, wenn Benutzer häufig über Zweige springen.

Wählen Sie nach Aufgabenhäufigkeit und Bildschirmgröße

Fragen Sie, wie oft Menschen während einer typischen Sitzung zwischen den Bereichen wechseln. Ein kompakter, stabiler Satz hochfrequenter Ziele begünstigt einen sichtbaren Balken. Wenn Sie sich hauptsächlich auf eine Aufgabe oder das Lesen eines Details konzentrieren, sollten Sie die Navigation leiser gestalten und Platz für Inhalte lassen. Ein Navigationsmenü kann für seltener genutzte Bereiche sinnvoll sein, aber stellen Sie sicher, dass die Leute sie immer noch finden und ohne zu raten zurückkommen können.

Planen Sie Fenstergröße, Ausrichtung und Plattformkonventionen. Die aktuellen Human Interface Guidelines von Apple beschreiben die iPhone-Tab-Leiste als Top-Level-Navigation und unterstützen eine anpassbare Tab-/Seitenleisten-Darstellung auf dem iPad. Material 3 nennt sein kompaktes Muster eine Navigationsleiste und bietet mit zunehmender verfügbarer Breite unterschiedliche Navigationsformen an. Diese Muster haben einen gemeinsamen Zweck, sind aber keine identischen Komponenten; folgen Sie der nativen Platzierung, dem Verhalten und der Anpassung, anstatt die Bedienelemente einer Plattform auf eine andere zu übertragen.

Sorgen Sie für zuverlässige Orientierung und Wiederherstellung

Symbole allein erschweren das Erlernen der Navigation und können für Benutzer von Bildschirmleseprogrammen unklar sein. Geben Sie Zielen kurze sichtbare Bezeichnungen, stellen Sie den ausgewählten Status semantisch dar und stellen Sie sicher, dass Steuerelemente über zugängliche Namen und nutzbare Trefferbereiche verfügen. Überprüfen Sie den Kontrast in ausgewählten und nicht ausgewählten Zuständen, größerem Text, Lokalisierung und Rechts-nach-Links-Layouts. Testen Sie mit VoiceOver oder TalkBack und mit Tastatur- oder Schalternavigation, sofern unterstützt; der Fokus sollte sich vorhersehbar bewegen, wenn eine Schublade geöffnet, ein Ziel ausgewählt oder eine Ansicht geschlossen wird.

Auch die Rückkehr zu vorherigen Bereichen gehört zur Navigation. Halten Sie das Verhalten von „Zurück“ und „Schließen“ unterschiedlich: „Zurück“ führt eine Hierarchie zurück, während „Schließen“ eine temporäre oder modale Präsentation beendet. Behalten Sie eine nützliche Position und eingegebene Daten bei, wenn Sie zu Bereichen der obersten Ebene wechseln oder von Details zurückkehren. Wenn ein Ziel leer oder vorübergehend nicht verfügbar ist, halten Sie seinen Ort stabil und erläutern Sie den Status, anstatt die Navigation stillschweigend zu entfernen oder zu deaktivieren. Machen Sie bei einer destruktiven oder kostspieligen Aufgabe den Rückweg klar, bevor der Benutzer einen Commit durchführt.

Ein praktisches Navigationsaudit

Gehen Sie mit einer echten Aufgabe durch die App und wiederholen Sie den Vorgang dann mit aktivierten Eingabehilfen. Zeichnen Sie auf, ob Personen den aktuellen Bereich identifizieren, ein häufiges Ziel erreichen und sich nach einer falschen Abzweigung erholen können. Vergleichen Sie die gleiche Reise mit einem kompakten Telefon und einem größeren Fenster. Ein adaptives Layout sollte die Informationsarchitektur bewahren, wenn sich die Form des Steuerelements ändert.

Verwenden Sie die Bildschirmbibliothek, um reale Beispiele von App-Abschnitten und -Abläufen zu vergleichen und sie dann jeweils anhand der Aufgaben Ihres Produkts zu bewerten. Das stärkste Muster behält seine Struktur lesbar, wenn die App wächst, und macht den Rückkehrpfad nach einer Unterbrechung klar.

• Kann ein neuer Benutzer die Top-Level-Bereiche allein anhand seiner Beschriftungen erklären?
• Ist es einfach, zwischen Peer-Zielen zu wechseln, wobei die Auswahl deutlich angezeigt wird?
• Zeigen Detailbildschirme einen aussagekräftigen Titel und einen vorhersehbaren Zurück-Pfad?
• Behält das Öffnen und Schließen einer Schublade den Kontext bei und verschiebt es den Fokus auf Barrierefreiheit sinnvoll?
• Bleiben Beschriftungen, Ziele, Kontrast und ausgewählte Zustände mit größerem Text und unterstützender Technologie verwendbar?
• Kann eine Person zurückkehren, ohne Entwurfseingabe, Scrollposition oder einen nützlichen Platz in der Hierarchie zu verlieren?
• Passt sich die Struktur an einen größeren Bildschirm an, ohne die konkurrierende Primärnavigation zu duplizieren?