Partager via


Boîtes de dialogue Windows 7 (notions de base sur la conception)

Remarque

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 instructions s’appliquent toujours en principe, mais la présentation et les exemples ne reflètent pas notre guide de conception actuel.

Une boîte de dialogue est une fenêtre secondaire qui permet aux utilisateurs d’exécuter une commande, de poser une question aux utilisateurs ou de leur fournir des informations ou des commentaires sur la progression.

screen shot identifying dialog box elements

Boîte de dialogue classique.

Les boîtes de dialogue se composent d’une barre de titre (pour identifier la commande, la fonctionnalité ou le programme d’où provient une boîte de dialogue), d’une instruction principale facultative (pour expliquer l’objectif de l’utilisateur avec la boîte de dialogue), de différents contrôles dans la zone de contenu (pour présenter des options) et des boutons de validation (pour indiquer comment l’utilisateur souhaite valider la tâche).

Il existe deux types fondamentaux de boîte de dialogue :

  • Les boîtes de dialogue modales exigent que les utilisateurs exécutent une action et ferment la boîte de dialogue avant de poursuivre avec la fenêtre propriétaire. Elles conviennent le mieux aux tâches critiques, ponctuelles ou peu fréquentes qui nécessitent d’être exécutées avant de continuer.
  • Les boîtes de dialogue non modales permettent aux utilisateurs de basculer entre la boîte de dialogue et la fenêtre propriétaire comme ils le souhaitent. Elles conviennent le mieux aux tâches fréquentes, répétitives et en cours.

Une boîte de dialogue de tâche est une boîte de dialogue implémentée à l’aide de l’interface de programmation d’application (API) de boîte de dialogue de tâche. Elle se compose des parties suivantes, qui peuvent être assemblées dans une variété de combinaisons :

  • Une barre de titre permettant d’identifier la fonctionnalité d’application ou système d’où provient la boîte de dialogue.
  • Une instruction principale, avec une icône facultative, pour identifier l’objectif de l’utilisateur avec la boîte de dialogue.
  • Une zone de contenu pour les informations descriptives et les contrôles.
  • Une zone de commande pour les boutons de validation, y compris un bouton Annuler, ainsi que des contrôles facultatifs Plus d’options et Ne plus afficher ce <élément>.
  • Une zone de note de bas de page pour des explications supplémentaires facultatives et de l’aide, généralement destinées aux utilisateurs moins expérimentés.

screen shot of a typical task dialog box

Boîte de dialogue de tâche classique.

Les boîtes de dialogue de tâche sont recommandées car elles sont faciles à créer et harmonisent l’apparence globale de l’application. Les boîtes de dialogue de tâche nécessitent Windows Vista ou version ultérieure ; elles ne conviennent donc pas aux versions antérieures de Microsoft Windows.

Un volet des tâches est semblable à une boîte de dialogue, sauf qu’il est présenté dans un volet de fenêtre plutôt que dans une fenêtre distincte. Par conséquent, les volets des tâches offrent une expérience plus directe et contextuelle que les boîtes de dialogue. Même si, techniquement, ils ne sont pas identiques, les volets des tâches sont si similaires aux boîtes de dialogue que leurs instructions sont présentées dans cet article.

screen shot of a typical task pane

Volet des tâches classique.

Les fenêtres de propriétés sont un type spécialisé de boîte de dialogue utilisée pour afficher et modifier les propriétés d’un objet, d’une collection d’objets ou d’un programme. En outre, les fenêtres de propriétés prennent généralement en charge plusieurs tâches, tandis que les boîtes de dialogue prennent généralement en charge une seule tâche ou étape d’une tâche. Étant donné que leur utilisation est spécialisée, les fenêtres de propriétés sont couvertes dans un ensemble différent d’instructions.

Les boîtes de dialogue peuvent avoir des onglets et, si tel est le cas, elles sont appelées boîtes de dialogue à onglets. Les fenêtres de propriétés sont déterminées par leur présentation des propriétés, et non par l’utilisation d’onglets.

Remarque : Les instructions relatives à la disposition, à la gestion des fenêtres, aux boîtes de dialogue communes, aux fenêtres de propriétés, aux Assistants, aux confirmations, aux messages d’erreur et aux messages d’avertissement sont présentées dans des articles distincts.

Est-ce l’interface utilisateur appropriée ?

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

  • L’objectif est-il de fournir aux utilisateurs des informations, de leur poser une question ou de les autoriser à sélectionner des options pour exécuter une commande ou une tâche ? Si ce n’est pas le cas, utilisez une autre interface utilisateur (IU).
  • L’objectif est-il d’afficher et de modifier les propriétés d’un objet, d’une collection d’objets ou d’un programme ? Dans ce cas, utilisez plutôt une fenêtre de propriétés ou une barre d’outils.
  • L’objectif est-il de présenter une collection de commandes ou d’outils ? Si c’est le cas, utilisez une barre d’outils ou fenêtre palette.
  • L’objectif est-il de vérifier que l’utilisateur souhaite poursuivre une action ? Y a-t-il une raison claire de ne pas continuer et une chance raisonnable que parfois les utilisateurs ne souhaiteront pas continuer ? Dans ce cas, utilisez une confirmation.
  • L’objectif est-il de fournir un message d’erreur ou d’avertissement ? Dans ce cas, utilisez un message d’erreur ou un message d’avertissement.
  • L’objectif est-il de :
    • Ouvrir des fichiers
    • Enregistrer des fichiers
    • Ouvrir des dossiers
    • Rechercher ou remplacer du texte
    • Imprimer un document
    • Sélectionner des attributs d’une page imprimée
    • Sélectionner une police
    • Choisir une couleur
    • Rechercher un fichier, un dossier, un ordinateur ou une imprimante
    • Rechercher des utilisateurs, des ordinateurs ou des groupes dans Microsoft Active Directory
    • Demander un nom d’utilisateur et un mot de passe ?

Dans ce cas, utilisez plutôt la boîte de dialogue commune appropriée. La plupart de ces boîtes de dialogue communes sont extensibles.

  • L’objectif est-il d’effectuer une tâche en plusieurs étapes qui nécessite plus d’une seule fenêtre ? Dans ce cas, utilisez plutôt un flux de tâches ou un Assistant.
  • L’objectif est-il d’informer les utilisateurs d’un événement système ou programme qui n’est pas lié à l’activité utilisateur actuelle, qui ne nécessite pas d’action immédiate de la part de l’utilisateur, et que les utilisateurs peuvent ignorer sans risque ? Dans ce cas, utilisez plutôt une notification.
  • L’objectif est-il d’afficher l’état du programme ? Dans ce cas, utilisez plutôt une barre d’état.
  • Serait-il préférable d’utiliser une interface utilisateur sur place ? Les boîtes de dialogue peuvent interrompre le flux de l’utilisateur en exigeant son attention. Parfois, cette interruption du flux est justifiée, par exemple lorsque l’utilisateur doit effectuer une action qui se trouve en dehors du contexte actuel. Dans d’autres cas, une meilleure approche consiste à présenter l’interface utilisateur dans le contexte, soit directement avec l’interface utilisateur sur place (par exemple, un volet des tâches), soit à la demande à l’aide d’une divulgation progressive.
  • L’objectif est-il d’afficher un problème d’entrée utilisateur non critique ou une condition spéciale ? Dans ce cas, utilisez plutôt une bulle.
  • Pour les flux de tâches, serait-il préférable d’utiliser une autre page ? En règle générale, il est préférable qu’une tâche se déroule d’une page à une autre au sein d’une même fenêtre. Utilisez des boîtes de dialogue pour confirmer les commandes sur place, obtenir une entrée pour les commandes sur place, et effectuer des tâches secondaires autonomes qu’il vaut mieux exécuter indépendamment et en dehors du flux de tâches principal.
  • Pour sélectionner des options, les utilisateurs sont-ils susceptibles de changer les options ? Si ce n’est pas le cas, envisagez des alternatives, telles que :
    • Utilisation des options par défaut sans demander, mais permettre aux utilisateurs d’apporter des modifications ultérieurement.
    • Mise à disposition d’une version avec des options (par exemple, Imprimer... dans un menu) et d’une version sans options (par exemple, Imprimer dans la barre d’outils). En règle générale, les commandes de barre d’outils doivent être immédiates, et de préférence ne pas afficher de boîte de dialogue.
  • Pour sélectionner des options, existe-t-il un moyen plus simple et plus direct de présenter les options ? Dans ce cas, envisagez des alternatives, telles que :
    • Utilisation d’un bouton partagé pour sélectionner des variantes d’une commande.
    • Utilisation d’un sous-menu pour les commandes, cases à cocher, cases d’option et listes simples.

Screenshot that shows a menu and sub-menu.

screen shot of a menu and submenu

Dans ces exemples, des sous-menus sont utilisés au lieu de boîtes de dialogue pour les sélections simples.

Principes de conception

Lorsqu’elles sont correctement utilisées, les boîtes de dialogue constituent un excellent moyen de donner de la puissance et de la flexibilité à votre programme. En cas d’utilisation incorrecte, les boîtes de dialogue peuvent facilement gêner les utilisateurs, interrompre leur flux et rendre le programme fastidieux à utiliser. Les boîtes de dialogue modales exigent l’attention des utilisateurs. Les boîtes de dialogue sont souvent plus faciles à implémenter que les interfaces utilisateur alternatives. Elles ont donc tendance à être surutilisées.

