Thèmes associés : Lien web. Changer couleur lien hypertexte car lien page web et couleur lien hypertexte ? Lien hypertexte image où un lien hypertexte mais lien hypertext. Liens hypertextes; lien cliquable. ; liens site web ou lien permettant d aller de page web en page web, lien image... Ergonomie web car liens web pour ergonomie des sites web donc ergonomie site web, liens hypertexte. Lien hypertexte. Liens associés : lien hypertexte et lien hypertexte

Accueil > Navigation web > Liens hypertextes

Liens hypertextes

Bien utiliser les liens.

Image de Liens hypertextes

Les liens hypertextes sont des éléments importants de la navigation. Ils permettent, lorsque l'on clique dessus, de naviguer au même titre que les menus de navigation et de lier des pages entre elles.

A partir d'un lien à l'intérieur d'un même site, l'internaute accéde directement à l'information recherchée et il se déplace d'un contenu à un autre sans repasser par le menu de navigation.

Les liens créent des liaisons entre le contenu d'un site et le contenu d'un autre site web. Cela permet de proposer aux internautes une navigation en réseau et d'offrir différents parcours de lecture permettant d'accéder à l'information recherchée.

Utiliser les liens hypertextes, c'est le principe même d'Internet : c'est créer une gigantesque toile d'araignée. A ce titre, les utilisateurs apprécient de trouver des liens externes renvoyant vers d'autres sites en rapport avec les contenus du votre. Bien sûr, il ne s'agit pas de faire un inventaire, mais de proposer des liens utiles. A condition que les URL soient mises à jour.

Pour être bien identifiés et répondre aux exigences de l'ergonomoie web, les liens doivent faire l'objet d'une attention toute particulière.

Les liens hypertextes se reconnaissent par leur apparence
Les liens hypertextes bien positionnés sont plus efficaces
Les liens hypertextes explicites sont mieux compris
Les liens hypertextes se comportent différemment en fonction des actions demandées par les utilisateurs

Image de Liens hypertextes

1. Les liens hypertextes se reconnaissent par leur apparence.

Les liens peuvent revêtir différents aspects : logo, texte, image... et doivent être "visiblement" reconnaissables.

Le pointeur de la souris se transforme en petite main lorsque l'utilisateur survole le lien. C'est une forme reconnue par tous les internautes qui connaissent bien la signification de cette petite main.

Lorsqu'un lien hypertexte est composé de plusieurs éléments, un élément de graphisme associé à du texte, la zone cliquable doit comprendre ces deux éléments, sans quoi l'internaute ne comprendra pas le fonctionnement du lien.

Un lien sous forme de texte a une couleur différente du reste du texte et est souligné. La couleur du lien hypertexte change lorsqu'il a été visité. Le soulignement et la couleur différente permettent de bien repérer le lien dans un texte. C'est pour cela que le soulignement d'un texte, dans le seul but de le mettre en valeur, est à bannir absolument. Mieux vaut utiliser le gras. Le changement de couleur suite à un clic permet de ne pas revisiter une page déjà ouverte.

L'habitude de matérialiser en bleu les liens non activés et en violet les liens activés tend à disparaître. D'autres couleurs en lien avec le design du site peuvent être utilisées à condition que le choix adopté soit identique sur toutes les pages, sans quoi l'internaute ne saura plus quelle couleur correspond à quoi. S'agit-il d'un lien ? A t-il été déjà visité ?

Lorsqu'un lien est une image, l'emploi d'une info bulle au passage du pointeur de la souris peut donner davantage d'information sur le lien ou plutôt sur le contenu de la page de destination (attribut title de la balise <a>). La simple transformation du pointeur de la souris en main ne suffit pas. Ne pas oublier de renseigner l'attribut alt de la balise <img> qui lui décrit l'image.

2. Les liens hypertextes bien positionnés sont plus efficaces.

Plus le lien est petit, plus l'utilisateur aura du mal à le selectionner. Les liens pour être cliquables et facilement sélectionnables doivent être suffisamment grands. Si le lien est petit et qu'il est situé parmi de nombreux autres liens aussi petits que lui, il sera difficilement identifiable et difficilement selectionnables.

Image de Liens hypertextes

Il est utile d'utiliser un signet « Retour haut de page » lorsque les pages web sont longues et qu'elles nécessitent l'utilisation de la barre de défilement vertical. Cela permet également de retrouver le menu de navigation. Ce signet est souvent présenté sous la forme d’une petite flèche qui pointe vers le haut associé au texte "Retour haut de page". Ceci sera prochainement mis en place sur ce site.

Image de Liens hypertextes

Exemples de signets "Retour haut de page"

3. Les liens hypertextes explicites sont mieux compris.

Le libellé des liens doit permettre à l'internaute de savoir où il va aller en cliquant dessus. L'internaute n'aime pas faire fausse route. Il faut donc choisir un mot ou groupe de mots évoquant le mieux possible le contenu vers lequel pointe le lien. De même il est utile d'indiquer si le lien ouvre un document pdf, envoie vers une autre page ou bien encore ouvre une vidéo...

Un lien n'est pas explicite avec une phrase longue car l'internaute a du mal à comprendre vers quelle page ou quel contenu pointe le lien.

Sur une même page, ne pas répéter des liens identiques. Dans ce cas l'internaute aura tendance à ouvrir les deux liens pensant qu'ils conduisent vers des pages différentes. S'il ouvre deux fois la même page, l'internaute perdra patience.

