Quand faut-il souligner les hyperliens?
Avez-vous remarqué que de plus en plus de sites Web ont supprimé les soulignements des hyperliens? Par exemple, le test bêta actuel de Google n'a pas de soulignement sur les résultats de recherche.
Google, ainsi que d'autres sites Web de grands noms, ont progressivement éliminé les hyperliens soulignés au fil du temps. Pourquoi cela arrive-t-il? Quand devrions-nous supprimer les soulignements de nos conceptions?
Personnellement, je pense que les liens non décorés sur les résultats de recherche Google sont plus difficiles à analyser. Le soulignement utilisé pour guider mon œil lors de la lecture du titre. Maintenant, le titre et la description se mélangent. J'ai également ressenti cela lorsque ux.stackexchange a déplié et allégé les titres des threads. Les titres n'ont plus d'importance, il est donc plus difficile de les numériser. Qui sait ce qui me fait penser de cette façon ... cela peut être l'aversion de la nature humaine au changement ou cela peut être une véritable préoccupation d'interface utilisateur.
Les liens soulignés peuvent avoir un effet négatif sur la lisibilité, selon cette étude de 2003 comparant la lisibilité du texte pour le texte brut, les hyperliens bleus standard et les marqueurs de liens superposés .
Une étude ultérieure étude comparant différentes techniques de visualisation des liens a révélé qu'à cette époque (2004), l'internaute commun était conditionné à des liens bleus soulignés, mais ne pouvait pas indiquer une technique de visualisation optimale.
les directives de Microsoft sur les liens sont clairs et montrent des exemples de ce qui fonctionne pour différents modèles fonctionnels:
La directive fondamentale est que les utilisateurs doivent être capables de reconnaître les liens uniquement par inspection visuelle - ils ne devraient pas avoir à passer la souris sur un objet ou à cliquer dessus pour déterminer s'il s'agit d'un lien.
Le texte souligné en bleu n'est qu'une des nombreuses façons d'indiquer qu'un lien est un lien (mais comme c'est la convention depuis si longtemps, vous ne devriez vraiment pas utiliser de texte souligné en bleu pour les non-liens). En plus d'avoir un style visuel approprié, d'autres facteurs sont le contexte, le texte du lien et la cohérence à travers l'interface.
De mon point de vue, le principal problème avec le test Google est que sans les lignes horizontales, les différents éléments se mélangent et le rythme visuel est rompu, il devient donc plus difficile de parcourir la liste. Il s'agit d'un problème de base de style de liste avec de nombreuses solutions (par exemple, la manière iphone d'afficher des listes).
Deux choses à garder à l'esprit lors de l'utilisation de la couleur uniquement pour le style des liens:
WCAG 2. indique (pour le niveau A!):
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 visuel élément.
Donc, si vous voulez que votre site soit accessible, vous devez ajouter un autre repère visuel à vos liens. Ceci pourrait (mais pas has to) être un soulignement. Cependant, si le contraste est suffisamment élevé et que vous fournissez un comportement de mise au point différent, la couleur seule pourrait être suffisante . Voir aussi G182 et F7 .
Si vous n'utilisez pas de ligne ou d'arrière-plan pour styliser les liens (en plus de la couleur du texte), les utilisateurs auront le problème de distinguer les liens adjacents . Comment savent-ils si deux mots ou plus sont liés à une seule page OR deux pages ou plus? Ils doivent survoler/concentrer le ou les liens pour être sûr. S'ils ont déjà cliqué sur (et n'a pas reconnu le changement de style en partie après le vol stationnaire/la mise au point), il est possible qu'ils reconnaissent un style en partie "actif".
Je n'ai pas utilisé de liens soulignés depuis au moins 5 ans, sauf si c'était une décision stylistique. D'un point de vue esthétique, ils sont tout simplement laids, mais du point de vue de l'utilisabilité, je trouve que mon œil a tendance à sauter de lien en lien, ce qui rend difficile la lecture du texte intégral.
Cela signifie que je passe énormément de temps à jouer avec les styles, les poids et les couleurs pour obtenir un contraste significatif entre le corps du texte et les liens qui ne sont pas aussi choquants que les liens soulignés en bleu, mais cela me fait plaisir!
Il est probablement préférable de toujours souligner vos liens. Il n'y a pas suffisamment de preuves de l'effet des liens sur la lisibilité (l'étude qui a été liée plus tôt montre un effet presque insignifiant de souligner les liens sur la lisibilité - et une étude n'est pas suffisante pour prendre une décision de conception aussi importante de toute façon).
Le point de souligner les liens est de signifier leur fonctionnalité, afin que l'utilisateur toujours sache si une partie du texte est un lien. Cela peut en fait se faire de plusieurs manières, mais les liens de soulignement sont les meilleurs à l'époque.
Vous pouvez, bien sûr, utiliser la couleur pour signifier la fonctionnalité des liens. Cependant, cela limite considérablement votre choix de couleur, car tous les liens doivent être du même ton. Pas de liens gris si vous avez choisi le bleu comme couleur de lien! Sinon, rien ne signifiera la fonctionnalité des liens (si un lien peut être non seulement bleu, mais aussi gris, alors pourquoi pas une autre couleur?
Mais ce n'est pas tout. Considérez le fait que votre site Web n'est pas le seul sur le Web. Un utilisateur ne peut pas être sûr que la couleur du lien est cohérente dans votre site Web. Un utilisateur ne peut tout simplement pas savoir si c'est le cas.
Ainsi, souligner les liens est en fait le moyen le plus pratique de signifier la fonction des hyperliens. Les utilisateurs y sont habitués. Il peut également être esthétique, s'il est bien fait (d'une part, la hauteur de ligne devrait être suffisante). Quant à ses effets sur la lisibilité, c'est une question ouverte. Notez que l'étude de l'Université de Hambourg suggère que les liens soulignés affectent négativement la lisibilité lorsque les liens sont répartis sur un bloc de texte . Mais même si leur lisibilité est inférieure, je pense que leur effet positif sur la convivialité l'emporte sur la diminution possible de la lisibilité.
Vous remarquerez que la plupart des liens sur cette page ne sont pas soulignés. :)
J'aime utiliser des traits de soulignement en pointillés pour indiquer AJAX liens, qui s'ouvrent dans la page en cours (et qui ne peuvent pas être cliqués au milieu). Fog Creek l'utilise pour leurs liens dans Four :
Mais je ne peux pas dire que c'est un style largement utilisé.
L'important est que les liens soient bleus et qu'ils se démarquent du reste du texte - cela suffit pour dire aux utilisateurs: "c'est un lien". Vérifiez les liens sur le côté droit de cette page - je ne les confond pas avec du texte normal même s'ils manquent de soulignements. C'est tout une chose esthétique, souligne rompt le flux propre d'un texte. Pour améliorer encore la rétroaction que le texte est un lien, on peut mettre un soulignement lors du survol du texte.
En plus des bons points que d'autres réponses ont soulevés concernant les avantages de souligner les liens, une autre considération importante est la montée en puissance des appareils mobiles et autres interfaces utilisateur tactiles, qui manquent de fonctionnalité de survol. Sur Wikipédia, je rencontre souvent du texte comme " PresidentTruman ". Combien de liens est-ce? Avec la feuille de style par défaut qui manque de soulignements pour les liens, la réponse n'est probablement pas ce que vous pensez, et si vous cliquez allègrement sur le mot "Président", vous serez probablement emmené quelque part où vous ne vous attendiez pas. (C'est d'ailleurs la raison pour laquelle j'ai modifié ma feuille de calcul utilisateur Wikipédia pour souligner tous les liens.)
Les utilisateurs de bureau expérimentés savent survoler le texte pour voir si un soulignement apparaît ou, si le propriétaire du site n'a pas ajouté de fonctionnalités de survol aux liens, voir au moins si différentes URL apparaissent dans la zone d'état. Mais qu'en est-il des utilisateurs d'appareils mobiles ou de tablettes? Ils sont obligés de taper au hasard et d'espérer le meilleur, à moins qu'ils ne soient suffisamment poussés à appuyer longuement sur différentes parties de la phrase pour voir s'ils conduisent à des URL différentes.
L'essentiel: les concepteurs UX attentionnés prennent en compte les utilisateurs mobiles lors du développement de styles de lien.
Le problème n'est pas quand, car tous les hyperliens doivent avoir la même apparence sur un site, mais s'ils doivent être soulignés ou non, et cela dépend principalement de votre charte graphique. Qu'est-ce qui va devoir être souligné, comment cela n'entrera-t-il pas en conflit, etc.