Modèles de commandes

Vous pouvez placer des commandes et des contrôles sur plusieurs aires à l’intérieur de votre application du Windows Store, notamment la zone de dessin d’application, des fenêtres contextuelles, des boîtes de dialogue et des barres de l’application. Le choix de l’aire appropriée au moment opportun peut faire la différence entre une application fluide ou lourde à l’usage.

Dans les applications du Windows Store, les commandes sont les éléments d’interface utilisateur interactifs qui permettent à l’utilisateur d’exécuter des actions. Une commande est différente d’un élément de navigation, car un élément de navigation permet à l’utilisateur de se déplacer parmi les pages, tandis qu’une commande lui permet d’effectuer une action sur la page active. Les éléments de navigation rendent une application utilisable. Les commandes rendent une application utile.

Pour plus d’informations sur les différentes aires de commande dans les applications, voir Disposition de votre interface utilisateur.

Types de commandes

Filtre

Les commandes de filtrage suppriment ou masquent le contenu dans un jeu de données en fonction d’un critère. Par exemple, un utilisateur peut choisir d’afficher uniquement les jeux du Windows Store classés dans la catégorie « Aventure ».

 

 

Pivot

Les commandes Pivot réorganisent le contenu dans un jeu de données et donnent une vue différente des données en fonction du Pivot. Par exemple, un utilisateur peut choisir d’organiser les chansons par album, artiste ou titre.

 

 

Tri

Les commandes de tri changent l’ordre dans lequel le contenu apparaît dans un jeu de données. Par exemple, un utilisateur peut choisir de trier les destinations dans une application de voyage en fonction de leur popularité.

 

 

Affichage

Les commandes d’affichage changent le style ou la méthode d’affichage du contenu. Par exemple, dans une application qui recherche des hôtels, un utilisateur peut choisir d’afficher les hôtels sur une carte plutôt que dans une liste.

 

 

Indication

Vous pouvez placer des commandes d’indication sur votre canevas, si vous pensez qu’elles peuvent être utiles à vos utilisateurs. Par exemple, dans l’application Courrier de Windows 8.1, il existe une commande ("points de suspension") qui donne des indications sur les options supplémentaires. Si vous cliquez dessus, cela permet d’afficher la barre de l’application, ce qui s’ajoute aux méthodes conventionnelles permettant d’afficher une barre d’application.

 

 

Vous pouvez concevoir ces indications en fonction du style de votre application. Cette application d’actualités utilise la même indication de barre d’application, ainsi qu’un indicateur avec une icône de menu qui affiche une page de choix de menu.

 

 

Autres

Toute élément interactif de l’interface utilisateur qui permet à l’utilisateur d’exécuter une action dans l’affichage actuel est une commande. Voici quelques exemples.

 

 

Disposition des commandes

Sur le Canvas

Si une commande (ou un menu de commandes) est fondamentale et nécessaire en permanence pour permettre à l’utilisateur d’effectuer les actions de base, placez-la sur le Canvas. Par exemple, dans l’application Courrier dans Windows 8.1, les commandes de base pour répondre, supprimer ou créer s’affichent sur le Canvas quand un message est sélectionné.

 

 

Barre de l’application inférieure

Parfois, vous ne voulez pas que vos commandes encombrent le Canvas et réduisent la quantité de contenu que l’utilisateur peut afficher. Utilisez la barre d’application inférieure pour afficher les commandes disponibles aux utilisateurs à la demande. La barre d’application inférieure affiche les commandes en rapport avec le contexte de l’utilisateur, généralement la page ou la sélection active.

La barre d’application inférieure est utile pour la sélection d’une ou plusieurs commandes. Vous pouvez programmer votre application afin que la barre d’application s’affiche quand un utilisateur sélectionne des objets.

 

 

Recommandations en matière de disposition des commandes

Vous pouvez utiliser différentes positions pour les commandes dans la barre d’application, mais prenez en compte les éléments suivants :

• Prévisibilité Dans la mesure du possible, faites preuve de cohérence dans l’interaction et dans le placement des commandes dans toutes les vues de votre application.
• Ergonomie Réfléchissez à la façon dont le placement de certaines commandes peut améliorer la rapidité ou la facilité avec laquelle elles sont utilisées.
• Esthétique Limitez le nombre de commandes pour éviter de surcharger la présentation de la barre de l’application. Choisissez des icônes explicites ou faciles à identifier. Choisissez des étiquettes de texte courtes.

Voici nos recommandations en matière d’emplacement des commandes :

Placez les commandes persistantes ou par défaut dans la partie droite de la barre de l’application. S’il n’y a qu’un petit nombre de commandes, celles-ci pourront être concentrées dans la partie droite de la barre de commandes. Dans cet exemple relatif aux commandes de navigation, les jeux de commandes d’affichage et de filtre/tri sont persistants.

 

Utilisez les bords. Si les commandes sont nombreuses, répartissez les différents jeux de commandes à gauche et à droite pour équilibrer la barre des commandes et ainsi améliorer l’accessibilité et l’ergonomie des commandes. Dans cet exemple, nous avons décidé de déplacer le jeu de commandes d’affichage à gauche et de laisser le jeu de commandes de filtre/tri à droite. Quand la vue carte est active, les commandes de la vue carte apparaissent à droite du jeu de commandes d’affichage.

 

Affichez/masquez les commandes désactivées. Certaines commandes ne sont pas nécessaires dans certains cas. Lorsqu’elles sont affichées, elles ne doivent pas bouleverser l’agencement des commandes persistantes. Dans cet exemple, la vue carte est active et les commandes de la vue carte apparaissent à droite du jeu de commandes d’affichage.

 

