J'ai une phrase dans laquelle un mot a une info-bulle. Les données de l'info-bulle sont supplémentaires et il n'est pas nécessaire de les placer dans l'interface utilisateur principale.
Cependant, comment puis-je marquer le mot pour informer l'utilisateur qu'il a une info-bulle? J'ai essayé de marquer le mot avec un soulignement et une couleur bleue, mais cela ressemble trop à un lien (ce qui n'est pas le cas).
Voici l'image de ce à quoi il ressemble maintenant:
Merci!
Une technique que j'utilise beaucoup est d'énumérer autant de possibilités auxquelles je pourrais penser, puis de voir laquelle apparaît. Je pense que le troisième ci-dessous est meilleur que les autres pour moi. Peut-être une icône différente, peut-être un peu plus petite, mais vous obtenez le point.
La meilleure pratique pour montrer qu'un mot dans le texte a une info-bulle consiste à utiliser un soulignement en pointillé pour la décoration du texte. Il s'agit du premier exemple de la liste créée par Glen.
Bien que cela soit normalement utilisé avec la balise pour afficher les abréviations et les acronymes, cela fonctionnerait également très bien dans un cas de définition. Voici une bonne discussion à ce sujet sur AListApart
Vous ne voulez pas le rendre bleu, c'est sûr, mais vous pouvez essayer de le laisser noir (ou quelle que soit la couleur normale) avec un soulignement. Les liens sont si couramment pas de la même couleur que le texte environnant que l'apparence du texte de couleur normale soulignée peut être suffisamment différentielle, mais vous pouvez également la différencier en double soulignement.
Si vous avez beaucoup de ces mots sur une page, vous voudrez peut-être envisager de faire de la couleur du soulignement lui-même une nuance de gris plus faible afin de ne pas dégrader excessivement la lisibilité.
Assurez-vous que les info-bulles apparaissent rapidement en survol afin qu'elles puissent être découvertes facilement, mais pas si rapidement que le déplacement de la souris sur la page entraîne de nombreuses info-bulles clignotantes.
Je dois dire cependant que je ne suis pas convaincu de la nécessité de cacher les informations derrière une info-bulle en premier lieu, car il serait assez facile de citer l'info-bulle dans le paragraphe d'origine ou de donner votre popup (dans l'image ci-dessus) une ligne de pied de page appropriée ou une autre meilleure façon de disposer l'ensemble du popup. En particulier, si la fenêtre contextuelle masque l'expression elle-même, vous n'avez pas du tout besoin d'utiliser des info-bulles dans votre paragraphe, mais vous devez déplacer la fenêtre contextuelle un peu, mais peut-être avec un pointeur sur l'expression (style bulle de dialogue).
J'ai également rencontré ce problème, car mes utilisateurs ne comprenaient pas qu'un soulignement solide vert pouvait déclencher une info-bulle.
J'ai donc fait différentes versions et je suis certain que la dernière est le meilleur indicateur:
Conclusion:
abbr
en HTML).Un autre argument pour utiliser le soulignement en pointillé est que l'élément HTML5 <abbr> est rendu de cette façon dans les navigateurs certains .
À mon avis, la meilleure façon de procéder est d'utiliser une petite icône de point d'interrogation avant ou après. Ceci est généralement connu sous le nom de "help". Définissez également le pointeur dans css, donc lorsque vous survolez la "main", il n'apparaît pas.
Je devrais argumenter contre le popup entier. Vous masquez apparemment le contenu principal que l'utilisateur essaie d'utiliser, puis vous aggravez le problème avec une info-bulle sur la fenêtre contextuelle.
Si vous ressentez le besoin de fournir un contenu de didacticiel, ne le faites pas d'une manière qui obscurcit la vue de l'utilisateur sur le champ de travail. Organisez vos éléments d'interface utilisateur d'une manière qui offre un emplacement unique pour les alertes et les notifications, et acheminez tout ce que vous avez mis dans des fenêtres contextuelles et des info-bulles dans cette zone.