Infobulle vs. Carte flottante
Une info-bulle donne un court libellé ou un indice. Une carte de survol montre un aperçu plus riche d'une personne, d'un élément ou d'un lien.
Utilisez une info-bulle lorsqu'un petit nombre de mots suffit. Utilisez une carte flottante lorsque l'aperçu peut éviter de se rendre sur une autre page. Elle doit également fonctionner au clavier et au tactile.
Voir ce que fait chaque modèle
Essayez chaque exemple. Puis lisez sur le travail pour lequel il a été conçu.
Infobulle
Une info-bulle est une courte note sur un contrôle. Elle s'ouvre quand la souris la survole ou le clavier la met en évidence. On ne peut pas l'utiliser comme un bouton.
role="tooltip"Lorsqu'un bouton icône obtient le focus clavier, « Copier le lien » apparaît. Le focus reste sur le bouton.
- Utilisez-le lorsque
- Utilisez-le pour expliquer une courte étiquette de contrôle à la fois lors du survol de la souris et de la mise au point clavier.
- Ne l'utilisez pas lorsque
- Ne mettez jamais d'actions, d'instructions impératives à lire, ou de contenu long dans une info-bulle.
- Nom utilisé dans le code
role="tooltip"
Carte de survol
Une hover card est un aperçu riche. Elle s'ouvre quand on survole ou qu'on sélectionne une référence, sans bloquer la page.
HoverCardSurvolez le nom d'un auteur pour voir une courte biographie et le nombre d'abonnés. Le profil complet reste fermé.
- Utilisez-le lorsque
- Utilisez-le pour des détails d'aperçu optionnels qui aident les gens à choisir où aller ensuite.
- Ne l'utilisez pas lorsque
- Ne cachez jamais les informations requises derrière un survol, car les appareils tactiles peuvent ne pas les afficher de manière fiable.
- Nom utilisé dans le code
HoverCard
Comparaison rapide
| Modèle UI | Meilleur pour | Pas pour | Nom utilisé dans le code |
|---|---|---|---|
| InfobulleTooltip | Utilisez-le pour expliquer une courte étiquette de contrôle à la fois lors du survol de la souris et de la mise au point clavier. | Ne mettez jamais d'actions, d'instructions impératives à lire, ou de contenu long dans une info-bulle. | role="tooltip" |
| Carte de survolHover Card | Utilisez-le pour des détails d'aperçu optionnels qui aident les gens à choisir où aller ensuite. | Ne cachez jamais les informations requises derrière un survol, car les appareils tactiles peuvent ne pas les afficher de manière fiable. | HoverCard |
Avant d'expédier
- 01
Écrivez ce que la personne doit faire.
- 02
Tester le clavier, la mise au point, le toucher, le zoom, le chargement, les états vides et d'erreur.
- 03
Assurez-vous que les gens peuvent obtenir les mêmes informations sans survol ni mouvement.
- 04
Tester avec du contenu réel sur les petits et grands écrans.
Demande de comparaison que vous pouvez copier
Copiez ceci lorsque votre équipe a besoin d'aide pour choisir entre les modèles.
Choisissez le meilleur modèle parmi Infobulle (Tooltip), Carte de survol (Hover Card) pour notre flux utilisateur réel. Utilisez cette règle : Une info-bulle donne un court libellé ou un indice. Une carte de survol montre un aperçu plus riche d'une personne, d'un élément ou d'un lien. Notez la tâche, la quantité de contenu et le coût d'arrêt du flux. Vérifiez le clavier, le toucher, le chargement, l'erreur et le comportement à mouvement réduit. Expliquez votre choix, puis construisez la plus petite version accessible avec le système de conception du projet.