Voir le mémo complet

 

La page principale de votre application (“Hub”) doit être conçue comme une couverture de magazine. Elle est généralement composée d’une ListView horizontale avec divers groupes représentées sous forme de colonnes mais peut aussi être totalement libre pour les applications non hiérarchiques comme des jeux.

Tout comme pour un magazine, ces contenus doivent attirer l’oeil et donc être présentés de manière concise et claire, sous des formats divers et attrayants.

An image showing an example hub page  Hh868271.flat_1(en-us,WIN.10).png

La navigation se fera le plus souvent par une gesture sur un élément de la page : touch d’un header de section, pinch out pour zoom sémantique, touch d’un élément d’une grille, …

Modes de navigation

Hiérarchique

Les mode de navigation conseillé et le plus utilisé est hiérarchique (Hub/Section/Detail) avec un maximum de 3 niveaux:

Hub, section, and details pages in a Metro style app

 

A plat

La navigation à plat peut s’appliquer quand il y a peu d’informations et d’écrans à présenter (comme dans les jeux par-exemple).

Flat navigation system in a Metro style app

 

Dans ce cas, l’AppBar du haut (réservée dans tous les cas à la navigation) est accessible depuis toutes les pages et permet de passer facilement d’un contexte à un autre comme le propose Internet Explorer.

Navigation bar and switching between multiple contexts

Certains contrôles types vous aideront à mettre en place une navigation “à la Metro”:

- le zoom sémantique

- les menus flyout pour les headers de sections et les menus en général

- le bouton Back

- les ListView/Gridview

- la FlipView couplée à une ListView pour la navigation maitre/détail

- l’AppBar du haut, réservée à la navigation

Pour  plus de détails sur les principes de navigation en général, je vous recommande cet article : Navigation design for Metro style apps.

 

Conseils complémentaires

Les sections

Navigation entre sections

Utilisez des menus flyout sur les headers de sections pour permettre la navigation entre sections et revenir à la page d’accueil.

image

Vous pouvez également utiliser l’AppBar du haut pour naviguer entre les différentes sections de l’application.

 

Nombre d’éléments visibles sur le hub

Pour informer l’utilisateur qu’il y a plus d’éléments dans une section que ceux affichés dans le Hub, vous pouvez:

- Afficher le nombre d’élements à droite du header de section (recommandé)

- Utiliser le dernier élément de la liste comme un lien vers la liste de tous les éléments : ex: “Voir +”

 

Le zoom sémantique

Le zoom sémantique permet de visualiser toutes les sections du niveau hiérarchique courant en 1 seule page en les regroupant selon des critères signicatifs.

Navigating between levels in a hierarchy with semantic zoom

Le zoom sémantique est conseillé à partir de 5 sections et obligatoire à partir de 10.

N’hésitez pas à être créatif et à proposer certaines informations détaillées comme dans le titre du regroupement ou dans la taille de la zone pour refléter le nombre d’éléments par-exemple.

Example of a zoomed-in layoutExample of a zoomed-out layout

Example of a zoomed-in layoutExample of a zoomed-out layout

Plus d’informations sur le zoom sémantique : Guidelines for Semantic Zoom

 

Les filtres/tris/regroupements

Ils doivent être proposés à partir des commandes de l’AppBar du bas à l’aide de menus flyout.

Filtering in an app bar

Dans le cas où ils sont la principale fonction de la page, il est possible de les faire apparaitre directement au-dessus des résultats, un peu comme dans un résultat de recherche.

Filtering in a store app

Sorting in a store app

 

La FlipView

La FlipView permet de naviguer aisément entre les pages de détail d’une collection d’éléments en fournissant un moyen de passer à l’élement suivant/précédent, comme pour les pages d’un catalogue.

Image of a FlipView control

Elle est conseillée quand le nombre d’éléments à présenter est inférieur à 25.

Au-delà, vous pouvez coupler une ListView à une FlipView au sens maitre/détail : la ListView représente les éléments de manière sommaire et la FlipView permet d’accéder au détail d’un élément et de naviguer entre ses voisins directement.

 

Les grid, scrollviewers, …

Vérifiez que les actions de navigation sur la grille ne déclenchent pas accidentellement d’action sur les éléments contenus par celle-ci.

 

Le bouton Back

Il doit toujous être placé en haut à gauche de la page et doit permettre de revenir à la page précédente.

Sur les vues plein écran, il peut être déplacé dans l’AppBar du haut de la page.

S’il est désactivé, il doit être invisible comme pour la première page de l’application par-exemple.

 

Lors d’un changement de page

Une page ne doit jamais mettre plus de 5 secondes pour s’afficher.

Voir le mémo complet