Barres d’outils Windows 7

Notes

Ce guide de conception a été créé pour Windows 7 et n’a pas été mis à jour pour les versions plus récentes de Windows. La plupart des conseils s’appliquent toujours en principe, mais la présentation et les exemples ne reflètent pas nos recommandations actuelles en matière de conception.

Les barres d’outils sont un moyen de regrouper des commandes pour un accès efficace.

Certaines barres d’outils classiques.

Utilisez des barres d’outils en plus ou à la place des barres de menus. Les barres d’outils peuvent être plus efficaces que les barres de menus, car elles sont directes (toujours affichées au lieu d’être affichées lors d’un clic de souris), immédiates (au lieu d’exiger une entrée supplémentaire) et contiennent les commandes les plus fréquemment utilisées (au lieu d’une liste complète). Contrairement aux barres de menus, les barres d’outils n’ont pas besoin d’être complètes ou explicites, mais simplement rapides, pratiques et efficaces.

Certaines barres d’outils sont personnalisables, ce qui permet aux utilisateurs d’ajouter ou de supprimer des barres d’outils, de modifier leur taille et leur emplacement, et même de modifier leur contenu. Certains types de barres d’outils peuvent être dédockés, ce qui entraîne une fenêtre de palette. Pour plus d’informations sur les variétés de barres d’outils, consultez Modèles d’utilisation dans cet article.

Notes

Les instructions relatives aux menus, aux boutons de commande et aux icônes sont présentées dans des articles distincts.

S’agit-il de l’interface utilisateur appropriée ?

Pour vous décider, posez-vous les questions suivantes :

• La fenêtre est-elle une fenêtre principale ? Les barres d’outils fonctionnent bien pour les fenêtres principales, mais sont généralement écrasantes pour les fenêtres secondaires. Pour les fenêtres secondaires, utilisez plutôt les boutons de commande, les boutons de menu et les liens .
• Existe-t-il un petit nombre de commandes fréquemment utilisées ? Les barres d’outils ne peuvent pas gérer autant de commandes que de barres de menus. Elles fonctionnent donc mieux comme moyen d’accéder efficacement à un petit nombre de commandes fréquemment utilisées.
• La plupart des commandes sont-elles immédiates ? Autrement dit, s’agit-il principalement de commandes qui ne nécessitent pas d’entrée supplémentaire ? Pour être efficaces, les barres d’outils doivent avoir une sensation directe et immédiate. Si ce n’est pas le cas, les barres de menus sont mieux adaptées aux commandes qui nécessitent une entrée supplémentaire.
• La plupart des commandes peuvent-elles être présentées directement ? Autrement dit, les utilisateurs interagissent avec eux en un seul clic ? Bien que certaines commandes puissent être présentées à l’aide de boutons de menu, la présentation de la plupart des commandes de cette façon sape l’efficacité de la barre d’outils, ce qui fait d’une barre de menus un meilleur choix.
• Les commandes sont-elles bien représentées par des icônes ? Les boutons de barre d’outils sont généralement représentés par des icônes au lieu d’étiquettes de texte (bien que certains boutons de barre d’outils utilisent les deux), tandis que les commandes de menu sont représentées par leur texte. Si les icônes de commande ne sont pas de haute qualité et ne sont pas explicites, une barre de menus peut être un meilleur choix.

Si votre programme a une barre d’outils sans barre de menus et que la plupart des commandes sont accessibles indirectement via des boutons de menu et des boutons fractionnés, cette barre d’outils est essentiellement une barre de menus. Appliquez plutôt le modèle de menus de la barre d’outils dans les instructions de menus.

Principes de conception

Une bonne barre de menus est un catalogue complet de toutes les commandes de niveau supérieur disponibles, tandis qu’une bonne barre d’outils offre un accès rapide et pratique aux commandes fréquemment utilisées. Une barre d’outils ne tente pas d’entraîner les utilisateurs, mais simplement de les rendre productifs. Une fois que les utilisateurs ont appris à accéder à une commande dans une barre d’outils, ils continuent rarement à y accéder à partir de la barre de menus. Pour ces raisons, la barre de menus d’un programme et sa barre d’outils n’ont pas besoin de correspondre directement.

Barres d’outils et barres de menus

Traditionnellement, les barres d’outils sont différentes des barres de menus des manières suivantes :

• Fréquence. Les barres d’outils présentent uniquement les commandes les plus fréquemment utilisées, tandis que les barres de menus cataloguent toutes les commandes de niveau supérieur disponibles au sein d’un programme.

• Immédiateté. Le fait de cliquer sur une commande de barre d’outils prend effet immédiatement, alors qu’une commande de menu peut nécessiter une entrée supplémentaire. Par exemple, une commande Imprimer dans une barre de menus affiche d’abord la boîte de dialogue Imprimer, tandis qu’un bouton de barre d’outils Imprimer imprime immédiatement une seule copie d’un document sur l’imprimante par défaut.

  

  Dans cet exemple, le fait de cliquer sur le bouton de la barre d’outils Imprimer imprime immédiatement une seule copie d’un document sur l’imprimante par défaut.

• Franchise. Les commandes de barre d’outils sont appelées d’un simple clic, tandis que les commandes de barre de menus nécessitent une navigation dans le menu.

• Nombre et densité. L’espace d’écran requis par une barre d’outils est proportionnel au nombre de ses commandes et cet espace est toujours utilisé, même si les commandes ne le sont pas. Par conséquent, les barres d’outils doivent utiliser leur espace efficacement. En revanche, les commandes de la barre de menus sont normalement masquées et leur structure hiérarchique autorise n’importe quel nombre de commandes.

