Bulles

Notes

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

Un ballon est une petite fenêtre contextuelle qui informe les utilisateurs d’un problème non critique ou d’une condition spéciale dans un contrôle.

Ballon typique.

Les bulles ont une icône, un titre et un corps de texte, qui sont tous facultatifs. Contrairement aux info-bulles et aux info-bulles, les bulles ont également une fin qui identifie leur source. Généralement, la source est un contrôle si c’est le cas, il est appelé contrôle propriétaire.

Bien que les bulles informent les utilisateurs des problèmes non critiques, elles n’empêchent pas les problèmes, bien que le contrôle du propriétaire puisse. Tous les problèmes non gérés doivent être gérés par l’interface utilisateur du propriétaire lorsque les utilisateurs tentent de valider l’action.

Les bulles sont généralement utilisées avec des zones de texte ou des contrôles qui utilisent des zones de texte pour modifier des valeurs, comme les zones de liste déroulante, les affichages de liste et les arborescences. D’autres types de contrôles sont suffisamment bien limités et n’ont pas besoin de ballons de rétroaction supplémentaires. En outre, s’il y a un problème avec d’autres types de contrôles, cela implique souvent une incohérence entre plusieurs contrôles dans une situation pour laquelle les bulles ne sont pas adaptées. Seuls les contrôles de saisie de texte sont à la fois sans contrainte et une source courante d’erreurs à point unique.

Une notification est un type spécifique de bulle affiché par une icône de zone de notification .

Note: Les instructions relatives aux notifications, info-bulles et info-bulles, et aux messages d’erreur sont présentées dans des articles distincts.

Est-ce le contrôle approprié ?

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

• Les informations décrivent-elles un problème ou une condition particulière ? Si ce n’est pas le cas, utilisez un autre contrôle. N’utilisez pas de bulles pour afficher des informations supplémentaires pour un contrôle ; envisagez d’utiliser du texte statique, des info-bulles, une divulgation progressive ou des invites à la place.
• Le problème ou la condition spéciale peut-il être détecté immédiatement lors de l’entrée ou lorsque le contrôle propriétaire perd le focus d’entrée ? Si ce n’est pas le cas, utilisez un message d’erreur affiché dans une boîte de dialogue ou une boîte de message de tâche.
• Pour les problèmes, le problème est-il critique ? Si c’est le cas, utilisez un message d’erreur affiché dans une boîte de dialogue ou une boîte de message de tâche. Ces messages d’erreur nécessitent une interaction (ce qui convient aux erreurs critiques), contrairement aux bulles.
• Pour les conditions particulières, la condition est-elle encore valide mais susceptible d’être involontaire? Si c’est le cas, les ballons sont appropriés. Pour les conditions non valides, il est préférable de les empêcher en premier lieu. Pour les conditions prévues probables, il n’est pas nécessaire de faire quoi que ce soit.
• Le problème ou la condition particulière peut-il être exprimé de manière concise ? Si ce n’est pas le cas, utilisez un autre contrôle. Les ballons ne peuvent pas avoir d’explications détaillées ni fournir d’informations supplémentaires.
• Les informations décrivent-elles le contrôle actuellement survolé ? Si c’est le cas, utilisez plutôt un conseil, sauf si les utilisateurs doivent interagir avec le message.
• Les informations sont-ils liées à l’activité actuelle de l’utilisateur ? Si ce n’est pas le cas, envisagez d’utiliser une notification ou une boîte de dialogue à la place. Les utilisateurs sont susceptibles d’ignorer les bulles en dehors de l’activité actuelle et, par défaut, les bulles expirent après 10 secondes.
• Les informations proviennent-ils d’une seule source spécifique ? Si un problème ou une condition a plusieurs sources ou aucune source spécifique, utilisez plutôt un message sur place ou une boîte de dialogue.

Incorrect :

Dans cet exemple, le problème peut être lié au nom d’utilisateur ou au mot de passe, mais le signalement du problème avec une bulle indique visuellement que seul le mot de passe est le problème. Par conséquent, les commentaires provenant de la saisie d’un nom d’utilisateur incorrect sont trompeurs.

Les bulles sont une alternative aux info-bulles, aux boîtes de dialogue et aux messages sur place. Contrairement aux info-bulles et info-bulles :

• Les bulles peuvent être affichées indépendamment de l’emplacement actuel du pointeur, de sorte qu’elles ont une queue qui indique leur source.
• Les bulles ont un titre, un corps de texte et une icône.
• Les ballons peuvent être interactifs, alors qu’il est impossible de cliquer sur un pourboire.

Contrairement aux boîtes de dialogue modales :

• Les ballons ne volent pas le focus d’entrée et ne nécessitent pas d’interaction.
• Les bulles identifient une source unique et spécifique. Les dialogues modals peuvent avoir plusieurs sources, ou pas de source spécifique du tout.

