Grundlagen des Navigationsdesigns für Windows-Apps

Wenn du dir eine App als eine Sammlung von Seiten vorstellst, beschreibt der Begriff Navigation den Wechsel zwischen Seiten sowie Bewegungen auf einer Seite. Die Navigation ist die Grundlage der Benutzererfahrung und definiert, wie Benutzer zu den für sie relevanten Inhalten und Features gelangen. Eine gute Navigation ist immens wichtig, aber manchmal nicht ganz einfach umzusetzen.

Sie haben eine große Auswahl an Optionen für die Navigation. Sie haben folgende Möglichkeiten, um das Problem auszuschließen:

Benutzer müssen eine Reihe von Seiten in der richtigen Reihenfolge durchlaufen.

Stellen Sie ein Menü bereit, mit dem Benutzer direkt zu einer beliebigen Seite springen können.

Platzieren Sie alles auf einer einzelnen Seite, und stellen Sie Filtermechanismen zum Anzeigen von Inhalten bereit.

Es gibt zwar kein universelles Navigationsdesign, das für jede App geeignet ist, es gibt jedoch Prinzipien und Richtlinien, die dazu beitragen, das passende Design für deine App zu finden.

Merkmale einer guten Navigation

Beginnen wir mit den Grundprinzipien eines guten Navigationsdesigns:

• Konsistenz: Erfülle die Erwartungen des Benutzers.
• Einfachheit: Beschränke dich auf das Wesentliche.
• Klarheit: Stelle klare Pfade und Optionen bereit.

Konsistenz

Die Navigation muss die Erwartungen des Benutzers erfüllen. Vertraute Standardsteuerelemente und die Einhaltung von Standardkonventionen für Symbole, Positionierung und Stil machen die Navigation für Benutzer berechenbar und intuitiv.

Benutzer erwarten, dass sich bestimmte UI-Elemente an bestimmten Standardpositionen befinden.

Einfachheit

Weniger Navigationselemente vereinfachen den Entscheidungsprozess von Benutzern. Müheloser Zugriff auf wichtige Orte sowie das Ausblenden weniger wichtiger Elemente tragen dazu bei, dass Benutzer schneller ans gewünschte Ziel gelangen.

Darstellung von Navigationselementen in einem vertrauten Navigationsmenü

Überfordern Sie Benutzer nicht mit vielen Navigationsoptionen.

Klarheit

Klare Pfade ermöglichen eine logische Benutzernavigation. Offensichtliche Navigationsoptionen sowie die Verdeutlichung von Zusammenhängen zwischen Seiten sorgen dafür, dass Benutzer nicht die Orientierung verlieren.

Ziele sind klar gekennzeichnet, damit die Benutzer wissen, wo sie sich befinden.

Allgemeine Empfehlungen

In diesem Abschnitt entwickeln wir auf der Grundlage der Gestaltungsprinzipien „Konsistenz“, „Einfachheit“ und „Klarheit“ einige allgemeine Empfehlungen.

• Führe dir deine Benutzer vor Augen. Skizziere typische Pfade durch deine App, und überlege dir für jede Seite, warum der Benutzer dort ist und wohin er wahrscheinlich möchte.
• Vermeide tiefe Navigationshierarchien. Wenn Sie über zwei Navigationsebenen hinausgehen, stellen Sie eine Breadcrumb-Leiste bereit, die dem Benutzer anzeigt, wo er sich befindet, und lassen Sie sie schnell wieder herauskommen. Andernfalls riskieren Sie, ihren Benutzer in einer tiefen Hierarchie zu verdrängen, die er nur schwer verlassen kann.
• Vermeiden Sie "Pogo-Sticking". Pogo-Sticking tritt auf, wenn verwandte Inhalte vorhanden sind, aber beim Navigieren dazu muss der Benutzer eine Ebene nach oben und dann wieder nach unten wechseln.

Verwenden der richtigen Struktur