• Taille et présentation. Pour empaquetage de nombreuses commandes dans un petit espace, les barres d’outils utilisent généralement des commandes basées sur des icônes (avec des étiquettes basées sur des info-bulles), tandis que les barres de menus utilisent des commandes textuelles (avec des icônes facultatives). Bien que les boutons de barre d’outils puissent avoir des étiquettes de texte standard, ils utilisent beaucoup plus d’espace.

  

  Les boutons de barre d’outils étiquetés prennent au moins trois fois plus d’espace que les boutons sans étiquette.

• Explicite. Les barres d’outils bien conçues ont besoin d’icônes qui sont principalement explicites, car les utilisateurs ne peuvent pas trouver efficacement les commandes simplement à l’aide d’info-bulles. Toutefois, les barres d’outils fonctionnent toujours bien si quelques commandes moins fréquemment utilisées ne sont pas explicites.

  

  Dans cet exemple, les icônes les plus fréquemment utilisées sont explicites.

• Reconnaissable et reconnaissable. Pour les commandes fréquemment utilisées, les utilisateurs mémorisent les attributs de bouton de barre d’outils tels que l’emplacement, la forme et la couleur. Grâce aux barres d’outils bien conçues, les utilisateurs peuvent trouver rapidement les commandes même s’ils ne se souviennent pas du symbole d’icône exact. En revanche, les utilisateurs se souviennent des emplacements de commandes de barre de menus fréquemment utilisés, mais s’appuient sur les étiquettes de commande pour effectuer des sélections.

  

  Pour les commandes de barre d’outils, l’emplacement, la forme et la couleur distincts permettent de rendre les icônes reconnaissables et distinctes.

  

  Pour les commandes de barre de menus, les utilisateurs dépendent en fin de compte de leurs étiquettes.

Efficacité

Compte tenu de leurs caractéristiques, les barres d’outils doivent être conçues principalement pour l’efficacité. Une barre d’outils inefficace n’a tout simplement aucun sens.

Si vous ne faites qu’une seule chose...

Assurez-vous que vos barres d’outils sont principalement conçues pour l’efficacité. Concentrez-vous sur les barres d’outils sur les commandes fréquemment utilisées, immédiates, directes et rapidement reconnaissables.

Masquage des barres de menus

En règle générale, les barres d’outils fonctionnent très bien avec les barres de menus : de bonnes barres d’outils offrent de l’efficacité et de bonnes barres de menus fournissent une exhaustivité. Avoir à la fois des barres de menus et des barres d’outils permet à chacun de se concentrer sur ses points forts sans compromis.

Étonnamment, ce modèle se décompose en programmes simples. Pour les programmes avec seulement quelques commandes, avoir à la fois une barre de menus et une barre d’outils n’a pas de sens, car la barre de menus finit par être une version redondante et inefficace de la barre d’outils.

Pour éliminer cette redondance, de nombreux programmes simples dans Windows Vista se concentrent sur la fourniture de commandes uniquement par le biais de la barre d’outils et sur le masquage de la barre de menus par défaut. Ces programmes incluent Windows Explorer, Windows Internet Explorer, Lecteur multimédia Windows et Galerie de photos Windows.

Ce n’est pas un petit changement. La suppression de la barre de menus modifie fondamentalement la nature des barres d’outils, car ces barres d’outils doivent être complètes et changent des manières suivantes :

• Fréquence. La suppression de la barre de menus signifie que toutes les commandes qui ne sont pas disponibles directement à partir d’une fenêtre ou de ses menus contextuels doivent être accessibles à partir de la barre d’outils, quelle que soit leur fréquence d’utilisation.

• Immédiateté. La suppression de la barre de menus fait de la barre d’outils le seul point d’accès visible pour les commandes, ce qui nécessite que la barre d’outils dispose des versions entièrement fonctionnelles. Par exemple, s’il n’y a pas de barre de menus, une commande Imprimer dans une barre d’outils doit afficher la boîte de dialogue Imprimer au lieu d’imprimer immédiatement. (Bien que l’utilisation d’un bouton partagé soit un excellent compromis dans ce cas. Consultez Menu standard et boutons fractionnés pour le bouton fractionné d’impression standard.)

  

  Dans cet exemple, le bouton de la barre d’outils Imprimer de la Galerie de photos Windows comporte une commande Imprimer qui affiche la boîte de dialogue Imprimer.

• Franchise. Pour économiser de l’espace et éviter tout encombrement, les commandes moins fréquemment utilisées peuvent être déplacées vers les boutons de menu, ce qui les rend moins directes.

Les barres d’outils utilisées pour compléter une barre de menus sont conçues différemment des barres d’outils conçues pour une utilisation avec une barre de menus supprimée ou masquée. Et comme vous ne pouvez pas supposer que les utilisateurs affichent une barre de menus masquée pour exécuter une seule commande, masquer une barre de menus doit être traité de la même façon que de la supprimer complètement lors de la prise de décisions de conception. (Si vous masquez la barre de menus par défaut, ne supposez pas que les utilisateurs penseront à afficher la barre de menus pour rechercher une commande ou même déterminer comment l’afficher.)

La conception d’une barre d’outils pour fonctionner sans barre de menus implique souvent des compromis. Mais pour l’efficacité, ne faites pas trop de compromis. Si le masquage de la barre de menus entraîne une barre d’outils inefficace, ne masquez pas la barre de menus !

Accessibilité du clavier

