rechercher sur ergolab

s'abonner au fil rss
newsletter

Entrez votre adresse e-mail pour être informé de l'ajout de nouveau contenu :

 

» En savoir plus

20 Novembre 2003

Ce mot souligné semble mener quelque part...

TAGS : Liens, Navigation

accueil > articles > éléments d'interface > Ce mot souligné semble mener quelque part...

« Liste des articles


Introduction
1. Respecter la standardisation des liens
2. A propos des contenus qui ne mènent nulle part
3. L'usage d'indicateurs pour préciser le "quelque part"…
Conclusion
Pour en savoir plus...

Introduction

Cet article évoque l'utilisabilité des éléments cliquables sur le web. Chaque partie s'intéresse à un aspect particulier de cette utilisabilité. Nous décrivons pour chaque recommandation l'intérêt de sa prise en compte et apportons quelques solutions pour la conception.

L'accent est porté sur les liens hypertextes, même si quelques réflexions sont posées concernant d'autres éléments possiblement cliquables (tels que images, boutons, etc.). Le lien textuel est en effet le premier élément remarqué par l'utilisateur (voir dans les lectures complémentaires les études eye-tracking du projet Stanford-Poynter et la position de Nielsen à cet égard). C'est aussi dans ce domaine qu'ont été réalisées le plus grand nombre d'études scientifiques.

1. Respecter la standardisation des liens

» Les liens textuels

Une des problématiques majeures sur le web consiste à savoir quels éléments sont cliquables. Les recommandations portent souvent sur le format à attribuer aux liens. On a ainsi longtemps préconisé que les liens hypertextes non visités soient bleus et soulignés.

En 1999, Nielsen considérait le non respect de ce standard comme une des 10 plus graves erreurs pour un site web. Cette question est d'ailleurs toujours d'actualité (voir Van Schaik & Ling, 2003). On peut tout de même affirmer que les standards tendent aujourd'hui à être plus souples. Plus précisément, un lien est en général un mot (ou plusieurs) en couleur, un mot souligné ou un mot en couleur et souligné.

Ces standards web qui se sont progressivement installés sont des règles qui améliorent la facilité d'utilisation des sites. En effet, les utilisateurs transfèrent ce qu'ils ont appris sur les nouveaux sites qu'ils visitent. Aujourd'hui, ils s'attendent à ce qu'un mot en couleur ou souligné mène à une nouvelle page puisque leur expérience leur a appris qu'un mot en couleur ou souligné est souvent un lien.

On doit donc respecter ce que l'on pourrait appeler la cohérence entre les sites. Cette règle permet de capitaliser sur les connaissances des utilisateurs concernant le comportement des pages web. On évite ainsi que chaque nouveau site soit une totale découverte. L'utilisateur ayant repéré que les choses soulignées sont en général des liens sera plus rapide dans sa recherche d'informations.

Ce raisonnement peut être élargi pour tous les éléments cliquables et non seulement les liens textuels.

» Les images

En ce qui concerne les images et boutons, l'utilisateur pense qu'ils sont cliquables ou pas en fonction de ce qu'il a déjà rencontré dans les autres sites. Ce sont donc bien les standards qui définissent le comportement de l'utilisateur. On doit s'intéresser à la question suivante : Qu'est-ce qui fait que l'on pense que l'élément est cliquable ?

Notre expérience d'utilisateurs du web nous a appris à tenir compte des éléments suivants :

