web-dev-qa-db-fra.com

Différenciation visuelle entre les liens internes aux liens sortants

J'essaie de résoudre la différence entre les liens sur site et les liens sortants. Actuellement, j'utilise pour tous les liens le bleu de ma palette et le souligne en survol. En raison de la nature du site, qui a beaucoup de liens sortants, je pense que cela prête à confusion pour les utilisateurs. Ils ne peuvent pas dire si un lien les enverra vers un autre site ou vers une page d'informations détaillées sur mon site.

Existe-t-il des pratiques communes pour résoudre un tel problème?

10
Noam

Une approche courante consiste à ajouter une petite icône (à côté d'un maillon de chaîne ou d'une flèche sortant d'un carré) aux liens sortants. Cela sépare visuellement les deux catégories de liens, les liens entrants ayant un balisage visuel et les liens sortants ayant en plus une icône.

Profitez également des info-bulles intégrées au navigateur (via l'attribut title), car les utilisateurs indécis hésitent avant de cliquer sur un lien, ils ne savent pas où ils les mèneront, et dans ce cas, une info-bulle perspicace peut vous aider.


Edit: j'ai trouvé cette page intéressante sur wikipedia détaillant les propres conventions de wikipedia pour désigner les liens externes, avec un tableau d'exemples. Ils vont encore plus loin en distinguant différents types de ressources liées, comme on peut le voir sur ma capture d'écran (accent rouge ajouté). enter image description here

8
kontur

Je vais offrir un contrepoint à la plupart des réponses. Jouant en partie l'avocat du diable, peut-être.

Ne faites pas de distinction entre les liens internes et externes.

Pourquoi? Les gens s'en moquent. Ils utilisent Internet pour trouver des informations et se feront un plaisir de suivre les liens qui, selon eux, les mèneront là où ils veulent aller.

D'après mon expérience (certes, il ne s'agit en aucun cas d'une pensée scientifique), la conviction que les liens sortants doivent être traités différemment découle du sentiment des clients que leur site est plus important que leurs clients ne le pensent.

Vous entendez souvent des arguments "nous devons lancer des liens externes dans une fenêtre contextuelle afin que les utilisateurs puissent revenir sur notre site". Je trouve que la croyance arrogante que les utilisateurs veulent revenir. Ils peuvent. Et s'ils le font, ils peuvent certainement utiliser ce bouton de retour. Mais il y a de fortes chances qu'ils se concentrent vraiment sur l'obtention des informations qu'ils recherchent. Et si votre site les conduit à ces informations de la manière la plus discrète possible, c'est une bonne expérience utilisateur.

6
DA01

La plupart des nouveaux sites que je conçois, j'ai tous les liens sortants ouverts dans une nouvelle fenêtre/un nouvel onglet (avec target = "_ blank") tandis que tous les liens internes s'ouvrent dans le même onglet. Il ne faut pas longtemps à la plupart des utilisateurs pour comprendre ce modèle (qui semble devenir plus courant) et comprendre que si une nouvelle fenêtre s'ouvre, la page provient d'un site différent. Certes, ils ne sauront pas qu'il s'agit d'un lien sortant avant l'ouverture du nouvel onglet.

Je pense que c'est une bonne idée d'indiquer visuellement qu'il s'agit d'un lien sortant et que les suggestions de kontur sont bonnes. Ce serait bien si cette convention pouvait être quelque peu standardisée. Dans tous les cas, il ne ferait pas de mal d'attacher une classe (peut-être "outbound-link") à tous les liens sortants afin de pouvoir brancher (et modifier) ​​une indication visuelle appropriée à l'avenir.

0
obelia

Pourquoi ne pas utiliser un soulignement tout le temps (survol ou autre) pour les liens sortants? Et pas de soulignement pour les liens sur site. De toute évidence, les utilisateurs devront s'y habituer, mais ils devraient éventuellement l'obtenir.

Vous pouvez également utiliser des soulignements en pointillés pour les liens sur site.

0
naveed

Les liens doivent toujours être de même style, qu'ils soient internes ou externes.

Ne forcez pas vos utilisateurs à trop réfléchir ( charge cognitive étrangère external site).

Cependant, bien que le lien doive être de même style, il peut être utile d'indiquer la fonction exécutée par le lien par d'autres méthodes. Les infobulles ou les petites icônes sont les plus courantes:

link icons

Image utilisée à partir de askthecssguy external site

Vous pouvez également être en mesure d'indiquer des liens externes uniquement à partir du contexte, par exemple wikipedia a un manuel de style sur la façon d'utiliser les liens dans les articles. Du contexte, il est évident que cela serait lié à wikipedia.

Bien sûr, cela devient plus difficile lorsque vous liez via une image plutôt que du texte. Les info-bulles sont faciles à mettre en œuvre mais nécessitent que l'utilisateur passe la souris. Mieux vaut peut-être insérer une icône dans le coin de l'image.

0
Tims