Moderne Apps

Navigationsgrundlagen in Windows Store-Apps

Rachel Appel

Rachel AppelBei modernen Apps ist es wichtig, dass Benutzer schnell, leicht und zum gewünschten Zeitpunkt auf die Inhalte zugreifen können, die für sie relevant sind. Dies bedeutet, dass die Navigation erst in Erscheinung treten darf, wenn sie benötigt wird. So werden Benutzern keine Entscheidungen aufgedrängt, die nachher schlecht rückgängig gemacht werden können. Diese Technik, die beim Benutzeroberflächendesign genutzt wird, heißt „Content over Chrome“. Am besten lässt sich dieses Designparadigma umsetzen, indem die Navigation weitgehend direkt in die Inhalte eingebunden wird. Mit Windows Store-Apps ist dies kein Problem, denn sie folgen diesem Navigationsdesignprinzip.

In Windows Store-Apps integrieren Entwickler die Navigation in die Inhalte und sorgen so beim Durchforsten dieser Inhalte für eine geschmeidige, fließende Benutzererfahrung. Dabei kommt eines der folgenden Navigationsmuster zum Einsatz:

  • Hierarchisch
  • Flach
  • Split/Single Page Application (SPA)

Visual Studio 2012 unterstützt alle drei Navigationsmodelle durch einen Satz von grundlegenden App-Vorlagen: Grid, Split und Navigation (nur HTML). In HTML-Apps enthält jede Vorlage eine Datei „navigator.js“ mit Code, der die Seitennavigation bewirkt, und Code, der die Schaltfläche „Zurück“ verwaltet. In XAML-Apps ist die Navigation in das Ereignismodell integriert.

Hierarchisches Navigationsmuster

Relationale Daten eignen sich für die hierarchische Navigation hervorragend. Dies liegt daran, dass relationale Inhalte meistens in einer bestimmten Reihenfolge durchsucht werden müssen, zum Beispiel in einem Master/Detail-Szenario. Geschieht dies nicht, ergeben diese Inhalte keinen Sinn. Da dies aber nicht immer so ist, gibt es auch noch die flache Navigation. Mehr dazu in Kürze. Obwohl zugehörige Daten mehrere Ebenen tief sein können, wissen wir aus Studien über die Benutzerfreundlichkeit, dass es Benutzern extrem schwer fällt, ein Navigationssystem mit mehr als drei Ebenen zu nutzen. Nachdem sich das Windows Design Language-Team sorgfältig mit der Benutzerfreundlichkeit der Navigation beschäftigt hatte, erstellte es das hierarchische Navigationssystem, das aus diesen drei Navigationsebenen besteht:

  • Hub: Dies ist die Datenanfangsphase mit Masterdaten vorne und in der Mitte. Gewöhnlich liegt eine Liste mit Masterelementen wie Musikkünstlern vor. Über diese Liste kann der Benutzer Details zu den einzelnen Künstlern aufrufen. Nach der Veröffentlichung von Visual Studio 2013 (derzeit in Vorschau) wird eine neue Hub-Vorlage eingeführt, mit der robuste Navigationsszenarios erstellt werden können.
  • Bereich: Dies ist eine Ansicht mit zwei Ebenen, die alle Member einer bestimmten Gruppe enthält, die der Benutzer auf der Hub-Seite ausgewählt hat. Ein Beispiel für die Bereichsnavigation wäre das Durchsuchen aller Alben eines bestimmten Künstlers.
  • Details: Hierzu zählen die Einzelheiten eines bestimmten Elements, zum Beispiel Informationen über einen bestimmten Titel eines Albums oder ein bestimmtes Foto einer Sammlung.

Beispiele dieser drei Stile sind im Kontext einer CNN-App in Abbildung 1, Abbildung 2 und Abbildung 3 dargestellt.

The Hub Navigation LevelAbbildung 1: Hub-Navigationsebene

The Section Navigation LevelAbbildung 2: Bereichsnavigationsebene

The Details Navigation LevelAbbildung 3: Detailnavigationsebene

Wenn Sie dennoch der Ansicht sind, weitere Navigationsebenen zu benötigen, überlegen Sie sich, ob Sie neben der normalen Navigation Navigationshilfsfunktionen, wie den semantischen Zoom oder Dropdownmenüs, oder aber andere UI-Komponenten zum Filtern und Sortieren von Inhalten verwenden möchten. Auf diese Navigationshilfsfunktionen werde ich in diesem Artikel noch eingehen.

Die Visual Studio Grid-Vorlage verfügt über die hierarchische Navigation, bei der alle drei Ebenen direkt integriert sind. Sie müssen lediglich Daten abrufen und diese in die Vorlage einbinden. Bei den Daten kann es sich um eine schlichte „WinJS.Binding.List“ oder um ein herkömmliches CLR-Objekt (POCO) in C#-Apps handeln. Es werden dieselben Strukturen verwendet wie in den Grid-, Split- und Navigation-App-Vorlagen von Visual Studio.