Insérez des commandes de sélection. Les commandes qui apparaissent après que l’utilisateur a effectué une sélection s’affichent à l’extrême gauche, déplaçant ainsi les éventuelles commandes qui se trouvaient à cet endroit. Les commandes de sélection sont mises en évidence et gagnent en accessibilité. Dans cet exemple, le jeu de commandes d’affichage glisse vers la droite pour laisser la place au jeu de commandes de sélection.

 

Emplacement des commandes communes

Certaines commandes sont communes et figurent dans de nombreuses applications. Pour assurer une certaine cohérence et inspirer confiance, vous avez tout intérêt à suivre ces recommandations au moment de décider de l’emplacement des commandes communes dans la barre de l’application.

Placez les commandes de sélection à l’extrême gauche, qu’il s’agisse de commandes contextuelles qui apparaissent suite à une sélection, ou de commandes qui agissent sur votre sélection. Dans cet exemple, une commande « Sélectionner tout » figure à gauche, avant même que l’utilisateur n’effectue une sélection. Les autres commandes de sélection s’affichent à gauche une fois que l’utilisateur effectue une sélection.

 

Placez les commandes de nouvel élément le long du bord droit de la barre. Les commandes de nouvel élément peuvent être Ajouter, Créer, Composer ou toute commande qui permet la création d’une nouvelle entité. Les commandes de nouvel élément doivent être accessibles avec les pouces. Dans cet exemple, la commande « Nouvel avis » permet aux utilisateurs de créer un avis sur un restaurant. D’autres commandes, liées à la commande « Nouvel avis », sont placées à gauche de celle-ci. Le glyphe + ne doit être utilisé que pour représenter la commande « Nouveau » et ne doit figurer nulle part ailleurs dans une barre de l’application.

 

Placez les commandes Supprimer à gauche des commandes Nouveau. Utilisez des commandes Supprimer/Nouveau si votre application permet la gestion d’entités individuelles susceptibles de persister en dehors de votre application, comme dans une application de messagerie ou d’appareil photo. Les commandes Supprimer/Nouveau doivent toujours apparaître dans cet ordre.

 

Placez les commandes Supprimer à gauche des commandes Ajouter. Utilisez des commandes Supprimer/Ajouter si votre application permet la gestion d’une liste, telle qu’une liste de tâches, une liste de villes dans une application météorologique ou une liste de restaurants recommandés. Les commandes Supprimer/Ajouter doivent toujours apparaître dans cet ordre.

 

Placez les commandes Effacer à gauche des commandes Nouveau. Utilisez une commande Effacer si vous voulez permettre une action de suppression de tous les éléments possibles. Utilisez l’étiquette de la commande pour expliciter l’action effectuée par la commande (par exemple, « Effacer la sélection »).

 

Pour obtenir des exemples de placement des commandes dans la barre d’application inférieure, voir la Galerie d’applications du Windows Store.

Regroupement de commandes dans des menus

Parfois, il est plus efficace de regrouper plusieurs commandes dans un menu de commandes. Les menus permettent de proposer davantage d’options dans moins d’espace. Les menus peuvent comprendre des contrôles interactifs.

Dans cet exemple, la commande de tri affiche un menu simple qui permet aux utilisateurs de choisir l’option de tri souhaitée. La commande de filtre affiche un ensemble de contrôles dans un menu qui permet aux utilisateurs de filtrer les éléments selon des critères plus complexes.

 

Menus contextuels

Les menus contextuels peuvent contenir les actions du Presse-papiers, telles que Copier, Couper et Coller. Les menus contextuels peuvent également contenir des commandes qui s’appliquent à du contenu qui ne peut pas être sélectionné, par exemple une image dans une page Web. Le système fournit des applications avec des menus contextuels par défaut pour le texte et les liens hypertexte. Dans le cas du texte, le menu contextuel par défaut affiche les commandes du Presse-papiers. Pour les liens hypertexte, le menu par défaut contient des commandes permettant de copier et ouvrir les liens.

Les utilisateurs appellent les menus contextuels en appuyant longuement sur le contenu (sur des appareils tactiles) ou en cliquant avec le bouton droit sur le contenu avec une souris.

 

 

Remarque  

Utiliser les icônes

Quand vous concevez une application du Windows Store, vous disposez de quatre commandes très utiles dans les icônes : rechercher, partager, périphériques et paramètres. Les utilisateurs appellent les icônes en effectuant un balayage à partir du bord droit de l’écran ou en pointant avec la souris en haut ou en bas à droite de l’écran.

 

 

Rechercher : permet aux utilisateurs d’effectuer rapidement des recherches dans le contenu de votre application, à partir de n’importe quel point du système mais aussi à partir d’autres applications.
Partager : permet aux utilisateurs de partager le contenu de votre application avec d’autres contacts ou applications, et de recevoir du contenu partagé.
Accueil : l’icône Accueil permet d’accéder à l’écran d’accueil. Les applications n’interagissent pas avec cette icône. Le comportement est automatique et toujours identique.
Périphériques : permet aux utilisateurs de lire du contenu audio et vidéo ou des images, diffusés en continu depuis votre application sur d’autres appareils de leur réseau domestique.
Paramètres : regroupe tous les paramètres et permet aux utilisateurs de configurer votre application en suivant des procédures qu’ils maîtrisent déjà.

 

Évitez de répéter les fonctionnalités de contrat d’application sur le Canvas de votre application ou dans la barre de l’application.

Rubriques associées

Recommandations en matière de barres d’application

Recommandations en matière de menus contextuels

Recommandations en matière de commandes du Presse-papiers

Icônes et contrats