Notions de base de la conception de la navigation dans les applications Windows

Si l’on considère une application comme une collection de pages, le terme navigation décrit le fait de se déplacer d’une page à l’autre et au sein d’une même page. La navigation est le point de départ de l’expérience utilisateur, car elle permet aux utilisateurs de rechercher le contenu et les fonctionnalités qui les intéressent. C’est un élément très important, qui peut être difficile à réaliser correctement.

Vous avez un grand nombre de choix à faire pour la navigation. Vous pouvez :

Exiger que les utilisateurs parcourent une série de pages dans l’ordre.

Fournissez un menu qui permet aux utilisateurs d’accéder directement à n’importe quelle page.

Placez tout sur une seule page et fournissez des mécanismes de filtrage pour l’affichage du contenu.

Il n’existe aucune conception de navigation unique qui fonctionne pour toutes les applications, mais il existe un ensemble de principes et de recommandations, que vous pouvez suivre pour mieux déterminer la conception appropriée à votre application.

Principes d’une navigation réussie

Commençons par les principes de base d’une navigation réussie :

• Cohérence : Répondre aux attentes des utilisateurs.
• Simplicité : Ne pas faire plus que nécessaire.
• Clarté : Fournir des chemins d’accès clair et des options.

Consistency

La navigation doit être cohérente avec les attentes des utilisateurs. Utilisez des contrôles standard auxquels les utilisateurs sont familiers et respectez les conventions standard pour les icônes, les emplacements et le style pour rendre la navigation prévisible et intuitive pour les utilisateurs.

Les utilisateurs s’attendent à trouver certains éléments d’interface utilisateur dans des emplacements standard.

Simplicité

Un recours moins large aux éléments de navigation simplifie la prise de décisions pour les utilisateurs. Le fait de fournir un accès simple à des destinations importantes et de masquer les éléments moins importants permet aux utilisateurs d’accéder plus facilement et rapidement à la page de leur choix.

Présentez les éléments de navigation dans un menu de navigation familier.

Ne surchargez pas les utilisateurs avec de nombreuses options de navigation.

Clarté

Des chemins d’accès clairs favorisent une navigation logique pour les utilisateurs. Le fait de rendre les options de navigation évidentes et de clarifier les relations entre les pages de navigation doit empêcher les utilisateurs de se perdre.

Les destinations sont clairement nommées pour que les utilisateurs sachent où ils sont.

Recommandations générales

Maintenant nous allons utiliser nos principes de conception (cohérence, simplicité et clarté) pour élaborer des règles générales.

• Réfléchissez à vos utilisateurs. Définissez le parcours qu’ils sont susceptibles de suivre dans votre application et cherchez à savoir pourquoi les utilisateurs accèdent à une page et où ils souhaitent aller ensuite.
• Évitez les hiérarchies de navigation profondes. Si vous allez au-delà de deux niveaux de navigation, fournissez une barre de navigation qui indique à l’utilisateur où il se trouve et qu’il revient rapidement. Sinon, vous risquez de bloquer votre utilisateur dans une hiérarchie profonde qu’il aura des difficultés à quitter.
• Évitez le « pogo-sticking ». Le pogo-sticking se produit lorsqu’il existe du contenu associé, mais pour y accéder, l’utilisateur doit monter un niveau, puis redescendre.

Utiliser la structure appropriée

Maintenant que vous êtes familiarisé avec les principes de navigation générale, comment devez-vous structurer votre application ? Il existe deux structures générales : plate et hiérarchique.

Plate/latérale

Dans une structure plate/latérale, les pages se trouvent côte-à-côte. Vous pouvez aller d’une page à une autre dans n’importe quel ordre.

Nous vous recommandons d’utiliser une structure plate dans les cas suivants :

• Les pages peuvent être affichées dans n’importe quel ordre.
• Les pages sont clairement distinctes les unes des autres et n’ont aucune relation parent/enfant évidente.
• Le groupe contient moins de 8 pages.
  (Lorsqu’il y a plus de pages, il peut être difficile pour les utilisateurs de comprendre comment les pages sont uniques ou de comprendre leur emplacement actuel au sein du groupe. Si vous ne pensez pas qu’il s’agit d’un problème pour votre application, faites en sorte que les pages soient des homologues. Sinon, envisagez d’utiliser une structure hiérarchique pour diviser les pages en deux groupes plus petits ou plus.)

Hiérarchique

Dans une structure hiérarchique, les pages sont organisées dans une structure arborescente. Chaque page enfant n’a qu’un parent, mais un parent peut avoir une ou plusieurs pages enfants. Pour atteindre une page enfant, vous naviguez via le parent.

Les structures hiérarchiques sont parfaites pour organiser du contenu complexe qui s’étend sur un grand nombre de pages. L’inconvénient de cette structure est qu’elle surcharge la navigation : plus la structure est profonde, plus les utilisateurs doivent cliquer pour naviguer entre les pages.