Une boîte de dialogue est la plus efficace lorsque ses caractéristiques de conception correspondent à son utilisation. La conception d’une boîte de dialogue est largement déterminée par son objectif (proposer des options, poser des questions, fournir des informations ou des commentaires), son type (modale ou non modale) et l’interaction utilisateur (requise, réponse facultative ou simple reconnaissance), tandis que son utilisation est largement déterminée par son contexte (lancée par l’utilisateur ou par le programme), la probabilité d’action utilisateur et la fréquence d’affichage.

Pour concevoir des boîtes de dialogue efficaces, utilisez efficacement les éléments suivants :

  • Texte de boîte de dialogue
  • Instructions principales
  • Option Ne plus afficher ce <élément>

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

Veillez à ce que la conception de votre boîte de dialogue (déterminée par son objectif, son type et l’interaction utilisateur) corresponde à son utilisation (déterminée par son contexte, la probabilité d’action utilisateur et la fréquence d’affichage).

Modèles d’usage

Les boîtes de dialogue ont plusieurs modèles d’utilisation :

  • Les boîtes de dialogue d’interrogation (avec des boutons) posent aux utilisateurs une seule question ou les invitent à confirmer une commande, et proposent des réponses simples dans des boutons de commande disposés horizontalement.
  • Les boîtes de dialogue d’interrogation (avec des liens de commande) posent aux utilisateurs une seule question ou les invitent à sélectionner une tâche à effectuer, et proposent des réponses détaillées dans des liens de commande disposés verticalement.
  • Les boîtes de dialogue de choix présentent aux utilisateurs un ensemble de choix, généralement en vue de spécifier une commande plus précisément. Contrairement aux boîtes de dialogue d’interrogation, les boîtes de dialogue de choix peuvent poser plusieurs questions.
  • Les boîtes de dialogue de progression présentent aux utilisateurs des commentaires sur la progression pendant une longue opération (plus de cinq secondes), ainsi qu’une commande pour annuler ou arrêter l’opération.
  • Les boîtes de dialogue d’information affichent des informations demandées par l’utilisateur.

Consignes

Général

  • N’utilisez pas de boîtes de dialogue avec défilement. N’utilisez pas de boîtes de dialogue qui nécessitent l’utilisation d’une barre de défilement pour être affichées complètement pendant l’utilisation normale. Au lieu de cela, repensez la conception de la boîte de dialogue. Envisagez d’utiliser une divulgation progressive ou des onglets.

  • Ne créez pas de barre de menus ou de barre d’état. Au lieu de cela, fournissez l’accès aux commandes et à l’état directement sur la boîte de dialogue elle-même, ou en utilisant des menus contextuels sur les contrôles appropriés.

    • Exception : Les barres de menus sont acceptables lorsqu’une boîte de dialogue est utilisée pour implémenter une fenêtre principale (par exemple, un utilitaire).

    Incorrect :

    screen shot of a dialog box with a menu bar

    Dans cet exemple, Rechercher des certificats est une boîte de dialogue non modale avec une barre de menus.

  • Si une boîte de dialogue nécessite une attention immédiate et que le programme n’est pas actif, faites clignoter son bouton de la barre des tâches trois fois afin d’attirer l’attention, et laissez-le en surbrillance. Ne faites rien d’autre : ne restaurez pas la fenêtre, ne l’activez pas, et ne jouez pas d’effets sonores. Au lieu de cela, respectez la sélection de l’état de la fenêtre de l’utilisateur, et laissez celui-ci activer la fenêtre quand il est prêt.

  • Pour obtenir plus d’instructions et des exemples, consultez Barre des tâches.

  • Utilisez-les pour les tâches critiques, ponctuelles ou peu fréquentes qui nécessitent d’être exécutées avant de continuer.
  • Utilisez un modèle de validation différée afin que les modifications ne prennent effet qu’une fois validées explicitement.
  • Implémentez l’utilisation d’une boîte de dialogue de tâche chaque fois que ce type est approprié, afin d’harmoniser l’apparence. Les boîtes de dialogue de tâche nécessitent Windows Vista ou version ultérieure ; elles ne conviennent donc pas aux versions antérieures de Windows.

Boîtes de dialogue non modales

  • Utilisez-les pour les tâches fréquentes, répétitives et en cours.
  • Utilisez un modèle de validation immédiat afin que les modifications prennent effet immédiatement.
  • Pour les boîtes de dialogue non modales, utilisez un bouton de commande Fermer explicite dans la boîte de dialogue afin de fermer la fenêtre. Pour les deux types, utilisez un bouton Fermer dans la barre de titre afin de fermer la fenêtre.
  • Réfléchissez s’il est préférable de faire en sorte que les boîtes de dialogue non modales soient ancrables. Les boîtes de dialogue non modales ancrables autorisent un positionnement plus flexible.

screen shot of a dockable, modeless dialog box

Certaines boîtes de dialogue non modales utilisées dans Microsoft Office sont ancrables.

Boîtes de dialogue multiples

  • N’affichez pas plusieurs boîtes de dialogue de choix propriétaires à la fois à partir d’une boîte de dialogue de choix propriétaire. Lorsque plusieurs boîtes de dialogue sont affichées, il devient plus difficile pour les utilisateurs de comprendre la signification des boutons de validation. Vous pouvez afficher d’autres types de boîtes de dialogue (telles que des boîtes de dialogue d’interrogation) si nécessaire.
  • Pour une séquence de boîtes de dialogue associées, envisagez d’utiliser une boîte de dialogue multipage si possible. Utilisez des boîtes de dialogue individuelles si elles ne sont pas clairement liées.

Boîtes de dialogue multipages

  • Utilisez une boîte de dialogue multipage au lieu de boîtes de dialogue individuelles lorsque vous avez la séquence suivante de pages associées :
    • Une page d’entrée unique (facultative)
    • Une page de progression
    • Une page de résultats unique

La page d’entrée est facultative, car la tâche a peut-être été lancée ailleurs. L’expérience obtenue sera ainsi plus stable, simple et légère.

screen shot of a progress bar

screen shot of 'no problems found' message

Dans cet exemple, les diagnostics réseau Windows se composent de pages de progression et de résultats.

  • N’utilisez pas une boîte de dialogue multipage si la page d’entrée est une boîte de dialogue standard. Dans ce cas, la cohérence offerte par l’utilisation d’une boîte de dialogue standard est plus importante.
  • N’utilisez pas les boutons Suivant ou Précédent, et limitez à trois le nombre de pages. Les boîtes de dialogue multipages sont destinées aux tâches en une seule étape avec des commentaires. Elles diffèrent des Assistants, qui sont utilisés pour les tâches en plusieurs étapes. Les Assistants offrent une expérience plus lourde et indirecte, par rapport aux boîtes de dialogue multipages.
  • Dans la page d’entrée, utilisez des boutons de commande ou des liens de commande spécifiques pour lancer la tâche.
  • Utilisez un bouton Annuler dans les pages d’entrée et de progression, ainsi qu’un bouton Fermer dans la page de résultats.

Développeurs : Vous pouvez créer des boîtes de dialogue de tâches multipages à l’aide du message TDM_NAVIGATE_PAGE.

Présentation

Pour faciliter la recherche et l’accès aux boîtes de dialogue, associez clairement la boîte de dialogue à sa source et travaillez correctement avec plusieurs moniteurs :

  • Affichez initialement les boîtes de dialogue « centrées » en haut de la fenêtre propriétaire. Pour l’affichage ultérieur, pensez à l’afficher à son dernier emplacement (par rapport à la fenêtre propriétaire) si cette option est susceptible d’être plus pratique.

diagram of dialog box centered on window behind it

Initialement, centrez les boîtes de dialogue par-dessus la fenêtre propriétaire.

  • Si une boîte de dialogue est contextuelle, affichez-la près de l’objet à partir duquel elle a été lancée. Toutefois, placez-la de manière à ce qu’elle ne recouvre pas l’objet (en la décalant de préférence vers le bas et vers la droite).

diagram of dialog box offset down and to the right

Les propriétés d’un objet sont affichées près de l’objet.

  • Affichez initialement les boîtes de dialogue non modales en haut de la fenêtre propriétaire, afin d’en faciliter l’accès. Si l’utilisateur active la fenêtre propriétaire, elle risque de masquer la boîte de dialogue non modale.
  • Si nécessaire, ajustez l’emplacement initial afin que la boîte de dialogue entière soit visible dans le moniteur cible. Si une fenêtre redimensionnable est plus grande que le moniteur cible, réduisez-la pour qu’elle s’ajuste.
  • Lors du réaffichage d’une boîte de dialogue, pensez à l’afficher dans le même état que lors du dernier accès. À la fermeture, enregistrez le moniteur utilisé, la taille de la fenêtre, l’emplacement et l’état (agrandi ou restauré). Lors du réaffichage, restaurez la taille, l’emplacement et l’état de boîte de dialogue enregistrés à l’aide du moniteur approprié. Pensez également à rendre ces attributs persistants entre les instances de programme pour chaque utilisateur.
  • Pour les fenêtres redimensionnables, définissez une taille minimale de fenêtre s’il existe une taille sous laquelle le contenu n’est plus utilisable. Envisagez de modifier la présentation afin de rendre le contenu utilisable à des tailles plus petites.

screen shot of centered media player buttons