À partir du clavier, l’accès aux barres d’outils est très différent de l’accès aux barres de menus. Les barres de menus reçoivent le focus d’entrée lorsque les utilisateurs appuient sur la touche Alt et qu’ils perdent le focus d’entrée avec la touche Échap. Une fois qu’une barre de menus a le focus d’entrée, elle est parcourue indépendamment du reste de la fenêtre, en gérant toutes les touches de direction, Accueil, Fin et Tab. En revanche, les barres d’outils reçoivent le focus d’entrée lorsque les utilisateurs appuient sur la touche Tab dans tout le contenu de la fenêtre. Étant donné que les barres d’outils sont les dernières dans l’ordre de tabulation, elles peuvent prendre un certain effort pour s’activer sur une page occupée (sauf si les utilisateurs savent utiliser Maj+Tab pour reculer).

L’accessibilité présente ici un dilemme : si les barres d’outils sont plus faciles pour les utilisateurs de souris, elles sont moins accessibles pour les utilisateurs de clavier. Ce n’est pas un problème s’il existe à la fois une barre de menus et une barre d’outils, mais c’est si la barre de menus est supprimée ou masquée.

Pour des raisons d’accessibilité, préférez conserver la barre de menus plutôt que de la supprimer complètement au profit d’une barre d’outils. Si vous devez choisir entre supprimer la barre de menus et simplement la masquer, préférez la masquer.

Modèles d’usage

Les barres d’outils ont plusieurs modèles d’utilisation :

Usage	Exemple
Barres d’outils principales barre d’outils conçue pour fonctionner sans barre de menus, masquée ou supprimée.	les barres d’outils principales doivent trouver un équilibre entre le besoin d’efficacité et l’exhaustivité, afin qu’elles fonctionnent mieux pour les programmes simples. Barre d’outils principale de Windows Explorer.
Barres d’outils supplémentaires barre d’outils conçue pour fonctionner avec une barre de menus.	les barres d’outils supplémentaires peuvent se concentrer sur l’efficacité sans compromis. Barre d’outils supplémentaire de Windows Movie Maker.
Menus de la barre d’outils barre de menus implémentée en tant que barre d’outils.	Les menus de barre d’outils sont des barres d’outils composées principalement de commandes dans les boutons de menu et de boutons fractionnés, avec seulement quelques commandes directes, le cas échéant. Menu de barre d’outils dans la Galerie de photos Windows.
Barres d’outils personnalisables barre d’outils qui peut être personnalisée par les utilisateurs.	Les barres d’outils personnalisables permettent aux utilisateurs d’ajouter ou de supprimer des barres d’outils, de modifier leur taille et leur emplacement, et même de modifier leur contenu. Barre d’outils personnalisable à partir de Microsoft Visual Studio.
Fenêtres de palette boîte de dialogue sans mode qui présente un tableau de commandes.	les fenêtres de palette sont des barres d’outils non chaussées. Fenêtres de palette à partir de Windows Paint.

Les barres d’outils ont les styles suivants :

Style	Exemple
Icônes non étiquetées une ou plusieurs lignes de petits boutons d’icône non étiquetés.	utilisez ce style s’il y a trop de boutons à étiqueter ou si le programme est fréquemment utilisé. avec ce style, les programmes avec des fonctionnalités complexes peuvent avoir plusieurs lignes, et par conséquent, il s’agit du seul style qui doit être personnalisable. avec ce style, certains boutons de commande peuvent être étiquetés s’ils sont fréquemment utilisés. Barre d’outils d’icônes sans étiquette à partir de WordPad.
Grandes icônes non étiquetées une seule ligne de grands boutons d’icône non étiquetés.	utilisez ce style pour les utilitaires simples qui ont des icônes facilement reconnaissables et qui sont généralement exécutés dans de petites fenêtres. Grandes barres d’outils d’icônes non étiquetées de Windows Live Messenger et de l’outil Windows Snipping Tool.
Icônes étiquetées une seule ligne de petites icônes étiquetées.	utilisez ce style s’il existe peu de commandes ou si le programme n’est pas fréquemment utilisé. ce style a toujours une seule ligne. Barre d’outils d’icônes étiquetées de Windows Explorer.
Barres d’outils partielles une ligne partielle de petites icônes utilisées pour économiser de l’espace lorsqu’une barre d’outils complète n’est pas nécessaire.	utilisez ce style pour les fenêtres avec des boutons de navigation, une zone de recherche ou des onglets pour éliminer le poids inutile en haut de la fenêtre. Les barres d’outils partielles peuvent être combinées avec des boutons de navigation, une zone de recherche ou des onglets.
Barres d’outils partielles volumineuses une ligne partielle de grandes icônes utilisées pour économiser de l’espace lorsqu’une barre d’outils complète n’est pas nécessaire.	utilisez ce style pour les utilitaires simples qui ont des boutons de navigation ou une zone de recherche pour éliminer le poids inutile en haut de la fenêtre. Grande barre d’outils partielle de Windows Defender.

Enfin, les contrôles de barre d’outils ont plusieurs modèles d’utilisation :