Contrairement aux messages sur place :

• Les ballons sont plus visibles.
• Les bulles n’ont pas besoin d’espace d’écran disponible ou de la disposition dynamique requise pour afficher les messages sur place.
• Les bulles se suppriment automatiquement après un délai d’expiration.

Modèles d’usage

Les bulles ont les modèles d’utilisation suivants :

Usage	Exemple
Problème d’entrée Problème d’entrée utilisateur non critique provenant d’un seul contrôle propriétaire, généralement une zone de texte.	L’utilisation de bulles pour les messages d’erreur ne vole pas le focus d’entrée, mais reste très visible si le contrôle propriétaire a le focus d’entrée. pour corriger le problème, l’utilisateur peut être amené à modifier ou à entrer à nouveau l’entrée ; mais si le contrôle propriétaire ignore une entrée incorrecte, l’utilisateur peut ne pas avoir à apporter de modifications. Étant donné que le problème n’est pas critique, aucune icône d’erreur n’est nécessaire. Bulle utilisée pour signaler un problème d’entrée utilisateur non critique.
Condition spéciale Le contrôle propriétaire est dans un état qui affecte l’entrée. Cet état est probablement involontaire et l’utilisateur peut ne pas se rendre compte que l’entrée est affectée.	utilisez des bulles pour éviter la frustration en alertant les utilisateurs des conditions spéciales dès qu’elles se produisent (par exemple, le dépassement de la taille d’entrée maximale ou la définition de limites de verrouillage par erreur). il est important de fournir ces commentaires sans voler le focus d’entrée ou forcer l’interaction, car ces conditions peuvent être intentionnelles. ces bulles sont particulièrement importantes pour les zones de mot de passe et d’épingle, où les utilisateurs travaillent autrement avec un minimum de commentaires. ces bulles ont une icône d’avertissement. Bulle utilisée pour signaler une condition spéciale.

Instructions

Quand afficher

• Affichez la bulle dès que le problème ou une condition spéciale est détecté, même s’il est répété, sans délai notable.
  • Pour les problèmes impliquant des caractères individuels ou la taille d’entrée maximale, affichez la bulle immédiatement lors de l’entrée.
  • Pour les problèmes impliquant la valeur d’entrée (y compris l’exigence d’une valeur non vide), affichez la bulle lorsque le contrôle propriétaire perd le focus d’entrée. Sinon, l’affichage de bulles pendant que les utilisateurs entrent une entrée potentiellement valide peut être distrayant et ennuyeux.
• Afficher un seul ballon à la fois. L’affichage de plusieurs ballons peut être écrasant. Si un événement unique entraîne plusieurs problèmes, présentez tous les problèmes à la fois ou signalez uniquement le problème le plus important.

Incorrect :

Dans cet exemple, deux problèmes sont présentés de manière incorrecte en même temps.

Durée d’affichage

• Supprimez une bulle dans les cas suivants :
  • Le problème est résolu ou une condition spéciale est supprimée.
  • L’utilisateur entre des données valides (pour les problèmes d’entrée).
  • Le ballon expire. Par défaut, les bulles se suppriment après 10 secondes, bien que les utilisateurs puissent changer cela en modifiant le paramètre système SPI_MESSAGEDURATION.
• Supprimez le délai d’expiration si les utilisateurs ne peuvent pas continuer tant que le problème n’est pas résolu. Développeurs : dans Win32, vous pouvez définir l’heure d’affichage avec le message TTM_SETDELAYTIME.

Guide pratique pour afficher

• Affichez les bulles sous le contrôle de leur propriétaire. Cela permet aux utilisateurs d’afficher le contexte, y compris le contrôle propriétaire et son étiquette. Microsoft Windows ajuste automatiquement les positions des bulles afin qu’elles soient entièrement à l’écran. Le comportement par défaut consiste à afficher une bulle au-dessus de son contrôle propriétaire, comme avec les notifications.

Correction :

Incorrect :

Dans l’exemple incorrect, la bulle s’affiche maladroitement au-dessus de son contrôle propriétaire.

Zones de texte Mot de passe et Code confidentiel

• Utilisez une bulle pour indiquer que verr. maj est activé, en utilisant le texte de l’exemple suivant :

Dans cet exemple, une bulle indique que Verr. maj est activé dans une zone de texte pin.

• Utilisez une bulle pour indiquer quand les utilisateurs tentent de dépasser la taille d’entrée maximale. L’atteinte de la taille d’entrée maximale est beaucoup moins évidente dans les zones de texte mot de passe et code confidentiel que dans les zones de texte ordinaires.