Ich möchte darauf hinweisen, dass alle Bereiche von Apps, bei denen ein hierarchisches Muster zum Einsatz kommt, über eine Schaltfläche „Zurück“ verfügen. Dies ist in Windows Store-Apps, aber auch in Web-Apps ein wichtiger Bestandteil der Navigation. Die Möglichkeit, den vorherigen Navigationsbefehl rückgängig zu machen, stellt hinsichtlich der Benutzererfahrung sowohl eine Verbesserung als auch eine Erleichterung dar.

Flaches Navigationsmuster

Bei flachen Navigations-Apps befindet sich oben auf dem Display eine Navigationsleiste, wodurch verschiedene Optionen angeboten werden, über die Sie direkt auf Inhalte zugreifen, die möglicherweise für Sie relevant sind. Abbildung 4 illustriert ein hervorragendes Beispiel anhand einer Wetter-App. Im oberen Displaybereich werden Registerkarten angezeigt. Durch Tippen oder Klicken gelangen Sie direkt auf die entsprechende Seite. Die flache Navigation eignet sich hervorragend für nicht relationale Inhalte. Beispiel: Über die Registerkarten der Wetter-App gelangen Sie auf selbst gewählte Seiten, die in keinem Zusammenhang stehen, anstatt eine formale Struktur anzuwenden.

Flat Navigation in a Weather AppAbbildung 4: Flache Navigation in einer Wetter-App

Sollten Sie sich für tiefe Ebenen der hierarchischen Navigation entschieden haben, könnte Ihnen der Einstieg mit dem flachen Navigationssystem leichter fallen. Verwenden Sie die obere Navigationsleiste als Hub-Seite. Wenn der Benutzer eine Wahl trifft, sollte die App an die gewünschte Stelle navigieren. Bei dieser Technik wird nur eine Navigationsebene hinzugefügt, weshalb Sie sich überlegen sollten, ob Sie auch Navigationshilfsfunktionen einbinden möchten.

Die leere Vorlage in Visual Studio eignet sich am ehesten für die flache Navigation, obwohl Sie jedem Projekttyp eine obere Navigationsleiste für flache Navigation hinzufügen können.

Das Einbinden der flachen Navigation in Ihre App ist genauso leicht wie das Hinzufügen einer WinJS-NavBar-Steuerung (Windows-Bibliothek für JavaScript), einem neuen Steuerelement von Windows 8.1. Abbildung 5 zeigt ein Beispiel hierfür in HTML.

Abbildung 5: Verwenden des WinJS-NavBar-Steuerelements

    <div id="NavBar" data-win-control="WinJS.UI.NavBar">
      <div id="GlobalNav" 
        data-win-control="WinJS.UI.NavBarContainer">
        <div data-win-control="WinJS.UI.NavBarCommand" 
         data-win-options="{
          label: 'Home',
          icon: 'url(../images/homeIcon.png)',
          location: '/html/home.html',
          split: false
        }">
        </div>
        <div data-win-control="WinJS.UI.NavBarCommand" 
         data-win-options="{
          label: 'Your apps',
          icon: WinJS.UI.AppBarIcon.favorite,
          location: '/html/yourapps.html',
          split: false
        }">
        </div>
      </div>
    </div>

Das NavBar-Steuerelement ist nur in WinJS verfügbar. Wenn Sie eine obere Navigationsleiste in XAML erstellen möchten, codieren Sie eine App-Leiste und gestalten Sie diese so, dass sie im oberen Seitenbereich angezeigt wird. Beispiel:

<Page.TopAppBar>
  <AppBar x:Name="topAppBar">
    <Grid>
      <StackPanel Orientation="Horizontal" 
            HorizontalAlignment="Right">
        <Button Style="{StaticResource SaveAppBarButtonStyle}"
          Click="Button_Click"/>
        <Button Style="{StaticResource UploadAppBarButtonStyle}"
          Click="Button_Click"/>
      </StackPanel>
    </Grid>
  </AppBar>
</Page.TopAppBar>

Sie können sowohl eine obere Navigationsleiste als auch eine Standard-App-Leiste unten verwenden. Außerdem können Sie beiden Leisten Menüs, Dropdownleisten und andere Navigationshilfsfunktionen hinzufügen.

Split/SPA-Navigationsmuster

Wie der Begriff schon sagt, besteht eine SPA-App aus einer Seite für die ganze App. Technisch gesehen haben SPAs nicht nur eine riesige Seite, sondern sie bestehen aus einer Hauptseite, über die die App während der Laufzeit Inhaltsbereiche und Befehle lädt. Dies geschieht dynamisch und wird durch Benutzeraktivität gesteuert. In Windows Store-Apps, die mit JavaScript erstellt wurden, können Sie SPA-Apps implementieren, indem Sie App-Komponenten verwalten, die „Seitenfragmente“ genannt werden.