Usage	Exemple
Boutons d’icône de commande Cliquer sur un bouton de commande lance une action immédiate.	Exemples de boutons de commande d’icône à partir de La télécopie et de l’analyse Windows.
Boutons d’icône mode Le fait de cliquer sur un bouton de mode entre dans le mode sélectionné.	Exemples de boutons de mode de Windows Paint.
Boutons d’icône de propriété l’état d’un bouton de propriété reflète l’état des objets actuellement sélectionnés, le cas échéant. Cliquez sur le bouton pour appliquer la modification aux objets sélectionnés.	Exemples de boutons de propriété de Microsoft Word.
Boutons d’icônes étiquetés un bouton de commande ou un bouton de propriété étiqueté avec une icône et une étiquette de texte.	ces boutons sont utilisés pour les boutons de barre d’outils fréquemment utilisés dont l’icône n’est pas suffisamment explicite. ils sont également utilisés dans les barres d’outils qui ont si peu de boutons que chaque bouton peut avoir une étiquette de texte. Barre d’outils avec ses boutons les plus fréquemment utilisés étiquetés.
Boutons de menu bouton de commande utilisé pour présenter un petit ensemble de commandes associées.	un seul triangle pointant vers le bas indique que le fait de cliquer sur le bouton affiche un menu. Bouton de menu avec un petit ensemble de commandes associées.
Fractionner les boutons un bouton de commande utilisé pour consolider les variantes d’une commande, en particulier quand l’une des commandes est utilisée la plupart du temps.	un bouton fractionné dans son état normal. comme un bouton de menu, un seul triangle pointant vers le bas indique que le fait de cliquer sur la partie la plus à droite du bouton affiche un menu. un bouton de fractionnement déposé. dans cet exemple, un bouton fractionné est utilisé pour consolider toutes les commandes liées à l’impression. la commande d’impression immédiate étant utilisée la plupart du temps, les utilisateurs n’ont normalement pas besoin de voir les autres commandes. contrairement à un bouton de menu, cliquer sur la partie gauche du bouton effectue directement l’action sur l’étiquette. Les boutons de fractionnement sont efficaces dans les situations où la commande suivante est susceptible d’être identique à la dernière commande. dans ce cas, l’étiquette est remplacée par la dernière commande, comme avec un sélecteur de couleurs : Dans cet exemple, l’étiquette est remplacée par la dernière commande.
Listes déroulantes liste déroulante (modifiable ou en lecture seule) utilisée pour afficher ou modifier une propriété.	Dans cet exemple, les listes déroulantes sont utilisées pour afficher et définir des attributs de police. Une liste déroulante dans une barre d’outils reflète l’état de l’objet actuellement sélectionné, le cas échéant. La modification de la liste modifie l’état de l’objet sélectionné.

Consignes

Présentation

• Choisissez un style de barre d’outils approprié en fonction du nombre de commandes et de leur utilisation. Consultez le tableau de style de barre d’outils précédent pour obtenir des conseils sur la façon de choisir. Évitez d’utiliser une configuration de barre d’outils qui prend trop d’espace dans la zone de travail du programme.

• Placez les barres d’outils juste au-dessus de la zone de contenu, sous la barre de menus et la barre d’adresse, le cas échéant.

• Si l’espace est premium, économisez de l’espace en :

  • Omettre les étiquettes des icônes connues et des commandes moins fréquemment utilisées.
  • Utilisation uniquement d’une barre d’outils partielle au lieu de toute la largeur de la fenêtre.
  • Consolidation des commandes associées à l’aide d’un bouton de menu ou d’un bouton fractionné.
  • Utilisation d’un chevron de dépassement de capacité pour révéler les commandes moins fréquemment utilisées.
  • Affichage des commandes uniquement lorsqu’elles s’appliquent au contexte actuel.

  

  La barre d’outils Windows Internet Explorer économise de l’espace en omettant les étiquettes d’icônes connues, en utilisant une barre d’outils partielle et en utilisant un chevron de dépassement de capacité pour les commandes moins fréquemment utilisées.

• Pour le modèle de barre d’outils icônes sans étiquette, utilisez une configuration par défaut avec au maximum deux lignes de barres d’outils. Si plus de deux lignes peuvent être utiles, rendez les barres d’outils personnalisables. Le fait de commencer par plus de deux lignes peut surcharger les utilisateurs et prendre trop d’espace dans la zone de travail du programme.

  Incorrect :

  

  Une configuration par défaut avec plus de deux lignes de barres d’outils entraîne un encombrement visuel trop important.

• Désactivez les boutons de barre d’outils individuels qui ne s’appliquent pas au contexte actuel, au lieu de les supprimer. Cela rend le contenu de la barre d’outils stable et plus facile à trouver.

• Désactivez les boutons de barre d’outils individuels si le fait de cliquer dessus entraîne directement une erreur. Cela est nécessaire pour conserver une sensation directe.

• Pour le modèle de barre d’outils icônes sans étiquette, supprimez les barres d’outils entières si elles ne s’appliquent pas au contexte actuel. Affichez-les uniquement dans les modes applicables.

  

  Dans cet exemple, la barre d’outils Débogage s’affiche uniquement lorsque le programme est en cours d’exécution.

• Afficher les boutons de barre d’outils à gauche alignés. L’icône Aide, si elle est présente, est alignée à droite.

  

  Tous les boutons de barre d’outils sont alignés à gauche, à l’exception de l’aide.

  Exception: Les barres d’outils de style Windows 7 alignent à gauche les commandes spécifiques du programme, mais alignent à droite les commandes standard et connues telles que Options, Afficher et Aide.

• Ne modifiez pas dynamiquement les étiquettes des boutons de la barre d’outils. Cela est déroutant et inattendu. Toutefois, vous pouvez modifier l’icône pour refléter l’état actuel.

  

  Dans cet exemple, l’icône est modifiée pour indiquer la commande par défaut.

Contrôles et commandes