- texte associé à l'image, et plus largement tout ce qui contribue à l'incitation (voir l'article sur les critères ergonomiques). En ce qui concerne les images, l'attribut "cliquable ou non" est plus ambigu que dans le cas d'un lien textuel. L'élément qui contribue le plus à renseigner l'utilisateur est l'incitation. Dans ce cadre, l'incitation se fait souvent de manière textuelle : il s'agit d'amener l'utilisateur à cliquer sur l'image en question. Cette description textuelle peut être intégrée directement dans l'image (c'est souvent le cas des boutons):



Exemple d'un bouton Ajouter au panier.

Source : www.asmodee.com



La description textuelle peut aussi se présenter comme une légende de l'image (exemple : cliquez sur l'image pour l'agrandir). De plus en plus, on est amené à présenter cette légende elle-même sous forme de lien, menant à la même page qu'un clic sur l'image :




Exemple de légende textuelle associée à une image cliquable : Ouvrir la boîte (mène à une image d'un jeu de société éclaté).

Source : http://www.asmodee.com/jeux-de-societe...



- Logique par rapport à la tâche et à l'utilité du site :


- exemple : je viens de remplir un formulaire, je m'attends naturellement à devoir
cliquer sur un bouton pour envoyer les informations. Cette attente est liée au fait
que c'est toujours de cette façon que se déroule la validation d'un formulaire en
ligne.

- exemple : si le site est un site de e-commerce, je m'attends à pouvoir cliquer
sur les images des articles pour les agrandir. Cette attente est liée au fait que
la plupart des sites de commerce en ligne adoptent ce standard.


- Localisation, nature, forme et taille de l'image : on distingue plus facilement une image cliquable du fait de sa localisation et de sa nature (bouton sous un champ de formulaire, logo en haut à gauche de la page, bouton à côté de la photo d'un produit, bouton dans une procédure de commande, image dans une barre de navigation...), de sa forme et de sa taille.


2. A propos des contenus qui ne mènent nulle part

2.1. Ne pas suggérer qu'un élément est cliquable si ce n'est pas le cas

Cette réflexion sur la présentation des liens amène nécessairement à s'intéresser à la présentation des éléments non cliquables. On est là dans une démarche inverse. Il ne faut en effet pas suggérer qu'un élément est cliquable s'il ne l'est pas.

Ce "défaut" d'une interface part souvent d'une bonne intention. L'exemple classique est la mise en valeur d'une information dans un texte. Mettons que l'on décide de présenter un mot en bleu pour qu'il ressorte bien du bloc de texte noir … Légitime. Sauf que pour bon nombre d'utilisateurs, ce mot en bleu signifie plus qu'un simple mot: c'est comme s'il disait "clique moi, clique moi !".

On ne peut pas compter uniquement sur le changement de la forme du pointeur de la souris pour indiquer qu'un élément est cliquable. Cet attribut doit être perceptible visuellement sans l'aide du pointeur. Le changement de format du pointeur n'est qu'un support pour confirmer l'hypothèse que l'élément est cliquable.

Un mot en couleur ou souligné sur le web n'est plus un simple mot mais un lien. Il est censé mener à quelque chose. Si l'action de cliquer sur ce mot n'a aucun effet, l'interface semblera se comporter de façon contre-intuitive. Quelqu'un de très persévérant pourra même cliquer deux fois pour être bien sûr que ce n'est qu'un mot, un simple mot, rien de plus qu'un mot. Pour peu qu'il soit très intéressé par le contenu potentiel qui pourrait se cacher derrière, sa satisfaction concernant le site web sera très diminuée. De fait, l'utilisabilité du site en question sera moindre.

2.2. Mettre en valeur une information non cliquable

Nous avons pour l'instant seulement distingué les éléments cliquables des éléments non cliquables.

Il peut exister une hiérarchie à l'intérieur des éléments non cliquables, c'est à dire des mots ou informations plus importantes que d'autres dans un bloc de texte. La problématique consiste donc à distinguer ces informations, à les faire sortir du lot sans les faire ressembler à des liens.

Cette question est liée à la façon d'écrire sur le web (lire l'article faciliter la lecture d'informations sur le web). Autant que possible, on essaiera d'abord d'écrire de façon simple et concise, d'insérer des titres correspondant à chaque paragraphe, d'utiliser des présentations sous forme de liste. On pourra ainsi faire ressortir les idées importantes et les groupes de contenus.

On peut aussi différencier les informations à mettre en valeur par leur format. Quoiqu'il en soit, l'emploi du soulignement et de la couleur pour un contenu non cliquable est risqué. Cela s'apparente à une promesse non tenue. L'utilisateur s'attendra en effet à ce que ce mot coloré et / ou souligné soit un lien. Pour faire ressortir d'un bloc de texte des informations non cliquables, il reste toujours les solutions suivantes :

- l'emploi de l'italique (avec les problèmes de lisibilité que cela peut entraîner et le risque que l'utilisateur pense que vous citez quelqu'un d'autre)
- l'emploi du gras
- la taille des polices employées (en veillant à la cohérence de la présentation des contenus)


3. L'usage d'indicateurs pour préciser le "quelque part"…

Cette méthode est surtout utile pour des liens menant à autre chose qu'une page classique (par exemple un lien commandant un téléchargement ou utilisant le client mail de l'utilisateur). En effet, cliquer sur un lien peut avoir beaucoup de résultats différents. L'utilisateur ne dispose généralement que de peu d'information pour savoir où il va. Souvent, les deux seules indications disponibles sont l'intitulé du lien et l'adresse URL apparaissant dans la barre d'état du navigateur.

Un des moyens de guider l'utilisateur consiste donc à indiquer la nature et le contenu du lien. Si cette information est présente, l'utilisateur ne cliquera pas sur un lien on pertinent et évitera donc une suite d'opérations inutiles au vu de ses objectifs.

On s'interroge donc sur les manières d'indiquer les contenus des liens et sur les manières de différencier les types de liens : ancres (liens menant à l'intérieur de la même page), liens menant à une page interne au site ou liens menant à un site externe. Parmi ces derniers, il existe aussi une différence entre ceux qui s'ouvrent dans la même fenêtre ou ceux qui s'ouvrent dans une nouvelle fenêtre du navigateur. Il y aurait une utilité certaine à informer l'utilisateur sur le type de lien. Cependant, c'est difficile à mettre en place dans la pratique. Actuellement, on arrive à être assez précis sur l'indication des contenus mais l'indication de la nature du lien reste difficile à mettre en place.

L'indicateur associé au lien permet de limiter les actions sur le bouton retour lorsque le contenu ne correspond pas aux attentes de l'utilisateur. Il peut en être informé avant de cliquer et de lancer le chargement de la page. Les indicateurs peuvent être divers :

3.1. L'intitulé du lien

Nous évoquions précédemment que l'intitulé est une des deux seules indications permettant à l'utilisateur de deviner a priori ce que cache le lien. Le choix des termes est stratégique puisqu'il permet à l'utilisateur de décider si oui ou non il cliquera sur le lien. Si les mots sont bien choisis, ils doivent entraîner le moins d'erreurs possibles (par erreur on entend clic sur un lien ne correspondant pas au contenu recherché).

Une terminologie adéquate permet aussi des choix plus rapides : il est plus aisé de choisir parmi parmi 10 liens dont le libellé correspond étroitement au contenu de la page suivante que parmi 10 liens "cliquez ici". On essaie donc de faire correspondre l'intitulé aux informations ou aux actions permises par la page indiquée. Cependant, il est important de n'inclure dans l'intitulé du lien que les termes les plus porteurs d'information. Les libellés (ce qui est souligné ou en couleur) ne doivent pas être trop longs, pas plus de deux à quatre mots selon J. Nielsen.

L'intitulé du lien peut mentionner à la fois le contenu du lien (fichier pdf, document word) et la nature de ce lien (ouverture d'une nouvelle fenêtre, lien externe...). C'est l'élément qui paraît le plus porteur d'informations aujourd'hui.

3.2. L'URL

De la même façon, l'adresse URL peut permettre à l'utilisateur de choisir s'il cliquera sur le lien.

Cette méthode est une stratégie des utilisateurs connaissant bien le web afin de détecter le format du contenu apporté par le lien. Ainsi, on peut savoir que le lien mène vers un fichier PowerPoint alors qu'aucune indication dans la page ne le mentionne.

La consultation de l'adresse URL permet aussi de connaître rapidement la nature du lien (ancre, lien interne ou lien externe).

La question de l'utilisabilité des adresses URL est fondamentale (Vous pouvez lire à ce propos l'article Utilisabilité des adresses web sur Ergolab). Prenant acte qu'elle fait partie des stratégies de navigation des utilisateurs, on doit tout faire pour la rendre la plus explicite possible. On peut même pour certains sites deviner l'adresse URL à partir de ce que l'on veut consulter (par exemple, l'adresse www.microsoft.com/downloads est on ne peut plus explicite). Jesse James Garrett dit à propos de ces sites : "not only are their URLs human-readable, they're also human-guessable" (cf lectures complémentaires).

