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 passent par 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épondez aux attentes des utilisateurs.
- Simplicité : ne faites pas plus que nécessaire.
- Clarté : fournissez des chemins et des options clairs.
Cohérence
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 étiquetées afin 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 dépassez deux niveaux de navigation, fournissez une barre de navigation qui indique à l’utilisateur où il se trouve et revenons rapidement. Sinon, vous risquez de bloquer votre utilisateur dans une hiérarchie profonde qu’il aura des difficultés à quitter.
- Évitez « pogo-sticking ». Pogo-sticking se produit lorsqu’il existe du contenu associé, mais en accédant à celui-ci, l’utilisateur doit monter un niveau, puis descendre à nouveau.
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 passer 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 pas de 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 que c’est un problème pour votre application, passez en avant et faites des pairs de pages. Sinon, envisagez d’utiliser une structure hiérarchique pour diviser les pages en deux ou plusieurs groupes plus petits.)
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 parcourez 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.
- Il y a plus de 7 pages dans le groupe.
Combinaison de structures
Vous n’avez pas besoin de 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 uniquement les éléments de navigation pair à pair 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 d’égal à égal pour les pages A2 doivent uniquement être liés aux autres pages A2. Ils ne doivent pas établir de lien vers les pages de niveau 2 dans 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 un large éventail de contrôles de navigation pour garantir une expérience de navigation cohérente et fiable dans votre application.
À 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.
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.
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.
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 quand :
- 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
Affiche une liste vertical de liens vers les pages de niveau supérieur. Contexte d'utilisation :
- Les pages existent au niveau supérieur.
- Il existe de nombreux éléments de navigation (plus de 5)
- Vous ne vous attendez pas à ce que les utilisateurs basculent fréquemment entre les pages.
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 vous attendez à ce que les utilisateurs basculent fréquemment entre les éléments enfants.
- Vous souhaitez permettre à l’utilisateur d’effectuer des opérations de haut niveau, telles que la suppression ou le tri, sur des éléments individuels ou des groupes d’éléments, et souhaitez également permettre à l’utilisateur 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.
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.
Suivant : 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 pour activer la navigation de base entre deux pages de votre application.
Windows developer