• Préférez les commandes les plus fréquemment utilisées.

  • Pour les barres d’outils principales, fournissez des commandes complètes. Les barres d’outils principales n’ont pas besoin d’être aussi complètes que les barres de menus, mais elles doivent fournir toutes les commandes qui ne sont pas facilement détectables ailleurs. Les barres d’outils principales n’ont pas besoin d’avoir des commandes pour :
    • Commandes qui se trouvent directement sur l’interface utilisateur elle-même.
    • Commandes généralement accessibles via des menus contextuels.
    • Commandes standard connues comme Couper, Copier et Coller.
  • Pour les barres d’outils supplémentaires, fournissez les commandes les plus fréquemment utilisées. Les commandes de barre de menus sont un sur-ensemble des commandes de la barre d’outils. Vous n’avez donc pas besoin de tout fournir. Concentrez-vous sur un accès aux commandes rapide et pratique et ignorez le reste.

• Préférez les contrôles directs. Utilisez les boutons de la barre d’outils dans l’ordre de préférence suivant :

  • Bouton Icône. Diriger et prendre un espace minimal.
  • Bouton d’icône étiquetée. Direct, mais prend plus d’espace.
  • Bouton Fractionner. Direct pour la commande la plus courante, mais gère les variations de commande.
  • Bouton Menu. Indirect, mais présente de nombreuses commandes.

• Préférez les commandes immédiates. Pour les commandes qui peuvent être immédiates ou avoir une entrée supplémentaire pour la flexibilité :

  • Pour les barres d’outils principales, utilisez les versions flexibles des commandes (telles que Imprimer...).
  • Pour les barres d’outils supplémentaires, utilisez les versions immédiates dans la barre d’outils (par exemple, Imprimer) et utilisez des versions flexibles dans la barre de menus (par exemple, Imprimer...).

• Fournissez des étiquettes pour les commandes fréquemment utilisées, en particulier si leurs icônes ne sont pas connues.

  Acceptable:

  

  Mieux :

  

  La barre d’outils Télécopie et analyse Windows a peu de commandes, de sorte que la meilleure version étiquette les plus importantes.

• Ne placez pas de commandes dans les menus de barre d’outils qui se trouvent également directement dans la barre d’outils.

  Incorrect :

  

  Dans cet exemple, l’option Imprimer se trouve directement dans la barre d’outils. Elle n’a donc pas besoin d’être dans le menu.

Organisation et ordre

• Organisez les commandes dans une barre d’outils en groupes associés.

• Placez en premier les groupes les plus fréquemment utilisés. Dans un groupe, placez les commandes dans leur ordre logique. Dans l’ensemble, les commandes doivent avoir un flux logique pour faciliter leur recherche, tout en ayant les commandes les plus fréquemment utilisées en premier. Cela est plus efficace, surtout en cas de dépassement de capacité.

• Utilisez des séparateurs de groupes uniquement si les commandes entre les groupes sont faiblement couplées. Cela rend les regroupements évidents et les commandes plus faciles à trouver.

  

  

  Exemples de barres d’outils groupées à partir de Windows Mail.

• Évitez de placer des commandes destructrices à côté des commandes fréquemment utilisées. Utilisez l’ordre ou le regroupement pour obtenir la séparation. Envisagez également de ne pas placer de commandes destructrices dans la barre d’outils, mais uniquement dans la barre de menus ou les menus contextuels à la place.

  Acceptable:

  

  Mieux :

  

  Dans le meilleur exemple, la commande Delete est physiquement séparée de Print.

• Utilisez le chevron de dépassement pour indiquer que toutes les commandes ne peuvent pas être affichées. Mais utilisez le dépassement de capacité uniquement s’il n’y a pas suffisamment d’espace pour afficher toutes les commandes.

  Incorrect :

  

  Le chevron de dépassement indique que toutes les commandes ne sont pas affichées, mais qu’un plus grand nombre d’entre elles peuvent avoir une meilleure disposition.

• Assurez-vous que les commandes les plus fréquemment utilisées sont directement accessibles à partir de la barre d’outils (c’est-à-dire, pas de dépassement de capacité) dans de petites tailles de fenêtre. Si nécessaire, réorganisez les commandes, déplacez les commandes moins fréquemment utilisées vers les boutons de menu ou fractionnez les boutons, ou même supprimez-les complètement de la barre d’outils. Si cela reste un problème, reconsidérer votre choix de style de barre d’outils.

Masquage des barres de menus

En règle générale, les barres d’outils fonctionnent très bien avec les barres de menus, car avoir les deux permet à chacun de se concentrer sur ses points forts sans compromis.

• Masquez la barre de menus par défaut si la conception de votre barre d’outils rend redondante la présence d’une barre de menus.
• Masquez la barre de menus au lieu de la supprimer complètement, car les barres de menus sont plus accessibles aux utilisateurs du clavier.
• Pour restaurer la barre de menus, fournissez une option de coche de barre de menus dans la catégorie de menu Affichage (pour les barres d’outils principales) ou Outils (pour les barres d’outils secondaires). Pour plus d’informations, consultez Menu Standard et boutons fractionnés.
• Affichez la barre de menus lorsque les utilisateurs appuient sur la touche Alt et définissez le focus d’entrée sur la première catégorie de menu.

Interaction

• Lors du pointage, affichez l’affordance du bouton pour indiquer que l’icône est cliquable. Après le délai d’expiration de l’info-bulle, affichez l’info-bulle ou l’info-bulle.

  

  Cet exemple montre les différents états d’affichage.

