Je travaille sur un site qui utilise un état de survol sur un lien dans la copie (une fenêtre apparaît, un peu comme une info-bulle) ainsi qu'un lien standard (qui emmène le visiteur vers une autre page).
La distinction est que le lien en survol est identifié en ayant une ligne perforée en dessous et le lien standard a le "soulignement" standard.
Étant donné que ces liens ont deux actions distinctes différentes, existe-t-il des meilleures pratiques ou des documents de lecture qui suggèrent qu'ils devraient être visuellement différents?
Juste pour info - je pense que les liens texte doivent être traités différemment car ils ont des actions distinctes et se comportent différemment.
À votre santé
Pour les autres bonnes suggestions de ce fil, je recommanderais de modifier le curseur (via CSS) pour ces liens d'infobulle.
a. info-bulle { curseur: aide; }
Le type de curseur "aide" est fréquemment appliqué sur le Web pour les liens d'info-bulles, les acronymes avec un attribut title affiché en survol, etc.
Voir http://css-tricks.com/almanac/properties/c/cursor/ pour une liste complète. Notez également que vous pouvez utiliser une image personnalisée comme curseur, ce qui peut être préférable à l'apparence du point d'interrogation du curseur "aide" dans votre application.
Pendant que j'interprète la question, vous afficherez des phrases de texte où les segments du texte peuvent être des liens normaux ou des éléments de survol qui ne sont pas des liens, mais déclenche une petite fenêtre contextuelle à afficher adjacente à l'élément lors du survol.
Il est bien connu que les liens normaux doivent être repérés avec un soulignement et une couleur différente (généralement bleue), mais les liens en survol avec un soulignement en pointillés ne sont pas très connus du grand public. Vous devez presque avoir une association avec le domaine du concepteur Web pour connaître cette convention. Par conséquent, je suggère que vous, en plus d'ajouter un soulignement en pointillés (ou en ignorant complètement le soulignement en pointillés), affichez également un indicateur indiquant que l'élément est extensible: ▼.
Voici un lien vers l'ID unicode du triangle.
Voici un exemple de ce à quoi cela pourrait ressembler:
En vol stationnaire:
L'indicateur extensible est classique, et la plupart des utilisateurs le reconnaîtront et interpréteront avec succès que l'élément contient des informations supplémentaires qui apparaîtront au survol ou au clic.
Différentes actions doivent être différenciées car l'utilisateur a probablement une attente pour le résultat de chaque offre. Pour les meilleures pratiques, il y a un thread qui discute de l'utilisation des info-bulles. Cela peut ne pas comparer les info-bulles aux liens (le fait vaguement), mais cela devrait souligner que les info-bulles sont souvent affichées différemment pour commencer.
Pour emprunter à ce fil, Glen Lipka a publié cette image pour mettre en évidence quelques modèles courants pour signifier une info-bulle.
Il semble que vous utilisiez déjà le soulignement en pointillés. Vous n'avez fourni aucune référence pour l'utilisation des info-bulles (icônes sur le site, définitions, abréviations, etc.), mais cela peut affecter la route que vous empruntez en plus de suivre une route complètement différente pour afficher les informations cachées.
Cela dépend de la longueur de ces liens survolés (un mot, quelques mots, une phrase entière). S'il s'agit de plus de quelques mots, envisagez une approche différente, comme une icône en ligne ou une icône dans la marge qui est clairement liée au texte.
Si ce n'est qu'un ou deux mots, et qu'ils sont utilisés avec parcimonie, alors envisagez d'utiliser quelque chose comme les balises qui apparaissent sur cette même page. Regardez sous votre question d'origine et imaginez ces balises apparaissant en ligne dans le texte. Ils attireraient l'attention, si tel est votre objectif.
Si votre objectif est de le garder modéré ou s'il y en aura beaucoup, comme des définitions de dictionnaire pour les mots, restez avec le soulignement en pointillé.