Modèles de navigation (applications du Windows Store)

Article
04/07/2015

Organisez le contenu de votre application du Windows Store pour que vos utilisateurs puissent le parcourir facilement et de façon intuitive. L’utilisation de bons modèles de navigation vous aide à réduire le nombre de commandes qui restent affichées à l’écran. Ainsi, les utilisateurs peuvent se concentrer sur le contenu actuel.

La navigation dans les applications du Windows Store est basée sur deux modèles : un modèle hiérarchique et un modèle plat. Une application peut utiliser l’un et/ou l’autre de ces modèles.

Modèle hiérarchique

Ce modèle permet de créer des applications du Windows Store rapides et fluides. Il convient plus particulièrement aux applications comportant de grandes collections de contenus ou de nombreuses sections de contenu différentes que l’utilisateur peut explorer. La plupart des applications du Windows Store utilisent un système de navigation hiérarchique.

Étudier cette fonctionnalité de façon plus approfondie dans le cadre de notre série Fonctionnalités d’application de A à Z: Navigation hiérarchique de A à Z (HTML et XAML)

Pages Hub, Section et Détail d’une application du Windows Store

Les pages Hub représentent le point d’entrée de l’utilisateur dans l’application. Ici, le contenu est affiché dans une vue panoramique horizontale détaillée qui permet aux utilisateurs d’avoir un aperçu de ce qui est nouveau et disponible.

Le Hub comprend différentes catégories de contenu, chacune étant mappée aux pages Section de l’application.

Les pages Section représentent le second niveau d’une application. Ici, le contenu peut s’afficher sous la forme qui représente le mieux le scénario et le contenu de la section.

La page Section se compose d’éléments individuels qui ont chacun leur propre page de détails. Les pages Section peuvent également tirer parti du regroupement et d’une disposition panoramique.

Les pages Détail représentent le troisième niveau d’une application. Voici le détail des éléments individuels affichés. Le format varie considérablement selon le type de contenu.

La page de détails comprend les détails ou les fonctionnalités de l’élément. Les pages de détails peuvent contenir de nombreuses informations ou un objet unique, par exemple une image ou une vidéo.

Modèle plat

De nombreuses applications du Windows Store utilisent un modèle de navigation plat. Des applications telles que des jeux, des navigateurs ou des applications de création de documents utilisent ce modèle pour permettre à l’utilisateur de se déplacer entre des pages, des onglets ou des modes qui résident tous au même niveau hiérarchique. Contrairement au modèle hiérarchique, il n’y a généralement pas de bouton Précédent persistant ni de pile de navigation. Le déplacement entre les pages se fait donc habituellement via des liens directs dans le contenu, comme dans le premier exemple ci-dessous, ou via la barre de navigation, comme dans le second exemple ci-dessous.

Étudier cette fonctionnalité de façon plus approfondie dans le cadre de notre série Fonctionnalités d’application de A à Z: Navigation plate de A à Z (HTML et XAML)

exemples de navigation plate

Ce modèle est plus particulièrement adapté quand le scénario principal implique un basculement entre un petit nombre de pages ou d’onglets, par exemple dans les applications de navigateur Web telles qu’Internet Explorer, les ebooks et les jeux.

en-tête, bouton Précédent, en-têtes de section et vignettes comme élément de navigation

En-tête et bouton Précédent

L’en-tête étiquette la page active et permet de s’orienter. Le bouton Précédent vous permet de revenir rapidement à l’endroit où vous étiez.
Section ou étiquettes de catégorie

Ces étiquettes déplacent l’utilisateur vers différentes sections ou catégories de contenu.
Autres cibles

Vous pouvez utiliser des vignettes, des flèches, des boutons, des résultats de recherche ou d’autres cibles personnalisées comme éléments de navigation. Dans certains jeux, il existe des exemples d’éléments de navigation de formes intéressantes.

Application Bing Actualité avec en-tête, étiquette de section et lien vers d’autres détails

Barre d’application supérieure

En balayant à partir du haut ou du bas de l’écran, un utilisateur affiche les barres d’application. La barre d’application supérieure est également appelée barre de navigation. Vous pouvez placer des éléments de navigation dans la barre d’application supérieure pour libérer de l’espace à l’écran pour le contenu de votre application. En guise d’alternative, vous pouvez placer des éléments de navigation sur le Canvas si les utilisateurs en ont souvent besoin quand ils utilisent votre application et si leur présence sur le Canvas n’encombre pas l’expérience de l’application. C’est vous qui décidez s’il vaut mieux placer les éléments de navigation dans la barre d’application supérieure ou sur le Canvas.

accès à la barre de navigation

En règle générale, les étiquettes de section ou de catégorie se trouvent dans la barre de navigation, comme dans Hulu Plus.

barre de navigation de l’application hulu plus

De nombreuses applications utilisent la barre d’application supérieure pour fournir des raccourcis. Par exemple, dans l’application ESPN, un utilisateur peut accéder à la page des sports en cliquant sur des résultats au-dessus des étiquettes de section dans la barre d’application supérieure.

barre de navigation de l’application espn

La barre d’application supérieure peut également donner à l’utilisateur un aperçu du contenu de la page cible. Dans l’exemple d’application d’achat suivante, vous pouvez obtenir un aperçu des images des produits dans la barre d’application avant de vous plonger dans une page de détail de produit.

barre de navigation de l’application vevo

Nous vous encourageons à utiliser les barres d’application en faisant preuve de créativité. Dans Fresh Paint, la barre d’application supérieure sert de trousse de fourniture de dessin et propose également les fonctions de navigation dédiées.

barre de navigation fresh paint

Zoom sémantique

Le zoom sémantique permet d’analyser un affichage et de s’y déplacer avec rapidité et fluidité, en particulier s’il s’agit d’une longue liste affichée de manière panoramique.

exemple d’application avec zoom avant, puis zoom arrière

Par exemple, dans Great British Chefs, la page Hub comporte une section « À la Une » suivie de cinq sections riches en images avec mouvement panoramique horizontal. L’application utilise le zoom sémantique pour simplifier l’accès à chacune des cinq sections.

zoom sémantique dans Great British Chefs