web-dev-qa-db-fra.com

Les hyperliens doivent-ils être bleus?

J'ai construit un site où tous les hyperliens ont les couleurs par défaut: bleu pour les liens, violet pour les liens visités. Ils deviennent rouges en vol stationnaire.

Je pense que toujours utiliser le bleu pour les hyperliens est une bonne chose, afin que vos utilisateurs puissent rapidement voir ce qu'est un hyperlien et ce qui ne l'est pas. Cependant, certains de mes collègues ne sont pas d'accord et veulent d'autres couleurs.

Que pensez-vous de ceci?

42
Husky

Une norme, comme # 0000FF pour les liens non visités et # 800080 pour les liens visités, n'est bonne que si presque tout le monde le fait. Sinon, les utilisateurs ne peuvent pas prévoir quand la norme sera et ne sera pas respectée et ne peuvent donc plus l'utiliser pour prédire le comportement du site. Malheureusement, la plupart des sites Web ne respectent pas ces normes de couleur. Dans une enquête aléatoire (à ne pas confondre avec une enquête aléatoire), je trouve que moins d'un tiers des sites sont conformes à la norme. D'après mon expérience, les utilisateurs qui sont relativement nouveaux sur le Web peuvent même ne pas être au courant de la norme - ce n'est tout simplement pas quelque chose qu'ils ont pu tirer de leur expérience. La couleur s'est avérée trop importante d'un attribut graphique à des fins esthétiques et de marque pour que les concepteurs suivent strictement la norme. Franchement, ce n'était pas un grand standard de toute façon - il est difficile pour certains utilisateurs de se concentrer sur du texte bleu à haute saturation, en particulier les utilisateurs plus âgés. Dans l'ensemble, je ne pense plus qu'il soit très utile de se conformer à cette norme.

Cependant, il est toujours judicieux de rendre vos liens bleus dans un sens plus large. Plus de 80% des sites que j'ai sondés utilisent une certaine nuance de bleu pour le lien. Donc, même si ce n'est pas exactement un standard sur lequel les utilisateurs peuvent compter, je pense qu'ils auront tendance à supposer que le bleuâtre est plus lié que les autres couleurs. D'après ce que j'ai vu, vous pouvez vous en sortir en utilisant une couleur non bleue pour les liens tant qu'il s'agit d'une couleur distincte (vos utilisateurs ne devraient pas je ne dois pas passer la souris sur chaque texte de couleur pour voir s’il s’agit d’un lien ou non). Cependant, s'il est tout à fait raisonnable d'utiliser du bleu, alors passez au bleu.

Encore plus important que le choix de la couleur est de souligner vos liens , au moins pour les liens qui ne figurent pas dans un menu supérieur ou latéral. Plus de 90% des sites que j'ai consultés utilisent le soulignement pour distinguer les liens (bien que souvent au survol uniquement), ce qui en fait une convention très suivie. Soulignant également soigneusement les problèmes d'accessibilité de la couleur, y compris les problèmes impliquant la petite minorité d'utilisateurs complètement daltoniens.

L'assemblage, je recommande à peu près le mêmes choses que Jakob Nielsen a recommandé il y a six ans:

  • Pour un site donné, utilisez une couleur pour tous les liens non visités. L'utilisation de plusieurs couleurs pour signifier un lien non visité augmente la charge d'apprentissage de votre site et rend plus difficile pour les utilisateurs de rechercher les liens à sélectionner.

  • Par "couleur", je veux dire qu'il a une teinte - les liens ne doivent pas être noirs, blancs ou gris. Les non couleurs indiquent un texte sans lien aux utilisateurs.

  • S'il y a du bleu dans la palette de votre site, utilisez ce bleu pour les liens.

  • N'utilisez jamais la couleur de lien choisie pour le texte sans lien sur le site. Cela confondra les utilisateurs sur ce qui est et n'est pas un lien, ce qui va à l'encontre de l'objectif de colorier les liens.

  • Soulignez tous les liens. Utilisez le survol de la souris avec prudence. Je ne le considérerais que si les liens sont bleus ou si les liens sont dans un menu supérieur ou latéral.

  • Ne jamais souligner les non-liens. Utilisez plutôt l'italique ou le gras pour mettre l'accent.

