Le Museau Numérique

Les liens hypertextes, c’est important. C’est même essentiel puisqu’on passe son temps à cliquer. Pourquoi Free les a-t-il oublié lors de la refonte de son site dédié aux clients ? Un cas d’école qui permet de rappeler quelques principes fondamentaux d’ergonomie web: les liens doivent être soulignés et dans une couleur différente du reste du texte. Sinon, on ne les voit pas.

Navigation horizontale de la nouvelle interface du site clients de Free

Il y a quelques mois, Free a complètement réorganisé l’interface de gestion des abonnés ainsi que sa rubrique “assistance“. Le résultat est beaucoup plus efficace, clair et léger. Cette interface a malgré tout quelques défauts. Des erreurs de base qu’on ne devrait pas trouver sur un site professionnel. L’occasion de rappeler quelques notions essentielles sur l’ergonomie des liens hypertextes.

Il faut souligner les liens

Premier défaut de cette page, et de l’ensemble de l’interface de gestion de comptes de Free: les liens hypertextes sont tous cachés.

Pour savoir où il peut cliquer, l’utilisateur doit passer sa souris sur chaque élément qu’il imagine pouvoir être un lien afin de voir s’il réagit (changement du pointeur de la souris, de la couleur du fond, etc.). Si l’utilisateur ne fait rien, il ne voit aucun lien.

Forcer l’utilisateur à chercher les liens est une mauvaise idée :

• Il va penser qu’il n’y a pas beaucoup de contenus sur ce site alors que Free s’est visiblement cassé la tête pour en produire une bonne quantité. Dommage.
• S’il comprend que les liens sont cachés et comment il peut les trouver, il va se lasser rapidement de ce petit jeu et partira. Le temps de visite moyen d’une page est de quelques secondes. Passer la souris sur le texte pour voir où sont les liens n’est pas drôle.
• Il ne va probablement pas trouver ce qu’il cherche et:
  • Il sera frustré et déçu par le site et donc par l’entreprise (ici Free)
  • Il ira chercher sur un autre site (ou via Google) la réponse à son problème, risquant de ne jamais la trouver.

Bref, c’est un cas d’école: l’internaute ne trouve pas ce qu’il cherche là où il devrait le trouver. Frustration. Déception. Gâchis.

Pourquoi ?

Sur le web, on passe 95% de son temps à chercher l’information et 5% à la consommer. Or chercher, c’est cliquer sur des liens. L’internaute est avant tout un cliqueur de mulot. Il bouffe du lien à longueur de surf car ces liens le conduisent à l’information qu’il cherche. Si vous voulez le garder sur votre site, il faut que vos liens l’y promène. S’il n’en voit point, il ira cliquer ailleurs.

Les liens sont essentiels car les internautes ne lisent pas les pages. Ils ont les mots de leur recherche à l’esprit et ils cherchent une correspondance avec ce qu’ils voient à l’écran. Ils “scannent” la page en une ou deux secondes pour voir:

• Si elle contient l’info qu’il cherche,
• Si elle peut les en rapprocher (via un lien),
• Et, quand ce n’est pas le cas, s’il vaut mieux:
  • revenir à la page précédente
  • chercher autrement (au secours Google !)
  • aller sur un autre site

Il faut donc des liens dans vos pages. Mais pas n’importe comment.

Sur le web, les liens sont:

• faciles à identifier rapidement, car ils sont soulignés. Si vous supprimez le souligné, vous cachez les liens hypertexte et vous compliquez la tâche de l’internaute. Un peu comme dans un concours de golf où on utiliserait des balles vertes: les joueurs passeraient la plupart du temps à chercher les balles dans l’herbe plutôt qu’à essayer de les envoyer dans les trous !

• pratiques, car les mots soulignés apparaissent dans une autre couleur que le reste du texte et donc se voient mieux. S’ils sont choisis habilement, c’est-à-dire en reprenant les mots que l’internaute cherche, son oeil s’arrêtera sur eux et il cliquera dessus. Il faut donc en profiter pour placer les liens sur les mots importants et éviter les “cliquez ici” qui ne disent rien.

Sur les pages de Free, comme les liens sont cachés, l’internaute qui scanne la page pense qu’elle ne mène nulle part et s’en va. S’il persiste, ce qui est rare, parce qu’il se dit que la réponse doit quand même être dans le site, il va essayer d’entrer dans la logique de Free en consacrant quelques fractions de seconde de plus à chercher les liens dans la page.

Dommage, ça ne va pas marcher non plus…

Le rouge est parfois utilisé pour les liens, parfois à la place du gras.

Préserver la cohérence des liens

Regardons la page principale:

