Recommandations et liste de vérification pour les barres des applications (applications du Windows Store)

Suivez ces recommandations lorsque vous utilisez des barres d’applications dans les applications du Windows Store.

Feuille de route : comment cette rubrique s’articule-t-elle par rapport aux autres ? Voir :

• Feuille de route pour les applications du Windows Store en C# ou Visual Basic
• Feuille de route pour les applications du Windows Store en C++
• Interface utilisateur des applications du Windows Store de A à Z, présentée dans notre série Fonctionnalités d’application de A à Z

Recommandations en matière d’expérience utilisateur

Grâce aux barres d’applications, l’utilisateur accède rapidement aux commandes dont il a besoin. Il peut afficher les barres d’applications en balayant le bas de l’écran, puis les masquer en interagissant avec leur contenu. Les barres d’applications peuvent aussi servir à afficher les commandes et les options propres au contexte de l’utilisateur, par exemple, celles relatives à la sélection de photos ou au mode dessin.

Si l’utilisateur doit recourir à certaines commandes pour accomplir un flux de travail (tel que l’achat d’un produit), placez celles-ci sur la zone de dessin plutôt que dans les barres d’applications.

Recommandations relatives aux commandes de la barre de l’application

Suivez ces recommandations lorsque vous placez vos commandes dans la barre de l’applications.

• Créez des groupes de commandes séparés de part et d’autre de la barre de l’application.

  Si vous avez des ensembles de commandes distincts (par exemple un ensemble pour créer du contenu et un ensemble pour filtrer votre affichage), placez-les de part et d’autre de la barre de l’application.

  Si vous avez plus de deux ensembles, séparez-les au moyen d’un séparateur.

• Conservez les commandes au même endroit dans l’ensemble de l’application.

  Bien que chaque page devrait contenir uniquement les commandes relatives à cette page, si des commandes sont les mêmes d’une page à une autre, elles devraient se trouver autant que possible au même emplacement, de façon à ce que les utilisateurs puissent prévoir leur emplacement.

• Suivez les conventions de placement.

  • Placez le bouton Nouveau/Ajouter/Créer (+ icône) à l’extrême droite.
  • Regroupez les boutons de changement d’affichage et placez-les à l’extrême gauche.
  • Placez les commandes Accepter, Oui et OK à gauche des commandes Rejeter, Non et Annuler.

• Affichez les commandes sur base du contexte dans une barre de l’application lorsqu’un élément est sélectionné et affichez la barre de l’application automatiquement.

  La plupart des gens sont droitiers. Ainsi, lorsqu’ils sélectionnent un élément dans la page d’applications, toutes les commandes en rapport avec cet élément doivent se trouver à gauche de la barre de l’application. Ainsi, leurs bras ou mains ne les empêcheront pas de voir leurs commandes.

• Définissez le masquage de la barre de l’applications en mode bascule lors de l’affichage des commandes contextuelles.

  Si vous avez des commandes contextuelles dans la barre de l’application, définissez le mode sur rémanent en présence de contexte, de façon à ce que la barre ne soit pas automatiquement masquée lorsque l’utilisateur interagit avec l’application. Désactivez le mode rémanent lorsque le contexte disparaît.

  Par exemple, vous souhaiterez peut-être afficher des commandes contextuelles permettant de manipuler des photos lorsque des utilisateurs sélectionnent une image, mais vous voudrez également permettre aux utilisateurs de continuer à travailler dans l’image, par exemple pour la faire pivoter ou pour la rogner. Dans ce cas, la barre reste visible jusqu’à ce que l’utilisateur désélectionne l’image ou fait disparaître la barre de l’application au moyen d’un balayage latéral.

• Utilisez des menus et des menus volants lorsque vous avez trop de commandes.

  S’il vous est impossible de faire tenir toutes vos commandes dans une barre de l’application sous forme de boutons distincts, regroupez les commandes apparentées et placez-les dans des menus qui s’ouvrent à partir des boutons de la barre de l’application.

  

  Regroupez les commandes de manière logique ; placez par exemple Répondre, Répondre à tous et Transférer dans un menu Répondre.

  Ne regroupez pas dans un menu de type « Autres » ou « Avancées » des commandes disparates ou sans lien. La présence de menus contenant des commandes générales rend l’utilisation de l’application moins évidente. En outre, le contenu de ces menus est souvent peu consulté par les utilisateurs. Si vous avez un trop-plein de commandes et qu’il est impossible de les regrouper de manière logique, il vous faut envisager de simplifier votre application.

• Concevez votre barre de l’applications pour l’affichage d’ancrage ou portrait.

  Assurez-vous que les commandes de la barre de l’application s’affichent correctement dans les vues ancrée et portrait.

  Pour plus d’informations, voir Comment utiliser une barre de l’application dans différents affichages.

• Concevez votre barre de l’applications pour permettre le défilement horizontal.

  Si votre application comporte une zone de défilement horizontale dans la partie inférieure de la page d’application, réduisez la hauteur de la zone de défilement lorsque la barre de l’application apparaît en mode rémanent. Dans le cas contraire, il se peut que la barre de l’application recouvre votre barre de défilement et oblige les utilisateurs à se donner du mal pour faire disparaître la barre de l’application afin de continuer à faire défiler l’écran. Veillez à garder le bord inférieur de la barre de défilement aligné sur le bord supérieur de la barre de l’application.