Dans cet exemple, le Lecteur multimédia Windows change son format lorsque la fenêtre devient trop petite pour le format standard.

  • N’utilisez pas l’attribut Toujours visible.
    • Exception : Vous pouvez l’utiliser uniquement lorsqu’une boîte de dialogue implémente une opération essentiellement modale, mais qu’elle doit être suspendue brièvement pour accéder à la fenêtre propriétaire. Par exemple, lors de la vérification de l’orthographe d’un document, les utilisateurs peuvent parfois quitter la boîte de dialogue de vérification de l’orthographe et accéder au document pour corriger les erreurs.

Pour obtenir plus d’informations et des exemples, consultez Gestion des fenêtres.

Barres de titre

  • Les boîtes de dialogue n’ont pas d’icônes de barre de titre. Les icônes de barre de titre sont utilisées comme distinction visuelle entre les fenêtres principales et les fenêtres secondaires.
    • Exception : Si une boîte de dialogue est utilisée pour implémenter une fenêtre principale (par exemple, un utilitaire) et qu’elle s’affiche donc dans la barre des tâches, elle a une icône de barre de titre. Dans ce cas, optimisez le titre pour l’affichage dans la barre des tâches en plaçant en premier les informations de distinction.
  • Les boîtes de dialogue ont toujours un bouton Fermer. Les boîtes de dialogue non modales peuvent également avoir un bouton Réduire. Les boîtes de dialogue redimensionnables peuvent avoir un bouton Agrandir.
  • Ne désactivez pas le bouton Fermer. La présence d’un bouton Fermer permet aux utilisateurs de garder le contrôle en leur permettant de fermer les fenêtres dont ils n’ont pas besoin.
    • Exception : Pour les boîtes de dialogue de progression, vous pouvez désactiver le bouton Fermer si la tâche doit s’exécuter jusqu’à achèvement pour atteindre un état valide ou empêcher la perte de données.
  • Le bouton Fermer dans la barre de titre doit avoir le même effet que le bouton Annuler ou Fermer dans la boîte de dialogue. Ne lui donnez jamais le même effet qu’OK.
  • Si la légende et l’icône de la barre de titre sont déjà affichées en évidence près du haut de la fenêtre, vous pouvez masquer la légende et l’icône de la barre de titre pour éviter la redondance. Toutefois, vous devez encore définir un titre approprié en interne pour l’utilisation par Windows.

Interaction

  • Lorsqu’elles sont affichées, les boîtes de dialogue lancées par l’utilisateur doivent toujours prendre le focus d’entrée. Les boîtes de dialogue lancées par le programme ne doivent pas prendre le focus d’entrée, car il se peut que l’utilisateur interagisse avec une autre fenêtre. Une telle interaction mal redirigée dans la boîte de dialogue peut avoir des conséquences inattendues.

  • Affectez le focus d’entrée initial au contrôle avec lequel les utilisateurs sont le plus susceptibles d’interagir en premier, à savoir généralement (mais pas toujours) le premier contrôle interactif. Évitez d’affecter le focus d’entrée initial à un lien d’aide.

  • Pour la navigation au clavier, l’ordre des tabulations doit être logique, généralement de gauche à droite et de haut en bas. Généralement, l’ordre de tabulation suit l’ordre de lecture, mais les exceptions suivantes sont possibles :

    • Placez les contrôles les plus couramment utilisés plus tôt dans l’ordre de tabulation.
    • Placez les liens d’aide en bas d’une boîte de dialogue, après les boutons de validation dans l’ordre de tabulation.

    Lors de l’attribution de l’ordre, partez du principe que les utilisateurs affichent les boîtes de dialogue correspondant à leur intention ; autrement dit, par exemple, les utilisateurs affichent des boîtes de dialogue de choix pour faire des choix, et non pour passer en revue et cliquer sur Annuler.

  • Une pression sur la touche Échap ferme toujours une boîte de dialogue active. Cela est vrai pour les boîtes de dialogue avec Annuler ou Fermer, et même si l’option Annuler a été renommée Fermer, car les résultats ne peuvent plus être annulés.

Clés d’accès

  • Dans la mesure du possible, affectez des touches d’accès rapide uniques à tous les contrôles interactifs ou à leurs étiquettes. Les zones de texte en lecture seule sont des contrôles interactifs (car les utilisateurs peuvent les faire défiler et copier du texte) et peuvent donc tirer parti des touches d’accès rapide. N’attribuez pas de touche d’accès rapide aux éléments suivants :

    • Boutons OK, Annuler et Fermer. Entrée et Échap sont utilisées comme touches d’accès rapide pour ces options. En revanche, attribuez toujours une touche d’accès rapide à un contrôle qui signifie OK ou Annuler, mais a une étiquette différente.

      screen shot of delete file dialog box

      Dans cet exemple, le bouton de validation positive a une touche d’accès rapide affectée.

    • Étiquettes de groupe. Normalement, des touches d’accès rapide sont affectées aux contrôles individuels au sein d’un groupe. L’étiquette de groupe n’en a donc pas besoin. Toutefois, en cas de pénurie de touches d’accès rapide, affectez-en une à l’étiquette de groupe et non aux contrôles individuels.

    • Boutons d’aide générique, qui sont accessibles avec F1.

    • Étiquettes de lien. Il existe souvent trop de liens pour qu’il soit possible de leur affecter des touches d’accès rapide, et les traits de soulignement souvent utilisés pour dénoter les liens masquent les traits de soulignement des touches d’accès rapide. Accédez plutôt aux liens avec la touche Tab.

    • Noms des onglets. Les onglets se parcourent à l’aide de Ctrl+Tab et Ctrl+Maj+Tab.

    • Boutons Parcourir libellés « ... ». Il est impossible d’affecter de manière unique des touches d’accès rapide à ces boutons Parcourir.

    • Contrôles non étiquetés, tels que les contrôles de rotation, les boutons de commande graphique et les contrôles de divulgation progressive non étiquetés.

    • Texte statique non étiqueté ou étiquettes pour les contrôles qui ne sont pas interactifs, tels que les barres de progression.

  • Dans la mesure du possible, affectez des touches d’accès rapide aux commandes couramment utilisées conformément aux Affectations de touches d’accès rapide standard. Bien que l’affectation cohérente de touches d’accès rapide ne soit pas toujours possible, elles sont certainement préférables, en particulier pour les boîtes de dialogue fréquemment utilisées.

  • Affectez d’abord les touches d’accès rapide des boutons de validation, pour vous assurer qu’ils disposent des affectations de touches standard. S’il n’existe pas d’affectation de touche standard, utilisez la première lettre du premier mot. Par exemple, la touche d’accès rapide pour les boutons de validation Oui et Non doit toujours être « O » et « N », quels que soient les autres contrôles de la boîte de dialogue.

  • Pour que les touches d’accès rapide soient faciles à trouver, affectez-les à un caractère qui apparaît tôt dans l’étiquette, idéalement le premier caractère, même si un mot clé apparaît plus loin dans l’étiquette.

  • Préférez les caractères avec de grandes largeurs, telles que w, m et capitales.

  • Préférez une consonne distinctive ou une voyelle, telle que « q » dans Quitter.

  • Évitez d’utiliser des caractères qui rendent le soulignement difficile à voir, comme par exemple (du plus problématique au moins problématique) :

    • Lettres qui ne font qu’un pixel de large, comme i et l
    • Lettres avec jambages, comme g, j, p, q et y
    • Lettres situées à côté d’une lettre avec un jambage.

Pour obtenir plus d’instructions et des exemples, consultez Clavier.

Boîtes de dialogue de progression

Pour les tâches de longue durée, partez du principe que les utilisateurs feront autre chose pendant que la tâche s’exécute. Concevez la tâche pour qu’elle s’exécute sans assistance.

  • Présentez aux utilisateurs une boîte de dialogue de commentaires de progression si une opération prend plus de cinq secondes, ainsi qu’une commande pour annuler ou arrêter l’opération.
    • Exception : Pour les Assistants et les flux de tâches, utilisez une boîte de dialogue modale pour la progression uniquement si la tâche reste sur la même page (plutôt que d’avancer vers une autre page) et que les utilisateurs ne peuvent rien faire en attendant. Autrement, utilisez une page de progression ou une progression sur place.
  • Si l’opération est une tâche longue (plus de 30 secondes) et qu’elle peut être effectuée en arrière-plan, utilisez une boîte de dialogue de progression non modale afin que les utilisateurs puissent continuer à utiliser votre programme en attendant.
  • Les boîtes de dialogue de progression non modales :
    • Ont un bouton Réduire dans la barre de titre.
    • Sont affichées dans la barre des tâches.
  • Implémentez des boîtes de dialogue de progression non modales afin qu’elles continuent à s’exécuter même si la fenêtre propriétaire est fermée.

screen shot of copy dialog box with progress bar

Dans cet exemple, la copie de fichiers se poursuit même si la fenêtre propriétaire est fermée.

  • Fournissez un bouton de commande pour arrêter l’opération si elle prend plus de quelques secondes ou risque de ne jamais se terminer. Étiquetez le bouton Annuler si l’annulation rétablit l’environnement à son état précédent (sans effets secondaires) ; sinon, étiquetez le bouton Arrêter pour indiquer que cela laisse l’opération partiellement terminée intacte. Vous pouvez remplacer l’étiquette du bouton Annuler par Arrêter au milieu de l’opération, si à un moment donné il n’est pas possible de rétablir l’environnement à son état précédent.

screen shot of dialog box with cancel button