• L’oeil est d’abord attiré par du texte en rouge. Parfois ce sont des liens, parfois pas. C’est un jeu de piste.
  
  Quand c’est un lien, il n’y a pas d’effet de survol. Le changement de pointeur de la souris est le seul indicateur qu’il s’agit d’un lien, en dehors de la couleur rouge. Mais la couleur rouge n’est pas réservée aux liens puisque d’autres éléments de texte en rouge ne sont pas des liens. Quoiqu’ils pourraient en être, puisqu’il s’agit de titres (Actualités, Astuces) et de mots importants dans le texte (FAQ, Tchat).
  
  Donc, le texte rouge est parfois un lien, parfois juste du texte mis en avant. Ceux qui ont conçu cette page s’imaginent que les internautes vont s’amuser à passer la souris sur tout le texte pour trouver les liens. Mais les internautes ne font pas ce genre de choses.
  
  Autre bizarrerie: sous le menu “temps d’attente”, l’expression “Affichage indisponible” apparaît en rouge. Donc les messages d’erreurs sont visuellement identiques aux liens et au texte mis en avant (sans parler du caractère sibyllin dudit message).

  Bref, on n’y comprend plus rien.

• Dans cette confusion qui s’installe, on passe la souris sur le texte gris. En haut et en bas de la page, les titres gris sont des liens. Mais les titres gris des rubriques du menu vertical de droite ne sont pas des liens alors qu’ils sont visuellement identiques. Le jeu de piste continue !
  

  Tantôt, les liens sont gris. Mais tout ce qui est gris n'est pas un lien.

  Les titres de chaque actualité et astuce sont des liens car quand on passe la souris dessus, ils deviennent… rouges !

  Et en regardant bien, on découvre un superbe “Cliquez ici et accédez à une visite guidée” qui devient rouge lors d’un survol de la souris. Mais qui irait faire glisser sa souris en plein milieu d’un paragraphe de texte alors que personne ne lit les textes d’une page d’orientation ou d’accueil comme celle-là ?

  D’ailleurs, le paragraphe central est illisible car totalement en majuscules. Et il ne donne d’ailleurs aucune information et ne fait que répéter le titre des menus en introduisant de la confusion.

Sur ce site, les liens ne sont jamais soulignés donc on ne les voit pas. Ils sont tantôt rouges, tantôt gris. Mais les textes gris et rouges ne sont pas toujours des liens. Parfois, le survol les fait réagir, mais pas toujours. De quoi faire passer l’internaute en mode “frustration” dès les premières secondes et le faire fuir.

Bref, l’efficacité de l’interface pourtant visuellement assez claire et réussie est considérablement réduite par des liens hypertextes arbitrairement masqués à l’utilisateur et un système d’identification des liens totalement incohérent.

Une fonction, un effet.

Le polygone rouge indique tantôt la rubrique courante (clicable), tantôt attire l'attention...

Les liens ne sont pas les seuls éléments incohérents de l’interface du site de Free. Par exemple, sur la barre horizontale de navigation en haut de la page, un polygone rouge indique la rubrique dans laquelle on est.

Mais le même polygone, sur certaines pages, se retrouve aussi en haut du menu vertical de gauche et n’a pas d’autre objectif que d’attirer l’attention. Encore une fois, tantôt il est clicable, tantôt il ne l’est pas. Confusion.

Attirer l’attention et indiquer la rubrique courante sont deux fonctions différentes qui doivent être présentées visuellement de façons différentes.

Si on décide que les liens sont rouges, alors tous les liens doivent être rouges et tous les textes rouges doivent être des liens. Si on veut mettre du texte en avant, alors il faut utiliser autre chose que le rouge, qui est déjà pris pour identifier les liens, comme le gras par exemple, qui est fait pour ça.

En règle générale, il vaut mieux utiliser les conventions du web: les liens hypertextes doivent être soulignés en bleu, le gras attire l’oeil et on l’utilise avec modération. L’objectif est de limiter au maximum ce que l’internaute devra apprendre spécifiquement pour votre site. Car la quantité de temps et d’attention qu’il va vous consacrer spécifiquement est proche de zéro. Alors autant bénéficier de ce qu’il sait déjà utiliser parce qu’il l’a appris ailleurs sur le web.

Quel dommage d’investir autant de moyens pour finalement perdre les internautes si près du but.

Le graphisme doit habiller la navigation

Souvent, les responsables de ce genre de mauvais choix avancent des arguments esthétiques. La multiplication de texte souligné dans une page heurte leur sens du Beau ou ne s’accorde pas avec le graphisme génial qu’ils ont conçu.

Or le souligné est une convention universelle pour indiquer la présence d’un lien hypertexte. Remplacer cette convention universelle par autre chose n’est pas une bonne idée, quelle qu’en soit la raison, et contribue à dégrader l’efficacité du site. Amusez-vous à cacher les poignées de porte dans un hôtel, vous verrez comme les clients seront contents que les couloirs soient plus beaux.

L’esthétique du site doit s’adapter aux contraintes fonctionnelles. C’est à la création graphique d’épouser la contrainte ergonomique pour la rendre agréable, pas à l’ergonomie de se plier à l’esthétique. Car au final, c’est l’internaute qu’on risque de désorienter. Et un internaute désorienté sur un site est un internaute perdu pour les auteurs du site.