Usages
Les infobulles simples décrivent brièvement un élément d'interface utilisateur. Elles sont idéales pour étiqueter des éléments d'interface utilisateur sans texte, tels que des boutons avec uniquement des icônes et des champs.
Les infobulles riches fournissent des informations contextuelles supplémentaires sur un élément d'interface utilisateur. Elles peuvent éventuellement contenir un sous-titre, des boutons et des liens hypertexte. Les info-bulles riches sont idéales pour du texte plus long, tel que des définitions ou des explications.
✅ Usage correct :
Afficher un texte informatif lorsque les utilisateurs touchent un bouton d'icône "information"
Une infobulle doit être proche de l'élément auquel elle est associée.
🚫 Usage incorrect :
Ne pas se servir d'une infobulle pour donner des informations essentielles à l'utilisateur
Comportement général
L'objectif principal d'une infobulle est de fournir des informations utiles et contextuelles de manière non intrusive, tout en améliorant l'expérience utilisateur globale en guidant les utilisateurs vers une meilleure compréhension de l'interface et de ses éléments interactifs.
Activation
Lorsque l'utilisateur touche un bouton icône information lié à un élement, une infobulle s'affiche sur son écran.
Positionnement
L'infobulle est généralement positionnée de manière à ne pas obstruer l'élément lui-même ni d'autres éléments importants de l'interface utilisateur. Elle apparaît souvent au-dessus ou en dessous de l'élément, parfois à gauche ou à droite si l'espace le permet.
Contenu
Le contenu de l'infobulle est généralement succinct, composé de quelques phrases ou d'une courte description. Il doit être clair, facile à comprendre et pertinent pour le contexte. Si le contenu à afficher est long, utilisez le composant infobulle riche.
Disparition
L'infobulle disparaît lorsque l'utilisateur touche un autre élément sur son écran.