Pour les sites à contenu statique, la recherche suggère d'afficher liens visités d'une couleur différente . Cependant, sans couleur spécifique pour les liens non visités, il est difficile de savoir quoi utiliser pour un lien visité. Seul un tiers des sites que j'ai sondés distinguent les liens visités et non visités, et la plupart d'entre eux n'utilisent pas le violet pour leurs liens visités, donc je ne sais pas à quel point les utilisateurs connaissent cette convention. Le codage couleur est arbitraire ici - il n'y a rien de violet en soi qui signifie "visité". Les utilisateurs peuvent être en mesure de déduire le sens une fois qu'ils ont cliqué sur un lien et revenir en arrière et voir le changement de couleur, mais imaginez un utilisateur qui revient sur le site un mois plus tard, et certains liens sont d'une couleur tandis que d'autres sont de couleur différente - il peut avoir du mal à se rappeler qui est lequel.

Tout ce que je peux suggérer est d'essayer de tirer parti d'expériences utilisateur plus larges et d'adopter une couleur d'apparence "usée" pour les liens visités. Cela devrait avoir une saturation des couleurs inférieure à celle des liens non visités (compatible avec l'utilisation de # 800080 par rapport à # 0000FF), mais une saturation inférieure en elle-même n'est probablement pas suffisante pour rendre les visites correctement distinctes des non visitées pour tous vos utilisateurs. Quoi d'autre? Déplacer vers le rouge la teinte comme certains sites, compatible avec l'utilisation du violet par rapport au bleu? Utilisez une couleur plus claire, comme le font d'autres sites pour que le lien ait l'air "fané"? Utilisez une couleur plus foncée comme le font d'autres sites pour faire en sorte que le lien se mélange davantage avec du texte ordinaire? Je pense que cela nécessite des recherches, puis nous devons en faire une norme.

32
Michael Zuschlag

La convention est agréable lorsque votre jeu de couleurs le permet, mais la cohérence interne est plus importante, alors ne vous sentez pas obligé de vous en tenir à la palette bleu/violet/rouge. Il est également essentiel que vos liens soient différenciés du texte normal. La différenciation est généralement réalisée par la couleur, le poids ou un soulignement. Différentes couleurs pour différents états de liaison augmentent la convivialité.

27
Virtuosi Media

Que les liens soient bleus ou non est une vieille discussion. Jakob Nielsen, pour sa part, est connu pour le défendre, bien qu'il ait changé au fil des ans: en Page d'accueil de la convivialité il fait valoir son point de vue modifié ( Nielsen & Loranger 2006, p. 100).

Cependant , plus important que #0000FF les liens colorés sont que vous changez la couleur des visités links . Pas nécessairement au violet, mais à quelque chose (notamment) différent.


Mon opinion (inspirée): Esthétique est important. Par conséquent, je choisirais une couleur de lien distincte qui correspond à la sensation visuelle globale, que ce soit #0000FF ou une autre couleur.

8
jensgram

La raison de cet horrible bleu est que les personnes daltoniennes (c'est-à-dire le cas le plus courant de daltonisme) peuvent faire la distinction entre le noir et le bleu, de sorte qu'elles voient réellement la différence. Si vous avez un grand nombre d'utilisateurs qui pourraient potentiellement être daltoniens (par exemple google ou bing), vous voudrez peut-être respecter cette convention. Sinon, vous n'avez pas besoin de le faire si cela ne fonctionne pas avec votre conception. Mais vous pouvez au moins souligner les liens ou les rendre différents en dehors de la couleur.

3
Lukas Oppermann

Ils n'ont pas besoin d'être bleus, juste cohérents. Et par cohérent, je ne veux pas dire qu'ils doivent tous être d'une seule couleur. Liens dans la navigation vs liens dans le pied de page vs liens dans le contenu - ils peuvent chacun avoir leur propre couleur, tant qu'ils sont cohérents dans leurs zones, et se démarquer comme cliquables.

À mon avis, il est préférable que les couleurs des boutons soient également cohérentes avec les couleurs des liens, donnant à l'utilisateur une couleur "ceci est cliquable", pas seulement une couleur de lien. Je suis également d'accord avec les commentaires précédents sur les liens visités - ils n'ont pas besoin d'être radicalement différents, mais sensiblement différents.

Enfin et surtout, lorsque vous définissez des couleurs de lien, définissez les couleurs d'arrière-plan et de texte.

Ne présumez pas que vous commencez avec un fond blanc, du texte noir et des liens bleus/violets - l'utilisateur peut les modifier. Vous devez configurer votre navigateur pour utiliser des couleurs autres que celles par défaut, afin que vous puissiez voir quand vos sites (et tant d'autres) ne parviennent pas à les définir. (La couleur d'arrière-plan de mon navigateur est définie sur gris clair, texte marron, liens vert vif, liens visités vert foncé et survol de lien orange.)

2
Webveloper

Premièrement, le problème clé avec les liens n'est pas tant de savoir s'ils sont d'une couleur spécifique, mais de s'assurer qu'ils sont suffisamment différenciés pour qu'il soit clair qu'ils sont des liens.

@VirtuosiMedia et @jensgram, je conviens que la différenciation des liens visités est bonne, mais la clé est tout simplement de s'assurer que vos liens se démarquent. En particulier maintenant, avec la surcharge d'informations et la numérisation par rapport à la lecture, les utilisateurs doivent voir les liens en un coup d'œil et il est utile de savoir si vous avez visité quelque chose, en particulier quelque chose que vous n'avez pas visité depuis la page sur laquelle vous êtes. . Je crois que ce concept est plus important si l'on lit du contenu dans un domaine ou une industrie principale, où de nombreux sites renvoient au même matériel. Nous devons toujours nous rappeler que les utilisateurs peuvent remplacer le comportement des liens visités dans les paramètres de leur navigateur (comme je le fais).

@Lukas et @Charles Je suis également d'accord pour dire que le soulignement ne fonctionne pas nécessairement. Si vous concevez pour un contraste suffisamment élevé, pour ceux qui sont daltoniens, l'utilisation d'une couleur différente peut également ne pas suffire. Plus vous pouvez différencier vos liens et plus de pseudo-classes après cela, mieux c'est. Par exemple, avec un design simple et net, la couleur de texte # 333 et la couleur de lien # 000 ne seront probablement pas suffisantes pour les utilisateurs à faible acuité ou daltoniens, mais rendre le lien noir en gras et souligné peut être suffisant. Il serait alors préférable de changer l'état en vol stationnaire et en mode actif, puis de changer à nouveau, peut-être en quelque chose comme un # 999 dans le cas que j'ai cité ci-dessus.

@Stewbob Vraiment? Même si cela rend votre design puant pour coller au bleu, vous devriez le faire? À peine.

1
jameswanless

Je ne pense pas que la couleur spécifique soit importante, ni même qu'elle soit soulignée. Tant qu'il est immédiatement évident qu'ils peuvent être cliqués, alors ça va.

J'ai été sur des sites où j'ai dû aller à la chasse (avec ma souris) pour quelque chose sur lequel je peux cliquer. Si le curseur se transformait en petite main, je savais que je pouvais cliquer dessus. Pour moi, c'est une conception très médiocre.

Bien que chaque conception de site soit différente, je pense qu'en général, il devrait être évident de savoir sur quoi cliquer pour effectuer une action en regardant simplement (passivement) la page. Cela dit, suivre les normes générales, en termes de situation, c'est bien. De nombreux sites Web auront les informations de compte en haut à droite. Encore une fois, j'ai été sur des sites dans le passé où j'ai dû passer 5 minutes ou plus à essayer de trouver le lien "déconnexion/déconnexion".

0
Antony Scott

Voici Microsoft publié normes pour les liens . Il existe une section spécifique sur le lien couleurs et les arrière-plans, avec des illustrations amusantes d'utilisation incorrecte.

0
JeromeR