• Sur un simple clic gauche :

  • Pour les boutons de commande, interagissez avec le contrôle comme d’habitude.

  • Pour les boutons de mode, affichez le contrôle pour refléter le mode actuellement sélectionné. Si le mode affecte le comportement de l’interaction de la souris, modifiez également le pointeur.

    

    Dans cet exemple, le pointeur est modifié pour afficher le mode d’interaction de la souris.

  • Pour les boutons de propriété et les listes déroulantes, affichez le contrôle pour refléter l’état des objets actuellement sélectionnés, le cas échéant. Lors de l’interaction, mettez à jour l’état du contrôle et appliquez la modification aux objets sélectionnés. Si rien n’est sélectionné, ne rien faire.

• Dans le double-clic gauche, effectuez la même action qu’un simple clic gauche.

  • Exception: En de rares occasions, une commande de barre d’outils peut être utilisée plus efficacement de manière modale. Dans ce cas, double-cliquez pour activer le mode.

    

    Dans cet exemple, le double-clic sur la commande Mettre en forme le peintre entre dans un mode où tous les clics suivants appliquent le format. Les utilisateurs peuvent quitter le mode en cliquant simplement à gauche.

• Cliquez avec le bouton droit sur :

  • Pour les barres d’outils personnalisables, affichez le menu contextuel pour personnaliser la barre d’outils. Affichez le menu en cliquant avec le bouton droit sur la souris vers le bas, et non sur la souris vers le haut.
  • Pour les autres barres d’outils, ne faites rien.

Icônes

• Fournissez des icônes pour tous les contrôles de barre d’outils, à l’exception des listes déroulantes.

  

  Les listes déroulantes n’ont pas besoin d’icônes, mais tous les autres contrôles de barre d’outils le font.

  Exception: Les barres d’outils de style Windows 7 utilisent des icônes uniquement pour les commandes dont les icônes sont bien connues ; sinon, ils utilisent des étiquettes de texte sans icônes. Cela améliore la clarté des étiquettes, mais nécessite plus d’espace.

• Assurez-vous que les icônes de barre d’outils sont clairement visibles par rapport à la couleur d’arrière-plan de la barre d’outils. Évaluez toujours les icônes de barre d’outils en contexte et en mode contraste élevé.

• Choisissez des conceptions d’icônes qui communiquent clairement leur objectif, en particulier pour les commandes les plus fréquemment utilisées. Les barres d’outils bien conçues ont besoin d’icônes explicites, car les utilisateurs ne peuvent pas trouver efficacement les commandes à l’aide de leurs info-bulles. Toutefois, les barres d’outils fonctionnent toujours bien si les icônes de quelques commandes moins fréquemment utilisées ne sont pas explicites.

• Choisissez des icônes reconnaissables et reconnaissables, en particulier pour les commandes les plus fréquemment utilisées. Assurez-vous que les icônes ont des formes et des couleurs distinctes. Cela permet aux utilisateurs de trouver rapidement les commandes même s’ils ne se souviennent pas du symbole d’icône.

• Assurez-vous que les icônes de barre d’outils sont conformes aux instructions relatives aux icônes de style Aero.

Pour plus d’informations et d’exemples, consultez Icônes.

Menu standard et boutons fractionnés

Si vous utilisez des boutons de menu et des boutons fractionnés dans une barre d’outils, essayez d’utiliser les structures de menu standard suivantes et leurs commandes pertinentes chaque fois que possible. Contrairement aux barres de menus, les commandes de barre d’outils ne prennent pas de touches d’accès.

Barres d’outils principales

Ces commandes miroir les commandes trouvées dans les barres de menus standard, de sorte qu’elles doivent être utilisées uniquement pour les barres d’outils principales. Cette liste affiche les étiquettes de bouton (et le type) avec leur ordre et leurs séparateurs, les touches de raccourci et les points de suspension. Notez que la commande permettant d’afficher et de masquer la barre de menus se trouve dans le menu Affichage.

Fichier NewCtrl+N
Ouvert... Ctrl+O
Fermer
<separator>
SaveCtrl+S
Enregistrer sous...
<separator>
Envoyer à
<separator>
Imprimer... Ctrl+P
Aperçu avant impression
Mise en page
<separator>
ExitAlt+F4 (raccourci généralement non donné)

Modifier(bouton de menu) UndoCtrl+Z
RedoCtrl+Y
<separator>
CutCtrl+X
CopyCtrl+C
PasteCtrl+V
<separator>
Sélectionner allCtrl+A
<separator>
DeleteDel(raccourci généralement non donné)
Renommer...
<separator>
Trouver... Ctrl+F
Rechercher nextF3(commande généralement non donnée)
Remplacer... Ctrl+H
Atteindre... Ctrl+G

Imprimer(bouton fractionné) Imprimer... Ctrl+P
Aperçu avant impression
Mise en page

Affichage(bouton de menu) Barre de menus(case activée si visible)
Volet Détails(case activée s’il est visible)
Volet Aperçu(case activée s’il est visible)
Barre d’état(case activée si visible)

Zoom
Zoom inCtrl++
Zoom arrièreCtrl+-

Taille du texte(le paramètre sélectionné a une puce)

Plus
Plus grand
Moyenne
Plus petite
Moindre

Plein écranF11
RefreshF5

Outils(bouton de menu) ...

Options Aide(bouton fractionner, utiliser l’icône Aide) <program name> helpF1

À propos de <program name>

Barres d’outils supplémentaires

Ces commandes complètent les barres de menus standard. Cette liste affiche les étiquettes de bouton (et le type) avec leur ordre et leurs séparateurs, touches de raccourci et ellipses. Notez que la commande permettant d’afficher et de masquer la barre de menus se trouve dans le menu Outils.