Dans cet exemple, l’arrêt du diagnostic du problème n’a aucun effet secondaire.

  • Fournissez un bouton de commande pour suspendre l’opération si elle prend plus de quelques minutes et qu’elle empêche les utilisateurs d’effectuer leur travail. Cela ne force pas l’utilisateur à choisir entre terminer la tâche et effectuer son travail.
  • Recueillez le plus d’informations possible avant de commencer la tâche.
  • Si des problèmes récupérables sont détectés, faites en sorte que les utilisateurs les gèrent à la fin de la tâche. Si ce n’est pas pratique, faites en sorte que les utilisateurs gèrent les problèmes à mesure qu’ils surviennent.
  • N’abandonnez pas les tâches en raison d’erreurs récupérables.

screen shot of dialog box with try again button

Dans cet exemple, l’Explorateur Windows permet aux utilisateurs de poursuivre la tâche après une erreur récupérable.

  • Indiquez les problèmes en colorant en rouge la barre de progression.

screen shot of progress bar and try again button

Dans cet exemple, un disque amovible a été retiré pendant une copie de fichier.

  • Si les résultats sont clairement apparents aux utilisateurs, fermez la boîte de dialogue de progression automatiquement lors de la réussite. Sinon, utilisez les commentaires uniquement pour signaler des problèmes :
    • Affichez les commentaires simples dans la boîte de dialogue de progression, et remplacez le bouton Annuler par Fermer.
    • Pour afficher des commentaires détaillés, fermez la boîte de dialogue de progression et affichez une boîte de dialogue d’information.

N’utilisez pas une notification pour les commentaires d’achèvement. Utilisez une boîte de dialogue de progression ou une notification de réussite d’action, mais pas les deux.

Temps restant

  • Utilisez les formats de temps suivants. Commencez par le premier des formats suivants où la plus grande unité de temps n’est pas égale à zéro, puis passez au format suivant une fois que l’unité de temps la plus grande devient égale à zéro.

Pour les barres de progression :

Si des informations connexes sont affichées au format deux-points :

Temps restant : h heures, m minutes

Temps restant : m minutes, s secondes

Temps restant : s secondes

Si l’espace d’écran est restreint :

h hrs, m mins restantes

m mins, s secs restantes

s secondes restantes

Autrement :

h heures, m minutes restantes

m minutes, s secondes restantes

s secondes restantes

Pour les barres de titre :

hh:mm restant

mm:ss restant

0:ss restant

Ce format compact affiche d’abord les informations les plus importantes, afin qu’elles ne soient pas tronquées dans la barre des tâches.

  • Faites en sorte que les estimations soient précises, mais ne donnez pas de fausse précision. Si les heures sont la plus grande unité, donnez une précision en minutes (si elles sont significatives), mais pas en secondes.

Incorrect :

hh heures, mm minutes, ss secondes

  • Tenez l’estimation à jour. Mettez à jour les estimations du temps restant au moins toutes les cinq secondes.
  • Concentrez-vous sur le temps restant , car c’est l’information qui intéresse le plus les utilisateurs. Indiquez le temps total écoulé uniquement lorsqu’il existe des scénarios où le temps écoulé est utile (par exemple, lorsque la tâche est susceptible d’être répétée). Si l’estimation du temps restant est associée à une barre de progression, n’incluez pas de texte sur le pourcentage effectué, car ces informations sont transmises par la barre de progression elle-même.
  • Soyez grammaticalement correct. Utilisez des unités au singulier lorsque le nombre est un.

Incorrect :

1 minutes 1 secondes

  • Utilisez la mise en majuscules comme pour une phrase ordinaire.

Pour obtenir plus d’informations et des exemples, consultez Barres de progression.

Icônes et graphismes

Graphismes

  • N’utilisez pas de grands graphismes qui ne servent à rien d’autre que remplir l’espace avec de jolis images. Conservez plutôt une apparence visuelle simple.

Incorrect :

screen shot of dialog box with a large graphic

Dans cet exemple, le grand graphisme ne sert à rien.

Icônes de barre de titre

  • Les boîtes de dialogue n’ont pas d’icônes de barre de titre.
    • Exception : Si une boîte de dialogue est utilisée pour implémenter une fenêtre principale (par exemple, un utilitaire) et qu’elle s’affiche donc dans la barre des tâches, elle a une icône de barre de titre.

Icônes de corps

  • Choisissez l’icône de corps en fonction du modèle de conception :
Modèle Icône de corps
Boîtes de dialogue d’interrogation
Icône de programme, fonctionnalité, objet, avertissement (si perte potentielle de données ou d’accès système), avertissement de sécurité ou aucune.
Boîtes de dialogue de choix
Aucune.
Boîtes de dialogue de progression
Aucune (mais peut avoir une animation).
Boîtes de dialogue d’information
Aucune.
  • Incorrect :

screen shot of dialog box with warning icon

Dans cet exemple, une icône d’avertissement est utilisée de manière incorrecte pour une question qui n’implique pas de perte potentielle de données ou d’accès au système.

  • Utilisez des icônes pour aider les utilisateurs à reconnaître visuellement les fonctionnalités de votre programme. Cette technique est la plus efficace lorsque les icônes sont facilement reconnaissables et utilisées dans plusieurs emplacements au sein de votre programme.

screen shot of favorites dialog box with star icon

Dans cet exemple, l’icône d’étoile jaune représente les Favoris. L’icône est facilement reconnaissable, et est utilisée de manière cohérente dans Windows pour représenter les Favoris.

  • Utilisez des icônes pour aider les utilisateurs à reconnaître l’objet en question.

screen shot of dialog box with powerpoint icon

Dans cet exemple, l’icône de l’objet aide les utilisateurs à reconnaître le type de fichier ouvert ou enregistré.

  • Utilisez des icônes pour vous aider à rendre les fonctionnalités explicites.

images of arrows showing how to position monitor

Dans cet exemple, ces icônes aident les utilisateurs à visualiser l’effet de leurs fonctionnalités.

  • Utilisez une icône dans les boîtes de dialogue À propos de pour la personnalisation de l’application.

screen shot of about dialog box with windows logo

Dans cet exemple, une bitmap est utilisée dans une boîte de dialogue À propos de pour identifier et personnaliser l’application.

Icônes de note de bas de page

  • Si vous avez une note de bas de page, pensez à utiliser une icône de note de bas de page pour en résumer le sujet.

screen shot of dialog box with footnote icon

Dans cet exemple, l’icône de note de bas de page indique que la question a des implications en matière de sécurité.

  • N’utilisez pas une icône de note de bas de page qui répète l’icône de corps.
  • N’utilisez pas les icônes d’erreur ou d’information standard. Les conditions d’erreur doivent être transmises via l’icône du corps, et les notes de bas de page sont toujours à but informatif, ce qui rend l’icône d’information redondante. Toutefois, vous pouvez utiliser l’icône d’avertissement standard et le bouclier de sécurité jaune pour alerter les utilisateurs des conséquences risquées.

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

Boutons de validation

Remarques :

  • Ces instructions ne s’appliquent pas aux boîtes de dialogue d’interrogation utilisant des liens de commande, car ce modèle utilise des liens de commande au lieu de boutons.
  • [Le faire] et [Ne pas le faire] sont respectivement des réponses affirmatives et négatives à l’instruction principale.

Général

  • Choisissez les boutons de validation en fonction du modèle de conception :
Étiquette Value
Modèle
Boutons de validation
Boîtes de dialogue d’interrogation (utilisant des boutons)
L’un des ensembles suivants de commandes concises : Oui/Non, Oui/Non/Annuler, [Le faire]/Annuler, [Le faire]/[Ne pas le faire], [Le faire]/[Ne pas le faire]/Annuler.
Boîtes de dialogue d’interrogation (utilisant des liens)
Annulation.
Boîtes de dialogue de choix
  • Boîtes de dialogue modales : OK/Annuler ou [Le faire]/Annuler
  • Boîtes de dialogue non modales : bouton Fermer dans la boîte de dialogue et la barre de titre
  • Volet des tâches : Bouton Fermer dans la barre de titre
Boîtes de dialogue de progression
Utilisez Annuler si retour à l’environnement dans son état précédent (sans effet secondaire) ; sinon, utilisez Arrêter.
Boîtes de dialogue d’information
C’est presque ça.
  • Tous les boutons de validation sauf Appliquer ont pour résultat la fermeture de la fenêtre de boîte de dialogue.

  • Ne confirmez pas les boutons de validation. Cela peut être inutilement ennuyeux. Exceptions :

    • L’action est potentiellement catastrophique.
    • L’action est clairement incohérente avec d’autres actions.
    • Si elle est incorrecte, l’action peut entraîner une perte importante de données, de temps ou d’efforts pour le compte de l’utilisateur.

    Pour obtenir plus d’instructions et des exemples, consultez Confirmations.

  • Ne désactivez pas les boutons de validation. Exceptions :

  • Alignez à droite les boutons de validation sur une même ligne en bas de la boîte de dialogue, mais au-dessus de la zone de note de bas de page. Effectuez cette opération même s’il existe un seul bouton de validation (par exemple, OK).

    Incorrect :

    screen shot of message with centered ok button

    Dans cet exemple, le bouton OK est centré de manière incorrecte.

  • Présentez les boutons de validation dans l’ordre suivant :

    1. OK/[Faire l’action]/Oui
    2. [Ne pas faire l’action]/Non
    3. Annuler
    4. Appliquer (si présent)
    5. Aide (si présent)
  • Si vous avez de nombreux boutons de validation associés, regroupez-les à l’aide de boutons partagés.

  • Séparez clairement les boutons de validation (qui ferment la fenêtre) et tous les autres boutons de commande (tels que Avancé).