Nous recommandons une structure hiérarchique dans les cas suivants :

• Les pages doivent être parcourues dans un ordre spécifique.
• Il existe une relation parent-enfant claire entre les pages.
• Le groupe contient plus de 7 pages.

Combinaison de structures

Vous n’avez pas à choisir une structure ou l’autre; de nombreuses applications bien conçues utilisent les deux. Une application utilise des structures plates pour les pages de niveau supérieur qui peuvent être affichées dans n’importe quel ordre, et des structures hiérarchiques pour les pages qui ont des relations plus complexes.

Si votre structure de navigation comporte plusieurs niveaux, nous vous recommandons de lier les éléments de navigation pair à pair uniquement aux homologues au sein de leur sous-arborescence actuelle. Prenez en considération l’illustration adjacente, qui montre une structure de navigation à deux niveaux :

• Pour le niveau 1, l’élément de navigation pair à pair doit donner accès aux pages A, B et C.
• Au niveau 2, les éléments de navigation pair à pair des pages A2 doivent uniquement être liés aux autres pages A2. Ils ne doivent pas renvoyer aux pages de niveau 2 de la sous-arborescence C.

Utilisez les contrôles appropriés

Une fois que vous avez choisi votre structure de page, vous devez déterminer comment les utilisateurs navigueront à travers ces pages. XAML fournit divers contrôles de navigation pour garantir une expérience de navigation cohérente et fiable dans votre application.

Trame

À quelques exceptions près, toutes les applications dotées de plusieurs pages utilisent une trame. Généralement, l’application est dotée d’une page principale qui contient la trame et un élément de navigation principal, comme un contrôle d’affichage de la navigation. Lorsque l’utilisateur sélectionne une page, la trame se charge et l’affiche.

Navigation supérieure

Affiche une liste horizontale de liens vers les pages de même niveau. Le contrôle NavigationView implémente le modèle de navigation supérieure.

Utilisez la navigation supérieure lorsque :

• Vous souhaitez afficher toutes les options de navigation à l’écran.
• Vous souhaitez davantage d’espace pour le contenu de votre application.
• Les icônes ne peuvent pas décrire clairement vos catégories de navigation.

Onglets

Affiche un ensemble horizontal d’onglets et leur contenu respectif. Le contrôle TabView est utile pour afficher plusieurs pages (ou documents) tout en donnant à l’utilisateur la possibilité de réorganiser, d’ouvrir ou de fermer des onglets.

Utilisez les onglets lorsque :

• Vous voulez que les utilisateurs puissent ouvrir, fermer ou réorganiser dynamiquement les onglets.
• Vous voulez qu’un grand nombre d’onglets puissent s’ouvrir en même temps.
• Vous voulez que les utilisateurs puissent déplacer facilement des onglets entre les fenêtres de votre application qui utilisent des onglets, comme les navigateurs web tels que Microsoft Edge.

Chemin de navigation

Affiche une liste horizontale de liens vers des pages à chacun des niveaux supérieurs. Le contrôle BreadcrumbBar implémente le modèle de navigation supérieur.

Utilisez une barre de navigation dans les cas suivants :

• Vous souhaitez afficher le chemin d’accès à l’emplacement actuel
• Vous avez de nombreux niveaux de navigation
• Vous vous attendez à ce que les utilisateurs puissent revenir à n’importe quel niveau précédent

Navigation de gauche

Affiche une liste vertical de liens vers les pages de niveau supérieur. Contexte d'utilisation :

• Les pages se trouvent au niveau supérieur.
• Il existe de nombreux éléments de navigation (plus de 5)
• Vous ne pensez pas que les utilisateurs passeront fréquemment d’une page à l’autre.

Liste/détails

Affiche une liste d’éléments. La sélection d’un élément affiche sa page dans la section Détails. Contexte d'utilisation :

• Vous pensez que les utilisateurs passeront fréquemment d’un élément enfant à un autre.
• Vous voulez permettre à l’utilisateur d’effectuer des opérations générales, comme la suppression ou le tri, sur des éléments individuels ou des groupes d’éléments. Vous voulez également lui permettre d’afficher ou de mettre à jour les détails de chaque élément.

Le modèle Liste/détails est particulièrement bien adapté aux boîtes de réception, aux listes de contacts et à l’entrée de données.

Liens hypertexte

Les éléments de navigation incorporés apparaissent dans le contenu d’une page. Contrairement aux autres éléments de navigation, qui doivent être cohérents dans toutes les pages, les éléments de navigation incorporés au contenu sont uniques d’une page à l’autre.

Étape suivante : Ajouter du code de navigation à votre application

L’article suivant, Implémenter la navigation de base, montre le code requis pour utiliser un Frame contrôle afin d’activer la navigation de base entre deux pages dans votre application.