Dans cet exemple, une bulle indique que l’utilisateur tente de dépasser la taille d’entrée maximale.

• Utilisez une bulle pour indiquer quand les utilisateurs entrent des caractères incorrects. Toutefois, il est préférable de ne pas avoir de telles restrictions, car elles réduisent la sécurité du mot de passe ou du code confidentiel. Pour empêcher la divulgation d’informations, la bulle doit mention uniquement des faits documentés sur des mots de passe ou des codes confidentiels valides.

Dans cet exemple, une bulle indique que le code confidentiel nécessite des nombres.

Autres zones de texte

• Envisagez d’utiliser une bulle pour indiquer quand les utilisateurs tentent de dépasser la taille d’entrée maximale pour les zones de texte critiques et courtes destinées aux utilisateurs débutants. Les noms d’utilisateur et les noms de compte sont des exemples. Les zones de texte bipent lorsque les utilisateurs tentent de dépasser le nombre maximal d’entrées, mais les utilisateurs novices peuvent ne pas comprendre la signification du signal sonore.

Dans cet exemple, une bulle indique que l’utilisateur a tenté de dépasser la taille d’entrée maximale.

Interaction

• Lorsque les utilisateurs cliquent sur une bulle, il suffit de la faire disparaître sans afficher d’autre interface utilisateur ou sans avoir d’autre effet secondaire. Contrairement aux notifications, les bulles ne doivent pas avoir de boutons de fermeture.

Icônes

• Choisissez l’icône en fonction du modèle d’utilisation :

  Modèle	Icône
  Problème d’entrée	Pas d'icône. Le fait de ne pas utiliser d’icône d’erreur ici est conforme aux instructions de tonalité Windows .
  Condition spéciale	Icône d’avertissement de 16 x 16 pixels standard.

Accessibilité

Lorsqu’elles sont utilisées correctement, les bulles améliorent l’accessibilité. Pour que les ballons soient accessibles :

• Affiche uniquement les bulles qui se rapportent à l’activité actuelle de l’utilisateur.
• Gardez le texte du ballon concis. Cela facilite la lecture du texte de bulle pour les utilisateurs malvoyants et réduit l’interruption lors de la lecture par les lecteurs d’écran.
• Réafficher le ballon chaque fois que le problème ou la condition se répète.

Text

Texte du titre

• Utilisez le texte de titre qui résume brièvement le problème d’entrée ou la condition particulière dans un langage clair, clair, concis et spécifique. Les utilisateurs doivent être en mesure de comprendre l’objectif du ballon rapidement et avec un minimum d’effort.
• Utilisez des fragments de texte ou des phrases complètes sans terminer la ponctuation.
• Utilisez les majuscules comme pour les phrases. Pour plus d’informations, consultez le glossaire.
• Utilisez pas plus de 48 caractères (en anglais) pour prendre en charge la localisation. Le titre a une longueur maximale de 63 caractères et doit être en mesure de se développer d’au moins 30 % pour prendre en charge la localisation.

Corps de texte

• Utilisez la première phrase du corps du texte pour indiquer le problème ou la condition d’une manière clairement pertinente pour l’utilisateur. Ne répétez pas les informations du titre. Omettez-le s’il n’y a plus rien à ajouter.
• Utilisez la deuxième phrase pour indiquer ce que l’utilisateur peut faire pour résoudre le problème ou rétablir l’état. Conformément aux instructions de style et de tonalité , il n’est pas nécessaire d’utiliser le mot Please dans cette instruction. Placez deux sauts de ligne entre la première et la deuxième phrase.

Cet exemple montre la disposition de texte de bulle standard.

• Expliquez comment résoudre le problème ou rétablir l’état même si cette explication est évidente, mais omettez la redondance entre l’instruction du problème et sa résolution. Exceptions :
  • Omettez la résolution si elle ne peut pas être exprimée de manière concise ou sans redondance significative.
  • Omettez la résolution si l’utilisateur n’a rien à faire, par exemple lorsque des caractères incorrects sont ignorés.
• Utilisez des phrases complètes avec une ponctuation de fin.
• Utilisez les majuscules comme pour les phrases.
• Utilisez pas plus de 200 caractères (en anglais) pour prendre en charge la localisation. Le corps du texte a une longueur maximale de 255 caractères et doit être en mesure de se développer d’au moins 30 % pour prendre en charge la localisation.

Documentation

Quand vous faites référence à des ballons :

• Utilisez le texte de titre exact, y compris sa mise en majuscule.
• Faites référence au composant sous la forme d’une bulle, et non sous la forme d’une notification ou d’une alerte.
• Lorsque cela est possible, mettez en forme le texte de titre à l’aide d’un texte gras. Sinon, placez le titre entre guillemets uniquement si nécessaire pour éviter toute confusion.