Ergonomie des liens hypertextes

En tant que webmaster, ne soyez pas avare des références extérieures sous prétexte de contenir le visiteur dans votre royaume. Utilisés à bon escient, ils représentent une plus-value et votre visiteur vous en sera reconnaissant. Dans tous les cas, les libellés des liens doivent être courts, explicites et la destination doit avoir un rapport direct avec le lien.

Les liens visités changent de couleur

Les usagers ont souvent la mémoire courte, le clic facile et le surf rapide. Un formatage adapté des liens permet de se retrouver aisément dans la navigation. Les liens doivent se distinguer du texte. De la même manière, les liens visités sont des indicateurs visuels importants pour se situer dans l’architecture. Jakob Nielsen dénonce depuis toujours cette absence de distinction entre les liens et les liens visités. Il qualifie ce problème de grave et récurant sur la plupart des sites. Malgré sa facilité de mise en place, ce basique d’ergonomie web est majoritairement sous exploité. Seule exception à la règle: les zones régulièrement visitées comme dans le cas d’un menu de navigation.

Capture Pompage.net
Capture Pompage.net — Les liens cliqués sont atténués par rapport aux autres

Les ergonomes conseillent aux webmasters de se normaliser aux couleurs par défaut: liens en bleu et liens visités en violet. Même si ces couleurs sont devenues les teintes par excellence de l’hypertexte, il ne faut pas être intégriste ! À l’origine, la colorisation du texte cliquable sert à le distinguer par rapport au texte courant. Dans cette même optique, le recours aux feuilles de style remplit tout à fait ce rôle. La personnalisation de l’hypertexte (au niveau des couleurs et du formatage) profite à l’harmonie de la charte graphique du site.

Pour ce qui est de la feuille de style, pensez à respecter l’ordre d’apparition des déclarations. Un moyen mnémotechnique: LoVe Fuck HAte pour Link, Visited, Focus, Hover et Active.

{code type=css}
a {
color: blue;
}

a:link {
color: blue;
}

a:visited {
color: purple;
}

a:focus {
color: green;
}

a:hover {
color: green;
}

a:active {
color: red;
}
{/code}

Le soulignement réservé aux liens

À la différence d’un document écrit, le soulignement doit être réservé exclusivement aux liens hypertextes. C’est devenu une convention respectée de manière générale par les concepteurs. Le soulignement est un reliquat des machines à écrire. C’était la seule façon de mettre un texte en évidence.

Dans des cas bien précis, le soulignement reste la meilleure façon de mettre en valeur du texte. Par exemple pour attirer l’attention sur une particularité du texte. Wikipédia utilise cette méthode pour mettre en valeur la terminaison des verbes dans un sujet sur la conjugaison. Utilisez de préférence une feuille de style (text-decoration:underline) plutôt que la balise désuète <u>.

Soulignement dans Wikipédia
Capture Wikipedia.org

Ouvrir ses liens dans la même fenêtre

De nombreux concepteurs décident d’ouvrir les liens externes dans une nouvelle page. L’idée est de différencier les sites externes et de conserver la page source en arrière-plan. Cette manœuvre 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 ?

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: « Liens et nouvelle fenêtre » (Cybercodeur).

En plus de ces arguments, les navigateurs actuels ont tous intégré un système d’onglet qui permet d’ouvrir un lien en arrière-plan. Dans Firefox, un clic milieu sur la molette de la souris ouvre le lien dans la même fenêtre mais dans un onglet en arrière-plan. Le visiteur est seul maître à bord pour décider et gérer son arrangement des fenêtres. Internet Explorer a également adopté cette solution tout comme Opera ou Chrome pour ne citer que ceux-là.

Un libellé efficace

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 contexte pour comprendre. Et ce qui est bon pour l’ergonomie est bon pour le référencement. Un lien correctement formulé et concis est beaucoup plus pertinent pour les moteurs de recherche.

Encourager le lecteur a agir

Le bouton call to action a pour fonction d’attirer l’internaute, le guider dans une direction et espérer de lui une action. Il s’agit de la souscription à une newsletter, le lancement d’une démo, la participation à un don, le téléchargement, etc. Ces boutons mis en exergue doivent se situer idéalement au-dessus du pli[¹].

Capture Apple
Capture Apple.com/fr/itunes

Une large zone de clic

La loi de Fitts est un concept assez simple en soi: 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 des résultats Google, ce dernier affiche des numéros de pages en bas de la recherche. Le risque d’erreur est inversement proportionnel à la zone de clic. Le bouton suivant atténue ce risque.

Une description facultative

Les liens peuvent être accompagnés d’une brève description ou l’URL grâce à l’attribut title. Lorsque la souris s’attarde sur le lien, la plupart des navigateurs affichent une infobulle. Cette information est précieuse pour les lecteurs d’écran. Pensez-y.

{code type=html}
Ornicar
{/code}

Des liens sur les images

