Catégories
Blogs à lire
Archives
Blog
mai
1
Les liens: conseils d'ergonomie
Catégorie: Ergonomie | Commentaires fermés | 212 lectures
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 utilisateurs 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 distingués 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 — 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 du texte courant. Dans cette même optique, le recours aux feuilles de style rempli 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
a {
color: blue;
}
a:link {
color: blue;
}
a:visited {
color: purple;
}
a:focus {
color: green;
}
a:hover {
color: green;
}
a:active {
color: red;
}
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. C'est le cas 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>.
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.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 info-bulle. Cette information est précieuse pour les lecteurs d'écran. Pensez-y.
1
<a href="http://www.tutoweb.be/" title="Tutoriels pour le web">Tutoweb</a>
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:
1 2 3 4 5
a[hreflang]:after {
content: " [" attr(hreflang) "] ";
}
Dans le code source:
1
<a href="http://www.google.com/" hreflang="en">Google</a>
Ce soucis 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é 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.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 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. Il est regrettable de constater que certains ne l'entendent pas de cette oreille sous prétexte de maîtriser les liens entrants. En lisant les conditions d'utilisation de Nespresso.com, on peut lire: « Toute création d'hyperliens avec nos sites est interdite sans accord préalable écrit de Nespresso ». Pas certain que cette mention farfelue puisse être défendue devant les tribunaux. Quoiqu'il en soit, des auteurs prennent leurs précautions en retirant l'hypertexte tout en gardant le libellé. Résultat des courses, l'internaute se trouve 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 Forums.battle.net
Capture Facebook.com (05/07/10)
[¹] « Liste des codes ISO 639-1 » (Wikipédia)
[²] « Personnaliser une erreur 404 »
[³] « Débusquer les liens morts »
[⁴] « La notion de fold en ergonomie »