• Utilisez les styles par défaut pour les commandes, les menus et les menus volants.

  Les utilisateurs s’habituent à l’emplacement et la taille des boutons, de sorte que si vous voulez personnaliser une barre de l’application, nous vous conseillons de personnaliser la couleur de l’arrière-plan, des icônes et des étiquettes, mais de ne pas modifier la taille ou la marge intérieure des boutons. La disposition par défaut est conçue pour prendre en charge les manipulations tactiles et pour accueillir dix commandes pour toutes les largeurs d’écran prises en charge. La modification de la disposition peut entraîner des comportements inattendus.

  Pour plus d’informations, voir Démarrage rapide : application de styles aux boutons de la barre de l’application.

• Utilisez la barre de l’application du bas pour les commandes et la barre de navigation pour la navigation.

  En général, utilisez la barre de l’application du bas pour les commandes qui ont un effet sur la page actuelle. Utilisez la barre de navigation pour les éléments de navigation qui permettent à l’utilisateur d’accéder à une autre page.

• Utilisez les icônes intégrées pour les commandes.

  Pour plus d’informations, voir Démarrage rapide : application de styles aux boutons de la barre de l’application.

• Ne placez pas les commandes principales dans la barre de l’applications.

  Ne placez pas dans la barre de l’application des commandes qui sont essentielles à la réussite d’une application. Par exemple, dans une application d’appareil photo, placez une commande « Prendre une photo » dans la page d’application plutôt que dans la barre de l’application. Vous pourriez soit ajouter un bouton dans la page d’application, soit laisser les utilisateurs appuyer sur l’aperçu pour prendre la photo.

• Ne placez pas de commandes de connexion, de déconnexion ou d’autres commandes de gestion de compte dans la barre de l’applications.

  Toutes les commandes de gestion de compte, comme les commandes de connexion, de déconnexion, de paramètres de compte ou de création de compte, doivent prendre place dans un menu volant Paramètres. S’il est important que les utilisateurs puissent se connecter à une page particulière, fournissez le bouton de connexion à la page d’application.

• Ne placez pas les commandes de texte du Presse-papiers dans la barre de l’applications.

  Placez les commandes Couper, Copier et Coller dans un menu contextuel sur la page d’applications plutôt que dans la barre de l’application.

• Ne placez pas les paramètres d’application dans la barre de l’application.

  Toutes les commandes de paramètres, comme les valeurs par défaut et les préférences, doivent figurer dans un menu volant Paramètres. Le menu volant Paramètres est également le meilleur endroit pour les commandes de gestion utilisées rarement, telles que celles permettant d’effacer l’historique.

Gestion du bouton droit de la souris

Pour conserver la cohérence de l’interface utilisateur de votre application avec les autres applications du Windows Store, l’utilisateur clique sur le bouton droit de la souris pour déclencher la barre de l’application que vous fournissez. Si vous disposez d’une application qui doit utiliser le bouton droit de la souris dans un autre but, par exemple un tir secondaire dans un jeu ou un trackball virtuel dans une visionneuse 3D, l’application peut ignorer les événements qui déclenchent la barre de l’application. Vous devez néanmoins songer au rôle de la barre de l’application, ou d’un menu contextuel similaire, dans le modèle de contrôle de votre jeu, car il s’agit d’une part importante de l’expérience de l’application du Windows Store.

Suivez les recommandations suivantes lorsque vous concevez les contrôles de votre application :

• Si votre application doit faire appel au bouton droit de la souris pour une fonction importante, utilisez-le directement pour la fonction en question. N’activez pas d’élément d’interface utilisateur contextuel ou la barre de l’application s’il n’est pas important au workflow.
• S’il existe des zones de la surface Microsoft DirectX ne faisant appel à aucune action contextuelle activable à l’aide du bouton droit et spécifique à l’application, comme des menus en bordure de l’affichage, faites en sorte que la barre de l’application s’affiche lorsque l’utilisateur clique avec le bouton droit sur ces zones.
• Si la prise en charge du bouton droit de la souris est nécessaire ailleurs sur la zone de dessin, songez à faire afficher la barre de l’application lorsque l’utilisateur clique avec le bouton droit sur la ligne horizontale de pixels supérieure, celle inférieure ou les deux.
• Si aucune de ces solutions ne suffit, placez un contrôle personnalisé sur la surface DirectX pour activer les mouvements à la souris pour ouvrir la barre de l’application.
• Utilisez les événements de la classe MouseDevice, par exemple MouseMoved, pour implémenter vos propres comportements de menu contextuel.
• Si vous utilisez une interface tactile, une pression longue ou un appui prolongé revient à effectuer un clic avec le bouton droit de la souris. Gérez ces deux événements de manière similaire. Pour gérer cet événement et définir un comportement personnalisé pour celui-ci, inscrivez l’événement Holding dans le Registre. Pour activer le maintien, définissez la propriété GestureSettings dans le but de permettre le maintien du contact lors d’une entrée tactile et à l’aide du stylet. Pour activer le comportement du maintien à l’aide de la souris, définissez HoldWithMouse dans la propriété GestureSettings.
• Ne fournissez pas de comportement de substitution pour la combinaison de touches Windows+Z dans votre application. Développez une barre de l’application ou un menu contextuel similaire, et faites afficher le contrôle lorsque l’utilisateur appuie sur la touche Windows avec la touche Z. Inscrivez les événements KeyDown et AcceleratorKeyActivated dans le Registre pour déterminer le moment où ces deux touches sont appuyées.

Rubriques associées

Démarrage rapide : ajout de barres d’application

Démarrage rapide : application de styles aux boutons de la barre de l’application

Comment utiliser une barre de l’application dans différents affichages

AppBar