Zentraler App-Hub mit Startseitenmenü (Hub- oder Pivotsteuerelement) (Windows Phone Store-Apps)

Möglicherweise entwerfen Sie eine App, die viele Features enthält. Beim Betrachten der Features stellen Sie möglicherweise fest, dass Sie sie in getrennten Bereichen anordnen möchten. Diese Bereiche werden zu separaten Teilen der App, die die Benutzer besuchen. Sie müssen eine leichte Methode für den Benutzer zum Navigieren in diesem UI-Bereichen entwickeln. Für diesen App-Typ ist ein zentraler Anwendungshub erforderlich, der für den Benutzer den Ausgangspunkt zum Navigieren in die einzelnen Unterbereiche der App bildet.

Stellen Sie sich beispielsweise vor, Sie würden eine App für die Verwaltung einer Fußballmannschaft entwerfen. Für diese App wären verschiedene Funktionalitätsbereiche erforderlich – einer mit einem Kalender für Spiele und Trainingseinheiten, ein anderer für das Teammitgliederverzeichnis, ein dritter Bereich für Punkte und Spielerstatistiken und schließlich ein Bereich für Videos aus vergangenen Spielen. Sie sollten dem Benutzer die Möglichkeit geben, jeweils zu diesen verschiedenen UI-Bereichen zu navigieren. Dazu können Sie einen zentralen Anwendungshub mit einer Startseite implementieren, die beim Starten der App angezeigt wird.

Zentrale App-Hub-UI für Fußballmanschaftsmanagement

Vom zentralen UI-Hub kann der Benutzer zu einem beliebigen Bereich in der Anwendung navigieren. Sobald die Benutzer zu einem Unterbereich gelangen, stellen Sie die an diesem Punkt benötige UI bereit. In der Fußballmannschafts-App kann der Benutzer beispielsweise von der Seite des zentralen Anwendungshubs zu der Seite navigieren, auf der er die Spielerstatistiken zu einem bestimmten Spiel anzeigen kann. Wenn der Benutzer in einem bestimmten Unterbereich der App keine weiteren Aktionen durchführen und zu einem anderen Unterbereich navigieren möchte, müsste er zunächst zum zentralen Anwendungshub zurückkehren. Er kann nicht direkt von Punkte und Statistiken zum Kalender navigieren. Stattdessen muss der Benutzer zunächst zum zentralen Anwendungshub zurückkehren.

Hinweis  Die Verwendung eines zentralen Anwendungshubs mit einer Startseite für die Navigation zu anderen App-Bereichen ist eine hervorragende Möglichkeit, die Benutzern das effiziente Interagieren mit der App ermöglicht.

Für die visuelle Darstellung des Anwendungshubs für den Benutzer gibt es mehrere Methoden. Wir empfehlen die Verwendung des Hubsteuerelements. In diesem Thema wird das Design beschrieben. Anschließend zeigen wir Ihnen Varianten, die Sie ebenfalls in Erwägung ziehen können.

Verwenden des Hubsteuerelements als Anwendungshub

Microsoft stellt ein als Hubsteuerelement bezeichnetes UI-Steuerelement bereit, das als zentraler Anwendungshub verwendet werden kann. Dieses Steuerelement ermöglicht dem Benutzer das Navigieren zu allen Funktionalitätsbereichen in der App. Das Hubsteuerelement ist wie folgt strukturiert: in ein Hubhintergrundbild, das sich als Hintergrund hinter dem gesamten Steuerelement befindet, in einen Startabschnitt, zu dem Sie beim Starten der App gelangen, und in weitere Abschnitte, mit denen Ihre UI auf oberster Ebene der App segmentiert wird.

Musik-Hub

Das Hubsteuerelement bietet dem Benutzer eine breite visuelle Canvas, die sich horizontal über die Bildschirmgrenzen hinaus erstreckt. Der Benutzer bewegt sich per Streichbewegung abschnittsweise horizontal durch die Canvas. Beim Starten der App gelangt der Benutzer zum ersten Abschnitt des Hubs. Je nach gewünschter Funktionsweise der Navigation kann die Vorgehensweise ab diesem Punkt variieren. Es werden alle Varianten erläutert.

