Hub d’application central avec menu de page d’accueil (contrôle hub ou pivot) (applications du Windows Phone Store)

Imaginez que vous concevez une application qui comporte de nombreuses fonctionnalités. Quand vous en dressez la liste, vous constatez que vous pouvez les organiser dans des zones distinctes. Ces zones constitueront des parties distinctes de l’application que l’utilisateur souhaitera visiter. Votre conception doit permettre à l’utilisateur de naviguer facilement parmi ces zones de l’interface utilisateur. Ce type d’application a besoin d’un hub d’application central à partir duquel l’utilisateur accède à chaque zone secondaire de l’application.

Prenez par exemple une application de gestion d’équipe de football. Cette application nécessite plusieurs zones de fonctionnalités : une pour le calendrier des matches et des entraînements, une pour les informations sur l’effectif, une pour les scores et les statistiques des joueurs, et une autre pour les vidéos des matches joués. Vous souhaitez que l’utilisateur puisse accéder à chacune de ces zones de l’interface utilisateur. Pour cela, vous pouvez implémenter un hub d’application central avec une page d’accueil qui s’affiche au démarrage de l’application.

Interface utilisateur du hub d’application central pour gérer l’équipe de football

À partir du hub d’interface utilisateur central, l’utilisateur peut naviguer jusqu’à n’importe quelle zone de l’application. Quand il accède à une zone secondaire, affichez l’interface utilisateur appropriée. Par exemple, dans notre application, l’utilisateur peut passer de la page du hub d’application central à la page qui mentionne les statistiques des joueurs pour un match donné. Lorsque l’utilisateur souhaite accéder à une autre zone secondaire de l’application, il doit d’abord repasser par le hub d’application central. Il ne peut pas passer directement de Scores et Stats à Calendrier. Il doit obligatoirement revenir au hub d’application central.

Remarque  L’utilisation d’un hub d’application central avec une page d’accueil pour la navigation vers différentes zones de votre application est un excellent modèle de conception qui permet aux utilisateurs d’interagir efficacement avec celle-ci

Il existe plusieurs manières de présenter visuellement le hub d’application à l’utilisateur. Nous vous recommandons d’utiliser le contrôle hub. Cette rubrique décrit ce modèle de conception, puis présente quelques variantes possibles.

Utilisation du contrôle hub comme hub d’application

Microsoft fournit un contrôle d’interface utilisateur appelé « contrôle hub », qui peut servir de hub d’application central. Ce contrôle permet à l’utilisateur de naviguer parmi toutes les zones de fonctionnalités de l’application. Le contrôle hub est structuré comme suit— une image d’arrière-plan de hub placée derrière le contrôle, une section d’accueil à laquelle l’utilisateur accède au démarrage de l’application et des sections supplémentaires qui segmentent votre interface utilisateur au niveau supérieur de l’application.

Hub Musique

Le contrôle hub présente à l’utilisateur une large toile virtuelle qui s’étend horizontalement au-delà des limites de l’écran. L’utilisateur se déplace sur la toile dans le sens horizontal, section par section, en les parcourant une à une. Au démarrage de l’application, l’utilisateur accède à la première section du hub. À partir de là, il existe des variantes d’utilisation selon le mode de navigation souhaité. Chacune de ces variantes est décrite ci-dessous.

Section d’accueil

Cette première section (à l’extrême gauche) peut servir d’emplacement d’accueil et de point de départ pour la navigation vers les zones secondaires de l’application. Elle présente le menu des différentes zones que l’utilisateur peut sélectionner. Dans le hub Musique de la figure précédente, un appui sur radio vous permet d’accéder à la page Radio qui est en fait une sous-application au sein du hub Musique. L’interface utilisateur du hub est entièrement remplacée par l’interface utilisateur de la page radio. Si l’utilisateur souhaite maintenant accéder à la zone podcast, il doit revenir à la section d’accueil du hub à l’aide du bouton physique Précédent, puis appuyer sur l’entrée podcast dans la liste de menus. Si la liste des zones secondaires est trop longue pour tenir à l’écran, vous pouvez utiliser une vue de défilement.

Page Radio du hub Musique

Dans la section d’accueil, la liste des emplacements vers lesquels vous pouvez naviguer peut contenir des entrées qui démarrent une nouvelle application. Par exemple, la section d’accueil du hub Musique comporte une entrée qui mène au Windows Store. Un appui sur cette option permet d’accéder à la zone secondaire Musique du Windows Store, qui est elle-même un contrôle hub.

Sections de droite

Les sections situées sur la droite du panneau d’accueil contiennent une interface utilisateur qui doit être facilement accessible à l’utilisateur. Leur utilisation dépend entièrement de vous. Les zones secondaires ne doivent pas être accessibles de différentes manières, car cela risquerait de perturber l’utilisateur. Utilisez plutôt les sections de droite pour présenter une synthèse du contenu des zones secondaires. Par exemple, dans notre hub Musique, deux sections supplémentaires affichent le contenu multimédia consulté récemment.