Les liens sont placés sur les mots clés. Pour aider l'utilisateur, la tentation est grande de vouloir l'assister en lui indiquant quelle action il doit faire. Mais parfois cela rend la lecture moins fluide.

Image de Liens hypertextes

Image de Liens hypertextes

Les liens graphiques, comme les pictogrammes cliquables sont toujours accompagnés d'un cours texte explicite. L'utilisateur ne doit pas deviner le contenu de la page ou l'action à réaliser.

Dans l'exemple ci-contre, l'utilisateur ne peut comprendre la signification des pictogrammes seuls. "Votre avis" ou "Discuter sur le Forum"... ne seraient pas compréhensibles sans les textes associés. Une info bulle* peut aussi rappeler la signification du lien graphique au survol.

Une info bulle* est une description d'un lien, d'une image... qui s'affiche lorsque le pointeur de la souris survole la zone liée à décrire. Elle permet à l'utilisateur d'avoir une description complémentaire qui indique ce qui se passe lorsque l'on clique sur le lien. Elle aide l'utilisateur dans ses choix de navigation en indiquant par exemple le nom du site ou l'accès à une page vers lequel pointe le lien...

Si le lien est explicite, l'info bulle n'a pas lieu d'être.

4. Les liens hypertextes se comportent différemment en fonction des actions demandées par les utilisateurs.

Les liens doivent être cohérents à l’intérieur de l’ensemble du site.

Quand plusieurs liens pointent vers la même page ou le même contenu, il faut veiller à ce que les libellés des liens soient identiques pour éviter de semer le trouble dans l'esprit de l'utilisateur. Cela contribue aussi à faciliter l'apprentissage de la navigation à l'intérieur du site web.

Lorsqu'un lien pointe vers un autre site, le choix d'ouvrir le lien, appelé aussi lien externe, dans une nouvelle fenêtre du navigateur peut se poser.

Les principes de l'ergonomie web préconisent plutôt l'ouverture du lien dans la même fenêtre pour deux raisons :

C'est l'internaute qui décide. L'ouverture d'une nouvelle fenêtre se fait à l'insu de l'utilisateur et ce n'est pas au "système" de prendre le contrôle de l'ordinateur. Le système doit exécuter seulement les opérations demandées par l’utilisateur. L'ouverture d'une nouvelle fenêtre est en général jugée envahissante et associée à de la publicité.
L'ouverture d'une nouvelle fenêtre entraîne la désactivation du bouton < Page précédente > du navigateur. Or l'internaute utilise habituellement ce bouton pour retourner aux sites consultés précédemment. Cela peut rompre l'historique de navigation.

D'un autre côté, l'ouverture d'un lien externe pointant vers un autre site, dans une même fenêtre, peut parfois être gênant pour l'utilisateur. Lorsqu'il navigue à l'intérieur du nouveau site en ouvrant plusieurs pages, il n'arrive plus à se repérer en ce qui concerne le site d'origine et le quitte pour de bon. Ouvrir une nouvelle fenêtre peut parfois permettre de rendre la navigation plus claire.

La question de l'ouverture dans la même fenêtre doit se poser et être vue au cas par cas.

Un lien pointant vers un document .pdf ou .doc ouvre obligatoirement une nouvelle fenêtre du navigateur. Lorsqu'un utilisateur ouvre un document .pdf ou .doc par exemple dans la même fenêtre, il pense avoir ouvert le document dans une fenêtre spécifique, alors qu'il est toujours dans une fenêtre du navigateur. Il n'a plus de repère et retrouvera dificilement la page web ouverte précédemment.

Des liens différents ne doivent pas avoir les mêmes effets. Si vous souhaitez mettre des liens sur vos pages pour ramener les internautes sur la page d'accueil, il ne faut pas mettre de liens "Retour Sommaire" et "Retour Page d’Accueil" si le sommaire se trouve sur la page d’accueil.

Autre exemple : vous souhaitez être contacté par les utilisateurs du site et vous souhaitez mettre un lien sur différentes pages de votre site. "Contact", "votre message", "Nous écrire" ont tous le même effet d'ouvrir un formulaire d'envoi de message. L'utilisation d'un seul et même lien lèvera l'ambiguité générée par des liens différents.

Bien spécifier les liens permettant le téléchargement de documents.

Quand un lien indique "Télécharger le document X" l'utilisateur espère arriver directement sur le clic permettant le téléchargement. S'il arrive sur une page d'information lui proposant plusieurs choix, il ne pourra pas savoir à quel moment il pourra réellement réaliser l'action de télécharger.

Dans ce cas, il ne faut pas intituler le lien "Télécharger le document X" si c'est une page qui propose plusieurs documents ou logiciels à télécharger.

Un lien externe propose le téléchargement de la dernière version d'un logiciel, d'une application... Veillez à ce que le lien pointe directement sur la page qui propose le téléchargement plutôt que sur la page d'accueil du site en question.

Image de Liens hypertextes

Les liens sont faits pour naviguer et les boutons pour agir.

Le clic sur le lien « Télécharger le document X » permettra à l'utilisateur d'aller directement sur la page dédiée au téléchargement. L'action de télécharger apparaîtra sous la forme d’un bouton "Télécharger" et non pas d'un lien "Télécharger".

Prévenir l'internaute lorsqu'un lien conduit vers le téléchargement d'un fichier volumineux.

Avant de télécharger un document, un logiciel..., surtout s'il est volumineux, mieux vaut préciser le type, la taille, la configuration requise... le temps prévisible de téléchargement. L'internaute pourra ainsi décider de l'ouverture ou non du fichier.