web-dev-qa-db-fra.com

Info-bulle indicative + info-bulle sur le même élément

J'ai un tableau qui contient des textes d'articles que l'utilisateur peut cliquer pour filtrer par ces valeurs. Par exemple, s'ils cliquent sur le nom d'utilisateur, seules les lignes contenant ce nom d'utilisateur seront affichées sur le tableau.

C'est un comportement similaire à ce que fait Github forum des problèmes . Vous pouvez donc filtrer par la personne qui a ouvert le problème, etc.

Maintenant, le problème survient lorsque j'ai besoin d'afficher des informations supplémentaires sur l'info-bulle. Cette fois, au lieu d'indiquer l'action de cliquer, je devrais ajouter des informations supplémentaires sur le texte lui-même. Par exemple, si je suis l'ID utilisateur, l'info-bulle doit également afficher le nom d'utilisateur. Ou si c'est un nom, une description de celui-ci.

Comment puis-je gérer cette idée de deux infobulles pour le même élément?

enter image description here

interaction-designweb-apptablestooltips
2
Steve

Si vous cherchez à afficher l'astuce avec un titre et une description, je suggère d'essayer d'utiliser une "super info-bulle" ou dans un autre terme, un "popover". Ces éléments vous permettront d'avoir une zone plus grande pour avoir un titre clair "Filtrer par {élément}" et une courte description à donner toute aide supplémentaire à ce qu'ils filtreront.

http://www.nngroup.com/articles/best-application-designs/http://getbootstrap.com/javascript/#popovers

Je préférerais cette route plutôt que d'utiliser plusieurs info-bulles en même temps, car la fenêtre contextuelle maintient le contenu organisé et concentré sur l'élément que vous essayez de filtrer, il n'y a donc aucune possibilité de confusion quant à ce à quoi l'info-bulle fait référence.

2
Cody Brantley

Pourquoi ne pas ajouter une info-bulle supplémentaire aux éléments contenant des informations explicatives?

enter image description here

De cette façon, l'utilisateur sait que certains champs ont des informations supplémentaires qui leur sont associées et est en mesure de sélectionner le respectif en conséquence.

1
JonW

vous pouvez écrire l'info-bulle de telle manière que si le filtre de nom d'utilisateur est activé, l'info-bulle affiche le nom avec l'info-bulle et sinon cette partie de l'info-bulle reste vide:

pseudo code

tooltipText = "filter by this"
filteredTip = "filtered by: "
if the filterStatus is set (if a user has clicked/touched a column value which is filterable)
AND
if that value is == userName

tooltipText = filteredTip + userName

une solution plus générique pourrait être trouvée

filterName = colValFilterName

tooltipText = filteredTip + filterName

donc si la colonne était la date de l'infobulle filtrée dirait

filtré par: date

et si la colonne du nom d'utilisateur

filtré par: nom d'utilisateur

1
deemyBoy