Cette question devient plus compliquée lorsqu'entrent en jeu les protocoles de sécurisation, faisant de l'URL une chose incompréhensible. Cependant, les pages sécurisées ne sont souvent pas celles pour lesquelles on a besoin d'une adresse explicite.

3.3. Les titres de liens

Il est possible de préciser le contenu vers lequel mène le lien par l'insertion de la balise "title" dans le lien. Cet attribut permet de faire apparaître une description du lien lorsque le pointeur de la souris reste positionné sur ce lien :




Exemple d'une balise title sur le site ergolab : le titre En savoir plus sur la liste de diffusion Ergolab est associé au lien En savoir plus.

Source : ancien site Ergolab



Ceci n'est pas supporté par les navigateurs les plus anciens mais permet aux autres de présenter une information supplémentaire sur le lien, lorsque c'est nécessaire ou souhaitable. On veillera à ne pas surcharger l'interface en ajoutant des titres de liens à tous les liens.

3.4. Le contexte

On doit prêter attention au texte autour du lien et au bloc de contenu dans lequel il s'insère. Ce contexte peut en effet donner des indices à l'utilisateur concernant le contenu accessible par le lien. Il importe d'être concis tout en fournissant les éléments nécessaires au choix de l'utilisateur.

3.5. L'utilisation de la couleur

Certaines approches ont essayé de standardiser les indications sur la nature des liens par des codes couleurs. On a cependant vite compris les limites de cette démarche :

