Recommandations en matière de barres d’application

Applies to Windows and Windows Phone

Un exemple de contrôle de barre de navigation standard

Un exemple de contrôle de barre d’application standard

Description

Grâce aux barres d’application, les utilisateurs accèdent aisément aux commandes dont il a besoin. Ils peuvent afficher les barres d’application en balayant le bas ou le haut de l’écran, puis les masquer en interagissant avec leur contenu. Les barres d’application 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. Elles peuvent également être utilisées pour la navigation entre des pages ou sections de l’application.

Étudier cette fonctionnalité de navigation de façon plus approfondie dans le cadre de notre série Fonctionnalités d’application de A à Z:  Navigation plate de A à Z (HTML et XAML) et Navigation hiérarchique de A à Z (HTML et XAML)

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.

Barre de l’application supérieure

La barre de navigation, ou barre de l’application supérieure, est l’emplacement recommandé pour placer les contrôles de navigation qui permettent aux utilisateurs d’accéder aux autres parties de l’application. Le recours à la barre de l’application supérieure pour la navigation permet de fournir une expérience prévisible et cohérente aux utilisateurs pour naviguer dans les applications du Windows Store. La cohérence permet aux utilisateurs de se déplacer en toute confiance dans le système et de réutiliser leur connaissance de navigation d’une application à l’autre.

Les utilisateurs doivent pouvoir exécuter les scénarios de base uniquement à l’aide de la zone de dessin. La barre de navigation est un emplacement secondaire pour les contrôles de navigation. La barre de navigation peut aider l’orientation des utilisateurs dans toutes les parties de l’application, peut fournir un accès rapide à la page d’accueil, ou peut encourager les utilisateurs à explorer les différents composants de l’application.

Vous pouvez choisir d’inclure d’autres fonctionnalités dans la barre de l’application supérieure, par exemple en ajoutant un bouton « + » pour créer un élément ou en intégrant une zone de recherche. Si vous ajoutez des fonctionnalités, il est recommandé de les placer du côté droit de la barre d’application.

L’apparence par défaut de la barre de navigation est un bouton, mais si vous pouvez la personnaliser. Cependant, une combinaison de boutons et de miniatures est souvent utilisée, comme illustré dans l’image précédente.

Vous pouvez également diviser la barre de navigation en plusieurs zones, comme le fait l’application du Windows Store. Dans l’image ci-dessous, la section supérieure sert à la navigation globale et la section inférieure présente des catégories d’application.

Image de la barre de navigation de l’application du Windows Store

Barre de l’application inférieure

La barre d’application inférieure est l’endroit privilégié pour placer les commandes. En déplaçant les commandes du Canvas de l’application dans la barre de l’application, vous proposez une expérience encore plus immersive à vos utilisateurs.

Le contrôle de barre d’application standard est conçu pour les développeurs qui souhaitent implémenter une barre d’application avec un minimum de personnalisation. Bien qu’il soit facile de créer une barre d’application, il ne l’est pas autant de s’assurer qu’elle se comportera selon les recommandations et les modèles de Windows. La classe CommandBar class et l’objet WinJS.UI.AppBar object sont conçus pour faire correspondre la conception et les comportements afin que les développeurs n’aient pas à penser au moindre détail et s’éloignent le moins possible du modèle de commandes standard.

Si vous voulez vous démarquer de l’expérience standard et personnaliser les barres de votre application, utilisez le contrôle AppBar à la place du contrôle CommandBar en XAML.

Vous pouvez utiliser les icônes intégrées pour les commandes ou créer vos propres icônes. Pour obtenir la liste des icônes disponibles, voir :

Exemples

Barre de l’application supérieure

Capture d’écran du contrôle de barre de navigation standard

 

Barre de l’application inférieure

Capture d’écran du contrôle de barre d’application standard