La section historique du hub Musique évite d’avoir à naviguer vers une zone secondaire et offre un accès rapide aux derniers éléments regardés ou écoutés. Si vous accédez à la zone secondaire musique et que vous écoutez un morceau, celui-ci sera alors disponible dans la section historique, ce qui permet d’y accéder rapidement. Dans ce cas, les sections fournissent un accès rapide au contenu consulté dans les zones secondaires.

L’application Facebook est un autre exemple d’application qui utilise le contrôle hub pour permettre à l’utilisateur de naviguer facilement parmi ses fonctionnalités. Elle possède elle aussi une section d’accueil qui présente une liste de zones vers lesquelles l’utilisateur peut naviguer. Par exemple, un appui sur l’entrée amis affiche l’interface utilisateur qui gère la liste d’amis.

Dans le contrôle hub de niveau supérieur, les sections de droite servent essentiellement à fournir un accès rapide aux vues que les concepteurs ont souhaité afficher au niveau supérieur. La section plus récentes du hub est en fait l’interface utilisateur d’une zone secondaire. Pour y accéder à partir de la section d’accueil, appuyez sur fil d’actualité. Vous accédez alors à cette zone secondaire (qui est en fait un contrôle pivot). Le contrôle pivot de la zone secondaire fil d’actualité comporte les éléments suivants : plus récentes, photos, liens et vidéos. Les concepteurs ont décidé qu’au lieu d’obliger l’utilisateur à naviguer vers fil d’actualité puis vers plus récentes, ils l’exposeraient aussi en tant que section dans le contrôle hub de niveau supérieur. Le même principe est appliqué aux sections photos et événements du contrôle hub de niveau supérieur.

Interface utilisateur du hub d’application central de l’application Facebook

Utilisation d’une grille d’images

Au lieu d’afficher une liste de zones vers laquelle naviguer à partir de votre section d’accueil, vous pouvez afficher une grille d’images. Le principe est le même ; seul l’aspect diffère. Avec des images, il est parfois plus facile de savoir où une sélection vous mène. Vous pouvez superposer du texte sur chaque image pour fournir des informations supplémentaires sur cette zone de l’application et son activité.

Avec une grille de 3 x 3, vous pourriez avoir jusqu’à neuf images à sélectionner. À partir de la section d’accueil qui héberge cette grille d’images, l’utilisateur peut cliquer sur l’une d’elles pour accéder à une autre zone de fonctionnalité offerte par l’application.

Cette section d’accueil peut même être une zone qui couvre plusieurs largeurs de section affichables. Par exemple, vous pourriez étendre la section d’accueil d’images horizontalement vers la droite pour qu’elle occupe un peu plus d’espace si nécessaire. L’application Kelley Blue Book a une grille qui s’étend à droite, comme l’illustre la figure ci-dessous. Pour accéder au reste des images, il vous suffit de balayer l’écran pour faire défiler l’écran horizontalement. Dans ce cas précis, la section d’accueil du contrôle hub a une double largeur.

Interface utilisateur du hub d’application de l’application Kelley Blue Book

Ne créez pas une grille d’images qui défile verticalement, car cela perturbe trop l’utilisateur.

Démarrage dans une section autre que la section d’accueil

Même si vous utilisez le contrôle hub et que vous avez une section d’accueil qui joue le rôle de menu ou de hub pour l’accès aux zones de fonctionnalités de votre application, vous n’êtes pas obligé d’en faire le point d’entrée lors de l’ouverture de votre application. Vous pouvez choisir une autre section de démarrage pour différentes raisons. Par exemple, si vous avez une application qui affiche des horaires de films, vous pouvez avoir une section d’accueil qui comporte une liste de sélections pour l’accès aux zones secondaires de l’application. Au lieu que l’utilisateur accède à une page qui n’est pas si intéressante, vous pouvez présenter une section qui montre des images des films les plus récents et les plus populaires. De cette manière, la première page affichée est un peu plus attirante.

Quand vous ouvrez l’application eBay, ce n’est pas la section d’accueil qui s’affiche, mais une section qui présente les meilleures affaires du moment. En balayant vers la droite, vous accédez à la section d’accueil du hub d’application, qui contient des images sur lesquelles vous pouvez cliquer pour accéder aux zones secondaires Consulter, Vendre, Acheter et Messages. Notez également l’utilisation de la zone de texte de recherche en haut. Cet élément d’interface utilisateur est très utile pour lancer rapidement des recherches.

Interface utilisateur du hub d’application de l’application eBay

Ne créez pas une grille d’images qui défile verticalement, car cela perturbe trop l’utilisateur.

Menu personnalisé de zones de fonctionnalités d’interface utilisateur

Il existe des alternatives à l’utilisation du contrôle hub Microsoft. Ce hub vous permet de placer plusieurs sections au niveau supérieur, mais peut-être n’en avez-vous pas besoin. Vous pourriez simplement avoir une liste sur une page, comme l’illustre la figure ci-dessous. C’est cette page qui s’afficherait à l’ouverture de l’application. Cette application utilise une icône à gauche du titre et de la description de chaque zone secondaire accessible.

