Bulles

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 bulle est une petite fenêtre pop-up qui informe les utilisateurs d’un problème non critique ou d’une condition spéciale dans un contrôle.

Une bulle typique.

Les bulles ont une icône, un titre et un texte de corps, qui sont tous facultatifs. Contrairement aux infobulles et aux tooltips, les bulles ont également une queue qui identifie leur source. Habituellement, la source est un contrôle ; dans ce cas, il est appelé le contrôle propriétaire.

Bien que les bulles informent les utilisateurs des problèmes non critiques, elles ne préviennent pas les problèmes, bien que le contrôle propriétaire puisse le faire. Tous les problèmes non traités doivent être gérés par l’interface utilisateur (UI) propriétaire lorsque les utilisateurs tentent de confirmer 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 changer les valeurs, comme les zones combinées, les affichages en mode liste et les affichages en mode arborescence. Les autres types de contrôles sont suffisamment bien contraints et n’ont pas besoin du retour d’information supplémentaire fourni par les bulles. En outre, s’il y a un problème avec d’autres types de contrôles, il s’agit souvent d’une incohérence entre plusieurs contrôles, une situation pour laquelle les bulles ne sont pas adaptées. Seuls les contrôles de saisie de texte sont à la fois non contraints et une source courante d’erreurs ponctuelles.

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

Remarque : Les directives relatives aux notifications, info-bulles et tooltips et 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 :

• L’information décrit-elle un problème ou une condition spéciale ? Sinon, utilisez un autre contrôle. N’utilisez pas les bulles pour afficher des informations supplémentaires pour un contrôle ; envisagez d’utiliser du texte statique, des info-bulles, une révélation progressive ou des invites à la place.
• Le problème ou la condition spéciale peut-il être détecté immédiatement, soit lors de la saisie, soit lorsque le contrôle propriétaire perd le focus de saisie ? Sinon, utilisez un message d’erreur affiché dans une boîte de dialogue de tâche ou une boîte de message.
• 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 de tâche ou une boîte de message. Ces messages d’erreur nécessitent une interaction (ce qui est approprié pour les erreurs critiques), tandis que les bulles ne le font pas.
• Pour les conditions spéciales, la condition est-elle valide mais probablement non intentionnelle ? Si c’est le cas, les bulles sont appropriées. Pour les conditions non valides, il est préférable de les prévenir dès le départ. Pour les conditions probablement intentionnelles, il n’y a rien à faire.
• Le problème ou la condition spéciale peut-il être exprimé de manière concise ? Sinon, utilisez un autre contrôle. Les bulles ne peuvent pas avoir d’explications détaillées ni fournir d’informations supplémentaires.
• L’information décrit-elle le contrôle actuellement survolé ? Si tel est le cas, utilisez une info-bulle à la place, sauf si les utilisateurs doivent peut-être interagir avec le message.
• L’information est-elle liée à l’activité actuelle de l’utilisateur ? Sinon, envisagez d’utiliser une notification ou une boîte de dialogue à la place. Les utilisateurs risquent de ne pas remarquer les bulles en dehors de l’activité actuelle, et par défaut, les bulles disparaissent après 10 secondes.
• L’information provient-elle d’une source unique et spécifique ? Si un problème ou une condition a plusieurs sources ou aucune source spécifique, utilisez un message en place ou une boîte de dialogue à la place.

Incorrecte :

Dans cet exemple, le problème pourrait venir du nom d’utilisateur ou du mot de passe, mais signaler le problème avec une bulle suggère visuellement que seul le mot de passe est en cause. Par conséquent, le retour d’information lors de la saisie d’un nom d’utilisateur incorrect est trompeur.

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

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

Contrairement aux boîtes de dialogue modales :

• Les bulles ne volent pas le focus de saisie ni ne nécessitent d’interaction.
• Les bulles identifient une source unique et spécifique. Les boîtes de dialogue modales peuvent avoir plusieurs sources, voire aucune source spécifique.