Réponse aux instructions principales

  • Utilisez des boutons de validation positive qui sont des réponses spécifiques à l’instruction principale, au lieu d’étiquettes génériques telles qu’OK ou Oui/Non. Les utilisateurs doivent être en mesure de comprendre les options en lisant le texte du seul bouton. Exceptions :

    • Utilisez Fermer pour les boîtes de dialogue qui n’ont pas de paramètres, tels que les boîtes de dialogue d’information. N’utilisez jamais Fermer pour les boîtes de dialogue qui ont des paramètres.

    • Utilisez OK lorsque les réponses « spécifiques » sont toujours génériques, telles que Enregistrer, Sélectionner ou Choisir. Utilisez OK lors de la modification d’un paramètre spécifique ou d’une collection de paramètres.

    • Pour les boîtes de dialogue héritées sans instruction principale, vous pouvez utiliser des étiquettes génériques telles qu’OK. Souvent, ces boîtes de dialogue ne sont pas conçues pour effectuer une tâche spécifique, ce qui empêche des réponses plus spécifiques.

    • Certaines tâches nécessitent de la part des utilisateurs une lecture plus réfléchie et minutieuse afin de prendre des décisions éclairées. C’est généralement le cas avec les confirmations. Dans ce cas, vous pouvez utiliser expressément des étiquettes de bouton de validation génériques pour forcer les utilisateurs à lire les instructions principales et ainsi empêcher les décisions hâtives.

      Correct :

      screen shot of message with yes and no buttons

      Dans cet exemple, l’utilisation des boutons de validation Oui/Non force les utilisateurs à lire au moins l’instruction principale.

  • Vous pouvez également ajouter le mot « quand même » à l’étiquette du bouton de validation positive pour indiquer que la boîte de dialogue présente une raison de ne pas continuer et que les utilisateurs doivent lire attentivement la boîte de dialogue avant de continuer.

    Correct :

    screen shot of message and uninstall anyway button

    Dans cet exemple, « quand même » est ajouté à l’étiquette du bouton de validation pour indiquer que les utilisateurs doivent continuer avec caution.

  • Utilisez Annuler ou Fermer pour les boutons de validation négative au lieu de réponses spécifiques à l’instruction principale. Souvent, les utilisateurs se rendent compte qu’ils ne souhaitent pas effectuer une tâche une fois qu’ils voient une boîte de dialogue. Si l’option Annuler ou Fermer était ré-étiquetée avec une réponse spécifique, les utilisateurs devraient lire attentivement tous les boutons de validation pour déterminer comment annuler. Un étiquetage cohérent d’Annuler et Fermer facilite leur localisation. Exceptions :

    • N’utilisez pas Oui/Annuler. Utilisez toujours Oui/Non en tant que paire.
    • Utilisez une réponse spécifique lorsque l’option Annuler est ambiguë.
  • Ne mappez pas les étiquettes génériques à leur signification spécifique avec du texte dans la zone de contenu. Au lieu de cela, utilisez des étiquettes de bouton de validation spécifiques, ou une boîte de dialogue d’interrogation utilisant des liens si les étiquettes sont longues.

    Incorrect :

    screen shot of message with unclear use of buttons

    Dans cet exemple, OK est mappé à Continuer, Annuler est mappé à Rester sur la page.

Boutons Oui et Non

  • Préférez des réponses spécifiques aux boutons Oui et Non. Bien qu’il n’y ait rien de mal à utiliser Oui et Non, les réponses spécifiques peuvent être comprises plus rapidement, ce qui permet une prise de décision efficace. Toutefois, les confirmations ont généralement des boutons Oui et Non afin que les utilisateurs aient l’opportunité de réfléchir avant de répondre.

  • Utilisez les boutons Oui et Non uniquement pour répondre à des questions de type oui ou non. L’instruction principale doit être naturellement exprimée sous la forme d’une question fermée. N’utilisez jamais OK et Annuler pour des questions de type oui ou non.

    Incorrect :

    Screenshot that shows a message with an 'OK' for a yes-no question.

    Correct :

    screen shot of message with yes for same question

    Meilleur :

    screen shot of message with run for same question

    Dans ces exemples, Oui et Non sont de bonnes réponses à des questions fermées, mais des réponses spécifiques sont encore mieux.

  • Formulez l’instruction principale en tant que question fermée si les boutons de validation avec des formulations spécifiques s’avèrent longs ou maladroits. Vous pouvez également utiliser des liens de commande pour des réponses plus longues (cinq mots ou plus) à l’instruction principale.

    Incorrect :

    screen shot of message with wordy button labels

    Correct :

    screen shot of message with yes/no button labels

    La formulation spécifique dans l’exemple incorrect est trop longue ; l’exemple correct utilise donc Oui et Non.

  • N’utilisez pas les boutons Oui et Non si la signification de la réponse Non n’est pas claire. Si c’est le cas, utilisez plutôt des réponses spécifiques.

Boutons OK

  • Dans les boîtes de dialogue modales, un clic sur OK signifie qu’il faut appliquer les valeurs, effectuer la tâche et fermer la fenêtre.

  • N’utilisez pas de boutons OK pour répondre à des questions.

  • N’affectez pas de touche d’accès rapide à OK, car Entrée est la touche d’accès rapide du bouton par défaut. Cela facilite l’affectation des autres touches d’accès rapide.

  • Étiquetez correctement les boutons OK. Le bouton OK doit être étiqueté OK, pas Ok ou Okay.

  • N’utilisez pas de boutons OK pour les erreurs ou les avertissements. Les problèmes ne sont jamais OK. Utilisez Fermer à la place.

    Incorrect :

    screen shot of message with ok button

    Dans cet exemple, Fermer doit être utilisé au lieu d’OK.

  • N’utilisez pas de boutons OK dans les boîtes de dialogue non modales. Au lieu de cela, les boîtes de dialogue non modales doivent utiliser des boutons de validation propres à la tâche (par exemple, Rechercher). Toutefois, certaines boîtes de dialogue non modales nécessitent uniquement un bouton Fermer.

Boutons Annuler

  • Un clic sur Annuler signifie qu’il faut abandonner toutes les modifications, annuler la tâche, fermer la fenêtre et ramener l’environnement à son état précédent, sans effet secondaire. Pour les boîtes de dialogue de choix imbriquées, un clic sur Annuler dans la boîte de dialogue de choix propriétaire signifie que les modifications apportées par les boîtes de dialogue de choix détenus sont également abandonnées.

  • Fournissez un bouton Annuler pour permettre aux utilisateurs d’abandonner explicitement les modifications. Les boîtes de dialogue ont besoin d’un point de sortie clair. Ne vous fiez pas au fait que les utilisateurs rechercheront le bouton Fermer dans la barre de titre.

    • Exception : Ne fournissez pas de bouton Annuler pour les boîtes de dialogue sans paramètres. Dans ce cas, les boutons OK et Fermer ont le même effet qu’Annuler.

    Incorrect :

    screen shot of message with ok button only

    Dans cet exemple, le fait d’avoir uniquement un bouton Fermer dans la barre de titre donne aux utilisateurs l’impression qu’ils n’ont pas le choix.

  • N’utilisez pas de boutons Annuler pour répondre à des questions.

    Incorrect :

    screen shot of message with ok for yes-no question

    Dans cet exemple, OK et Cancel sont utilisés de manière incorrecte pour répondre à une question Oui ou Non.

  • N’affectez pas de touche d’accès rapide à Annuler, car Échap est sa touche d’accès rapide. Cela facilite l’affectation des autres touches d’accès rapide.

  • N’utilisez pas de boutons Annuler dans les boîtes de dialogue non modales. Utilisez plutôt Fermer.

  • Ne désactivez pas le bouton Annuler. Les utilisateurs doivent toujours être en mesure d’annuler les boîtes de dialogue.

    • Exception : Vous pouvez désactiver le bouton Annuler dans une boîte de dialogue de progression s’il existe une période pendant laquelle l’opération ne peut pas être annulée. Toutefois, une meilleure solution consiste à concevoir de telles opérations afin qu’elles soient toujours annulables.

Boutons Fermer

  • Utilisez les boutons Fermer pour les boîtes de dialogue non modales, ainsi que pour les boîtes de dialogue modales qui ne peuvent pas être annulées.
  • Un clic sur Fermer signifie qu’il faut fermer la fenêtre de boîte de dialogue en conservant les effets secondaires existants. N’utilisez pas Terminé, car ce n’est pas une construction impérative. Pour les boîtes de dialogue de choix imbriquées, un clic sur Fermer dans la boîte de dialogue de choix propriétaire signifie que les modifications apportées par les boîtes de dialogue de choix détenus sont conservées.
  • Placez un bouton Fermer explicite dans le corps de la boîte de dialogue. Les boîtes de dialogue ont besoin d’un point de sortie clair. Ne vous fiez pas au fait que les utilisateurs rechercheront le bouton Fermer dans la barre de titre.
  • Vérifiez que le bouton Fermer dans la barre de titre a le même effet qu’Annuler ou Fermer.
  • N’affectez pas de touche d’accès rapide à Fermer, car Échap est sa touche d’accès rapide. Cela facilite l’affectation des autres touches d’accès rapide.