Die Split-Navigationsvorlage in Visual Studio 2012 ist eine SPA-Vorlage, die mit der Grid-Vorlage vergleichbar ist. Die Split-Vorlage enthält hingegen zwei und nicht drei Navigationsebenen. Dies bedeutet, dass die Split-Vorlage nicht mit Hub/Bereich/Details beginnt, sondern auf der Bereichsebene. Es wird eine Elementliste angezeigt. Hat der Benutzer ein Element ausgewählt, werden die jeweiligen Details neben den anderen Elementen auf der Seite geladen.

Bei der SPA-Navigation in HTML-Apps wird zuerst ein <div>-Element oder Containerelement erstellt, in das die anderen Seiten selbständig geladen werden. Sie können zum Erstellen dieses Containers das WinJS PageControlNavigator-Steuerelement verwenden (in „navigator.js“ definiert).

    <div id="contenthost" 
      data-win-control="Application.PageControlNavigator"
      data-win-options="{home: '/pages/home/home.html'}"></div>

Sobald der PageControlNavigator vorhanden ist (standardmäßig in den Grid-, Split- und Navigation-Vorlagen), übernimmt der Code aus \js\navigator.js alle Aufgaben, die mit dem Laden von Seiten in PageControlNavigator einhergehen. Änderungen Ihrerseits sind nicht erforderlich.

Das an dieser Stelle besprochene SPA-Muster funktioniert hervorragend auf Websites und für andere App-Typen (selbstverständlich auch bei Windows Store-Apps), und die SPA-App wird unter Entwicklern moderner Apps immer beliebter, auch für andere Plattformen.

Haben Sie schon einmal eine datenintensive App verwendet, in der Sie es nicht schaffen, über Menüs oder Links die für Sie wichtigen Daten zu finden? Genau hier kommt der semantische Zoom ins Spiel. Durch die Verwendung des semantischen Zooms können Sie Daten zu einem neuen Zweck nutzen und visualisieren, und zwar anders als gewohnt und mit besserer Navigation. Sie können entweder aus 4.000 Meter Höhe auf Daten blicken, und so funktioniert die Windows-Startseite, oder Daten in Aggregatgruppen anzeigen lassen, damit Benutzer die gewünschten Informationen schnell finden. Netflix, das in Abbildung 6 dargestellt ist, nutzt den semantischen Zoom hervorragend zur Angabe von Filmkategorien. Der semantische Zoom ist besonders dann nützlich, wenn große Datenmengen vorhanden sind.

Netflix Makes Great Use of Semantic Zoom
Abbildung 6: Hervorragende Nutzung des semantischen Zooms durch Netflix

Sie können den semantischen Zoom in Windows Store-Apps als Steuerelement sowohl in WinJS- als auch in XAML-Apps implementieren. Hier ein Beispiel in HTML/JavaScript:

    <div data-win-control="WinJS.UI.SemanticZoom">  
      <!—Original view of the data, for example, the list of all movies -->
      <!-- The zoomed-out version of the data, as shown in Figure 1. -->
    </div>

Im Folgenden finden Sie ein Beispiel in XAML/C#:

<SemanticZoom>
  <SemanticZoom.ZoomedInView>
    <!—Original view of the data, for example, the list of all movies -->
  </SemanticZoom.ZoomedInView>
  <SemanticZoom.ZoomedOutView>
    <!-- The zoomed-out version of the data, as shown in Figure 1. -->       
  </SemanticZoom.ZoomedOutView>
</SemanticZoom>

Benutzer können den semantischen Zoom aufrufen, indem sie auf einem Touchscreen-Gerät zwei Finger zusammenführen oder die Maus bzw. das Mausrad verwenden. Weitere Informationen über das SemanticZoom-Steuerelement und andere Steuerelemente für Windows Store-Apps finden Sie in meinem Artikel „Verwenden von Steuerelementen und Einstellungen in Windows Store-Apps, die mit JavaScript erstellt wurden“ unter msdn.microsoft.com/magazine/dn296546.

Sie könnten natürlich argumentieren, dass Filtern keine echte Navigation ist, aber Benutzer können durch das Sortieren von Daten ziemlich sicher leichter eine Auswahl treffen und die gewünschten Daten schnell und problemlos finden. Und genau darum geht es bei der Navigation. Zumindest optimiert Sortieren und Filtern die Standard-App-Navigation, und dies war dringend nötig. Bei Windows Store-Apps lässt sich das Hauptnavigationsschema der App durch Filtern optimieren. Durch Anpassen der Visualisierung über kleine Benutzeroberflächen-Steuerelemente fällt die Benutzererfahrung exakt und angenehm aus. 

