Les liens hypertextes
Il existe deux catégories de liens de navigation: les liens internes qui pointent vers un document du site en question et les liens externes qui dirigent vers d'autres adresses web. Ne soyez pas avares de liens externes sous prétexte de contenir le surfeur sur vos pages. Utilisés à bon escient, ils représentent une plus-value pour votre site et votre visiteur reviendra en sachant qu'il peut trouver des informations qu'il l'intéresse.
Dans tous les cas, vos liens doivent être courts de préférence, explicites et la destination doit avoir un rapport direct avec le lien.
Les liens changent de couleur
Les utilisateurs ont souvent la mémoire courte et le clic facile. Difficile pour eux de savoir où ils ont déjà été, où ils sont et où ils désirent se rendre. Tutoweb utilise un formatage particulier pour les liens, les liens survolés et les liens visités. Dans son dernier rapport de 2006, Nielsen pointe du doigt ce problème qu'il qualifie de « grave » et récurant sur la plupart des sites. Seule exception à la règle: les zones régulièrement visitées (ex: un menu de navigation).
Au début, les ergonomes conseillaient aux webmasters de se normaliser aux couleurs par défaut, devenu un standard reconnaissable par tous; liens en bleu et liens visités en violet. Cette notion est depuis longtemps dépassée. Aujourd'hui, les liens doivent être simplement mis en évidence par rapport à leur contexte. Les concepteurs font appel à une feuille de style pour harmoniser la couleur des liens avec leur charte graphique. De cette manière, les liens sont clairement identifiables.
On doit cette habitude aux machines à écrire pour lequel le soulignement était la seule façon de mettre un texte en évidence. |
Libeller correctement les liens
L'internaute survole les pages en diagonale et son œil est attiré par les liens mis en exergue. Un lien « cliquez ici » ne lui donne aucune information de ce qui l'attend en cliquant dessus. Il est obligé de lire le texte avoisinant pour comprendre. Un lien correctement formulé et concis est beaucoup plus pertinent pour les moteurs de recherche. Aussi, certains logiciels regroupes les liens les uns à la suite des autres. Quid des intitulés vides de sens et se suivent ?
Une description est un plus
Les liens peuvent être accompagnés d'une brève description ou de l'adresse cible grâce à l'attribut title. Lorsque la souris s'attarde sur le lien, la plupart des navigateurs affichent une info-bulle. Cette information est précieuse pour les lecteurs d'écran. Pensez-y.
<a href="http://www.tutoweb.com/" title="Tutoriels pour le web">Tutoweb</a>
Lien en image
Évitez de mettre les liens uniquement sur des éléments graphiques. Des études ont montré que l'attention du visiteur se portait en priorité sur le texte plutôt que sur les images.
Inconvénient supplémentaire, elles sont plus lourdes à charger et elles n'indiquent pas si les liens ont été visités ou non. Impossible non plus de faire intervenir une feuille de style personnelle au visiteur puisque les liens sont en réalité des images.
Paradoxalement, les éléments mis en évidence (graphique important ou qui bouge) sont généralement ignorés car souvent associés à de la publicité.
Absolu plutôt que relatif
Un lien relatif est la liaison entre un emplacement de départ et un fichier. On pourrait ajouter un lien interne du genre: <a href="C:\Site\siteperso\index.html">. Ou encore, un lien par rapport à un nom de domaine: <a href="http://www.monsite.com/index.html">. Tout fonctionnerait parfaitement dans un navigateur web en local. Par contre, que deviendrait les liens du premier exemple une fois les pages envoyées sur le serveur ? Pensez-vous que le lien relatif dans le second exemple puisse tenir en cas de changement de nom de domaine ?
Un lien absolu est un lien qui ne dépend pas d'un point de départ: <a href="index.html">. Sur le web, le navigateur est configuré de telle sorte que chaque fois qu'il rencontre un lien de ce type, il part du dossier racine pour suivre le chemin. Il n'y a dès lors plus aucun problème en cas de changement de nom de domaine par exemple.
Ouvrir ses liens dans la même fenêtre
De nombreux concepteurs web décident d'ouvrir les liens externes dans une nouvelle page qui s'ouvre en avant-plan. L'idée est de différencier les sites externes et de conserver la page source en arrière-plan.
Cette manœuvre maladroite brise la logique de navigation, basée sur le passage d'une page à l'autre au sein d'une même fenêtre ! Que dire aussi des personnes qui n'ont pas compris qu'il s'agissait de l'ouverture d'une nouvelle page et qui cherchent à revenir sur la précédente grâce au bouton retour (back) du navigateur ?
Certains lecteurs d'écran émettent un son lors de l'ouverture d'une nouvelle page, mais ils ne le font pas tous. Du coup, le non-voyant est perdu dans sa navigation et cherche à revenir sur le site original.
Signalons au passage que le code HTML pour ouvrir une page dans une nouvelle fenêtre (target="_blank") n'est pas conforme en (X)HTML strict. Si le sujet vous intéresse, Éric Daspet a largement approfondi la question sur Cybercodeur.net (source).
En plus de tous ces arguments, les navigateurs actuels ont tous intégré un système d'onglet qui permet d'ouvrir un lien en arrière-plan. C'est donc lui qui décide au final quel est le comportement de la page et non plus le concepteur du site.
Préférence aux liens profonds
Faut-il indiquer le lien précis d'un article externe (lien profond) ou est-il préférable de passer par la page d'accueil ? A priori, on a tendance à répondre par la première proposition puisque la personne qui clic sur un lien s'attend à avoir un rapport direct avec ce qu'il vient de lire. Mais cela peut poser un problème de droit d'auteur.
Certains gros sites ont élaboré une hiérarchie très poussée à partir de leur page d'accueil qui sert à guider en quelque sorte le surfeur. Proposer un lien profond remet en cause tout ce travail. Cette vision des choses est assez maladroite, car les pages sont indexées dans les différents moteurs de recherche sans faire référence à la page d'accueil.
Mis à part l'exception citée ci-dessous, les liens profonds externes sont plus susceptibles de changement que la page d'accueil. Il convient de les surveiller de près et de ne les utiliser que quand ils sont nécessaires.
Nombre limité de liens
Le contenu de votre page d'accueil doit être sobre et contenir un nombre de liens acceptable. La mémoire à court terme accepte jusqu'a 7 liens présentés en une seule fois. Autrement dit, nous sommes capables de retenir un maximum de 7 informations sur le court terme. En cas de distraction lors de la répétition mentale des items, cette liste est oubliée en quelques secondes.
À ce phénomène de mémorisation, il ne faut pas oublier l'effet de primauté (on se souvient plus facilement des premiers mots) et l'effet de récence (les derniers mots sont toujours mieux mémorisés).
L'hypertexte dans le corps du document
Est-il plus pertinent d'indiquer les liens hypertextes directement dans le contenu éditorial ou plutôt en fin d'article ? Dans le premier cas, les liens sont directement accessibles mais peuvent rompre la lecture... surtout s'ils sont cliqués. Un bien, un mal ? difficile de répondre dans la mesure où rien n'empêche l'internaute de revenir en arrière, ouvrir le lien dans un onglet ou une nouvelle fenêtre.
Dans la pratique, la plupart des sites intègrent directement les liens dans le corps du texte en laissant la liberté au visiteur de faire une escapade ou non. Certains éditeurs de contenu, comme le Journal du Net ou d'autres quotidiens en ligne, optent pour une séparation entre le texte et les liens.
Capture Journal du Net - 02/11/2006
Chasse aux liens brisés
Un lien interne qui pointe vers une erreur 404 ne donne jamais un bon effet... surtout si la page n'est pas personnalisée. Au-delà de deux erreurs de ce type, n'espérez plus revoir votre visiteur perdu à jamais.
Soyez consciencieux et méthodique lorsque vous travaillez. Vérifiez surtout les incidences de pages renommées, déplacées ou supprimées. Utilisez votre éditeur HTML pour repérer les liens brisés ou installez un logiciel chasseur de liens brisés.
Outil en ligne: le W3C a mis en place un système qui scanne vos pages à la recherche des liens morts: W3C Link Checker. Indiquez-lui l'adresse du site racine et il vérifie automatiquement tous les liens associés. Le système peut prendre un certain temps.
Dreamweaver MX: menu - . Dans la fenêtre des résultats, il suffit de double cliquer sur le lien pour afficher la page et de corriger.
Firefox: les utilisateurs de Firefox profiteront de l'extension Link Checker qui affiche les liens rompus en rouge.
Gare au droit d'auteur
Même s'il est d'usage fréquent de fournir des liens sans avoir l'autorisation de l'auteur, certains sites interdisent cette pratique. L'idée est d'avoir une main mise sur les liens qui pointent vers leur site. Quelques exemples:
- www.stib.be
- www.athens2004.com
- www.nespresso.com
- www.lesoir.be
Il est donc prudent de consulter la page des « conditions d'utilisation » pour éviter de s'attirer des petits soucis judiciaires.
Lien cliquable = pub gratuite
Certains webmasters omettent d'indiquer le lien hypertexte sur le texte. On se trouve face à un lien du genre www.monsite.com à la place de www.monsite.com. Il s'agit rarement d'un oubli mais une technique pour éviter la publicité gratuite engendrée par les moteurs de recherche. Le lecteur doit alors sélectionner à la souris l'adresse et la recopier dans son navigateur.
N'oubliez pas non plus, qu'un lien hypertexte cliquable constitue une alerte efficace sur internet. Les entreprises soucieuses de leur image n'hésitent pas à faire de la veille et à se tenir informé sur ce qui est dit à leur sujet.
La mode du « Google bombing »
Technique qui consiste à créer des liens hypertextes vers un site, lesquels sont associés à un mot, ou une expression dénigrante. L'objectif est d'influencer les premiers résultats de la recherche d'un ou plusieurs mot(s) vers un site en question. Le plus connu est apparu après la guerre en Irak mené par le président Bush en 2003: « miserable failure » pointe vers la maison présidentielle américaine. De nombreux autres exemples sur Wikipedia.
En pratique, évitez ce genre de pratique si ce n'est pas clairement expliqué. Le google bombing est une technique efficace pour influencer les résultats dans Google mais c'est en oubliant votre lectorat qui ne comprendra pas l'intitulé saugrenu d'un lien.
Évitez les Accesskey
Les accesskeys (touches d'accès) permettent d'atteindre une page via un raccourci-clavier. Pour le webmaster, il suffit d'ajouter l'attribut accesskey="chiffre" dans le lien.
<a href="index.htm" accesskey="1">Accueil</a><a href="actualites.htm" accesskey="2">Actualites</a><a href="articles.htm" accesskey="3">Articles</a><a href="apropos.htm" accesskey="4">À propos</a>
Ces raccourcis posent des problèmes récurrents. L'utilisateur n'a pas connaissance de leur présence. Certains webmasters attentionnés, mettent en évidence un lettre du menu mais cela ne suffit pas à rendre l'outil intuitif. Autre difficulté, les raccourcis sont différents d'un site à un autre. Enfin, l'accès aux touches varie selon le navigateur: Alt + Maj + chiffre (haut du clavier)fonctionne sur Firefox mais pas sous Internet Explorer.
Javascript
Évitez d'activer vos liens via JavaScript. De nombreux utilisateurs le coupent dans l'espoir de voir disparaître les publicités en popup, et votre lien devient inutile pour les moteurs de recherche.
Ajouter la langue du lien pointé
Informez vos visiteurs de la langue de destination du lien grâce à l'attribut hreflang. Cela peut servir également au lecteur vocal qui change alors son mode de prononciation. À noter qu'Internet Explorer ne gère pas cet attribut normalisé. Il n'est cependant pas utile de préciser la langue du lien si celle-ci est identique à la page active.
Au lieu d'écrire la langue manuellement, utilisez une feuille de style. Dans l'exemple ci-dessous, chaque fois que vous définissez une valeur dans l'attribut hreflang, il l'ajoute entre crochet à la fin du lien.
Dans la feuille de style:
a[hreflang]:after {content: " [" attr(hreflang) "] ";}
Dans le code source:
<a href="http://www.google.com/" hreflang="en">Google en anglais </a>
Plus la cible est grande mieux c'est
La loi de Fitts: le temps nécessaire pour cliquer sur une cible est inversement proportionnel à la taille de la cible. Autrement dit, plus la cible est petite plus on mettra du temps à cliquer dessus. Dans la page de résultats Google, ce dernier affiche des numéros de pages en bs de la recherche. Ils sont tellement petits que l'utilisateur risque de se tromper. Le bouton suivant permet d'éviter cette maladresse.
Pendant tout un temps, les utilisateurs de Flash devaient ruser d'une astuce pour rendre leur bouton d'un menu entièrement cliquable. Le concepteur ajoutait une zone transparente par dessus sur laquelle il ajoutait un lien. De cette manière, il ne fallait pas cliquer précisément sur le texte... ce qui était assez ennervant.
 Réalisé le 26 mars 2006. |
 |