Les images permettent une plus grande créativité dans la forme. Par contre, elles sont plus lourdes à charger, elles n’indiquent pas un lien visité, elles sont insensibles à l’agrandissement de police et la feuille de style personnelle du visiteur n’a aucun d’effet dessus. Indiquez toujours la valeur de l’attribut alt au cas où les images ne peuvent être affichées par le navigateur. Évitez les images animées souvent associées à de la publicité.

La langue de la page cible

En général, une page en langue française fournit des liens externes dans la même langue. Dans certains cas, la langue de la page est différente. Il est intéressant de préciser ce changement dans le code HTML grâce à l’attribut hreflang suivi de l’abréviation de la langue. Cet ajout est totalement transparent pour le visiteur. Pour afficher cette information en clair sur la page, il suffit d’avoir recours à une feuille de style. Dans l’exemple ci-dessous, le contenu de hreflang sera mis entre crochets à la suite du lien.

Dans la feuille de style:

{code type=css}
a[hreflang]:after {
content:  » [ » attr(hreflang) « ] « ;
}
{/code}

Dans le code source:

{code type=html}
Google
{/code}

Ce souci du détail est bien intégré par les robots mais risque de dérouter plus d’un visiteur ignorant cette pratique. Le procédé est loin d’être généralisé et encore moins intuitif. Le quidam aura du mal à deviner la signification d’une suite de deux lettres accolée à un lien. Dans le meilleur des cas, les habitués auront compris la signification de [en] pour l’anglais mais savez-vous que le code [hr] désigne le croate ?[²]

Afin de remédier à ce problème, on a vu apparaître des petits drapeaux en lieu et place de l’abréviation. Ainsi, une page cible en anglais se voyait dotée d’un drapeau… du Royaume-Uni. Cette représentation présente un risque de confusion et parfois de friction. Un article écrit par un Américain, un Canadien, un Australien – ou pire – un Irlandais, se verrait doté du même drapeau. Aussi, êtes-vous sûr que vos lecteurs connaissent tous les drapeaux ?

Capture Ergologique
Capture Ergologique.com

Dans les deux cas, l’idée part d’une bonne intention, mais elle est loin d’être comprise dans la pratique de manière intuitive.

Les liens dans le corps du texte ou en annexes

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. 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, optent pour une séparation entre le texte et les liens.

Capture Journal du Net
Capture Journaldunet.com

La chasse aux liens brisés

Le serveur ne trouve pas votre page (page renommée, déplacée, renommée) et renvoie le message indigeste d’une erreur 404. Pensez à élaborer une page personnalisée à cet effet [³]. Au-delà de deux erreurs de ce type, n’espérez plus revoir votre visiteur ! Faites la chasse aux liens morts et surtout de la veille.

Des liens sans hypertexte

Les pages web sont reliées entre elles par des liens. Chaque lien permet de prolonger la lecture. À son tour, cette page redirige vers d’autres liens externes. De cette manière, l’essence même du web est le maillage de toutes ces pages entre elles.

Certains ne l’entendent pas de cette oreille. Sous prétexte d’avoir un prétendu contrôle des liens entrants, des sites interdisent l’utilisation d’un lien hypertexte vers leur adresse web sans autorisation explicite préalable. Mention reprise dans les conditions d’utilisation. Ces sites sont regroupés sous l’abréviation PDLSA: pas de lien sans autorisation.

Quelques exemples: Coca-Cola France, Boursorama, Éditions First, Festival de Cannes, Groupon, L’Oréal, Nespresso, la SNCF, TF1, le Téléthon…

Pas certain que cette mention farfelue puisse être défendue devant les tribunaux. Quoi qu’il en soit, les responsables éditoriaux prennent leurs précautions en retirent l’hypertexte tout en gardant le libellé. L’internaute se trouve alors devant un texte inactif, sans comprendre les raisons de ce choix.

Une alerte pour les liens externes

On dit du web qu’il ressemble à une immense toile d’araignée car le visiteur passe d’une page à une autre pour entreprendre des chemins divers et variés. Selon son expérience, il juge de la pertinence d’un lien externe sur un site. Généralement, ce lien est offert par le webmaster. Ce dernier à tout intérêt de fournir une ressource vérifiée, fiable et pertinente. Il en va de sa crédibilité et de sa responsabilité.

Par contre, des liens peuvent être publiés par la communauté des internautes. C’est le cas des commentaires sur les blogs, des messages dans les forums ou des articles sur les réseaux sociaux. Dans la plupart des cas, la non-responsabilité du contenu tiré des liens externes est reprise dans les informations légales du site. Dans certains cas, l’éditeur prévoit un système d’alerte automatique pour prévenir le lecteur. Cette précaution (avant tout d’ordre juridique) est lourde dans la pratique pour le lecteur. Elle lance – a priori – un effet de suspicion. Ce rejet de responsabilité crée un climat de méfiance et nuit à la navigation.

Capture Blizzard
Capture Forums.battle.net

Facebook ne fait pas dans la demi-mesure en affichant un panneau d’alerte et un titre « Attention ».

Capture Facebook
Capture Facebook.com (05/07/10)

[¹] « La notion de fold en ergonomie »
[²] « Liste des codes ISO 639-1 » (Wikipédia)
[³] « Débusquer les liens morts »

Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s