Nachdem du nun mit allgemeinen Navigationsprinzipien vertraut bist, beschäftigen wir uns als Nächstes mit der Strukturierung deiner App. Du hast die Wahl zwischen zwei allgemeinen Strukturen: flach und hierarchisch.

Flach/lateral

In einer flachen/lateralen Struktur sind die Seiten nebeneinander angeordnet. Sie können in beliebiger Reihenfolge von einer Seite zur nächsten wechseln.

Die Verwendung einer flachen Struktur empfiehlt sich in folgenden Fällen:

• Die Seiten können in beliebiger Reihenfolge angezeigt werden.
• Die Seiten sind deutlich voneinander abgegrenzt und verfügen nicht über eine offensichtliche Beziehung zwischen über- und untergeordneten Elementen.
• Die Gruppe enthält weniger als acht Seiten.
  (Wenn mehr Seiten vorhanden sind, kann es für Benutzer schwierig sein, zu verstehen, wie die Seiten eindeutig sind, oder ihren aktuellen Speicherort innerhalb der Gruppe zu verstehen. Wenn Sie nicht der Meinung sind, dass dies ein Problem für Ihre App ist, erstellen Sie die Seiten peers. Andernfalls sollten Sie eine hierarchische Struktur verwenden, um die Seiten in zwei oder mehr kleinere Gruppen aufzuteilen.)

Hierarchisch

In einer hierarchischen Struktur werden Seiten in einer baumartigen Struktur angeordnet. Jede untergeordnete Seite hat genau ein übergeordnetes Element. Ein übergeordnetes Element kann jedoch eine oder mehrere untergeordnete Seiten haben. Um eine untergeordnete Seite aufzurufen, durchlaufen Sie das übergeordnete Element.

Hierarchische Strukturen sind gut geeignet, um komplexe Inhalte, die sich über viele Seiten erstrecken, zu strukturieren. Der Nachteil ist ein gewisser Mehraufwand bei der Navigation: je tiefer die Struktur, desto mehr Klicks sind erforderlich, um zwischen den Seiten zu wechseln.

Eine hierarchische Struktur empfiehlt sich in folgenden Fällen:

• Die Seiten sollen in einer bestimmten Reihenfolge durchlaufen werden.
• Zwischen den Seiten besteht eine klare hierarchische Beziehung.
• In der Gruppe gibt es mehr als 7 Seiten.

Kombinieren von Strukturen

Sie müssen nicht die eine oder die andere Struktur auswählen. Viele gut gestaltete Apps verwenden beides. Eine App kann flache Strukturen für übergeordnete Seiten verwenden, die in beliebiger Reihenfolge angezeigt werden können, und hierarchische Strukturen für Seiten mit komplexeren Beziehungen.

Wenn die Navigationsstruktur über mehrere Ebenen verfügt, empfehlen wir, dass Peer-to-Peer-Navigationselemente nur mit den Peers innerhalb der aktuellen Unterstruktur verknüpft sind. Die Abbildung zeigt eine Navigationsstruktur mit drei Ebenen:

• Auf Ebene 1 sollte das Peer-to-Peer-Navigationselement den Zugriff auf die Seiten A, B und C ermöglichen.
• Auf Ebene 2 sollten die Peer-to-Peer Navigationselemente für die A2-Seiten nur mit den anderen A2-Seiten verknüpft werden. Sie sollten nicht mit Seiten auf Ebene 2 in der C-Unterstruktur verknüpft sein.

Verwenden der richtigen Steuerelemente

Nachdem du dich für eine Seitenstruktur entschieden hast, musst du dir überlegen, wie die Benutzer durch die entsprechenden Seiten navigieren sollen. XAML bietet eine Vielzahl von Navigationssteuerelementen, um eine konsistente, zuverlässige Navigation in Ihrer App sicherzustellen.

Frame