Startabschnitt

Dieser erste Abschnitt am äußersten linken Rand kann als Startpunkt zum Navigieren in die App-Unterbereiche verwendet werden. Er enthält das Bereichsmenü, in dem der Benutzer eine Auswahl treffen kann. In dem in der vorherigen Abbildung gezeigten Musik-Hub gelangen Sie per Fingertipp auf Radio zur Radioseite, bei der es sich tatsächlich um eine Unteranwendung innerhalb des Musik-Hubs handelt. Die Hub-UI wird vollständig ersetzt, und dem Benutzer wird die Radio-UI angezeigt. Wenn der Benutzer nun zum Podcast-Bereich wechseln möchte, navigiert er mit der Hardwareschaltfläche „Zurück“ wieder zum Hubstartabschnitt. Dann tippt er in der Menüliste auf den Eintrag Podcast. Wenn die Liste der Unterbereiche so lang ist, dass sie nicht auf die Anzeige passt, kann eine Bildlaufansicht verwendet werden.

Radioseite des Musik-Hubs

Die Liste der Positionen, zu denen im Startabschnitt navigiert werden kann, kann auch Einträge enthalten, die Sie zu einer vollständig neuen App führen. Der Startabschnitt des Musik-Hubs enthält beispielsweise einen Eintrag, über den Sie zum Store gelangen. Beim Tippen auf diesen Eintrag navigieren Sie zum Store-Musikunterbereich, der selbst ein Hubsteuerelement darstellt.

Abschnitte auf der rechten Seite

Die Abschnitte auf der rechten Seite des Startbereichs enthalten UI-Elemente, auf die der Benutzer leicht zugreifen können soll. Es bleibt Ihnen überlassen, wie Sie diese Abschnitte nutzen. Verwirren Sie den Benutzer nicht, indem Sie Unterbereiche verwenden, auf die der Zugriff auf verschiedene Art und Weise erfolgt. Verwenden Sie stattdessen diese Abschnitte auf der rechten Seite mit einer zusammenfassenden Info über die Inhalte der Unterbereiche. Im Falle des Musik-Hubs existieren beispielsweise zwei zusätzliche Abschnitte, in denen zuletzt aufgerufene Medien angezeigt werden.

Der Abschnitt Verlauf im Musik-Hub ist eine nützliche und bequeme Methode, um nicht zu einem Unterbereich navigieren zu müssen. Zudem bietet er Ihnen schnellen Zugriff auf die zuletzt angehörten oder angezeigten Inhalte. Wenn Sie den Unterbereich Musik aufgerufen und einen bestimmten Titel gehört haben, wird dieser Titel für einen schnellen Zugriff nun im Abschnitt Verlauf angezeigt. Die Abschnitte ermöglichen Ihnen also in diesem Fall einen schnellen Zugriff auf Inhalte, die Sie in den Unterbereichen aufgerufen haben.

Die Facebook-App ist ein weiteres Beispiel für eine App, für die das Hubsteuerelement verwendet wird, um dem Benutzer eine bequeme Methode zum Navigieren durch die Funktionalität bereitzustellen. Auch diese App verfügt über denselben Startabschnitt, in dem eine Liste mit Bereichen angezeigt wird, zu denen der Benutzer navigieren kann. Beispielsweise gelangt der Benutzer beim Tippen auf den Eintrag Freunde zu der UI, die der Verwaltung der Liste seiner Freunde dient.

