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 Anzahl von Auswahlmöglichkeiten für die Navigation. Sie haben folgende Möglichkeiten, um das Problem auszuschließen:
Benutzer müssen eine Reihe von Seiten in der 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üllen Sie die Erwartungen der Benutzer.
- Einfachheit: Machen Sie nicht mehr, als Sie brauchen.
- Klarheit: Stellen Sie 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 bestimmte UI-Elemente an Standardspeicherorten gefunden werden.
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 eindeutig 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 Breadcrumbleiste bereit, die dem Benutzer zeigt, wo er sich befindet, und lassen Sie sich schnell wieder loslegen. Andernfalls riskieren Sie, dass Der Benutzer in einer tiefen Hierarchie gestrandet wird, dass er Schwierigkeiten hat, zu verlassen.
- Vermeiden Sie "Pogo-Sticking". Pogo-Sticking tritt auf, wenn verwandte Inhalte vorhanden sind, aber die Navigation dazu erfordert, dass der Benutzer eine Ebene nach oben und dann erneut nach unten wechselt.
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 zu einer anderen wechseln.
Die Verwendung einer flachen Struktur empfiehlt sich in folgenden Fällen:
- Die Seiten können in beliebiger Reihenfolge angezeigt werden.
- Die Seiten unterscheiden sich deutlich voneinander und weisen keine offensichtliche Beziehung zwischen übergeordneten und untergeordneten Elementen auf.
- 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 um ihre aktuelle Position innerhalb der Gruppe zu verstehen. Wenn Sie nicht der Meinung sind, dass dies ein Problem für Ihre App ist, fahren Sie fort, und machen Sie die Seiten peers. Andernfalls sollten Sie eine hierarchische Struktur verwenden, um die Seiten in zwei oder mehr kleinere Gruppen zu unterteilen.)
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 zu erreichen, 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.
- Es gibt mehr als 7 Seiten in der Gruppe.
Kombinieren von Strukturen
Sie müssen keine Struktur oder eine andere struktur auswählen. viele gut gestaltete Apps verwenden beide. 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 Ihre Navigationsstruktur mehrere Ebenen aufweist, empfehlen wir, dass Peer-to-Peer-Navigationselemente nur mit den Peers innerhalb ihrer 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 keine Verknüpfung mit Seiten der Ebene 2 in der C-Unterstruktur herstellen.
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 Navigationserfahrung in Ihrer App sicherzustellen.
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.
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
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.
Zeigt eine horizontale Liste von Links zu Seiten auf jeder höheren Ebene an. Das BreadcrumbBar-Steuerelement implementiert das obere Navigationsmuster.
Verwenden Sie ein Breadcrumb, wenn:
- Sie möchten den Pfad zur aktuellen Position anzeigen
- Sie haben viele Navigationsebenen
- Sie erwarten, dass Benutzer zu jeder vorherigen Ebene zurückkehren können.
Zeigt eine vertikale Liste mit Links zu übergeordneten Seiten an. Zu verwenden in folgenden Fällen:
- Die Seiten sind auf oberster Ebene vorhanden.
- Es sind mehr als fünf Navigationselemente vorhanden.
- Sie erwarten nicht, dass Benutzer häufig zwischen Seiten wechseln.
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.
- Sie möchten es dem Benutzer ermöglichen, vorgänge auf hoher Ebene auszuführen, z. B. löschen oder sortieren, nach einzelnen Elementen oder Gruppen von Elementen, und sie möchten es dem Benutzer ermöglichen, die 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.
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ächstes: Hinzufügen von Navigationscode zu Ihrer App
Der nächste Artikel, Implementieren der grundlegenden Navigation, zeigt den Code, der zum Verwenden eines Frame Steuerelements erforderlich ist, um die grundlegende Navigation zwischen zwei Seiten in Ihrer App zu ermöglichen.
Windows developer