web-dev-qa-db-fra.com

Comment indiquer les info-bulles?

J'ai un tableau comme une page Web et sur une seule colonne, vous pouvez survoler les lignes et les info-bulles apparaissent. En haut de la colonne, j'ai un petit symbole d'information ("i" dans un cercle bleu) mais je ne pense pas que ce soit assez intuitif. Quelle est une manière décente d'indiquer que les info-bulles sont possibles?

7
strudelkopf

Une info-bulle est utile, mais ne doit pas être utilisée pour afficher des informations qui pourraient être essentielles. Si les informations sont supplémentaires plutôt qu'essentielles, je pense que votre approche est assez décente.

Jetons un coup d'œil à quelqu'un d'autre qui l'a fait exactement comme vous:

enter image description here

Ceci est tiré du site Web d'Audi, où vous pouvez choisir et configurer votre voiture. Certaines options telles que certains types de miroirs nécessitent des explications supplémentaires au cas où vous ne comprenez pas la différence et si vous avez le petit "i" à côté d'eux, comme indiqué sur l'image ci-dessus. L'utilisateur peut survoler l'icône i et obtient ensuite des informations supplémentaires:

enter image description here

4
Bart Gijssens

Je suis un fan de l'utilisation d'un soulignement en pointillés pour indiquer une info-bulle. Cependant, je pouvais voir où cela peut sembler trop maladroit dans une table.

8
Marcie Kaiser

Vous pouvez changer la couleur ou le style (italique, souligné, ombré, ..) d'une ligne particulière pour laquelle vous souhaitez afficher l'info-bulle.

Suivez ce style uniformément à travers tout le texte/objet de votre site qui a une info-bulle.

enter image description here

2
Venkatesh K

Il y a quelques jours, je me suis inscrit sur slack.com. Et ils ont implémenté une solution plutôt intéressante.

Au début, les utilisateurs voient des indices visuels animés qui ressortent en raison de l'animation - il est difficile de les ignorer: enter image description here

Et après avoir cliqué sur le repère, un utilisateur voit la boîte d'informations: enter image description here

2
Humanoit