Les noms de catégorie de barre d’outils supplémentaires diffèrent des noms de catégorie de menu standard, car ils doivent être plus englobants. Par exemple, la catégorie Organiser est utilisée à la place de Modifier, car elle contient des commandes qui ne sont pas liées à la modification. Pour maintenir la cohérence entre les barres de menus et les barres d’outils, utilisez les noms de catégorie de menu standard si cela n’est pas trompeur.

Incorrect :

Dans cet exemple, la barre d’outils doit utiliser Modifier au lieu de Organiser pour la cohérence, car elle dispose des commandes de menu Modifier standard.

Fenêtres de palette

• Les fenêtres de palette utilisent des barres de titre plus courtes pour réduire leur espace d’écran. Placez un bouton Fermer dans la barre de titre.

• Définissez le texte de la barre de titre sur la commande qui affichait la fenêtre de palette.

• Utilisez la mise en majuscules de style phrase sans terminer la ponctuation.

• Fournissez un menu contextuel pour les commandes de gestion des fenêtres. Affichez ce menu contextuel lorsque les utilisateurs cliquent avec le bouton droit sur la barre de titre.

  

  Dans cet exemple, les utilisateurs peuvent cliquer avec le bouton droit sur la barre de titre pour afficher le menu contextuel.

• Lorsque cela est possible et utile, rendez les fenêtres de palette redimensionnables. Indiquez que la fenêtre est redimensionnable, à l’aide de pointeurs de redimensionnement au-dessus du cadre de la fenêtre.

• Lorsqu’une fenêtre de palette est réaffichée, affichez-la à l’aide du même état que le dernier accès. Lors de la fermeture, enregistrez la taille et l’emplacement de la fenêtre. Lors de la nouvelle lecture, restaurez la taille et l’emplacement de la fenêtre enregistrées. En outre, envisagez de rendre ces attributs persistants entre les instances de programme sur une base par utilisateur.

Personnalisation

• Fournissez la personnalisation des barres d’outils composées de deux lignes ou plus. Seul le style d’icônes sans étiquette nécessite une personnalisation. Les barres d’outils simples avec peu de commandes n’ont pas besoin de personnalisation.

• Fournissez une bonne configuration par défaut. Les utilisateurs ne doivent pas avoir à personnaliser leurs barres d’outils pour les scénarios courants. Ne dépendez pas de la personnalisation par les utilisateurs d’une mauvaise configuration initiale. Supposons que la plupart des utilisateurs ne personnalisent pas leurs barres d’outils.

• Fournissez un menu contextuel avec les commandes suivantes :

  • Liste de zone de case activée pour afficher les barres d’outils disponibles
  • Verrouiller/déverrouiller les barres d’outils
  • Personnaliser...

• Verrouillez les barres d’outils personnalisables par défaut pour éviter les modifications accidentelles.

• Pour la commande Personnaliser, affichez une boîte de dialogue d’options qui permet de choisir les barres d’outils affichées et les commandes de chaque barre d’outils.

  

  Dans cet exemple, Visual Studio fournit une boîte de dialogue d’options pour personnaliser ses barres d’outils.

• Fournissez une commande Réinitialiser pour revenir à la configuration de la barre d’outils d’origine dans la boîte de dialogue Personnaliser les options.

• Permet de personnaliser les barres d’outils à l’aide du glisser-déplacer des manières suivantes :

  • Définissez l’ordre et les positions de la barre d’outils.
  • Définissez des longueurs de barre d’outils, en affichant toutes les barres d’outils trop petites pour afficher leur contenu avec un chevron de dépassement de capacité.
  • Si elle est prise en charge, désactivez les barres d’outils pour qu’elles deviennent des fenêtres de palette et vice versa.

  Lorsque la boîte de dialogue Personnaliser les options s’affiche :

  • Définissez le contenu de la barre d’outils.
  • Définissez l’ordre du contenu de la barre d’outils.

  Cela permet aux utilisateurs d’apporter des modifications plus directement et plus efficacement.

• Enregistrez toutes les personnalisations de la barre d’outils, par utilisateur.

Utilisation des points de suspension

Bien que les commandes de la barre d’outils soient utilisées pour les actions immédiates, des informations supplémentaires sont parfois nécessaires pour effectuer l’action. Utilisez des points de suspension pour indiquer qu’une commande nécessite plus d’informations avant de pouvoir prendre effet. Placez les points de suspension à la fin de l’info-bulle et de l’étiquette, le cas échéant.

Dans cet exemple, l’option Imprimer... la commande affiche une boîte de dialogue Imprimer pour collecter plus d’informations.

Toutefois, si une commande ne peut pas prendre effet immédiatement, aucune sélection n’est requise. Ainsi, par exemple, les paramètres de partage n’ont pas de points de suspension même s’ils ont besoin d’informations supplémentaires, car la commande ne peut pas prendre effet immédiatement.

La commande Paramètres de partage n’a pas d’ellipses, car elle ne peut pas prendre effet immédiatement.

Étant donné que les barres d’outils sont constamment affichées et que l’espace est premium, les points de suspension doivent être utilisés rarement.

Notes

Pour les menus affichés par une barre d’outils, appliquez les instructions relatives aux points de suspension de menu.

Dimensionnement et espacement recommandés

Dimensionnement et espacement recommandés pour les barres d’outils standard.

Étiquettes

Général

• Utilisez les majuscules comme pour les phrases.
  • Exception: Pour les applications héritées, vous pouvez utiliser la mise en majuscules de style titre si nécessaire pour éviter de mélanger les styles de mise en majuscules.

Boutons d’icône sans étiquette

• Utilisez une info-bulle pour étiqueter la commande. Pour le texte de l’info-bulle, utilisez ce que serait l’étiquette si le bouton était étiqueté, mais incluez la touche de raccourci le cas échéant.

  

  Exemple d’info-bulle de bouton icône.

