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.
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:
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).
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.
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.
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.
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.
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.
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.
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.
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.