Im Hubsteuerelement der obersten Ebene werden die Abschnitte auf der rechten Seite grundsätzlich dazu verwendet, schnelleren Zugriff auf die Ansichten zu bieten, von denen der Entwickler denkt, dass sie am hilfreichsten sind und daher auf oberster Ebene angezeigt werden sollten. Beim letzten Abschnitt im Hub handelt es sich in der Tat um UI aus einem Unterbereich. Wenn Sie über den Startabschnitt darauf zugreifen möchten, tippen Sie auf Newsfeed. Daraufhin gelangen Sie zu diesem Unterbereich (dabei handelt es sich eigentlich um ein Pivotsteuerelement). Das Pivotsteuerelement des Unterbereichs Newsfeed umfasst die folgenden Elemente: Zuletzt verwendet, Fotos, Links und Videos. Die Entwickler haben sich dazu entschlossen, diesen Unterbereich im obersten Hubsteuerelement zu implementieren, anstatt dass die Benutzer zum Newsfeed und dann zu Zuletzt verwendet navigieren müssen. Ähnlich verhält es sich mit den Abschnitten Fotos und Ereignisse im obersten Hubsteuerelement.

Zentrale Anwendungshub-UI für die Facebook-App

Verwenden von Bildrastern

Anstatt eine Liste mit Bereichen anzuzeigen, zu denen der Benutzer ausgehend vom Startabschnitt navigieren kann, können Sie ein Raster mit Bildern anzeigen, in denen eine Auswahl getroffen werden kann. Dies führt zum selben Ergebnis. Die UI sieht lediglich etwas anders aus. Mit Bildern erreichen Sie eine visuelle Symboldarstellung, mit der Sie möglicherweise leichter bestimmen können, wohin die jeweilige Auswahl führt. Jedes Bild kann einen darüber überlagerten Text enthalten, um weitere Informationen zum jeweiligen App-Bereich und dessen Aktivität zu liefern.

Wenn Sie ein Raster vom Typ 3 x 3 verwenden, können Sie bei Bedarf bis zu neun Bilder für die Auswahl bereitstellen. Im Startabschnitt, der dieses Bildraster hostet, kann der Benutzer auf beliebige Bilder klicken, um zu den verschiedenen Funktionsbereichen der App zu navigieren.

Bei diesem Startabschnitt kann es sich vielmehr um einen Bereich handeln, der mehr als eine anzeigbare Abschnittsbreite umfasst. Bei Bedarf können Sie den Startabschnitt mit Bildern horizontal nach rechts erweitern, sodass er etwas mehr Platz einnimmt. In der App Kelley Blue Book erstreckt sich das Raster nach rechts, wie in der folgenden Abbildung deutlich wird. Um die restlichen Bilder aufzurufen, führt der Benutzer einfach eine Streichbewegung aus, um dorthin zu schwenken. Der Startabschnitt des Hubsteuerelements hat in diesem Fall die doppelte Breite.

Anwendungshub-UI für die Kelley Blue Book-App

Erstellen Sie kein Raster mit Bildern, für das der Bildlauf in vertikaler Richtung erfolgt. Dies wäre für den Benutzer zu verwirrend.

Kein Start im Startabschnitt

Selbst wenn Sie das Hubsteuerelement verwenden und einen Startabschnitt haben, der wie ein Menü oder Hub zum Navigieren in die Funktionsbereiche der App funktioniert, muss dies beim Öffnen der App nicht der Ausgangspunkt sein. Die Ursache dafür, dass Sie für die erste Anzeige einen anderen Abschnitt auswählen sollten, ist der Einfluss, den Sie auf den Benutzer nehmen können. Wenn es sich beispielsweise um eine App zum Anzeigen von Filmen und Vorführungszeiten handelt, können Sie einen Startabschnitt mit einer Auswahlliste für die App-Unterbereichen verwenden. Anstatt dass der Benutzer an dieser Stelle mit weniger interessanten Informationen landet, könnten Sie einen Abschnitt verwenden, in dem Grafiken der neuesten, bekanntesten Filme verwenden. Dadurch werden dem Benutzer beim Öffnen der App etwas eindrucksvollere Inhalte präsentiert.

