Comment vous assurez-vous que les utilisateurs savent qu'une infobulle est attachée à quelque chose?
J'ai lu Les gens utilisent-ils des info-bulles? , et il y a des réponses mitigées là-bas - je sais que beaucoup de gens utilisent des info-bulles, mais il y en a encore beaucoup de personnes, à mon avis, qui n'utilisent pas les info-bulles.
Comment, du point de vue de la conception, dites-vous aux utilisateurs (en particulier aux nouveaux utilisateurs d'un site Web) qu'ils peuvent survoler un élément spécifique pour en savoir plus?
Souhaitez-vous faire clignoter cet élément? Ou serait-ce trop intense?
Observations
L'implémentation par navigateur des info-bulles n'est pas prévisible . Certains navigateurs affichent immédiatement les info-bulles et d'autres les affichent après un certain délai. La position et le style des info-bulles ne sont pas prévisibles sur différents navigateurs.
Les utilisateurs manquent souvent les info-bulles du navigateur natif parce que (1) ils sont petits; et (2) la plupart des navigateurs exigent que les utilisateurs mettent le curseur sur un élément avant d'afficher l'info-bulle, de sorte que les utilisateurs qui déplacent une souris sur un élément peuvent ne jamais voir l'info-bulle. Voici une info-bulle de navigateur typique qui s'affiche après un délai.
![enter image description here]()
Approches modernes
Pour éviter de dépendre des info-bulles du navigateur, de nombreuses applications modernes implémentent des info-bulles personnalisées qui offrent aux concepteurs UX un bien meilleur contrôle sur le placement, le style et les micro-interactions pour l'info-bulle.
Voici un exemple d'une approche moderne des info-bulles.
Ces approches sont utilisées de différentes manières:
Afficher l'info-bulle immédiatement au lieu d'un délai. Cela évite la possibilité maladroite de suspendre le curseur avant qu'une info-bulle n'apparaisse. C'est très courant de nos jours (par exemple utilisé dans Gmail). Notez que parfois pour éviter l'effet "flash" lorsqu'un utilisateur déplace rapidement le curseur sur un élément, vous souhaiterez peut-être un certain retard contrôlé.
Illuminez l'info-bulle . Utilisez des arrière-plans colorés, des polices plus grandes, des ombres portées ou des styles de boîte irréguliers (par exemple, une légende) pour rendre l'infobulle plus audacieuse/plus visible. L'animation peut également être efficace (voir l'exemple en direct ci-dessus).
Indiquez mieux l'interactivité d'un élément . Vous pouvez utiliser des espaces réservés comme @DvirAdler le suggère ci-dessus. Cependant, ils peuvent sembler intrusifs pour les non-débutants qui peuvent se lasser de les voir tout le temps. Vous pouvez également utiliser la couleur ou la convention d'un soulignement en pointillé pour indiquer qu'un élément a une info-bulle (ou au moins, est interactif). Voici quelques alternatives à titre indicatif:
![enter image description here]()
Vous devrez déterminer quelle combinaison d'approches fonctionne le mieux pour votre site.
Il existe des solutions simples et classiques pour cela.
Vous venez d'ajouter une petite icône pour leur faire savoir qu'une infobulle utile les attend:
Il existe de nombreuses occasions où vous souhaitez aider les premiers utilisateurs ou les utilisateurs rares, mais vous ne voulez pas encombrer l'écran avec de longues explications. Les info-bulles sont une solution greta, mais comme vous l'avez mentionné, de nombreuses personnes ne savent pas qu'elles existent. Ainsi, ce petit indicateur invite l'utilisateur à rechercher de l'aide uniquement lorsqu'il en a besoin.
Ne pensez même pas à faire clignoter ces icônes. Ils doivent être subtils et ne pas gêner les personnes qui ont le droit de les ignorer.
Une chose que j'ai vu plus de sites Web faire est de changer le curseur de la souris sur le style "aide":
Essayez-le W3Schools .
Ce changement en temps réel peut être très utile car il permet aux utilisateurs de savoir que la zone où ils ont la souris est spéciale. Ceci est mieux combiné avec des options d'affichage redondantes qui détectent la situation de l'utilisateur et affichent l'info-bulle d'une manière qui fonctionnera sur leur écran, dans leur navigateur, etc.
Il y a des réponses judicieuses ici, mais je voudrais y ajouter en disant que si vous dépendez uniquement des utilisateurs qui lisent ce qui est dans vos info-bulles, cela ne devrait peut-être pas appartenir aux info-bulles, mais déjà visible pour votre utilisateur.
Il y a plusieurs façons d'aborder cela. Envisagez un tutoriel d'introduction pour la première fois qu'un utilisateur interagit avec l'application. Il pourrait rapidement leur montrer ce qu'ils peuvent faire et comment le faire. Découvrez toggl, les nouveaux utilisateurs reçoivent un tutoriel sur la façon de tout faire.
L'inconvénient de cela est bien sûr que cela peut signifier que votre application peut être trop complexe et que vous devrez peut-être repenser la solution au problème que vous résolvez. Mais souvent, c'est plus un guide suggestif.
Une autre option pourrait être de tester des variantes de la façon dont l'utilisateur pourrait interagir avec l'élément pour voir quelles questions et défis provoquent leurs actions. Découvrez usabilityhub ou trymyui, vous pouvez également effectuer un test/b ou utiliser un outil de suivi de la carte thermique comme le fou Egg 2 ¢
personnellement, j'aime l'info-bulle IDM. 
vous pouvez laisser la première info-bulle apparaître automatiquement. alors vous pouvez naviguer avec des flèches ou des boutons. cependant, à chaque fois, il devrait y avoir un moyen de sauvegarder et une sortie de l'infobulle. car pour un utilisateur expérimenté de votre application, cela peut devenir irrité. et maintenant, les navigateurs Firefox récemment mis à jour utilisent ce type d'info-bulle et de navigation automatisées pour de nouveaux utilisateurs. en fait, cela donne une excellente expérience utilisateur pour les débutants.