Boutons d’icônes étiquetés

• Utilisez une étiquette concise. Utilisez un seul mot si possible, quatre mots maximum.

• Placez l’étiquette à droite de l’icône.

• Utilisez une info-bulle pour décrire la commande. Étant donné que les boutons sont étiquetés, l’utilisation d’une info-bulle au lieu d’une info-bulle serait redondante.

  

  Exemple d’info-bulle de bouton d’icône étiquetée.

Listes déroulantes

• Si la liste a toujours une valeur, utilisez la valeur actuelle comme étiquette.

  

  Dans cet exemple, le nom de police actuellement sélectionné fait office d’étiquette.

• Si une liste déroulante modifiable n’a pas de valeur, utilisez une invite.

  

  Dans cet exemple, une invite est utilisée pour l’étiquette de la liste déroulante.

Boutons de menu et boutons fractionnés

• Préférez les noms de boutons de menu basés sur des verbes. Toutefois, omettez le verbe s’il s’agit de Créer, Afficher, Afficher ou Gérer. Par exemple, les boutons de menu Outils et Page n’ont pas de verbes.
• Utilisez un seul mot spécifique qui décrit clairement et précisément le contenu du menu. Bien que les noms n’aient pas besoin d’être si généraux qu’ils décrivent tout ce qui se trouve dans le menu, ils doivent être suffisamment prévisibles pour que les utilisateurs ne soient pas surpris par ce qu’ils trouvent dans le menu.
• Bien qu’elles ne soient pas obligatoires, fournissez des descriptions d’info-bulles si elles sont utiles.

Éléments de menu

• Utilisez des noms d’éléments de menu qui commencent par un verbe, un nom ou une expression substantif.
• Préférer les noms de menu basés sur des verbes. Toutefois, omettez le verbe s’il s’agit de Créer, Afficher, Afficher ou Gérer. Par exemple, les commandes suivantes n’utilisent pas de verbes :
  • À propos de
  • Avancé
  • Plein écran
  • Nouveau
  • Options
  • Propriétés
• Utilisez des verbes spécifiques. Évitez les verbes génériques et inutiles, tels que Modifier et Gérer.
• Utilisez des noms singuliers pour les commandes qui s’appliquent à un objet unique; sinon, utilisez des noms au pluriel.
• Pour les paires de commandes complémentaires, choisissez des noms clairement complémentaires. Exemples : Ajouter, Supprimer ; Afficher, Masquer; Insert, Delete.
• Choisissez des noms d’éléments de menu en fonction des objectifs et des tâches de l’utilisateur, et non de la technologie.
• Utilisez les noms d’éléments de menu suivants dans le but indiqué :
  • Options: Pour afficher les options du programme.
  • Personnaliser: Pour afficher les options de programme spécifiquement liées à la configuration de l’interface utilisateur mécanique.
  • Personnaliser: Pour afficher un résumé des paramètres de personnalisation couramment utilisés.
  • Préférences: N’utilisez pas. Utilisez options à la place.
  • Propriétés: Pour afficher la fenêtre de propriétés d’un objet.
  • Paramètres: N’utilisez pas comme étiquette de menu. Utilisez options à la place.
• Les éléments de menu qui affichent des sous-menus n’ont jamais d’ellipses sur leur étiquette. La flèche du sous-menu indique qu’une autre sélection est requise.

Documentation

Quand vous faites référence aux barres d’outils :

• S’il n’y a qu’une seule barre d’outils, faites-la référence en tant que barre d’outils.
• S’il existe plusieurs barres d’outils, faites-y référence par leur nom, suivi de la barre d’outils word. Reportez-vous à la barre d’outils main qui est activée par défaut et qui contient des boutons pour les tâches de base, telles que l’ouverture et l’impression d’un fichier, en tant que barre d’outils standard.
• Barre d’outils est un mot unique, non capitalisé. (En revanche, la barre de menus est deux mots.)
• Reportez-vous aux boutons de la barre d’outils par leurs étiquettes d’info-bulle. Utilisez le texte exact de l’étiquette, y compris sa mise en majuscule, mais n’incluez pas de points de suspension.
• Reportez-vous aux boutons de menu de la barre d’outils en fonction de leurs étiquettes et du menu word. Utilisez le texte exact de l’étiquette, y compris sa mise en majuscule.
• Reportez-vous aux contrôles de barre d’outils généralement en tant que boutons de barre d’outils.
• Pour décrire l’interaction utilisateur, utilisez Click pour les boutons de barre d’outils et les listes déroulantes en lecture seule, puis entrez pour les listes déroulantes modifiables. N’utilisez pas choisir, sélectionner ou sélectionner.
• N’utilisez pas les boutons de menu en cascade, déroulants, déroulants ou contextuels pour décrire les boutons de menu, sauf dans la documentation de programmation.
• Faites référence aux éléments non disponibles comme étant indisponibles, et non grisés, désactivés ou grisés. Utilisez désactivé dans la documentation de programmation.
• Lorsque cela est possible, mettez en forme les étiquettes en utilisant du texte en gras. Sinon, placez les étiquettes entre guillemets uniquement si nécessaire pour éviter toute confusion.

Exemples :

• Dans le menu Page de la barre d’outils, cliquez sur Envoyer la page par courrier électronique.
• Dans la zone Polices de la barre d’outils, entrez « Segoe UI ».
• Dans la barre d’outils Mise en forme , pointez sur Afficher, puis cliquez sur Commentaires.