web-dev-qa-db-fra.com

Styliser les étiquettes en tant que liens pour "inciter" les utilisateurs à survoler?

Le titre à lui seul entraînerait probablement un chant "NON!" comme réponse populaire, mais laissez-moi développer.

Contexte

Nous avons un tableau d'articles qui représentent quelque chose. Chaque élément peut contenir de un à cinq attributs. Une colonne du tableau affiche le nombre d'attributs de chaque élément. Cette colonne se compose d'une cellule pour chaque élément, contenant une étiquette de style lien disant 1 , 2 , 3 ..., selon le nombre d'attributs qu'il possède. Si l'utilisateur survole la cellule, une info-bulle apparaîtra affichant un texte avec les ID des attributs contenus dans cet élément.

Problème

L'étiquette, stylisée en tant que lien, n'est pas cliquable car elle ignore toute entrée de clic. La raison de son apparition en tant que lien est d'attirer l'utilisateur vers celui-ci, ce qui pourrait l'amener à penser "Hé, j'ai quelque chose ici" . Ils peuvent passer la souris dessus, peut-être essayer de cliquer dessus, et l'info-bulle s'affichera.

Je ne suis pas vraiment sûr de savoir comment communiquer les moyens d'une info-bulle.

Question

Serait-ce considéré comme une bonne expérience utilisateur? Vous pourriez faire valoir que l'utilisateur est dupe, mais le gain est-il suffisant pour justifier cela?

Les opinions personnelles sont correctes, mais je préférerais des preuves factuelles renforçant votre cas.


EDIT: Je suppose qu'une question secondaire ici est de savoir si c'est OK d'avoir une info-bulle pour quelque chose qui n'est pas une action mais un affichage de données à la place?

24
AndroidHustle

Je suggérerais d'utiliser l'approche soulignée en pointillés pour les abréviations/acronymes. C'est un bon moyen de faire savoir à l'utilisateur que s'il survole/clique sur SSN, cela signifie le numéro de sécurité sociale. Pour des éléments plus descriptifs comme l'aide contextuelle en ligne, utilisez une icône d'information "i" ou "?" icône pour une assistance supplémentaire. Le plugin javascript/jQuery que j'utilise est qTip2 .

enter image description here

enter image description here

52
JeffH

Que diriez-vous d'ajouter une icône d'information "i" qui est une cible survolée ou éventuellement cliquable sur le côté de l'étiquette.

Vous pourriez avoir une info-bulle qui présente un résumé des informations que vous souhaitez transmettre à ce sujet plutôt que l'étiquette. Si nécessaire, le clic pourrait être utilisé - pour les appareils à écran tactile, par exemple - pour afficher également l'info-bulle.

8
ChrisF

Il me semble que la réponse ici est que vous abusez de l'info-bulle et que le lien devrait faire quelque chose lorsque vous cliquez dessus, même si c'est pour afficher les mêmes informations que l'info-bulle, l'info-bulle devrait être tout au plus un résumé.

3
JamesRyan

Que diriez-vous d'un attribut de titre et pointillé bottom-border? (en supposant que ce soit HTML/CSS)

3
yitznewton

Attirer l'utilisateur à cliquer sur quelque chose donne l'impression que l'utilisateur est un insecte.

Il n'y a aucun besoin de repère visuel que les informations sont disponibles pour l'élément via une info-bulle. C'est quelque chose que les utilisateurs peuvent simplement découvrir (ou en savoir plus sur la documentation ou sur d'autres utilisateurs). Si vous rendez systématiquement ce type d'informations utiles disponibles dans l'application, les utilisateurs s'y attendront et les rechercheront.

(Je sais, je sais, vous avez écrit et configuré de superbes infobulles et souhaitez que les utilisateurs remarquent immédiatement et lisent chacun d'eux.)

L'exception est si vous avez de nombreux objets similaires à l'écran et que seuls certains d'entre eux fournissent cette aide. Un exemple évident de cela une poignée de liens dans un paragraphe de texte. Il est normal de styliser certains mots ou phrases dans un paragraphe de texte sous forme de liens juste pour leur donner des info-bulles.

Sémantiquement, ce sont des liens même s'ils ne naviguent pas vers une URL différente. Ce sont des liens vers de minuscules documents comprenant leur documentation d'infobulle.

La décision devrait essentiellement s'articuler: est-ce que c'est du Web ou du bureau? Dans une application de bureau, nous ne voulons pas que les hyperliens se substituent à l'interface utilisateur, tels que les boutons, les barres de menus et ainsi de suite; il n'est acceptable que dans le texte.

1
Kaz

Ce que vous décrivez ressemble à l'UX utilisé par les publicités de type Intellitext . Même si vous l'utilisez à des fins différentes, copier UX à partir d'une forme de publicité impopulaire n'est pas une bonne idée. Ma réaction immédiate serait probablement de quitter la page avec rage ou de lancer un bloc publicitaire pour supprimer les éléments incriminés; il est douteux que j'examine assez attentivement pour réaliser que mon impression initiale était incorrecte.

Je suis enclin à répondre NON . Mais je n'ai pas de solution idéale dans ce cas. Ce que je suggère comme possibilité, c'est de placer quelque chose comme des points de suspension ou +.

0
Nicolas Barbulesco

Je suggère de faire de cette étiquette un lien. La fonction de ce lien devrait conduire l'utilisateur quelque part. Par exemple, la page de détails de quelque chose contenant une liste plus informative d'articles. Ou menu contextuel - chaque élément de menu (nommé par l'ID de l'élément) peut ouvrir une page distincte des détails de l'élément (ou générer un rapport avec quelque chose partageant le même élément - selon votre modèle de données).

0
Frantisek Kossuth