Beim Öffnen der eBay-App befindet sich der Startpunkt nicht im Startabschnitt. Stattdessen gelangen die Benutzer zunächst zu einem Bereich mit aktuellen Angeboten. Per Schwenk nach rechts gelangen Sie zum Startabschnitt des Anwendungshubs, der Bilder enthält. Durch Klicken auf die Bilder navigieren Sie zu den App-Unterbereichen Beobachten, Verkaufen, Kaufen und Nachrichten. Beachten Sie auch die Verwendung des Textfelds „Suche“ am oberen Bildschirmrand. Dies ist ebenfalls ein hilfreiches UI-Element, das zum schnellen Suchen von Produkten am oberen Rand platziert werden kann.

Anwendungshub-UI für die eBay-App

Erstellen Sie kein Raster mit Bildern, für das der Bildlauf in vertikaler Richtung erfolgt. Dies wäre für den Benutzer zu verwirrend.

Angepasstes Menü mit UI-Funktionsbereichen

Für die Verwendung des von Microsoft bereitgestellten Hubsteuerelements gibt es Alternativen. Der Hub gibt Ihnen die Möglichkeit, mehrere Abschnitte auf oberster Ebene anzuordnen. Dennoch benötigen Sie diese Abschnitte möglicherweise nicht. Stattdessen könnten Sie eine einfache Liste auf einer einzelnen Seite verwenden, wie in der folgenden Abbildung dargestellt. Dies ist die Seite, die dem Benutzer beim Öffnen der App angezeigt wird. Für diese App wird ein Symbol links neben einem Texttitel und eine Beschreibung für die einzelnen Unterbereiche verwendet, zu denen der Benutzer navigieren kann.

Anwendungshub-UI für die Easy Diary-App

Sie können dem Benutzer eine einzigartige Interaktionserfahrung präsentieren, indem Sie einen Grafikhintergrund verwenden und navigierbare Unterbereiche auf einzigartige und künstlerische Art und Weise darstellen. Sie können dies tun, um ein Branding für sich selbst zu kreieren. Diese Vorgehensweise ist für einige Unterhaltungs-Apps besser geeignet. Es folgt ein Beispiel für eine visuell ansprechende Startseite.

MyComic-App

Kombinieren ähnlicher Anwendungen in einer App

Wie bereits erwähnt, kann Ihre App so viele verschiedene Funktionalitätsbereiche umfassen, dass Sie darüber nachdenken, diese Features in separate Apps zu teilen. Dies ist nicht erforderlich. Sie können dennoch eine einzelne App verwenden. Der beim Öffnen der App angezeigte Hauptbildschirm fungiert als Ausgangsposition für den Zugriff auf die tatsächlichen Unteranwendungen, aus denen die Einzel-App besteht. Dieser Anwendungshub-Hauptabschnitt ist die Seite, die angezeigt wird, wenn die Benutzer auf das App-Symbol klicken und Ihre App starten.

Es wird empfohlen, das Erstellen einer separaten App für die einzelnen eindeutigen Bereiche, für die Sie über Features verfügen, zu vermeiden. Das Problem besteht dabei darin, dass der Benutzer eine Ihrer Apps beenden und dann eine andere App starten muss. Stellen Sie sich vor, Sie hätten neun verschiedene Apps, mit denen der Benutzer interagieren soll. Stattdessen wird empfohlen, eine einzelne App zu erstellen, in der die Benutzer beginnen und in der sie von diesem einzelnen Startpunkt aus Zugriff auf die verschiedenen App-Bereiche haben. Als App-Designer möchten Sie, dass Ihre Benutzer zu Ihrem zentralen Hub gelangen und alle von Ihnen bereitgestellten Inhalte auf einem zentralen Bildschirm anzeigen können.

Navigationsebenen