Contrairement aux messages en place :

• Les bulles sont plus visibles.
• Les bulles ne nécessitent pas d’espace d’écran disponible, ni la disposition dynamique requise pour afficher les messages sur place.
• Les bulles se retirent automatiquement après un délai d’attente.

Modèles d’usage

Les bulles suivent ces schémas d’utilisation :

Usage	Exemple
Problème de saisie Un problème de saisie utilisateur non critique provenant d’un contrôle propriétaire unique, généralement une zone de texte.	l’utilisation des bulles pour les messages d’erreur ne vole pas le focus de saisie, mais reste très visible si le contrôle propriétaire a le focus de saisie. pour corriger le problème, l’utilisateur peut devoir modifier ou ressaisir la saisie ; mais si le contrôle propriétaire ignore la saisie incorrecte, l’utilisateur peut ne pas avoir à apporter de modifications du tout. comme le problème n’est pas critique, aucune icône d’erreur n’est nécessaire. Une bulle utilisée pour signaler un problème de saisie utilisateur non critique.
Condition spéciale Le contrôle propriétaire est dans un état qui affecte la saisie. Cet état est probablement non intentionnel et l’utilisateur peut ne pas se rendre compte que la saisie est affectée.	utilisez les bulles pour éviter la frustration en alertant les utilisateurs des conditions spéciales dès qu’elles se produisent (par exemple, dépassement de la taille maximale de saisie ou activation accidentelle de la touche Maj). il est important de donner ce type de retour d’information sans voler le focus de saisie ni forcer l’interaction, car ces conditions peuvent être intentionnelles. ces bulles sont particulièrement importantes pour les zones de mot de passe et de code PIN, où les utilisateurs travaillent autrement avec un retour d’information minimal. ces bulles ont une icône d’avertissement. Une bulle utilisée pour signaler une condition spéciale.

Instructions

Quand l’afficher

• Affichez la bulle dès que le problème ou la condition spéciale est détecté, même de manière répétée, sans aucun retard notable.
  • Pour les problèmes impliquant des caractères individuels ou la taille maximale de saisie, affichez la bulle immédiatement lors de la saisie.
  • Pour les problèmes impliquant la valeur de saisie (y compris nécessitant une valeur non vide), affichez la bulle lorsque le contrôle propriétaire perd le focus de saisie. Sinon, afficher des bulles pendant que les utilisateurs saisissent une entrée potentiellement valide peut être distrayant et ennuyeux.
• Afficher une seule bulle à la fois. Afficher plusieurs bulles peut être écrasant. Si un seul événement entraîne plusieurs problèmes, présentez soit tous les problèmes en même temps, soit ne signalez que le problème le plus important.

Incorrecte :

Dans cet exemple, deux problèmes sont incorrectement présentés en même temps.

Durée d’affichage

• Supprimez une bulle quand :
  • Le problème est résolu ou la condition spéciale est supprimée.
  • L’utilisateur saisit des données valides (pour les problèmes de saisie).
  • La bulle se retire après un délai d’attente. Par défaut, les bulles se retirent après 10 secondes, bien que les utilisateurs puissent modifier cela en modifiant le paramètre système SPI_MESSAGEDURATION.
• Supprimez le délai d’attente 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 la durée d’affichage avec le message TTM_SETDELAYTIME.

Comment l’afficher

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

Correcte :

Incorrecte :

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

Zones de texte de mot de passe et de code PIN

• Utilisez une bulle pour indiquer que la touche Maj est activée, en utilisant le texte dans l’exemple suivant :

Dans cet exemple, une bulle indique que la touche Maj est activée dans une zone de texte PIN.

• Utilisez une bulle pour indiquer lorsque les utilisateurs tentent de dépasser la taille maximale de saisie. Atteindre la taille maximale de saisie est beaucoup moins évident dans les zones de texte de mot de passe et de code PIN que dans les zones de texte ordinaires.

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