Boutons Appliquer

  • N’utilisez pas de bouton Appliquer dans les boîtes de dialogue qui ne sont pas des feuilles de propriétés ou des panneaux de contrôle. Le bouton Appliquer signifie qu’il faut appliquer les modifications en attente, mais laisser la fenêtre ouverte. Les utilisateurs peuvent ainsi évaluer les modifications avant de fermer la fenêtre. Toutefois, seules les feuilles de propriétés et les panneaux de contrôle ont ce besoin.

    Incorrect :

    screen shot of dialog box with apply button

    Dans cet exemple, une boîte de dialogue de choix a un bouton Appliquer inutile.

Boutons de validation pour les boîtes de dialogue indirectes

Remarque : Les boîtes de dialogue indirectes sont affichées hors contexte, soit en tant que résultat indirect d’une tâche, soit en tant que résultat d’un problème avec un processus système ou en arrière-plan. Pour les boîtes de dialogue indirectes, le bouton Annuler est ambigu, car il pourrait signifier annuler la boîte de dialogue ou annuler l’intégralité de la tâche.

  • Si les utilisateurs doivent annuler la boîte de dialogue et la tâche, incluez des boutons de validation pour effectuer les deux opérations. Étiquetez le bouton qui annule la boîte de dialogue avec une réponse négative à l’instruction principale. Étiquetez « Annuler » le bouton qui annule l’intégralité de la tâche. L’utilisation d’Annuler permet à la boîte de dialogue d’être utilisée dans de nombreux contextes.

    Correct :

    screen shot of dialog box with save/don't save

    Dans cet exemple, cette boîte de dialogue est affichée par Windows Paint suite à une commande Nouveau ou Quitter lorsque le graphisme n’a pas été enregistré. Ne pas enregistrer ferme pas la boîte de dialogue sans enregistrer, tandis qu’Annuler annule la commande Nouveau ou Quitter.

    Incorrect :

    screen shot of dialog box with yes/no buttons

    Dans cet exemple, il n’existe aucun moyen d’annuler la tâche (fermant la barre de raccourcis Office) qui a conduit à l’affichage de cette boîte de dialogue. Cette boîte de dialogue a besoin d’un bouton Annuler.

  • Si les utilisateurs ont simplement besoin d’annuler la boîte de dialogue, mais pas la tâche, utilisez un bouton avec une réponse négative spécifique à l’instruction principale, et n’incluez pas de bouton Annuler.

    screen shot of dialog box with run/don't run

    Dans cet exemple, cette boîte de dialogue est affichée indirectement suite à la navigation vers une page web qui installe un contrôle ActiveX. L’utilisation d’Annuler serait ici ambiguë. Ne pas exécuter est donc utilisé à la place.

Pour obtenir plus d’informations et des exemples, consultez Boutons de commande.

  • Présentez un ensemble de commandes longues à l’aide de liens de commandes, plutôt qu’avec des boutons de commande ou une combinaison de cases d’option et d’un bouton OK. Cela permet aux utilisateurs de répondre en un seul clic. Toutefois, cette approche ne fonctionne que pour une question unique.
  • Présentez d’abord les liens de commande les plus couramment utilisés. L’ordre résultant doit à peu près suivre la probabilité d’utilisation, mais également avoir un flux logique.
    • Exception : Les liens de commande qui entraînent l’exécution de tout doivent être placés en premier.
  • Si un lien de commande nécessite une explication complémentaire, fournissez-en une. Les explications complémentaires décrivent pourquoi les utilisateurs sont susceptibles de choisir la commande, ou ce qui se produit si la commande est choisie.
  • N’utilisez pas d’explications complémentaires qui sont des ré-énonciations alambiquées du lien de commande. Utilisez une explication complémentaire uniquement lorsque vous ne pouvez pas créer un lien de commande explicite. Fournir une explication complémentaire pour un lien de commande ne signifie pas que vous devez en fournir une pour toutes les commandes.

screen shot of dialog box with text noting options

Dans cet exemple, l’explication complémentaire décrit les implications de l’une des options.

  • Utilisez des phrases qui commencent par un verbe, sans ponctuation finale.
  • Si une commande est fortement recommandée, ajoutez « (recommandé) » à l’étiquette. Veillez à ajouter cette mention à l’étiquette de lien, et non à l’explication complémentaire.
  • Si une commande est destinée uniquement aux utilisateurs avancés, ajoutez « (avancé) » à l’étiquette. Veillez à ajouter cette mention à l’étiquette de lien, et non à l’explication complémentaire.
  • Fournissez toujours un bouton Annuler explicite. N’utilisez pas un lien de commande à cet effet.

Incorrect :

screen shot of dialog box with don't exit link

Dans cet exemple, la boîte de dialogue utilise un lien de commande au lieu d’un bouton Annuler.

Pour obtenir plus d’informations et des exemples, consultez Liens de commande.

Ne plus afficher ce <élément>

  • Envisagez d’utiliser une option Ne plus afficher ce <élément> pour permettre aux utilisateurs de faire disparaître une boîte de dialogue récurrente, uniquement s’il n’existe pas de meilleure alternative. Il est préférable de toujours afficher la boîte de dialogue si les utilisateurs en ont vraiment besoin, ou de simplement l’éliminer dans le cas contraire.
  • Utilisez cette formulation spécifique, en remplaçant <élément> par l’élément spécifique. Par exemple, Ne plus afficher ce rappel. Lorsque vous faites référence à une boîte de dialogue en général, utiliser Ne plus afficher ce message.
  • Indiquez clairement quand l’entrée utilisateur sera utilisée pour les futures valeurs par défaut en ajoutant la phrase suivante sous l’option : Vos sélections seront utilisées par défaut à l’avenir.
  • Ne sélectionnez pas l’option par défaut. Si la boîte de dialogue doit vraiment être affichée une seule fois, faites-le sans demander. N’utilisez pas cette option comme excuse pour gêner les utilisateurs. Veillez à ce que le comportement par défaut ne soit pas ennuyeux.

Incorrect :

screen shot of message asking unnecessary question

Dans cet exemple, le message ne doit être affiché qu’une seule fois. Il n’est pas nécessaire de demander.

  • Rendez le paramètre persistant pour chaque utilisateur.
  • Si les utilisateurs sélectionnent l’option et cliquent sur Annuler, cette option prend effet. Ce paramètre est une méta-option. Il ne suit donc pas le comportement d’annulation standard qui consiste à ne laisser aucun effet secondaire. Notez que si les utilisateurs ne veulent pas voir la boîte de dialogue à l’avenir, ils souhaiteront probablement également l’annuler.
  • Si les utilisateurs peuvent avoir besoin de restaurer ces boîtes de dialogue, fournissez une commande Restaurer les messages dans la boîte de dialogue Options du programme.

Me redemander ultérieurement

  • Fournissez cette option pour faire disparaître une boîte de dialogue uniquement lorsque :
    • La boîte de dialogue est indirecte, de sorte qu’il est probable que les utilisateurs soient concentrés sur une autre tâche.
    • Les utilisateurs doivent répondre, mais pas immédiatement, afin qu’ils puissent poursuivre leur travail.
    • La question nécessite une réflexion ou un effort suffisant, de sorte que les utilisateurs puissent prendre de meilleures décisions s’ils ont davantage de temps.
    • La boîte de dialogue ou l’option sera présentée automatiquement ultérieurement (afin que les utilisateurs soient vraiment invités ultérieurement à fournir une réponse).
  • Incorrect :
  • screen shot of message with ask me later option
  • Dans cet exemple, la question est assez simple ; l’ajout d’une option Me demander ultérieurement ne fait que la compliquer.
  • Autrement, attendez-vous à ce que les utilisateurs répondent maintenant, mais autorisez-les à fermer la boîte de dialogue normalement avec Annuler ou Fermer. Lorsqu’elle est utilisée correctement, cette option doit être rare.

Plus/moins

  • Utilisez des boutons de divulgation progressive Plus/Moins pour afficher ou masquer des options, commandes ou détails avancés ou rarement utilisés dont les utilisateurs cibles n’ont généralement pas besoin. Cela simplifie la boîte de dialogue pour une utilisation classique. Ne masquez pas les options, commandes ou informations couramment utilisées, car les utilisateurs risquent de ne pas les trouver.

screen shot of dialog box with more options button

Dans cet exemple, les options rarement utilisées sont masquées par défaut.

  • N’utilisez pas de contrôles Plus/Moins, sauf s’il y a vraiment davantage de détails à afficher. Ne faites pas que répéter les mêmes informations sous une autre forme.
  • N’utilisez pas de contrôles Plus/Moins pour afficher l’aide. Utilisez plutôt des liens d’aide ou des notes de bas de page.
  • Avec les boîtes de dialogue de tâche, évitez de combiner des contrôles Plus/Moins avec Ne plus afficher ce <élément>. Cette combinaison a une apparence maladroite.
  • Pour obtenir des instructions d’étiquetage, consultez Divulgation progressive.

Notes de bas de page

  • Utilisez des notes de bas de page pour les informations qui ne sont pas essentielles à l’objectif d’une boîte de dialogue, mais que les utilisateurs peuvent trouver utiles pour prendre des décisions. La plupart des utilisateurs doivent pouvoir ignorer les notes de bas de page et quand même prendre des décisions éclairées dans leur réponse à la boîte de dialogue.

screen shot of dialog box with clarifying footnote

Dans cet exemple, les informations de note de bas de page sont complémentaires, et non essentielles.