In Windows Store-Apps, die mit JavaScript erstellt wurden, können Sie Dropdownleisten zum Sortieren und Filtern implementieren, indem Sie das Standard-HTML-Element <select> verwenden. Beispiel:

    <select>
      <option>Appels</option>
      <option>Bananas</option>
      <option>Grapes</option>
      <option>Oranges</option>
      <option>Pears</option>
    </select>

In XAML-Apps wird dieses Steuerelement „ComboBox“ genannt, und es ist mit diesem Code vergleichbar:

<ComboBox x:Name="Fruits" 
    SelectionChanged="Fruits_SelectionChanged" >
  <x:String>Appels</x:String>
  <x:String>Bananas</x:String>
  <x:String>Oranges</x:String>
  <x:String>Grapes</x:String>
  <x:String>Pears</x:String>
</ComboBox>

Die Windows Store-App selbst nutzt Dropdownleisten hervorragend zum Herausfiltern von Apps. Navigieren Sie zu einer beliebigen Kategorie, und Sie finden Filter für Preis und Relevanz (siehe Abbildung 7). Bei Suchvorgängen im Store werden sogar noch mehr Filter angezeigt.

The Windows Store App Filters
Abbildung 7: Filter für Windows Store-Apps

Lassen Sie mich abschließend betonen, wie wichtig Suchvorgänge für die Navigation sind. Jeder verwendet Suchvorgänge, und nicht nur in häufig genutzten Websuchmaschinen. Jeder freut sich, wenn bestimmte Inhalte gleich zur Verfügung stehen. Bieten Sie daher Benutzern durch Ihre Apps unbedingt einen nahtlosen Service. Da Suchvorgänge, wie der Charm „Einstellungen“, zum Betriebssystem gehören, können Sie diese in Windows Store-Apps durch einen Vertrag implementieren.

Andere Navigationshilfsfunktionen

Auch wenn der horizontale Bildlauf nicht den Eindruck vermittelt, Teil der Navigation zu sein, kann dies der Fall sein. In Windows Store-Apps können dank der Rundumansicht völlig separate Datenbereiche in einer einzigen, organisierten Ansicht hinzugefügt werden. So können Benutzer unterschiedliche Bereiche über den Bildlauf erreichen, ohne die eigentliche Navigation zu nutzen. Bei neuen Apps, in denen einige Inhalte als Text und andere als Video verwendet werden, kommt diese Funktion häufig zum Einsatz. Wenn Sie Panorama mit semantischem Zoom kombinieren, können Benutzer gleich in die gewünschten Datenbereiche wechseln. Ziehen Sie Apps in Erwägung, die sich gut horizontal scrollen lassen. Dies ist beispielsweise bei den Apps der CNN- und ABC-Nachrichten sowie von Bing Finance und Netflix der Fall.

Abgesehen von diesen Navigationshilfsfunktionen lässt sich die erforderliche Anzahl an Navigationselementen in der App durch integrierte Windows 8-Features für einige Aktivitäten reduzieren. Beispiel: Anstatt in die App Infos, Einstellungen oder andere Informationsseiten zu integrieren (bei früheren Windows-Versionen im Hilfemenü von Programmen), können Sie Hilfe- und App-Infos über die den Charm „Einstellung“ anzeigen lassen. Dies bedeutet, dass keine weitere Navigationsmenüoption bereitgestellt werden muss und Benutzer zum Beispiel beim Aufrufen der Einstellungen davon profitieren, in allen Windows Store-Apps ein einheitliches Design verwenden zu können.

Der Verwirrung von Benutzern ein Ende setzen

Ein felsenfestes Navigationsschema wird bei der Entwicklung von modernen Apps, und ganz besonders von Windows Store-Apps, unbedingt benötigt. Fällt die Navigation schwer, so ist dies für Benutzer verwirrend. Glücklicherweise können Sie mit den integrierten Vorlagen von Windows Store-Apps sowohl in HTML als auch in XAML leicht benutzerfreundliche Benutzer-Apps erstellen.

Rachel Appel ist Beraterin, Autorin, Mentorin und frühere Microsoft-Mitarbeiterin mit über zwanzigjähriger Erfahrung in der IT-Branche. Sie nimmt auf wichtigen Branchenkonferenzen wie Visual Studio Live!, DevConnections und MIX als Rednerin teil. Ihr Fachbereich ist die Entwicklung von Lösungen, bei denen geschäftliche und technologische Aspekte in Einklang gebracht werden sowie führende Microsoft-und offene Webtechnologien zum Einsatz kommen. Besuchen Sie Rachel Appel auf ihrer Website unter rachelappel.com.

Unser Dank gilt den folgenden technischen Experten von Microsoft für die Durchsicht dieses Artikels: Megan Bates, Ross Heise, Maria Kang und Eric Schmidt