• Utilisez une bulle pour indiquer lorsque les utilisateurs saisissent des caractères incorrects. Cependant, 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 PIN. Pour éviter la divulgation d’informations, la bulle ne doit mentionner que les faits documentés sur les mots de passe ou codes PIN valides.

Dans cet exemple, une bulle indique que le PIN nécessite des chiffres.

Autres zones de texte

• Envisagez d’utiliser une bulle pour indiquer lorsque les utilisateurs tentent de dépasser la taille maximale de saisie pour des zones de texte critiques et courtes destinées aux utilisateurs novices. Les exemples incluent les noms d’utilisateur et les noms de compte. Les zones de texte émettent un bip lorsque les utilisateurs tentent de dépasser la saisie maximale, mais les utilisateurs novices pourraient ne pas comprendre la signification du bip.

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

Interaction

• Lorsque les utilisateurs cliquent sur une bulle, il suffit de la rejeter sans afficher d’autre UI ni 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 schéma d’utilisation :

  Modèle	Icône
  Problème de saisie	Pas d'icône. Ne pas utiliser d’icône d’erreur ici est cohérent avec les directives de ton de Windows.
  Condition spéciale	L’icône d’avertissement standard de 16x16 pixels icône d’avertissement.

Accessibilité

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

• N’affichez que les bulles qui se rapportent à l’activité actuelle de l’utilisateur.
• Gardez le texte de la bulle concis. Cela rend le texte de la bulle plus facile à lire pour les utilisateurs malvoyants et minimise l’interruption lorsqu’il est lu par des lecteurs d’écran.
• Réaffichez la bulle chaque fois que le problème ou la condition se reproduit.

Texte

Texte du titre

• Utilisez un texte de titre qui résume brièvement le problème de saisie ou la condition spéciale dans un langage clair, simple, concis et spécifique. Les utilisateurs doivent pouvoir comprendre rapidement l’objectif de la bulle et avec un minimum d’effort.
• Utilisez des fragments de texte ou des phrases complètes sans ponctuation finale.
• Utilisez la mise en majuscules comme pour les phrases. Pour plus d’informations, veuillez consulter le glossaire.
• Utilisez pas plus de 48 caractères (en anglais) pour permettre la localisation. Le titre a une longueur maximale de 63 caractères et doit pouvoir s’étendre d’au moins 30 % pour permettre la localisation.

Corps de texte

• Utilisez la première phrase du texte du corps 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 ceci s’il n’y a rien de plus à ajouter.
• Utilisez la deuxième phrase pour indiquer ce que l’utilisateur peut faire pour résoudre le problème ou revenir à l’état précédent. Conformément aux directives de style et de tonalité, il n’est pas nécessaire d’utiliser le mot « S’il vous plaît » dans cette déclaration. Mettez deux sauts de ligne entre la première et la deuxième phrase.

Cet exemple montre la mise en page standard du texte de la bulle.

• Expliquez comment résoudre le problème ou revenir à l’état précédent, même si cette explication est évidente, mais évitez la redondance entre l’énoncé 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 s’il n’y a rien à faire pour l’utilisateur, comme lorsque les caractères incorrects sont ignorés.
• Utilisez des phrases complètes avec ponctuation finale.
• Utilisez la mise en majuscules comme pour une phrase ordinaire.
• Utilisez pas plus de 200 caractères (en anglais) pour permettre la localisation. Le texte du corps a une longueur maximale de 255 caractères et doit pouvoir s’étendre d’au moins 30 % pour permettre la localisation.

Documentation

Lorsque vous faite référence aux bulles :

• Utilisez le texte exact du titre, y compris sa capitalisation.
• Référez-vous au composant comme une bulle, et non comme une notification ou une alerte.
• Dans la mesure du possible, formatez le texte du titre en utilisant du texte en gras. Autrement, placez le titre entre guillemets uniquement si c’est nécessaire pour éviter toute confusion.