Für Apps mit mehreren Seiten wird fast immer ein Frame verwendet. Eine App verfügt in der Regel über eine Hauptseite, die den Frame und ein primäres Navigationselement (beispielsweise ein NavigationView-Steuerelement) enthält. Wenn der Benutzer eine Seite auswählt, wird sie durch den Frame geladen und angezeigt.

Obere Navigation

Zeigt eine horizontale Liste mit Links zu Seiten auf der gleichen Ebene an. Das Steuerelement NavigationView implementiert die Muster für die obere Navigation.

Die obere Navigation kann in folgenden Fällen verwendet werden:

• Wenn du alle Navigationsoptionen auf dem Bildschirm anzeigen möchtest
• Wenn du mehr Platz für den Inhalt deiner App benötigst
• Wenn sich deine Navigationskategorien nicht eindeutig durch Symbole darstellen lassen

Registerkarten

Zeigt einen horizontalen Satz von Registerkarten und deren jeweiligen Inhalt an. Die Registerkarte TabView ist nützlich, um mehrere Seiten (oder Dokumente) anzuzeigen und dem Benutzer die Möglichkeit zu geben, Registerkarten neu anzuordnen, zu öffnen oder zu schließen.

Registerkarten können in folgenden Fällen verwendet werden:

• Benutzer sollen Registerkarten dynamisch öffnen, schließen oder neu anordnen können.
• Sie erwarten, dass möglicherweise eine große Anzahl von Registerkarten gleichzeitig geöffnet sind.
• Benutzer sollen Registerkarten auf einfache Weise zwischen Fenstern in Ihrer Anwendung, die mit Registerkarten verwendet, verschieben können, ähnlich wie bei Webbrowsern wie Microsoft Edge.

Breadcrumb

Zeigt eine horizontale Liste von Links zu Seiten auf jeder der höheren Ebenen an. Das BreadcrumbBar-Steuerelement implementiert das obere Navigationsmuster.

Verwenden Sie eine Breadcrumb in folgenden Fällen:

• Sie möchten den Pfad zum aktuellen Speicherort anzeigen.
• Sie verfügen über viele Navigationsebenen
• Sie erwarten, dass Benutzer zu einer beliebigen vorherigen Ebene zurückkehren können.

Linke Navigation

Zeigt eine vertikale Liste mit Links zu übergeordneten Seiten an. Zu verwenden in folgenden Fällen:

• Die Seiten befinden sich auf der obersten Ebene.
• Es sind mehr als fünf Navigationselemente vorhanden.
• Sie erwarten nicht, dass Benutzer häufig zwischen Seiten wechseln werden.

Liste/Details

Zeigt eine Liste mit Elementen an. Durch Auswählen eines Elements wird die entsprechende Seite im Detailbereich angezeigt. Zu verwenden in folgenden Fällen:

• Sie erwarten, dass Benutzer häufig zwischen untergeordneten Elementen wechseln werden.
• Sie möchten es dem Benutzer ermöglichen, Vorgänge auf hoher Ebene, z. B. Löschen oder Sortieren, für einzelne Elemente oder Gruppen von Elementen durchzuführen, und Sie möchten es dem Benutzer ermöglichen, Details für jedes Element anzuzeigen oder zu aktualisieren.

Das Liste/Details-Muster eignet sich sehr gut für E-Mail-Postfächer, Kontaktlisten und die Dateneingabe.

Hyperlinks

Eingebettete Navigationselemente können im Inhalt einer Seite angezeigt werden. Im Gegensatz zu anderen Navigationselementen, die für alle Seiten konsistent sein sollten, sind im Inhalt eingebettete Navigationselemente auf jeder Seite einzigartig.

Nächster Schritt: Hinzufügen von Navigationscode zu deiner App

Im nächsten Artikel Implementieren der grundlegenden Navigation wird der Code veranschaulicht, der erforderlich ist, um ein Steuerelement zum Aktivieren der Frame grundlegenden Navigation zwischen zwei Seiten in Ihrer App zu verwenden.