Format des liens

Style

Les liens doivent toujours être soulignés quand ils sont intégrés dans le corps du texte. Vous pouvez supprimer le soulignement quand les liens forment :

  • Les catégories d’une barre de navigation
  • Des onglets
  • Des boutons
  • Ou tout autre élément qui apparaît cliquable de manière évidente par sa conception visuelle ou son contexte.

Couleur

Couleurs recommandées :

  • Bleu pour les liens non visités (code couleur HTML : #0000FF)
  • Violet pour les liens visités (code couleur HTML : #800080)

Conseils pour les autres couleurs :

  • Les liens non visités doivent être plus vifs, brillants, lumineux, et saturés que les liens visités.
  • Les liens visités doivent avoir l’apparence de quelque chose d’« utilisé » (terne et délavé).
  • Les deux couleurs doivent être des variantes ou des nuances de la même couleur, afin que l’on comprenne bien la relation entre les deux types de liens et que l’on puisse identifier la couleur « utilisée ».

Voir plus de conseils : Directives pour la visualisation de liens [en Anglais] (useit.com).

Pourquoi ne faut-il pas utiliser de liens de type « cliquez ici »

Je n’aurais jamais pensé qu’en 2010 j’aurais encore besoin de convaincre des gens de ne pas utiliser de liens de type « cliquez ici ». Mais nous y voilà…

Comment les gens perçoivent une page web

Les gens ne lisent pas les pages web, ils les parcourent – les liens doivent donc contenir des mots-clés pour favoriser ce balayage rapide :

Voilà à quoi ressemble une page web lorsque vous la lisez attentivement…
…et voilà à quoi la même page ressemble lorsque vous la parcourez : seuls les liens et les titres ressortent.

Si vous utilisez un lien de type « cliquez ici », cela gène le balayage rapide :

Voilà une page web avec un lien de type  « cliquez ici » – tout va bien si vous lisez lentement et dans le détail…
…mais la plupart du temps, vous parcourez la page, donc vous êtes forcés de lire ce qui se trouve avant et après le lien pour savoir vers quelle page vous allez être redirigés.

Comment un logiciel de lecture d’écran lit les liens

Il n’est pas non plus bon d’utiliser des liens de type « cliquez ici » si vous voulez rendre vos pages accessibles aux personnes aveugles qui utilisent des logiciels de lecture d’écran. En effet, ceux-ci extrairont les liens d’une page et les liront à haute voix sous la forme d’une liste. C’est seulement si vous utilisez des mots-clés que les liens auront un sens en dehors du contexte original :

Les liens de type « cliquez ici » sont complètement inutiles !
Avec des mots-clés : c’est beaucoup mieux !

Comment rédiger des liens

5 astuces pour rédiger un bon lien hypertexte.

Un lien textuel doit contenir des mots-clés

Un lien textuel doit reprendre le titre de la page vers laquelle il renvoie :

Incorrect
« Pour contribuer à l’amélioration de ce projet, merci de cliquer ici et de remplir le questionnaire d’évaluation en pièce jointe. »
Correct
«  Pour contribuer à l’amélioration de ce projet, merci de compléter ce questionnaire : Questionnaire d’évaluation 501 – Applications et logiciels. »

Si vous ne pouvez pas reprendre le titre de la page, utilisez des mots-clés à la place :

Incorrect
« Pour contribuer à l’amélioration de ce projet, merci de cliquer ici et de remplir le questionnaire d’évaluation en pièce jointe. »
Correct
« Pour contribuer à l’amélioration de ce projet, merci de remplir le questionnaire d’évaluation pour applications et logiciels. »

Les liens textuels doivent faire sens en dehors de tout contexte

Si vous renvoyez vers un document, dites-le clairement

Si le lien dirige vers autre chose qu’une page web, cela doit être précisé :

Incorrect
« Pour plus d’informations sur les nouvelles spécificités du calendrier Outlook, cliquez ici. »
Correct
« Pour obtenir plus d’informations sur ce sujet, référez-vous aux nouvelles spécificités du calendrier Outlook (PDF). »

Accessoirement, vous pouvez insérer une icône de document juste avant le lien de la page. Ainsi, on saura en un coup d’œil ce qu’il adviendra si on clique sur le lien. Si vous optez pour cette solution, vous devez continuer de préciser le type de document utilisé entre parenthèses après le lien.

Incorrect
« Pour plus d’informations sur les nouvelles spécificités du calendrier Outlook, cliquez ici. »
Correct
« Pour obtenir plus d’informations sur ce sujet, référez-vous aux nouvelles spécificités du calendrier Outlook (PDF). »

Les adresses mail doivent être rédigées en toutes lettres

Deux raisons à cela :

  • Les utilisateurs s’attendront ainsi à voir se lancer leur logiciel de messagerie
  • L’adresse mail complète apparaîtra lors de l’impression
Incorrect
En cas de problème, merci de contacter le service d’assistance.
Correct
En cas de problème, merci d’envoyer un mail au service d’assistance (support.technique@votre-entreprise.fr).

Faites en sorte que les liens ne s’ouvrent pas dans une fenêtre séparée…

… à moins que le lecteur ait besoin de voir la page originale et la nouvelle page en même temps. Sinon, le diriger vers une nouvelle page risque de lui faire perdre des données. C’est notamment le cas lorsqu’un utilisateur a besoin de se référer aux conditions d’utilisation d’un site au moment d’une inscription.

La couleur ne suffit pas à mettre en valeur un élément

Si vous mettez l’accent sur quelque chose en vous contentant de changer la couleur, vous risquez de perdre l’effet de mise en valeur dans les cas suivants :

  • Si votre utilisateur est daltonien (10% de la population masculine)
  • S’il souffre d’une vision médiocre
  • Si le texte est imprimé en noir et blanc
  • Si l’utilisation d’un rétro-projecteur « délave » les couleurs
  • Si l’écran de l’utilisateur est mal calibré

La solution ? Jouez sur deux ou trois caractéristiques pour mettre en valeur : la couleur, le contraste et l’utilisation d’un symbol.

Voici ce qui peut arriver lorsque vous mettez l’accent sur quelque chose d’important dans un document ou une page web et voilà ce qui reste de cette mise en valeur lorsque vous imprimez en noir et blanc.

Avec la simple couleur, le sens est perdu

A l’écran
A l’impression en noir et blanc

Avec la couleur et le contraste, c’est mieux mais ça peut demeurer un peu confus

A l’écran
A l’impression en noir et blanc

Avec la couleur, le contraste et l’utilisation d’un symbole, le sens est gardé intact

A l’écran
A l’impression en noir et blanc

L’accessibilité, c’est bon pour tout le monde

Une critique classique de l’accessibilité formulée par les sociétés est que cela coûte trop cher pour trop peu de bénéfices – « Nous employons seulement une personne aveugle », disent-elles.

Cette assertion est en fait basée sur une fausse croyance selon laquelle l’accessibilité ne bénéficierait qu’aux personnes aveugles ou aux handicapés en général. En réalité la plupart des personnes qui tirent parti des efforts d’accessibilité ne sont pas officiellement répertoriées comme handicapées.

Un ascenseur de gare

Voici un exemple : un ascenseur est installé dans une gare afin de respecter la loi en vigueur, mais qui en tire le plus important bénéfice ?

Utilisation de l’ascenseur par des personnes handicapées

Un petit nombre de personnes en fauteuil roulant

Utilisation de l’ascenseur par des personnes non-handicapées

  • Une famille de vacanciers avec des bagages lourds et encombrants
  • Une mère avec un enfant en poussette
  • Une personne âgée qui a mal aux genoux
  • Un avocat en béquilles qui rentre d’un séjour au ski
  • Des employés de la RATP qui remontent un chariot rempli d’équipement depuis les quais du métro
  • Un jeune qui porte des achats lourds et volumineux
  • Un musicien de rue qui transporte une guitare et un ampli
  • Un voyageur qui cherche à emprunter un raccourci pendant l’heure de pointe
  • Un employé qui part en voyage d’affaires chargé d’un ordinateur, de multiples dossiers, d’un porte-costume et d’un sac de voyage

On peut voir ici qu’une installation destinée à améliorer l’accessibilité – un ascenseur dans ce cas – est utile à une grande variété de personnes. C’est la même chose pour la technologie.

L’intranet d’une entreprise

Les entreprises sont obligées de rendre leur intranet accessible à tous leurs employés. Ces intranets doivent être conçus et rédigés de manière à ce que le handicap ne soit pas une barrière à leur utilisation. Cette obligation est similaire à celle qui contraint une compagnie de voie ferrée à offrir un accès sans escalier à ses gares.

Bénéfice pour les employés aveugles si l’intranet est rendu accessible

Un petit nombre d’employés aveugles peuvent travailler plus efficacement

Bénéfices pour les employés voyants si l’intranet est rendu accessible

  • Il peut être utilisé efficacement si l’employé a oublié ses lunettes
  • Il est utilisable par les employés daltoniens (10% de la population masculine)
  • Il fonctionne sur Blackberry, Iphone, téléphones portables
  • Il permet des impressions parfaites
  • Il permet un rendu correct lorsqu’on utilise un rétroprojecteur
  • Il apparaît de manière identique sur tous les navigateurs
  • Il fonctionne parfaitement sur les petits ordinateurs portables et les tablettes
  • Il peut être mieux compris par des utilisateurs dont la langue maternelle n’est pas le français
  • Il est plus facilement utilisable par les dyslexiques
  • Il est plus facilement utilisable par les sourds et les malentendants

Les bénéfices plus généraux de l’accessibilité

Rendre aussi ses sites web publics accessibles donne à une entreprise un avantage compétitif qui dépasse le simple bénéfice moral – ne pas faire de discrimination.

Les avantages légaux

  • Eviter les prud’hommes
  • Eviter les poursuites judiciaires par les clients

Les avantages techniques

  • Les systèmes sont plus faciles à gérer
  • Les sites internet fonctionnent sur d’autres navigateurs/plateformes/machines (dont les Blackberry) sans effort supplémentaire
  • L’accessibilité est bonne pour le référencement
  • Elle fait durer les systèmes plus longtemps

Les avantages économiques

  • Augmente la productivité
  • Réduit les coûts (de gestion et d’assistance)
  • Augmente les profits

Les avantages pour la communication

  • La société apparaît comme une compagnie égalitaire et tournée vers l’avenir
  • Evite les plaintes
  • Evite de se faire une mauvaise réputation

12 astuces pour écrire sur le web

La recherche sur la façon dont les utilisateurs lisent sur le web nous apprend que les gens ne lisent pas à proprement parler mais qu’ils parcourent les pages — celles-ci doivent donc être rédigées pour permettre ce procédé de lecture :

  1. Apprenez à connaître votre public et ses objectifs.
  2. Organisez le contenu de votre page selon le principe de la pyramide inversée, en commençant par le plus important.
  3. Coupez votre texte en petits morceaux : une idée par paragraphe avec des sous-titres compréhensibles.
  4. Placez les mots qui contiennent l’information en début de phrase.
  5. Mettez l’accent sur les mots-clés.
  6. Assurez-vous que les liens contiennent des mots-clés.
  7. Faites des listes plutôt que des paragraphes quand c’est possible.
  8. Ecrivez les nombres en chiffres arabes et non en toutes lettres (les utilisateurs parcourent les textes à la recherche de faits. Or, en général, les nombres incarnent des faits indiscutables).
  9. Ecrivez en langage simple.
  10. Ecrivez le plus succinctement possible.
  11. Eliminez toute formule ou enrobage inutiles.
  12. Ecrivez les dates de manière à éviter toute confusion dans la lecture (« 3 avril 2009 » et non « 3/4/2009 »).

Bouton ou lien ?

Les boutons…

  • Appellent des boîtes de dialogue
  • Envoient des données
  • Actionnent la saisie ou la sélection de l’utilisateur

Les liens…

  • Conduisent vers d’autres pages
  • Mènent à un autre emplacement dans la page
  • Sont utilisés dans des onglets
  • Sont utilisés dans des barres de navigation
  • Sont utilisés à chaque fois que le texte du bouton risque d’être beaucoup trop long

Un bouton ou un lien indifféremment…

  • Permet de masquer ou d’afficher des couches dynamiques
  • Crée un contraste entre l’action principale et une action secondaire, afin que les gens ne choisissent pas accidentellement l’action secondaire (par exemple, le bouton indique « Appliquer » et le lien dit « annuler »)

Quelles polices sont les plus lisibles : serif ou sans serif ?

En 1998 le « Times New Roman » était la police la plus répandue sur le web. Ma patronne de l’époque détestait l’apparence de cette police à serif et insistait pour qu’on utilise la sans serif « Arial » dans tous nos sites web. Les polices sans serif sont-elles vraiment plus lisibles, ou ce choix reflétait-il simplement un goût personnel ?

En 2003, dans le cadre de mon mastère, j’ai examiné plus de 50 études empiriques sur la typographie afin d’élaborer, au bout du compte, une réponse convaincante.

Lire l’article intégral en anglais ou une critique en français par Yannick Chavanne de Protextuel.

La reconnaissance des signets

Comment le nom d’un signet peut avoir un impact sur sa reconnaissance ? Quelles sont les règles à suivre pour mieux titrer ses pages web et générer ainsi des signets facilement reconnaissables par l’utilisateur ?

J’ai étudié ces questions pour mon mémoire de master en 2003 à l’université de Lancaster.

Mémoire de master (version longue)

Voici la version intégrale de ma recherche, y compris quelques notes sur la méthodologie de suivi du regard :

Issues of Saliency and Recognition in the Search for Web Page Bookmarks.

Publication (version courte)

Cet article est une version raccourcie et révisée de mon mémoire de master. Je l’ai présenté sous forme d’exposé à HCI 2004, un congrès anglais sur l’interaction homme-machine. Vous pouvez télécharger la version pré-publication ici :

In search of salience: A response time and eye movement analysis of bookmark recognition

Référence

Poole, A., Ball, L. J., & Phillips, P. (2004). In search of salience: A response time and eye movement analysis of bookmark recognition. In S. Fincher, P. Markopolous, D. Moore, & R. Ruddle (Eds.), People and Computers XVIII-Design for Life: Proceedings of HCI 2004. London: Springer-Verlag Ltd