Windows Dev Center

Recommandations en matière de barres de commandes

Les barres de commandes permettent aux utilisateurs d’accéder facilement aux actions. Elles peuvent également servir à afficher les commandes ou 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 les pages ou les sections de l’application. Les barres de commandes peuvent être utilisées avec n’importe quel modèle de navigation.

Exemple d’une barre de commandes contenant des icônes

Les barres de commandes sont constituées de deux composants : l’espace de l'action pour placer des commandes ou des éléments de navigation que vous voulez laisser visibles et la zone Plus , qui est représentée dans la barre de commandes par des points de suspension [•••]. La zone Plus ouvre un menu d’affichage de liste déroulante correspondant aux commandes et aux éléments de navigation qui sont accessibles moins fréquemment. Sélectionnez le bouton [•••] pour ouvrir le menu et afficher les étiquettes de texte correspondant à chaque élément de l’espace d’action. Si aucun élément n’existe dans la zone Plus, la liste déroulante ne s’ouvre pas, mais les étiquettes de texte des éléments restent affichées dans l’espace d’action.

Exemple de barre de commandes avec deux zones principales avec légendes

Emplacement de la barre de commandes

Les barres de commandes peuvent être incorporées ou placées en haut et/ou au bas de l’écran.

Exemples de positionnement de la barre d’application sur le haut et/ou le bas de l’écran

  • Pour les appareils mobiles : si vous placez seulement une barre de commandes dans votre application, placez-la au bas de l’écran afin de faciliter son accès. Si votre application comporte des onglets en bas de l’écran, pensez à placer la barre de commandes en haut pour que l’interface utilisateur ne compte pas trop d’éléments en bas.
  • Pour les écrans plus grands : si vous positionnez uniquement une barre de commandes, nous vous recommandons de la placer en haut de l’écran.
  • Vous pouvez également placer des barres de commande incorporées, afin que les utilisateurs puissent s’en servir pour des actions contextuelles.

Les barres de commandes peuvent être placées dans les zones d’écran suivantes sur les écrans à vue unique (exemple à gauche) et sur les écrans à vues multiples (exemple à droite). Les barres de commandes incorporées peuvent être placées n’importe où dans la zone d’action.

Exemples de zones de l’écran dans lesquelles la barre d’application peut être placée

Positionnement des actions

Classez les actions qui figurent dans la barre de commandes en fonction de leur visibilité.

  • Placez dans les tout premiers emplacements de l’espace d’action les commandes les plus importantes et celles que vous souhaitez laisser affichées dans la barre. Sur les écrans plus petits (largeur de 320 epx), l’espace d’action de la barre de commandes peut contenir 2 à 4 éléments en fonction des autres éléments de l’interface utilisateur à l’écran.
  • Placez ultérieurement les commandes moins importantes dans l’espace d’action de la barre ou dans les tout premiers emplacements de la zone Plus. Ces commandes sont visibles si la barre a suffisamment d’espace écran, mais s’inscrivent dans le menu déroulant de la zone Plus si l’espace est insuffisant.
  • Placez les commandes les moins importantes dans la zone Plus. Ces commandes apparaissent toujours dans le menu déroulant.

Les éléments de l’espace d’action peuvent être visualisés à l’aide d’icônes ou de boutons. Si vous utilisez des icônes uniquement, insérez une étiquette de texte. Cette dernière s’affiche sous l’icône lorsque la zone [•••] est sélectionnée.

S’il existe une commande qui s’affiche de façon cohérente sur plusieurs pages, il est préférable de la laisser à un emplacement cohérent. Nous recommandons de placer les commandes Accepter, Oui et OK à gauche des commandes Rejeter, Non et Annuler. 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.

Même si vous pouvez placer toutes les actions dans le menu déroulant « Plus », afin que seuls les [•••] soient visibles dans la barre de commandes, n’oubliez pas que le masquage de toutes les actions peut prêter à confusion.

Info-bulles et menus volants de la barre de commandes

Envisagez le regroupement logique des commandes ; placez par exemple les commandes Répondre, Répondre à tous et Transférer dans un menu Répondre.

Image d’un menu volant et d’un menu

Dans la mesure où les étiquettes sont masquées pour les actions de la barre de commande, à moins que [•••] ne soit sélectionné, envisagez d’utiliser des info-bulles pour les icônes d’action.

Zone Plus

Exemple d’anatomie de barre d’application, avec des légendes

  • L’affordance « Plus » [•••] est le point d’entrée visible du menu et se trouve à l’extrême droite de la barre d’outils adjacente aux actions principales.
  • Chaque action dans l’espace de l’action principale est représentée par une icône. La sélection du menu de dépassement affiche les étiquettes de texte pour chacune des actions contenues dans l’espace de l’action principale.
  • L’espace du menu de dépassement est alloué aux actions qui sont moins fréquemment utilisées.
  • Les actions peuvent aller et venir entre l’espace de l’action principale et le menu de dépassement aux points d’arrêt. Vous pouvez également indiquer des actions devant rester constamment dans l’espace de l’action principal, quelle que soit la taille de l’écran ou de la fenêtre de l’application.
  • Les actions rarement utilisées peuvent rester dans le menu de dépassement même si la barre d’application est développée sur les écrans plus grands.

Conseils réactifs

  • Le nombre d’actions visibles dans la barre d’application doit être le même en orientation portrait et paysage, ce qui réduit la charge cognitive de l’utilisateur. Cependant, le nombre d’actions disponibles doit être déterminé par la largeur de l’appareil en orientation portrait.
  • En ciblant des points d’arrêt, vous pouvez déplacer des actions dans le menu et hors de celui-ci en cas de modification de la taille de l’écran ou de la taille de la fenêtre de l’application.

Rubriques associées

Informations de base sur la conception des commandes

 

 

Afficher:
© 2015 Microsoft