Comparaison entre la désactivation ou suppression de contrôles et l’envoi de messages d’erreur

  • Lorsqu’un contrôle ne s’applique pas dans le contexte actuel, pensez aux options suivantes :
    • Supprimez le contrôle lorsqu’il n’existe aucun moyen pour les utilisateurs de l’activer, ou lorsque les utilisateurs ne s’attendent pas à ce qu’il s’applique et que son état ne change pas fréquemment. Cela simplifie la boîte de dialogue, et les utilisateurs ne risquent pas de le manquer. Un contrôle qui apparaît et disparaît fréquemment est ennuyeux.
    • Désactivez le contrôle lorsque les utilisateurs s’attendent à ce qu’il s’applique ou que son état change fréquemment, et lorsque les utilisateurs peuvent facilement déduire pourquoi le contrôle est désactivé. Un exemple de déduction simple est la désactivation d’un bouton de validation lorsqu’il existe une zone de texte vide unique qui nécessite une entrée. Vous pouvez utiliser des bulles pour afficher des problèmes d’entrée utilisateur non critiques avec des zones de texte et des listes déroulantes modifiables. Toutefois, si le problème ne peut pas être expliqué avec une bulle ou s’il implique plusieurs contrôles, la déduction ne sera plus aisée.
    • Autrement, laissez le contrôle activé, mais fournissez un message d’erreur lorsqu’il est utilisé de manière incorrecte. Avec une désactivation dans ce cas, il est difficile pour les utilisateurs de comprendre pourquoi le contrôle est désactivé. Les utilisateurs seraient obligés de déterminer le problème par le biais de l’expérimentation et de la logique déductive. Il est préférable de fournir un message d’erreur utile pour expliquer le problème explicitement.
  • Conseil : Si vous ne savez pas si vous devez désactiver un contrôle ou fournir un message d’erreur, commencez par composer le message d’erreur que vous pourriez fournir. Si le message d’erreur contient des informations utiles que les utilisateurs cibles ne sont pas susceptibles de déduire rapidement, laissez le contrôle activé et affichez l’erreur. Sinon, désactivez le contrôle.
  • Si vous désactivez un contrôle, désactivez également tous les contrôles associés, tels que son étiquette, ses explications complémentaires ou ses boutons de commande. Toutefois, ne désactivez pas ses zones de groupe, son étiquette de groupe ou son explication de groupe s’il y en a.

screen shot of dialog box with dimmed controls

Dans cet exemple, les étiquettes de la zone de texte désactivée sont également désactivées, mais leur étiquette de groupe et leur explication de groupe ne le sont pas.

Entrée requise

  • Pour indiquer que les utilisateurs doivent fournir des informations dans un contrôle, considérez les options suivantes :

    • N’indiquez rien, mais gérez les entrées requises manquantes avec des messages d’erreur. Cette approche réduit l’encombrement et fonctionne bien si la plupart des entrées sont facultatives ou si les utilisateurs ne sont pas susceptibles d’ignorer les contrôles, ce qui permet de réduire le nombre de messages d’erreur.

    • Indiquez l’entrée requise en plaçant un astérisque au début de l’étiquette. Expliquez l’astérisque à l’aide de l’un ou l’autre des éléments suivants :

      • Note de bas de page en bas de la zone de contenu qui indique *Entrée requise.
      • Info-bulle sur l’astérisque indiquant Entrée requise.

      Cette approche fonctionne bien s’il n’y a pas beaucoup de contrôles obligatoires, mais mal si la plupart des contrôles sont obligatoires.

      screen shot of text box labels with asterisks

      Dans cet exemple, des astérisques sont utilisés pour indiquer l’entrée requise.

    • Si tous les contrôles nécessitent une entrée, indiquez « Toutes les entrées sont requises » à un emplacement approprié en haut de la zone de contenu. Cette approche réduit l’encombrement pour ce cas spécifique.

    • Indiquez quelles entrées sont facultatives en plaçant la mention « (facultatif) » après l’étiquette. Cette approche fonctionne bien si la plupart des entrées sont requises, mais mal dans le cas contraire.

  • Pour des raisons de cohérence, essayez d’appliquer la même méthode d’indication des entrées requises dans tout votre programme. Plus précisément, indiquez l’entrée obligatoire ou facultative selon les besoins, mais évitez d’utiliser les deux dans le même programme.

Gestion des erreurs

  • Empêchez les erreurs en utilisant des contrôles contraints à une entrée utilisateur valide. Vous pouvez également réduire le nombre d’erreurs en fournissant des valeurs par défaut raisonnables.

  • Validez l’entrée utilisateur le plus tôt possible, et affichez les erreurs le plus proche possible du point d’entrée.

  • Utilisez la gestion des erreurs sans mode (erreurs ou bulles sur place) pour les problèmes d’entrée utilisateur.

    • Utilisez des bulles pour les problèmes d’entrée utilisateur non critiques et à point unique détectés dans une zone de texte ou immédiatement après qu’une zone de texte a perdu le focus. Les bulles ne nécessitent pas d’espace d’écran disponible, ni la disposition dynamique requise pour afficher les messages sur place. Affichez une seule bulle à la fois. Étant donné que le problème n’est pas critique, aucune icône d’erreur n’est nécessaire. Les bulles disparaissent en cas de clic, lorsque le problème est résolu ou après un délai d’expiration.

      screen shot of 'incorrect character' message

      Dans cet exemple, une bulle indique un problème d’entrée pendant que le contrôle a encore le focus.

  • Utilisez des erreurs sur place pour la détection différée des erreurs, généralement des erreurs trouvées en cliquant sur un bouton de validation. (N’utilisez pas d’erreurs sur place pour les paramètres qui sont immédiatement validés.) Il peut y avoir plusieurs erreurs sur place à la fois. Utilisez du texte normal et une icône d’erreur de 16 x 16 pixels, en les plaçant directement à côté du problème dans la mesure du possible. Les erreurs sur place ne disparaissent pas, sauf si l’utilisateur valide et qu’aucune autre erreur n’est trouvée.

    screen shot of dialog box with two error messages

    Dans cet exemple, une erreur sur place est utilisée pour une erreur trouvée en cliquant sur le bouton de validation.

  • Utilisez la gestion des erreurs modales (boîtes de dialogue de tâche ou boîtes de message) pour tous les autres problèmes, y compris les erreurs impliquant plusieurs contrôles, ou les erreurs non contextuelles ou non-entrée trouvées en cliquant sur un bouton de validation.

  • Lorsqu’un problème d’entrée est détecté et signalé, définissez le focus d’entrée sur le premier contrôle avec les données incorrectes. Faites défiler le contrôle pour l’afficher si nécessaire.

Pour obtenir plus d’informations et des exemples, consultez Messages d’erreur et Bulles.

Aide

  • Lorsque vous fournissez de l’aide à l’utilisateur, tenez compte des options suivantes (répertoriées par ordre de préférence) :

    • Donnez aux contrôles interactifs des étiquettes explicites. Les utilisateurs sont plus susceptibles de lire les étiquettes sur les contrôles interactifs que tout autre texte.
    • Fournissez des explications contextuelles à l’aide d’étiquettes de texte statique.
    • Fournissez un lien d’aide spécifique vers une rubrique d’aide pertinente.
  • Placez les liens d’aide en bas de la zone de contenu de la boîte de dialogue. Si la boîte de dialogue comporte une note de bas de page et que le lien d’aide lui est associé, placez le lien d’aide dans la note de bas de page.

    screen shot of dialog box with help link

    Dans cet exemple, le lien d’aide s’applique à l’intégralité de la boîte de dialogue.

    • Exception : Si une boîte de dialogue comporte plusieurs groupes distincts de paramètres qui ont des rubriques d’aide distinctes (peut-être dans des zones de groupe), placez les liens d’aide en bas des groupes.
  • N’utilisez pas de liens de rubriques d’aide généraux ou vagues, ni des boutons d’aide générique. Les utilisateurs ignorent souvent l’aide générique.

Pour obtenir plus d’informations et des exemples, consultez Aide.

Valeurs par défaut

  • Incluez un bouton de validation par défaut dans chaque boîte de dialogue.
  • Pour les boîtes de dialogue d’interrogation :
    • Sélectionnez comme réponse par défaut celle qui est la plus sûre (pour éviter la perte de données ou d’accès au système). Si la sécurité n’est pas un facteur, sélectionnez la réponse la plus probable ou la plus pratique.
      • Exception : Ne choisissez pas une réponse destructrice comme réponse par défaut, sauf s’il existe un moyen simple et évident d’annuler la commande.
  • Pour les boîtes de dialogue de choix :
    • Pour les valeurs par défaut initiales, sélectionnez les valeurs les plus sûres (pour éviter la perte de données ou d’accès au système) pour chaque contrôle. Si la sécurité n’est pas un facteur, sélectionnez les options les plus probables ou les plus pratiques.
    • Pour les valeurs par défaut suivantes, resélectionnez les options précédemment sélectionnées si ces valeurs sont susceptibles d’être répétées, et que cela est sans risque. Autrement, sélectionnez les valeurs par défaut initiales.

screen shot of print dialog box