Pratiques conseillées et déconseillées

  • Séparez les commandes et la navigation. Idéalement, placez les commandes dans la barre d’application inférieure et la navigation dans la barre d’application supérieure. Fournissez éventuellement une aide lors de la première exécution d’une application, pour indiquer aux utilisateurs les commandes importantes dans 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.

  • Placez les commandes au même endroit dans l’ensemble de l’application. Même si chaque page doit contenir uniquement les commandes relatives à cette page, si des commandes sont les mêmes d’une page à une autre, elles doivent 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 de façon contextuelle dans une barre de l’application quand un élément est sélectionné et affichez la barre de l’application automatiquement. La plupart des gens sont droitiers. Ainsi, quand ils sélectionnent un élément dans la page d’application, 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.

  • 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 quand 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 quand un utilisateur sélectionne une image, mais vous voudrez également lui permettre de continuer à travailler dans l’image, notamment 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 fasse disparaître la barre de l’application au moyen d’un balayage latéral.

  • 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.

    Image d’un menu volant et d’un menu

  • Concevez votre barre de l’application pour l’affichage redimensionné et le mode portrait. Si vous avez dix commandes ou moins, Windows masque automatiquement les étiquettes et modifie le remplissage pour vous quand les utilisateurs redimensionnent votre application ou la font pivoter en mode portrait. Par conséquent, fournissez des info-bulles pour toutes vos commandes. Si vous recherchez un affichage plus personnalisé, vous pouvez soit regrouper les commandes en menus, soit fournir une expérience plus spécialisée qui nécessite moins de commandes en affichage redimensionné ou en mode portrait.

    Dans les applications JavaScript, il est recommandé de placer les commandes globales avant les commandes contextuelles dans le modèle DOM de façon à obtenir la meilleure disposition lorsque des utilisateurs redimensionnent votre application. Pour plus d’informations, voir Ajout d’une barre de l’application avec des commandes et Application de styles aux barres d’application.

    Dans les applications C#/C++/VB, le redimensionnement est géré automatiquement si vous utilisez le contrôle CommandBar. Pour plus d’informations, voir Comment utiliser une barre de l’application avec différentes tailles.

  • 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.

  • Ne placez pas les commandes principales dans la barre de l’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’application. 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. Pour plus d’informations, voir Recommandations en matière d’ouverture de session.

  • 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.

Indications d’utilisation supplémentaires

Mise à l’échelle pour différentes tailles de fenêtre

Quand une application est redimensionnée avec une barre de l’application, le système redimensionne les commandes et les étiquettes peuvent disparaître. Quand des commandes dont la taille a été réduite ne peuvent plus s’ajuster sur une ligne à l’écran, le système les renvoie à la ligne.

  • Concevez au moins deux affichages de la barre de l’application, une taille normale et une taille réduite (500 pixels ou 320 pixels minimum). La plupart du temps des tailles de fenêtre normales sont utilisées, en plein écran ou réduites de moitié pour afficher deux applications.
  • Regroupez les commandes lors de la conception d’affichages plus petits. Si vous ne pouvez pas regrouper les commandes de façon logique, placez-les dans un groupe « plus » en utilisant une icône trois points (ellipse).
Résolutions de fenêtre courantes (en pixels)Nombre de boutons de taille réduite sans étiquette sur une seule ligneNombre de boutons de taille normale avec étiquette sur une seule ligne
13662213
10241610
768127
50085
32053

 

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 doit cliquer 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 des applications 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’interface utilisateur contextuelle ni la barre de l’application si cela n’est pas important au workflow.
  • Affichez la barre de l’application quand l’utilisateur clique avec le bouton droit sur des zones de votre application ne faisant appel à aucune action contextuelle activable à l’aide du bouton droit, comme des menus en bordure de l’affichage.
  • Si la prise en charge du bouton droit de la souris est nécessaire partout, songez à afficher la barre de l’application quand l’utilisateur clique avec le bouton droit sur la ligne horizontale de pixels supérieure, la ligne horizontale de pixels inférieure, ou les deux.
  • Si aucune de ces solutions ne suffit, utilisez des contrôles d’interaction utilisateur personnalisés pour ouvrir la barre de l’application avec la souris.
  • Utilisez les événements de la classe MouseDevice, par exemple MouseMoved, pour implémenter vos propres comportements de menu contextuel.
  • Gardez à l’esprit que l’action tactile d’appui prolongé est identique à un clic avec le bouton droit. 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 l’appui prolongé, définissez Hold (pour les entrées tactiles et à l’aide du stylet) et HoldWithMouse dans la propriété GestureSettings.
  • Ne modifiez pas le comportement de la combinaison de touches Windows+Z. Votre application doit afficher la barre de l’application ou un menu contextuel. Inscrivez-vous pour les événements KeyDown et AcceleratorKeyActivated pour déterminer le moment où l’utilisateur appuie sur ces deux touches.

Rubriques associées

Pour les concepteurs
Modèles de commandes
Modèles de navigation
Rendre la barre de l’application accessible
Pour les développeurs (HTML)
WinJS.UI.AppBar object
WinJS.UI.NavBar object
Exemple de contrôle AppBar HTML
Exemple de contrôle NavBar HTML
Exemple de navigation et d’historique de navigation
Votre première application - Troisième partie : objets PageControl et navigation
Ajout de barres d’application
Ajout de barres de navigation
Navigation entre les pages (HTML)
Pour les développeurs (XAML)
Windows.UI.Xaml.Controls AppBar class
Windows.UI.Xaml.Controls CommandBar class
Exemple de contrôle AppBar XAML
Exemple de navigation XAML
Votre première application - Troisième partie : navigation, disposition et vues
Votre première application - Ajouter une navigation et des vues à une application du Windows Store en C+ (didacticiel 3 sur 4)
Ajout de barres d’application (XAML)
Navigation entre les pages (XAML)
Pour les développeurs (application Windows Runtime en C++ basée sur DirectX)
Création d’une barre de l’application ou d’un paramètre

 

 

Afficher:
© 2014 Microsoft