Barres d’outils Windows 7

Note

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 conseils de conception actuels.

Les barres d’outils permettent de regrouper les 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 sur 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 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étachés, prenant alors la forme d’une palette. Pour plus d’informations sur les variétés de barres d’outils, consultez modèles d’utilisation dans cet article.

Note

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

Est-ce l’interface utilisateur appropriée ?

Pour décider, tenez compte de ces questions :

• 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 boutons de commande, boutons de menuet liens à la place.
• 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 les barres de menus. Elles fonctionnent donc mieux pour accéder efficacement à un petit nombre de commandes fréquemment utilisées.
• La plupart des commandes sont-elles immédiates ? Autrement dit, sont-elles principalement des 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 à l’aide d’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 rend une barre de menus un meilleur choix.
• Les commandes sont-elles bien représentées par les icônes ? Les boutons de barre d’outils sont généralement représentés par des icônes plutôt que par des étiquettes de texte (même si 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 dispose d’une barre d’outils sans barre de menus et que la plupart des commandes sont accessibles indirectement par le biais de boutons de menu et boutons fractionnés, cette barre d’outils est essentiellement une barre de menus. Appliquez plutôt le modèle menus de barre d’outils décrit dans les recommandations relatives aux menus.

Concepts 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 pour les rendre productifs. Une fois que les utilisateurs ont appris à accéder à une commande dans une barre d’outils, ils continuent rarement à accéder à la commande à 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 de la manière suivante :

• 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 dans un programme.

• Instantanéité. Cliquer sur une commande de barre d’outils prend effet immédiatement, tandis 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 Imprimer la barre d’outils 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 Imprimer la barre d’outils 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 en un seul clic, tandis que les commandes de barre de menus nécessitent la 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 barre de menus sont normalement masquées de l’affichage et leur structure hiérarchique permet de n’importe quel nombre de commandes.

• Taille et présentation. Pour packer 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 basées sur du texte (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 non étiquetés.

• Évident. Les barres d’outils bien conçues doivent comporter des icônes largement compréhensibles d’elles-mêmes, car les utilisateurs ne peuvent pas repérer efficacement les commandes en se fiant uniquement aux info-bulles. Toutefois, les barres d’outils fonctionnent toujours correctement 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 distinct. Pour les commandes fréquemment utilisées, les utilisateurs se souviennent des attributs de bouton de barre d’outils tels que l’emplacement, la forme et la couleur. Avec des barres d’outils bien conçues, les utilisateurs peuvent rapidement trouver les commandes même s’ils ne se souviennent pas du symbole d’icône exact. En revanche, les utilisateurs se rappellent des emplacements de commandes de barre de menus fréquemment utilisés, mais s’appuient sur les étiquettes de commandes pour effectuer des sélections.

  

  Pour les commandes de barre d’outils, l’emplacement distinctif, la forme et la couleur aident à rendre les icônes reconnaissables et identifiables.

  

  Pour les commandes de barre de menus, les utilisateurs dépendent finalement 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 aucun sens.

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

Assurez-vous que vos barres d’outils sont conçues principalement pour une efficacité. Concentrez 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 une efficacité et de bonnes barres de menus offrent une exhaustivité. Avoir à la fois des barres de menus et des barres d’outils permet à chacun de se concentrer sur ses forces sans compromis.

Étonnamment, ce modèle se décompose avec des programmes simples. Pour les programmes avec seulement quelques commandes, l’utilisation d’une barre de menus et d’une barre d’outils n’est pas logique, 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 via la barre d’outils et le masquage de la barre de menus par défaut. Ces programmes incluent Windows Explorer, Windows Internet Explorer, Windows lecteur multimédia et Windows Photo Gallery.

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 modifiées de la manière suivante :

• Fréquence. La suppression de la barre de menus signifie que toutes les commandes non 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.

• Instantanéité. La suppression de la barre de menus rend la barre d’outils le seul point d’accès visible pour les commandes, ce qui oblige la barre d’outils à disposer des versions entièrement fonctionnelles. Par exemple, s’il n’existe aucune 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 fractionné soit un excellent compromis dans ce cas. Consultez menu Standard et les boutons fractionnés pour le bouton de fractionnement d’impression standard.)

  

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

• Directité. Pour économiser de l’espace et empêcher l’encombrement, les commandes moins fréquemment utilisées peuvent être déplacées vers des 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 effectuer une seule commande, le masquage d’une barre de menus doit être traité de la même façon que la suppression complète 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 pensent à afficher la barre de menus pour trouver 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 compromissez pas trop. 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 tout à fait différent de l’accès aux barres de menus. Les barres de menus reçoivent le focus d’entrée lorsque l’utilisateur appuie sur la touche Alt et le perd lorsqu’il appuie sur É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, gérant toutes les touches de direction, Accueil, Fin et Tabulation. À l’inverse, les barres d’outils reçoivent le focus lorsque l’utilisateur parcourt tout le contenu de la fenêtre à l’aide de la touche Tab. Étant donné que les barres d’outils sont en dernier dans l’ordre de tabulation, elles peuvent prendre un effort significatif pour s’activer sur une page occupée (sauf si les utilisateurs savent utiliser Maj+Tab pour revenir en arrière).

L’accessibilité présente un dilemme ici : alors que les barres d’outils sont plus faciles pour les utilisateurs de la souris, elles sont moins accessibles pour les utilisateurs du 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 en faveur 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’utilisation

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

Utilisation	Exemple
barres d’outils principales une barre d’outils conçue pour fonctionner sans barre de menus, masquée ou supprimée.	Les barres d’outils principales doivent équilibrer le besoin d’efficacité avec l’exhaustivité, de sorte qu’elles fonctionnent mieux pour les programmes simples. capture d’écran Barre d’outils principale de l’Explorateur Windows.
barres d’outils supplémentaires une 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 barre d’outils une barre de menus implémentée en tant que barre d’outils.	Les menus de barre d’outils sont des barres d’outils principalement constituées de commandes sous forme de boutons de menu et de boutons partagés, avec seulement quelques commandes directes, voire aucune. 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 de Microsoft Visual Studio.
Fenêtres de palette boîte de dialogue non modale, qui présente un ensemble de commandes.	les fenêtres de palette sont des barres d’outils détachées. Fenêtres de palette de Microsoft Paint.

Les barres d’outils ont ces styles :

Style	Exemple
icônes sans étiquette une ou plusieurs lignes de petits boutons d’icône sans étiquette.	utilisez ce style s’il existe trop de boutons pour é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 non étiquetées dans WordPad.
Grandes icônes non étiquetées une seule rangée de grands boutons avec icône sans libellé.	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 avec des icônes non étiquetées de Windows Live Messenger et de l’Outil Capture d’écran de Windows.
icônes étiquetées une seule rangée de petites icônes avec libellé.	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 l’Explorateur Windows.
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 de grande taille une ligne partielle d’icônes volumineuses 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 :

Utilisation	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ônes dans Télécopie et numérisation Windows.
boutons d’icône mode Cliquer sur un bouton de mode entre en mode sélectionné.	capture d’écran Exemples de boutons de mode à partir 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. Cliquer sur le bouton applique la modification aux objets sélectionnés.	Exemples de boutons de propriété de Microsoft Word.
Boutons d’icône libellé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 triangle pointant vers le bas indique qu’un clic sur le bouton affiche un menu. Bouton de menu avec un petit ensemble de commandes associées.
boutons scindés 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.	bouton fractionné à l’état normal. Comme un bouton de menu, un triangle pointant vers le bas unique indique que cliquer sur la partie la plus à droite du bouton affiche un menu. bouton fractionné dont la liste est déroulée. dans cet exemple, un bouton fractionné est utilisé pour consolider toutes les commandes liées à l’impression. la commande d’impression immédiate est utilisée la plupart du temps, de sorte que les utilisateurs n’ont normalement pas besoin de voir les autres commandes. contrairement à un bouton de menu, le fait de cliquer sur la partie gauche du bouton effectue directement l’action sur l’étiquette. Les boutons fractionnés 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 une 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é.

Lignes directrices

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 à partir de 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 à un niveau premium, économisez de l’espace par :

  • Omettre les étiquettes d’icônes connues et les commandes moins fréquemment utilisées.
  • Utiliser uniquement une barre d’outils partielle au lieu de la largeur entière de la fenêtre.
  • Regrouper les commandes connexes à l’aide d’un bouton de menu ou d’un bouton partagé.
  • L’utilisation d’un chevron de débordement pour afficher des commandes moins fréquemment utilisées.
  • Affichage des commandes uniquement lorsqu’elles s’appliquent au contexte actuel.

  

  La barre d’outils Windows Internet Explorer permet d’économiser de l’espace en omettant des é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 étiquettes, utilisez une configuration par défaut sans plus de deux lignes de barres d’outils. Si plus de deux lignes peuvent être utiles, personnalisez les barres d’outils. À partir de plus de deux lignes, cela peut submerger les utilisateurs et prendre trop de place 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ésactiver 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 chaque bouton de la barre d’outils si le fait de cliquer dessus entraînait directement une erreur. Cela est nécessaire pour maintenir une sensation directe.

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

  capture d’écran

  Dans cet exemple, la barre d’outils Debug est affichée uniquement lorsque le programme est en cours d’exécution.

• Aligner à gauche les boutons de la barre d’outils. L’icône d’aide, le cas échéant, est alignée à droite.

  

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

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

• Ne modifiez pas dynamiquement les étiquettes des boutons de 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érer les commandes les plus fréquemment utilisées.

  • Pour les barres d’outils principales, fournissez des commandes complètes. Les barres d’outils principales ne doivent pas ê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 de commandes pour :
    • Commandes directement sur l’interface utilisateur elle-même.
    • Les commandes sont généralement accessibles via des menus contextuels.
    • Commandes standard, connues telles que Couper, Copier et Coller.
  • Pour les barres d’outils supplémentaires, fournissez des commandes qui sont utilisées le plus fréquemment. Les commandes de barre de menus sont un super-ensemble des commandes de barre d’outils. Vous n’avez donc pas à tout fournir. Concentrez-vous sur l’accès rapide et pratique aux commandes et ignorez le reste.

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

  • Bouton d’icône. Direct et peu encombrant.
  • Bouton d’icône avec libellé Direct, mais prend plus d’espace.
  • Bouton partagé. Direct pour la commande la plus courante, mais gère les variantes de commande.
  • Bouton de menu. Indirect, mais présente de nombreuses commandes.

• Préférez les commandes immédiates. Pour les commandes qui peuvent être exécutées immédiatement ou accepter des paramètres supplémentaires pour plus de flexibilité :

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

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

  acceptable :

  

  Mieux :

  

  La barre d’outils Télécopie et numérisation Windows comporte peu de commandes ; la version améliorée affiche donc des libellés pour les plus importantes.

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

  Incorrect :

  

  Dans cet exemple, Impression se trouve directement dans la barre d’outils ; elle n’a donc pas besoin de figurer dans le menu.

Organisation et ordre

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

• Placez d’abord 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 les rendre faciles à trouver, tout en ayant toujours les commandes les plus fréquemment utilisées apparaissent en premier. Cela est le plus efficace, surtout s’il y a un 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 en regard des commandes fréquemment utilisées. Utilisez l’ordre ou le regroupement pour séparer les éléments. En outre, envisagez 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 de capacité 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 de place pour afficher toutes les commandes.

  Incorrect :

  

  Le chevron de débordement indique que toutes les commandes ne sont pas affichées, mais qu’un plus grand nombre pourrait l’être grâce à une meilleure disposition.

• Assurez-vous que les commandes les plus fréquemment utilisées sont directement accessibles à partir de la barre d’outils (autrement dit, pas en 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 des boutons de menu ou fractionnez des 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 l’utilisation des deux permet à chacun de se concentrer sur ses forces sans compromis.

• Masquez la barre de menus par défaut si votre conception de barre d’outils rend redondante une barre de menus.
• Masquez la barre de menus au lieu de la supprimer complètement, car les barres de menus sont plus accessibles pour les 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 les 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’apparence du bouton pour indiquer que l’icône est cliquable. À l’issue du délai d’affichage, affichez l’info-bulle ou la bulle d’information.

  

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

• Lors d’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 faites rien.

• Lors d’un double-clic gauche, effectuer la même action qu’un clic gauche simple.

  • Exception : Dans de rares cas, une commande de barre d’outils peut être utilisée plus efficacement en mode modal. Dans ce cas, utilisez le double-clic pour activer le mode.

    

    Dans cet exemple, un double-clic sur la commande Reproduire la mise en forme active un mode dans lequel tous les clics suivants appliquent la mise en forme. Les utilisateurs peuvent quitter le mode en cliquant une fois avec le bouton gauche de la souris.

• Clic droit :

  • 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 : 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 davantage d’espace.

• Vérifiez 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 correctement si les icônes pour 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 distinctives. Cela permet aux utilisateurs de trouver rapidement les commandes même s’ils ne se souviennent pas du symbole d’icône.

• Vérifiez 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 dans la mesure du 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 reflètent les commandes trouvées dans les barres de menus standard. Elles doivent donc être utilisées uniquement pour les barres d’outils principales. Cette liste présente les libellés des boutons (et leur type), leur ordre et leurs séparateurs, leurs raccourcis clavier et leurs points de suspension. Notez que la commande permettant d’afficher et de masquer la barre de menus se trouve dans le menu Affichage.

File

Nouveau (Ctrl + N)
Ouvrir (Ctrl + O)
Fermer
<separator>
Enregistrer (Ctrl + S)
Enregistrer sous...
<separator>
Envoyer à
<separator>
Imprimer (Ctrl + P)
Aperçu avant impression
Mise en page
<separator>
Sortie (Alt + F4) (raccourci généralement non donné)

Modifier(bouton de menu)

Annuler (Ctrl + Z)
Rétablir (Ctrl + Y)
<separator>
Couper (Ctrl + X)
Copier (Ctrl + C)
Coller (Ctrl + V)
<separator>
Sélectionner tout (Ctrl + A)
<separator>
Supprimer (Del) (raccourci généralement non donné)
Renommer...
<separator>
Rechercher (Ctrl + F)
Rechercher suivant (F3) (commande en général non indiquée)
Remplacer (Ctrl + H)
Accéder à (Ctrl + G)

Imprimer (bouton scindé)

Imprimer (Ctrl + P)
Aperçu avant impression
Mise en page

View(menu button)

Barre de menus (vérifier si visible)
Volet Détails (vérifier si visible)
Volet Aperçu (vérifier si visible)
Barre d’état (vérifier si visible)

Zoom

Agrandir (Ctrl + +)
Zoom arrière (Ctrl + -)

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

Le plus grand
Plus grand
Moyen
Plus petit
Le plus petit

Plein écran (F11)
Actualiser (F5)

Outils (bouton menu) ...

Options

Aide (bouton fractionné, 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 présente les libellés des boutons (et leur type), leur ordre et leurs séparateurs, leurs raccourcis clavier et leurs points de suspension. 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égories de menus standard, car ils doivent être plus englobants. Par exemple, la catégorie Organiser est utilisée au lieu 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égories de menus standard si cela ne serait pas trompeur.

Incorrect :

Dans cet exemple, la barre d’outils doit utiliser Modifier au lieu d’Organiser pour la cohérence, car elle possède les commandes de menu Édition 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 a affiché la fenêtre de palette.

• Utilisez la casse de phrase, sans ponctuation finale.

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

• Si possible et utile, rendez les fenêtres de palette redimensionnables. Indiquez que la fenêtre est redimensionnable à l’aide de curseurs de redimensionnement lorsque le pointeur survole le 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 du réaffichage, restaurez la taille et la position enregistrées de la fenêtre. En outre, envisagez de rendre ces attributs persistants entre les instances de programme par utilisateur.

Personnalisation

• Fournissez une personnalisation pour les barres d’outils composées de deux lignes ou plus. Seul le style d’icônes sans étiquette a besoin de personnalisation. Les barres d’outils simples avec quelques 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 des utilisateurs qui personnalisent leur façon de sortir d’une configuration initiale incorrecte. Supposons que la plupart des utilisateurs ne personnalisent pas leurs barres d’outils.

• Fournissez un menu contextuel avec les commandes suivantes :

  • Liste de cases à cocher pour afficher les barres d’outils disponibles
  • Verrouiller/déverrouiller les barres d’outils
  • Personnaliser...

• barres d’outils personnalisables verrouillables par défaut, pour empêcher les modifications accidentelles.

• Pour la commande Personnaliser, affichez une boîte de dialogue 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 d’un glisser-déplacer de la manière suivante :

  • Définissez l’ordre et les positions de la barre d’outils.
  • Définissez la longueur des barres d’outils et affichez un chevron de dépassement pour celles qui sont trop petites pour présenter tout leur contenu.
  • Si cette fonction est prise en charge, détachez les barres d’outils pour les transformer en fenêtres 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 efficacement.

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

Utilisation des points de suspension

Bien que les commandes de barre d’outils soient utilisées pour les actions immédiates, il est parfois nécessaire d’obtenir plus d’informations 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 du libellé, le cas échéant.

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

Si une commande ne peut toutefois pas prendre effet immédiatement, il n’est pas nécessaire d’ajouter des points de suspension. Par exemple, les paramètres de partage ne sont pas suivis de points de suspension, même si la commande nécessite des informations supplémentaires, car elle ne peut de toute façon pas prendre effet immédiatement.

La commande Paramètres de partage n’est pas suivie de points de suspension, car elle ne peut pas prendre effet immédiatement.

Comme les barres d’outils sont constamment affichées et que l’espace est limité, les points de suspension doivent être utilisés avec parcimonie.

Note

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

Dimensionnement et espacement recommandés

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

Étiquettes

Généralités

• Utilisez la casse de phrase.
  • 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 libeller la commande. Pour le texte de l’info-bulle, utilisez le libellé qu’aurait le bouton s’il en avait un, mais incluez la touche de raccourci s’il y en a une.

  

  Exemple d’info-bulle pour un bouton comportant une icône.

Boutons avec icône et libellé

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

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

• Utilisez une info-bulle pour décrire la commande. Comme les boutons comportent déjà un libellé, l’utilisation d’une info-bulle au lieu d’une bulle d’information serait redondante.

  

  Exemple de bulle d’information pour un bouton comportant une icône et un libellé.

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é agit comme étiquette.

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

  

  Dans cet exemple, un texte d’invite est utilisé pour le libellé 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 est Créer, Afficher, Voir ou Gérer. Par exemple, les boutons de menu Outils et Page ne comportent pas de verbes.
• Utilisez un mot spécifique unique qui décrit clairement et précisément le contenu du menu. Bien que les noms ne soient pas si généraux qu’ils décrivent tout dans le menu, ils doivent être suffisamment prévisibles afin que les utilisateurs ne soient pas surpris par ce qu’ils trouvent dans le menu.
• Bien que cela ne soit pas obligatoire, 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 un groupe nominal.
• Préférez les noms de menus basés sur des verbes. Toutefois, omettez le verbe s’il s’agit des verbes Créer, Afficher, Voir ou Gérer. Par exemple, les commandes suivantes n’utilisent pas de verbes :
  • À propos
  • 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.
• Utiliser des noms singuliers pour les commandes qui s’appliquent à un objet unique, sinon utiliser des noms pluriels.
• Pour les paires de commandes complémentaires, choisissez des noms clairement complémentaires. Exemples : Ajouter, supprimer ; Afficher, masquer ; Insérer, Supprimer.
• Choisir des noms d’éléments de menu en fonction des objectifs et des tâches utilisateur, et non sur la technologie.
• Utilisez les noms d’éléments de menu suivants à des fins indiquées :
  • 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.
  • Personalize : Pour afficher un résumé des paramètres de personnalisation couramment utilisés .
  • Préférences : N’utilisez pas. Utilisez les options à la place.
  • Propriétés : Pour afficher la fenêtre de propriété d’un objet.
  • paramètres : Ne pas utiliser comme étiquette de menu. Utilisez les options à la place.
• Les éléments de menu qui affichent un sous-menu n’ont jamais de points de suspension dans leur libellé. La flèche de sous-menu indique qu’une autre sélection est requise.

Documentation

Lorsque vous faites référence à des barres d’outils :

• S’il n’existe qu’une seule barre d’outils, reportez-vous à la barre d’outils.
• S’il existe plusieurs barres d’outils, désignez-les par leur nom, suivi du mot « barre d’outils ». Reportez-vous à la barre d’outils principale activée par défaut et contient des boutons pour les tâches de base, telles que l’ouverture et l’impression d’un fichier, comme la barre d’outils standard.
• La barre d’outils est un mot unique et non capitalisé. (En revanche, « menu bar » s’écrit en deux mots.)
• Désignez les boutons de la barre d’outils à l’aide du libellé de leur info-bulle. Utilisez le texte exact de l’étiquette, y compris sa mise en majuscule, mais n’incluez pas de points de suspension.
• Désignez les boutons de menu de la barre d’outils par leur libellé suivi du mot « menu ». Utilisez le texte exact de l’étiquette, y compris sa mise en majuscules.
• Désignez généralement les contrôles de la barre d’outils comme des boutons de barre d’outils.
• Pour décrire l’interaction utilisateur, utilisez « cliquer » pour les boutons de la barre d’outils et les listes déroulantes en lecture seule, et « saisir » pour les listes déroulantes modifiables. N’utilisez pas les termes « choisir », « sélectionner » ou « prendre ».
• N’utilisez pas les termes « en cascade », « déroulant » ou « contextuel » pour décrire les boutons de menu, sauf dans la documentation de programmation.
• Qualifiez les éléments indisponibles d’indisponibles, et non d’estompé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 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 page Envoyer 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.