web-dev-qa-db-fra.com

Quelles sont les raisons de distinguer les hyperliens avec des soulignements épais et bleu clair?

À ma connaissance, pour éviter les distractions dans la lecture du flux, les soulignements doivent être évités dans toutes les circonstances , pas seulement les hyperliens. La BBC évite de les colorier et les met en gras à la place. Cependant, le magazine Wired choisit délibérément des soulignements épais et bleu clair pour les distinguer. Cela ne contredit-il pas les recommandations? Pourquoi donc?

enter image description here

2
Ooker

Je veux dire, la version courte et sarcastique de cette réponse pourrait être "parce que c'est câblé". Ils l'ont un peu atténué au fil des ans, mais Wired a été plus ou moins fondé sur le principe de la conception audacieuse de la lisibilité - par rapport à leurs premiers jours de gloire de texte vert citron 10pt sur un fond rose fluorescent, cela peine à peine . Ils ne sont pas exactement ceux que je considérerais comme un exemple de typographie fonctionnelle, en d'autres termes.

Mais même en mettant de côté cette histoire, cette décision de conception particulière est défendable. Le soulignement bleu est une référence évidente à l'indicateur de texte souligné en bleu d'origine pour les hyperliens. (Vous devez indiquer les liens en quelque sorte, et il est très raisonnable d'utiliser un indicateur qui est familier depuis le début des années 1990.) Pendant ce temps, son épaisseur et sa couleur relativement claire améliorent toutes les deux la lisibilité par rapport à l'original barebones - esthétiquement, il ressemble plus à un stylo surligneur qu'à un vrai soulignement.

À ma connaissance, pour éviter les distractions dans la lecture, les soulignements de flux doivent être évités en toutes circonstances, pas seulement les hyperliens.

C'est quelque part entre "surévalué" et "simplement incorrect". L'utilisation du soulignement pour l'accentuation est généralement déconseillée dans le matériel imprimé , car il est moins lisible que les autres formes d'accentuation typographique qui sont disponible. Dans le matériel en ligne, les soulignements pour mettre en valeur sont à éviter spécifiquement parce qu'ils interfèrent avec l'idiome généralement compris que le texte souligné est un lien.

Les liens ne doivent pas être soulignés, mais c'est toujours largement recommandé en raison de sa familiarité et accessibilité (tout le monde sait ce que cela signifie, et les daltoniens peuvent toujours le voir.) Même votre exemple BBC utilise toujours des soulignements sur les liens dans le texte - les titres devraient être cliquables, donc n'indiquez rien d'autre que l'état de survol, mais les liens en ligne obtiennent un soulignement gris clair pour les distinguer du gras pour l'accentuation.

4
Daniel Beck

Le style n'est pas synonyme d'accessibilité et d'accessibilité

Beaucoup de décisions de conception visuelle sont prises plus pour l'esthétique que pour l'accessibilité, la compréhension de la lecture et la capacité visuelle. Il y a un changement vers un style dans certains sites, dans lesquels les liens utilisent une propriété CSS border-bottom pour souligner l'épaisseur de la bordure. Ainsi, dans votre exemple, la possibilité de cliquer est assez forte en raison de la bordure, même si le texte est indiscernable.

Problèmes de lecture du texte souligné

Vous vous référez peut-être à l'étude de 2003: Comparing Link Marker Visualization Techniques - Changes in Reading Behavior

Bien que cette étude montre qu'il y a une certaine lisibilité entravée en raison des liens soulignés (en particulier avec du texte avec un taux élevé de liens intégrés), il y a encore des problèmes de recherche et d'accessibilité.

Problèmes d'accessibilité et perception

De Nielsen Norman: Un guide plus ancien (mais utile) pour meilleures pratiques de lien hypertexte

Les liens textuels doivent être colorés et soulignés pour obtenir la meilleure possibilité perçue de cliquabilité, bien qu'il existe quelques exceptions à ces directives.

Une exception ...

En supposant que le texte du lien est coloré, il n'est pas toujours absolument nécessaire de le souligner.

Il existe deux cas principaux dans lesquels vous pouvez éliminer les soulignements en toute sécurité: les menus de navigation et d'autres listes de liens. Cependant, cela n'est vrai que lorsque la conception de la page indique clairement la fonction de la zone. (N'oubliez pas: votre conception peut ne pas être aussi évidente pour les utilisateurs externes que pour les membres de votre équipe.) Les utilisateurs comprennent généralement un rail de navigation de gauche avec une liste de liens sur un arrière-plan coloré, en supposant qu'il ressemble aux zones de navigation de la plupart des utilisateurs. d'autres sites.

À partir du W3: Critère de réussite (SC) 1.4.1: Utilisation de la couleur

La couleur n'est pas utilisée comme seul moyen visuel de transmettre des informations, d'indiquer une action, de provoquer une réponse ou de distinguer un élément visuel. (Niveau A)

De Ergonomie.gov:

Le pro:

Les liens sont faciles à trouver car les utilisateurs comprennent que le texte souligné signifie qu'il s'agit d'un lien. Le soulignement attire leur attention. Lorsque vous supprimez les charges pour les utilisateurs, vous évitez les retards et accélérez l'accès au contenu souhaité.

Le con:

Si vous choisissez de ne pas souligner les liens, gardez à l'esprit que vous souhaitez éviter les indices trompeurs. Le signal pour sélectionner un lien doit être sans ambiguïté; il doit également être utilisé de manière cohérente sur l'ensemble de votre site.

Outre l'encombrement visuel, il arrive que des liens soulignés ne soient pas appropriés, comme dans la navigation de gauche et la navigation par onglets. Dans une longue liste, en particulier ceux à puces, la quantité écrasante de texte et soulignant entrave la lisibilité. L'encombrement visuel peut être particulièrement répandu sur les pages d'accueil qui sont lourdes de liens et de texte, ainsi que sur les pages d'index et les pages de lancement.

Baymard a des articles intéressants non seulement sur les hyperliens, mais aussi quelques options pour mettre en évidence le texte à mettre en évidence par rapport aux hyperliens réels.

3
Mike M