Dans cet exemple, les utilisateurs sont susceptibles de choisir les mêmes paramètres d’impression que la dernière fois. Toutefois, le nombre de copies souhaitées est susceptible de changer ; ce paramètre n’est donc pas resélectionné.

  • Prenez en charge la résolution minimale d’écran Windows Vista de 800 x 600 pixels. Les dispositions peuvent être optimisées pour les fenêtres redimensionnables à l’aide d’une résolution d’écran de 1024 x 768 pixels.
  • Utilisez des fenêtres redimensionnables chaque fois que cela est pratique, afin d’éviter les barres de défilement et les données tronquées. Les fenêtres avec du contenu dynamique et des listes profiteront le plus des fenêtres redimensionnables.
  • Les fenêtres de taille fixe doivent être entièrement visibles, et dimensionnées pour s’ajuster à la zone de travail.
  • Les fenêtres redimensionnables peuvent être optimisées pour des résolutions plus élevées, mais dimensionnées vers le bas en fonction des besoins au moment de l’affichage sur la résolution d’écran réelle.
  • Choisissez une taille de fenêtre par défaut adaptée à son contenu. N’ayez pas peur d’utiliser des tailles de fenêtre initiales plus grandes si vous pouvez utiliser l’espace efficacement.

Texte

Général

  • Supprimez le texte redondant. Recherchez le texte redondant dans les titres, les instructions principales, les instructions complémentaires, les zones de contenu, les liens de commande et les boutons de validation. En règle générale, laissez le texte intégral dans les instructions et les contrôles interactifs, et supprimez toute redondance des autres emplacements.
  • Utilisez des formulations positives. Elles sont plus faciles à comprendre pour les utilisateurs.

Correct :

Voulez-vous activer le partage de fichiers et d’imprimantes ?

Incorrect :

Voulez-vous désactiver le partage de fichiers et d’imprimantes ?

Toutefois, la formulation doit correspondre à la commande associée, même si la commande est négativement formulée. Par exemple, utilisez le terme « désactiver » pour confirmer une commande Désactiver.

  • Si nécessaire, utilisez le mot « fenêtre » pour faire référence à la boîte de dialogue elle-même.
  • Utilisez la deuxième personne du pluriel (« vous/votre ») pour indiquer aux utilisateurs ce qu’il faut faire dans la zone d’instruction principale et de contenu. Souvent, la deuxième personne est implicite.

Exemples :

Choisissez les images que vous souhaitez imprimer

Choisir un compte

  • Utilisez la première personne (« Je/moi/mon ») pour permettre aux utilisateurs d’indiquer au programme ce qu’il faut faire dans les contrôles de la zone de contenu qui répondent à l’instruction principale.

Exemple : Imprimer les photos sur mon appareil photo.

Titres des boîtes de dialogue

  • Utilisez le titre pour identifier la commande, la fonctionnalité ou le programme d’où provient une boîte de dialogue.
    • Si la boîte de dialogue est lancée par l’utilisateur, identifiez-la à l’aide du nom de la commande ou de la fonctionnalité. Exceptions :
      • Si une boîte de dialogue est affichée par de nombreuses commandes différentes, utilisez plutôt le nom du programme.
      • Si ce titre est redondant avec l’instruction principale, utilisez plutôt le nom du programme.
    • Si une boîte de dialogue est lancée par un programme ou un système (et donc hors contexte), identifiez-la à l’aide du nom du programme ou de la fonctionnalité afin de donner un contexte.
    • N’utilisez pas le titre pour expliquer ce qu’il faut faire dans la boîte de dialogue ; l’instruction principale est là pour cela.
  • Utilisez le nom de commande exact pour les noms basés sur une commande, mais n’incluez pas les points de suspension s’il y en a. Vous pouvez inclure le titre du menu de la commande si nécessaire pour composer un bon titre. Exemple : Pour une commande Objet... dans un menu Insertion, utilisez le titre Insérer un objet.
  • Si une boîte de dialogue non modale s’affiche dans la barre des tâches, optimisez le titre pour un affichage sur la barre des tâches en plaçant en premier les informations distinctives. Exemples : « 66 % terminé » et « 3 rappels ».
  • N’incluez pas les mots « boîte de dialogue » ou « progression » dans le titre. Ceci est implicite, et l’absence de ces termes rend le tout plus clair pour les utilisateurs.
  • Utilisez la mise en majuscules de style titre, sans ponctuation finale.

Instructions principales

  • Utilisez l’instruction principale pour expliquer de manière concise ce qu’il faut faire dans la boîte de dialogue. L’instruction peut prendre la forme d’une déclaration spécifique, d’une consigne précise ou d’une question. De bonnes instructions communiquent l’objectif de l’utilisateur avec la boîte de dialogue, plutôt que de se concentrer uniquement sur la mécanique de la manipulation.
  • Omettez l’instruction principale lorsque la seule chose que vous pouvez dire est évidente. Dans ce cas, le contenu de la boîte de dialogue est explicite. Par exemple, les boîtes de dialogue communes Ouvrir un fichier et Enregistrer le fichier n’ont pas besoin d’une instruction principale, car leur contexte et leur conception rendent leur objectif évident.
  • N’utilisez pas d’étiquettes de contrôle qui répètent l’instruction principale. Dans ce cas, l’instruction principale prend la clé d’accès.

Acceptable :

screen shot of text box with redundant label

Dans cet exemple, l’étiquette de la zone de texte n’est qu’une répétition de l’instruction principale.

Meilleur :

screen shot of same text box with one label

Dans cet exemple, l’étiquette redondante est supprimée, de sorte que l’instruction principale utilise la clé d’accès.

  • Soyez concis et utilisez uniquement une seule phrase complète. Réduisez l’instruction principale aux informations essentielles. Si vous devez expliquer autre chose, utilisez des instructions complémentaires.
  • Utilisez des verbes spécifiques chaque fois que cela est possible. Les verbes spécifiques (exemples : connecter, enregistrer, installer) sont plus significatifs pour les utilisateurs que les verbes génériques (exemples : configurer, gérer, définir).
  • Utilisez la mise en majuscules de style phrase.
  • N’incluez pas de point final si l’instruction est une instruction. Si l’instruction est une question, il faut la conclure par un point d’interrogation.
  • Pour les boîtes de dialogue de progression, utilisez une phrase au gérondif qui explique brièvement l’opération en cours et qui se termine par des points de suspension. Exemple : Impression de vos photos...
  • Conseil : Vous pouvez évaluer une instruction principale en imaginant ce que vous diriez à un ami. Si la réponse à l’instruction principale n’est pas naturelle, n’est pas utile ou est difficile à comprendre, reformulez l’instruction.

Instructions complémentaires

  • Si nécessaire, utilisez une instruction complémentaire facultative pour présenter des informations supplémentaires utiles à la compréhension ou à l’utilisation de la page. Vous pouvez fournir des informations plus détaillées et définir la terminologie.
  • Si l’apparence de la boîte de dialogue est lancée par le programme ou le système (et par conséquent hors contexte), utilisez l’instruction complémentaire afin d’expliquer pourquoi elle est apparue. Pour ces boîtes de dialogue, le contexte n’est généralement pas évident.
  • Ne répétez pas l’instruction principale avec une formulation légèrement différente. Au lieu de cela, omettez l’instruction complémentaire s’il n’y a rien de plus à ajouter.
  • Utilisez des phrases complètes, une mise en majuscules de style phrase et une ponctuation finale.
  • Choisissez un texte de lien concis qui communique clairement et différencie ce que fait le lien de commande. Il doit être explicite et correspondre à l’instruction principale. Les utilisateurs ne doivent pas avoir à se demander la véritable fonction d’un lien ou ce qui le différencie des autres.
  • Faites toujours commencer les liens de commande par un verbe.
  • Utilisez la mise en majuscules comme pour les phrases.
  • N’utilisez pas de ponctuation finale.
  • Si nécessaire, fournissez une explication supplémentaire à l’aide de phrases complètes et de ponctuation finale. Toutefois, ajoutez ces explications uniquement si nécessaire. N’ajoutez pas d’explications à tous les liens de commande simplement parce qu’un lien de commande en a besoin.

Pour obtenir plus d’informations et des exemples, consultez les instructions relatives au Lien de commande.

Boutons de validation

  • Utilisez des étiquettes de bouton de validation spécifiques qui ont du sens en eux-mêmes et qui sont une réponse à l’instruction principale. Idéalement, les utilisateurs ne devraient pas avoir à lire davantage pour comprendre l’étiquette. Les utilisateurs sont beaucoup plus susceptibles de lire des étiquettes de bouton de commande que du texte statique.
  • Faites commencer les étiquettes de bouton de validation par un verbe. Les exceptions sont OK, Oui et Non.
  • Utilisez la mise en majuscules comme pour les phrases.
  • N’utilisez pas de ponctuation finale.
  • Affectez une touche d’accès rapide unique.
    • Exception : N’affectez pas de touche d’accès rapide aux boutons OK et Annuler, car Entrée et Échap sont leurs touches d’accès rapide. Cela facilite l’affectation des autres touches d’accès rapide.

Documentation

Lorsque vous faites référence à des boîtes de dialogue :

  • Dans la documentation de programmation et autre documentation technique, employez le terme « boîte de dialogue » pour faire référence aux boîtes de dialogue. Partout ailleurs, faites référence aux boîtes de dialogue par leur titre. Si la barre de titre est masquée, faites référence à la boîte de dialogue à l’aide de l’instruction principale.
  • Si vous devez faire référence à une boîte de dialogue en général, employez le terme « fenêtre » dans la documentation utilisateur. Vous pouvez employer le terme « message » pour faire référence à une boîte de dialogue d’interrogation simple ou à une confirmation.
  • Utilisez le titre exact ou le texte d’instruction principale, y compris sa mise en majuscules.
  • Dans la mesure du possible, mettez en forme le titre en gras. Autrement, placez le titre entre guillemets uniquement si c’est nécessaire pour éviter toute confusion.

Exemple : Dans Sécurité Windows, cliquez sur Autres options.