- l'utilisation de codes couleur limite la cohérence entre les sites puisqu'il est nécessaire que tous les sites utilisent exactement le même code couleur.

- on augmente de façon importante de la charge informationnelle (nécessité de nombreuses couleurs différentes pour indiquer tous les types de liens)

- la charge mnémonique est donc forcément élevée (on doit se rappeler que le bleu, c'est un lien vers une page classique, le vert, un lien vers le téléchargement d'un fichier Word, le rouge, un lien utilisant le client mail...)

- ces codes couleurs entrent en concurrence avec la différenciation entre lien visité / lien non visité (qui se base aussi sur l'utilisation de la couleur) et en font perdre une grande partie du bénéfice.

- baser la communication d'une information uniquement sur la couleur met en défaut tous les utilisateurs qui présentent une déficience de perception des couleurs.

3.6. L'utilisation de métadonnées

Une approche plus appropriée consiste à intégrer des métadonnées, c'est à dire des données sur les données (une donnée existe par elle-même, mais elle a forcément un type, un auteur, une date de création, un poids...). On peut ainsi informer du contenu d'une page mais aussi de son type (document Word, PowerPoint, pdf…). Ces informations permettent à l'utilisateur de faire des choix éclairés.

Les métadonnées doivent être représentées le plus simplement possible et ne pas charger inutilement la page : il faut que le bénéfice obtenu soit plus élevé que les inconvénients entraînés (notamment l'augmentation du nombre d'informations).

L'exemple le plus connu correspond à l'indication de fichiers pdf à télécharger. Cette indication peut être fournie sous forme de texte ou d'icône représentant le logo d'Acrobat Reader. Là encore, c'est le recours de plus en plus fréquent à cette pratique dans de nombreux sites web qui nous permet de la recommander. Si les utilisateurs sont habitués à ce que ce type de lien mène au téléchargement d'un fichier pdf, il faut exploiter cette connaissance.

L'utilité de cette pratique peut être encore augmentée en prenant le soin d'indiquer le poids du document à télécharger. Cela donne une idée à l'utilisateur averti du temps de téléchargement potentiel du document.

Toutes ces informations supplémentaires concernant la nature des liens sont des indices qui ont pour but d'orienter l'utilisateur de façon plus claire. L'objectif est de limiter les actions sur des liens qui n'intéressent pas l'utilisateur.

Il s'agit donc d'améliorer la substance même des liens. Certaines voies de recherche développent même des outils prototypes afin d'intégrer ce type d'informations au navigateur. Beaucoup de questions se posent encore, notamment sur les formes de présentation à attribuer aux métadonnées.

Conclusion

Pour conclure, les questionnements sur la présentation des liens hypertextes vont principalement dans deux directions. D'une part, on essaie de mettre en valeur de façon appropriée les liens, leur état (visité ou non) et leur type. De l'autre, on doit éviter de faire croire à l'utilisateur qu'un item mène à quelque chose si ce n'est pas le cas. Enfin, cette réflexion soulève de nombreuses autres questions, concernant les formats visuels des liens et options de menus et leur terminologie.

Pour en savoir plus

» Ressources en ligne :

Garrett, J. J (2002). User-Centered URL Design, archives des articles d'Adaptative Path

Les études eye-tracking du Standford Poynter Project et la position de J. Nielsen à ce propos

Lynch, P. & Horton, S. (1999). Web Style Guide: Basic Design Principles for Creating Web Sites, Yale University Press. Chapitre 6, section "Links".

Nielsen, J. (1999). Jakob Nielsen's Alertbox, May 2, 1999: "Top Ten Mistakes" Revisited Three Years Later


» Ressources externes :

Nielsen, J. (2000). Designing Web Usability : The Practice of Simplicity. New Riders Publishing, Indianapolis.

Stanyer, D. & Procter, R. (1999). Improving Web usability with the link lens. Computer Networks, 31, pp. 1533-1544.

Van Schaik, P. & Ling, J. (2003). The effect of link colour on information retrieval in educational intranet use. Computers in Human Behavior, 19, 5, pp. 553-564.

Weinreich, H. & Lamersdorf, W. (2000). Concepts for improved visualization of Web link attributes. Computer Networks, 33, pp. 403-416.

Wroblewski, L. (2002). Site-Seeing: A Visual Approach to Web Usability. John Wiley & Sons. Part 2, Chapter 3, pp. 104-119 : Following Links.

Spool, J.M., Scanlon, T., Schroeder, W. & Snyder, C. (1998). Web Site Usability : A Designer's Guide. Chapter 3 : Links on the World Wide Web.


« Liste des articles

ergolab