Des info-bulles qui expliquent sans gêner
Comment concevoir des info-bulles utiles : brèves informations supplémentaires, accès au survol et au clavier, alternatives tactiles et raisons pour lesquelles les instructions essentielles n'ont jamais leur place dans une info-bulle.
À retenir
Les info-bulles sont de brefs messages qui apparaissent au survol ou au clavier pour fournir des informations supplémentaires, telles que la signification d'une métrique. Gardez-les courts, n’y mettez jamais d’instructions essentielles, rendez-les accessibles au clavier, proposez une alternative tactile sur les écrans tactiles et n’insérez pas de liens ou de boutons à l’intérieur.
Qu'est-ce qu'une info-bulle
Nielsen Norman Group définit une info-bulle comme un bref message informatif qui apparaît lorsqu'un utilisateur interagit avec un élément, initié par un survol de la souris ou un survol du clavier (en gardant le focus du clavier sur un élément). Parce qu'elles dépendent du survol, les info-bulles ne sont normalement pas disponibles sur les écrans tactiles.
Complémentaire, jamais indispensable
NN/g donne un exemple clair d'erreur : un site qui insère des exigences de mot de passe dans une info-bulle. Les informations dont les gens ont besoin pour accomplir une tâche doivent être affichées à l’écran. Les info-bulles correspondent aux définitions, aux explications sur les raisons pour lesquelles un champ est demandé et aux étiquettes des boutons contenant uniquement des icônes.
Accessibilité
Rendre les info-bulles utilisables par tout le monde :
- Ouvrir sur le focus clavier ainsi que survoler.
- Laissez les gens l'ignorer avec Escape sans déplacer le focus.
- Gardez-le ouvert pendant que le pointeur se déplace dessus.
- Connectez-le à son déclencheur pour que les lecteurs d'écran l'annoncent.
- Ne mettez pas de contenu interactif à l’intérieur ; utilisez plutôt un popover.
Info-bulles sur les appareils tactiles
Le survol n'existe pas au toucher. Utilisez une icône d'information visible qui ouvre une petite fenêtre contextuelle au toucher, ou affichez l'explication en ligne. Pour les mesures d'entreprise complexes, une icône d'information à côté de l'étiquette est un modèle familier sur chaque appareil.
Mouvement et timing
Un court délai avant l'affichage évite le scintillement des info-bulles lorsque le pointeur passe sur les éléments ; une fois que l'on est ouvert, les info-bulles voisines peuvent apparaître immédiatement. Un fondu rapide ou une petite échelle du déclencheur aide les gens à voir d'où il vient. Gardez-le sous environ 150 millisecondes.
Principes clés à retenir
- Les info-bulles sont brèves et supplémentaires
- Ne cachez jamais les instructions essentielles dans une info-bulle
- Prise en charge de la mise au point et de l'évasion du clavier
- Utiliser une icône d'information tapable sur les appareils tactiles
- Aucun contenu interactif dans les info-bulles
Questions fréquentes
Sources
- Tooltip Guidelines — Nielsen Norman Group