Pas de liens sur les images

Voici le grand principe html du jour : ne pas faire de liens hypertexte sur les images. Je m’explique.

Les images nous cachent des choses

Sur une image l’utilisateur ne sait pas au premier coup d’oeil que c’est un lien, rien de souligné ou de couleur differente du texte comme on peut le faire avec le texte. Rien ne différencie une image avec un lien d’une image sans.

Il faut donc attendre que l’utilisateur survole l’image et voie son curseur se transformer pour qu’il sache que c’est un lien ou bien utiliser des codes visuels (boutons, etc.) pour qu’il sache que c’est un lien.

Les images nous cachent aussi les différents etats d’un lien. Un lien hypertexte a aussi une couleur ou une présentation différente quand survolé, quand cliqué et quand déjà visité. Il est donc souvent impossible à l’utilisateur de voir rapidement quels liens il a déjà visité si le lien est une image !

Les Grandes Exceptions

Les images en haut à gauche des pages comme la grosse banière ici sur Sunfox ou le logo Google ont interêt à avoir un lien vers la page principale car c’est à ça que s’attend l’utilisateur. Et c’est de moindre importance ici de savoir si elle a déjà été visitée ou non.

Ne pas faire

On ne voit ici aucune différence entre les deux images, on serait passé à côté du lien si on ne le survolait pas de la souris. Et comme le web n’est pas un jeu du chat et de la… souris, on ne va pas s’amuser à survoler tout ce qui se trouve sur l’écran…

[Photo de renard avec la peau sur les os]

Mais faire

Ici l’on sait tout de suite que ces images nous amènent vers une autre page :

Ces deux dernières images ont également l’avantage de rester dans les mêmes couleurs des autres liens, et surtout de pouvoir changer de couleur de lien quand survolé et une fois le lien déjà visité !

Je suis un peu coupable

L’image sur mes gouttes est un exemple de graphique entre les deux où on pourrait s’attendre à un lien mais qui ne serait pas obligatoire.

Enfin, rappellons qu’il est beaucoup moins frustrant de rater un lien que de survoler une image en s’attendant à ce que ce soit un lien…

1 Monique :

Bonjour,

Intéressante réflexion :-)

Dans le cas d’images pour un menu, la fonction lien est plutôt évidente pour le visiteur cependant, non seulement il ne bénéficiera pas du changement d’aspect lors d’un changement d’état, mais il sera aussi privé de la possibilité de modifier la taille des caractères si celle-ci n’est pas adaptée à sa vue :-(

Amicalement,
Monique

2 Sunny :

Merci, c’est vrai que c’est aussi à prendre en compte le fait que l’agrandissement des caractères est impossible sur une image, de même que le changement des couleurs (daltonie, etc.).

L’image ne doit donc en règle générale n’exister que pour soutenir le texte et ne doit jamais être indispensable !

3 wasted :

Spa pour dire, mais ton site la il fonctionne sous ie. Bon cest tout casse mais ca marche. Salete de cybercafes.
Thx dude.

4 Sunny :

Bah, ça marche une fois sur deux avec ie :p.

5 wasted :

avec ie 6.0 ca a lair de fonctionner, faudra que je regarde la version de lautre ie

Sunfox