Die schwierige Entscheidung besteht darin, wie Sie die Funktionalität Ihrer App aufteilen und welche Navigationsebenen der Benutzer durchlaufen soll. Falls Sie das Hubsteuerelement mit einem Startabschnitt verwenden, müssen Sie festlegen, welche UI angezeigt wird, wenn der Benutzer in der Liste auf eine Auswahl tippt. Durch die Auswahl navigiert er vom Hubsteuerelement weg zu einem neuen UI-Steuerelement, beispielsweise zu einer einzelnen Seite oder einem Pivotsteuerelement. Um dies zu veranschaulichen, verwenden wir wie unten dargestellt den Musik-Hubstartabschnitt.

Anwendungshub für Musik

Im Fall des Musik-Hubs handelt es sich bei der Auswahl Radio um eine einzelne UI-Seite, auf der Sie den Radiosender ändern können, den Sie hören. In diesem Unterbereich werden keine Listen-, Hub- oder Pivotsteuerelemente mehr verwendet, in die Sie weiter navigieren können. Die Auswahl Musik im Startabschnitt bietet jedoch verschiedene Ansichten für Ihre Titel. Die folgende Abbildung zeigt einen Teil der UI-Baumstruktur, durch die der Benutzer bei der Auswahl Musik navigiert.

Navigationsstruktur für die Musik im Musik-Hub

Wenn Sie sich im Bereich Musik befinden, wird ein Pivotsteuerelement angezeigt, in dem ein horizontaler Bildlauf ausgeführt werden kann. Die Pivotseite, auf der Sie unter Musik immer zuerst gelangen, ist das Pivotelement Interpreten. Von dort aus können Sie die verschiedenen Pivotelemente nach links oder rechts durchlaufen. Jedes Pivotelement bietet eine andere Methode zum Anzeigen der Titel, aus denen Sie eine Auswahl treffen müssen.

Wenn der Benutzer in der App zum gewünschten Bereich navigiert hat, findet er die an diesem Punkt jeweils erforderliche UI vor. Die Benutzer können die gewünschte Aufgabe letztendlich von einem beliebigen App-Unterbereich aus erledigen. Auf dieser sekundären Ebene ist es nicht ratsam, ihnen eine weitere Liste mit Bereichen anzuzeigen, zu denen sie navigieren können. Am besten behalten Sie nur das Hubsteuerelement für die Hauptseite und eine zweite Detailstufe bei. Ausgehend von dieser zweiten Stufe kehrt der Benutzer zum Startabschnitt zurück, bevor er zu einem anderen Bereich der App wechselt. Zum Zurückwechseln wird die Hardwareschaltfläche „Zurück“ verwendet.

Verwenden eines Hintergrundbilds

Das Hubsteuerelement ermöglicht Ihnen das Anzeigen eines Bilds, das sich hinter allen Abschnitten befindet. Dabei können Sie immer dasselbe Bild verwenden, oder Sie können das Bild von Zeit zu Zeit programmgesteuert ändern, um das Design zu variieren. Sie können ein Bild anzeigen, das sich auf die Interessen der Benutzer bei der Verwendung Ihrer App bezieht. Verwenden Sie ein Bild, das nicht zu überhäuft ist und das nicht störend auf die UI-Inhalte darüber wirkt.

Hintergrundbild

Mehrere Startbereiche

Möglicherweise benötigen Sie mehrere Abschnitte mit einer Liste von Unterbereichen für die Navigation. Mitunter müssen Sie zwei verschiedene Listen mit Navigationsbereichen separieren. In diesem Fall verfügen Sie über zwei Abschnitte, die beide als Startabschnitte fungieren.

Hauptstartbildschirme

Möglicherweise kann Ihre App nicht direkt zum zentralen App-Hub navigieren, wenn sie gestartet wird. Eine Ursache dafür besteht darin, dass Sie zunächst eine Anmeldung oder Kennwortentsperrung für den Benutzer anzeigen müssen, bevor er auf die App zugreifen darf. Zudem können Sie den Benutzern vor dem Aufrufen Ihrer App eine Brandingstartseite präsentieren.

UI der Anmeldeseite für die Easy Diary-App

Verwandte Themen

Hub

Pivot