Interface utilisateur du hub d’application de l’application de calendrier simplifiée

Vous pourriez également souhaiter présenter une expérience d’interaction unique, avec une image d’arrière-plan et des zones secondaires navigables affichées sous forme plus artistique, par exemple pour renforcer votre image de marque. Ce scénario s’applique davantage à certains types d’applications de divertissement. Voici un exemple de page d’accueil attrayante.

Application MyComic

Combiner des applications similaires

Comme mentionné plus haut, votre application comporte peut-être tellement de zones de fonctionnalités distinctes que vous aurez jugé préférable de les fractionner en applications distinctes. Cela n’est pas nécessaire ; une seule application peut suffire. L’écran principal affiché à l’ouverture de l’application joue le rôle d’emplacement de départ pour l’accès aux applications secondaires qui composent votre application. Cette section de hub d’application principale sera la page qui sera affichée quand les utilisateurs cliqueront sur l’icône de l’application pour la démarrer.

Nous vous recommandons d’éviter de créer une application distincte pour chaque zone unique pour laquelle vous avez des fonctionnalités, car cela oblige l’utilisateur à quitter l’une de vos applications et à en démarrer une autre. Imaginez que l’utilisateur doive interagir avec neuf applications différentes. Pour éviter cela, nous vous conseillons de créer une application de départ, à partir de laquelle les utilisateurs pourront accéder aux différentes zones de votre application. En tant que concepteur d’application, vous devez faire en sorte que les utilisateurs soient attirés vers votre hub central et qu’ils puissent voir tout ce que vous proposez sur un même écran.

Niveaux de navigation

La décision la plus difficile à prendre concerne la façon de fractionner les fonctionnalités de votre application et les niveaux de navigation que les utilisateurs doivent pouvoir parcourir. Si vous utilisez le contrôle hub avec une section d’accueil, vous devez déterminer quelle interface utilisateur s’affiche quand l’utilisateur appuie sur une sélection dans la liste. Une sélection vous fera passer du contrôle hub à un nouveau contrôle d’interface utilisateur tel qu’une page unique ou un contrôle pivot. En guise d’illustration, nous allons utiliser la section d’accueil du hub Musique ci-dessous.

Hub d’application pour Musique

Dans le cas du hub Musique, la sélection radio est une page d’interface utilisateur unique qui vous permet de changer de station de radio. Dans cette zone secondaire, il n’existe aucun contrôle hub, pivot ou de liste pour naviguer plus loin. La sélection musique de la section d’accueil, en revanche, présente différentes vues des morceaux que vous possédez. La figure ci-dessous montre une partie de l’arborescence d’interface utilisateur qui permet de parcourir les options de la sélection musique.

Arborescence de navigation dans le hub Musique

Quand vous êtes dans la zone musique, un contrôle pivot à défilement horizontal est affiché. La page pivot à laquelle vous accédez toujours en premier sous musique est l’élément pivot artistes. De là, vous pouvez naviguer à droite ou à gauche parmi les différents éléments pivot. Chacun d’eux offre une vue différente pour choisir parmi les morceaux disponibles.

Une fois que l’utilisateur a accédé à la zone de son choix dans l’application, vous lui présentez l’interface utilisateur nécessaire à cet endroit. Depuis n’importe quelle zone secondaire, l’utilisateur peut accomplir la tâche souhaitée. À ce second niveau, il est déconseillé de leur présenter encore une autre liste de zones vers lesquelles naviguer. Il vaut mieux se limiter à un contrôle hub de page principal et à un second niveau de détail. À partir de ce second niveau, l’utilisateur reviendrait à la section d’accueil avant d’accéder à une autre zone de l’application. Il utiliserait le bouton physique Précédent pour revenir en arrière.

Utilisation d’une image d’arrière-plan

Le contrôle hub vous permet d’afficher une image qui s’étire derrière toutes les sections. Vous pouvez toujours avoir la même image ou la modifier de temps à autres par programme pour varier le thème. Vous pouvez afficher une image en rapport avec les domaines d’intérêt des utilisateurs. Sélectionnez une image qui n’est pas trop chargée et n’interfère pas avec le contenu d’interface utilisateur qui se trouve sur elle.

Image d’arrière-plan

Panneaux d’accueil multiples

Vous aurez peut-être besoin de plusieurs sections contenant une liste des zones secondaires vers lesquelles naviguer, par exemple pour séparer deux différentes listes de zones de navigation. Dans ce cas, vous auriez deux sections assumant le rôle de sections d’accueil.

Principaux écrans de démarrage

Votre application ne pourra peut-être pas accéder directement au hub d’application central lors de son démarrage. Par exemple, vous devrez peut-être afficher une page de connexion ou une invite de mot de passe avant que l’utilisateur soit autorisé à accéder à l’application. Ou peut-être souhaiterez-vous présenter une page de démarrage avec le logo de votre marque.

Interface utilisateur de la page de connexion de l’application de journal simplifiée

Rubriques connexes

Hub

Pivot