Apologies to you, english reader. This article is about a french website you have to use if you want to book train tickets online, and points out the webdesign-related reasons why so many people get frustrated using it. I won’t write this one in english for now, as I'm having a busy time, but you could try Google translate. Sorry !
Définir le métier de webdesigner à des personnes étrangères à cette industrie est une entreprise hasardeuse pour celui qui s'y lance. Graphisme, typographie, communication, sémiologie, syntaxes informatiques et autres activités s'y invitent, rendant les contours de cette association de compétences bien difficiles à cerner. La maudite question m'a été posée récemment et la discussion qui s'en est suivie n'a pas réussi à dissiper les brumes baignant le webdesign dans la tête des deux-trois curieux. Jusqu'à l'évocation d'un site en particulier : voyages-sncf.com. Voilà un site que la plupart des Français en âge de commander un billet de train ont pu utiliser, et qui visiblement ne laisse personne indifférent. Certes, râler est chez nous un sport national, mais les souvenirs laissés par ce site ne sont pas pour ainsi dire plaisants. Ce fût cependant un terrain connu très approprié à l'explication de mes occupations professionnelles.
Pour avoir sous la main une référence à donner au prochain curieux qui me posera la question, voici donc un diagnostic de la page d'accueil de voyages-sncf.com – difficile d'aller plus loin sans dépasser le format d'un billet de blog. L'idée est d'expliquer les tenants et les aboutissants du métier en me basant sur ce vécu semé de frustrations, et de mettre celles-ci en perspective en leur associant des causes objectives.
La critique d'un objet aussi complexe que ce site est confortable quand le contexte dans lequel il a été produit n'est pas connu et pris en compte. Un objet, quel qu'il soit, est formalisé par les compétences des personnes qui l'ont conçu, les outils qu'ils ont utilisé, mais aussi par l'environnement qui a accompagné son développement. L'idéal auquel je comparerai le site actuel est détaché de toute contrainte économique ou technique (ce qui ne l'empêche pas d'être souhaité).
Commençons par le début : un site internet n'est pas un spectacle, c'est un outil, il existe pour accomplir une tâche avec le plus d'aisance possible. Considérer les attentes éventuelles des usagers est essentiel si on veut organiser et construire le contenu d'un site dans un sens qui lui conviendra le mieux.
Quand le besoin de réserver un billet de train en ligne se fait sentir, on entre "www.voyages-sncf.com" dans la barre d'adresse du navigateur, ou on clique ce lien depuis un moteur de recherche. On réalise alors l'équivalent mental de se rendre à la gare la plus proche et de faire la queue devant les guichets. Si on poursuit cette métaphore, quand la page se charge, c'est comme si notre tour était venu et qu'on s'avançait devant le guichet. Et voilà que s'affiche :
On s'attendrait à détailler notre demande avec un « Bonjour, un Paris - Saint Quentin s'il vous plait, pour vendredi prochain en début de soirée », mais on se retrouve avec trois personnes derrière le guichet qui font tout ce qu'elles peuvent pour attirer notre attention. La première nous parle non pas de train, mais de voyage qui peut "entre autre" se faire par le train, la deuxième nous propose un magazine de voyages pour nous évader, et la troisième nous indique qu'elle a des bons plans. Ce n'est pas que les idées de voyage ne sont pas intéressantes, mais ce n'est pas exactement le bon moment de les parcourir, quand une destination est déjà en tête et que réserver le billet le plus viiiite possible est la chose qui importe à cet instant. Donc le reportage sur le grand nord, pourquoi pas, mais plus tard. Pour ce qui est des bons plans, ils ont du mal à convaincre de leur existence tant les différences de prix sont fortes dans un même wagon. Le secret serait d'anticiper, mais si les meilleurs prix sont de toute façon affichés dans les résultats de recherche, on peut se demander pourquoi on leur réserve une telle surface dans cette page d'accueil.
Voyons le cas du formulaire de réservation :
Ah. Voilà qu'il faut annoncer si l'on souhaite une voiture de location, alors que le problème tout de même assez central de la destination n'a pas encore été abordé. En s'adressant à un guichetier, on commence rarement avec «j'aimerais louer une voiture et réserver une chambre d'hôtel» avant de préciser sa ville de départ et de destination. Le but est pourtant bien fondé puisqu'il s'agit de nous faire économiser de l'argent en faisant une commande groupée. Mais du point de vue de l'usager, ça n'est pas très logique, ça ne répond pas à son besoin immédiat quand il arrive sur le site. Commander un billet pour Rennes puis consulter les tarifs pour une chambre d'hôtel se place plus dans un schéma habituel. Il m'a semblé trouver une réponse à cette contradiction en sélectionnant une des deux options proposées : les formulaires ne sont pas identiques selon les combinaisons possibles. En effet, ajouter la location d'une voiture à votre billet ne vous donne plus le choix entre la deuxième ou la première classe, vous ne pouvez plus spécifier un trajet direct, vous n'avez plus la possibilité de sélectionner une carte de réduction et le nombre de voyageurs sélectionné par défaut passe de 1 à 2.
Il est probable que la structure technique du site soit d'une complexité telle que la modification du flux d'entrée d'informations s'avère trop coûteuse. Mais il faut admettre qu'en l'état actuel, cette présentation n'est pas optimisée pour l'utilisateur, qui en attendant fait face à une confusion dont il se passerait bien. Une chose qui par contre ne devrait pas être difficile à corriger, c'est la disparition des données qui sont entrées dans le formulaire lorsqu'on choisit d'ajouter après coup une voiture ou un hôtel au billet. La personne qui suit le raisonnement chronologique de penser à sa chambre d'hôtel après avoir détaillé son trajet se retrouve dans l'obligation de tout remplir une fois de plus. Après un bon juron bien senti j'imagine.
Deux points positifs sont à noter sur le fonctionnement du formulaire existant : le remplissage automatique dans les champs de villes et la sélection des dates avec un calendrier permettent à l'utilisateur d'avancer plus confortablement dans sa requête. Il serait souhaitable que la sélection de la ville choisie dans la liste proposée se fasse par la touche "tabulation" du clavier et non la touche "entrée" qui est utilisée en général pour la validation d'un formulaire et l'interrogation du serveur. Par convention, la touche tabulation permet de parcourir un formulaire de champs en champs ; il semble donc logique qu'elle soit utilisée pour quitter la liste des villes et passer au champs suivant.
Les lecteurs les moins familiers au domaine du webdesign ou du design en général pourraient trouver étrange que nous n'ayons pas encore parlé de couleurs, de polices de caractères, de choix d'images ou d'effets d'animation. C'est normal, tout va bien : le design n'est pas seulement une activité de stylisme et de décoration, mais aussi et avant tout une méthode de conception qui prend en compte l'ensemble des facteurs impliqués dans la production et l'utilisation d'un objet. Les qualités esthétiques d'un objet font partie de ces facteurs, mais ils ne sont pas les seuls, et c'est tout à fait normal que nous n'abordions que maintenant le graphisme de la page.
Elle commence avec le logo de voyages-sncf.com inscrit dans une étiquette de bagage dont s'échappent des rubans de couleur poursuivant eux-mêmes leur trajet au-dessus d'un paysage exotique, mais qui sont vite coupés dans leur élan dès la sortie de l'image, tel un oiseau s'écrasant sur une fenêtre. Au bas de l'image se trouve une suite de mots composant le menu de navigation proprement dit.
Tout d'abord, l'image : mais que viennent faire ces toits tibétains (ou autres) dans un site vendant des billets de train pour la France et l'Europe ? Si les campagnes de publicité vous avaient échappées, la société voyages-sncf.com est une agence de voyage qui propose d'autres services que le train : billets d'avions, séjours, hôtels,... tout pour organiser vos déplacements et vos vacances. Ce calme de lever de soleil aux portes de l'Asie dégageant sagesse et sérénité est donc là pour vous évoquer les voyages lointains, et pour insinuer subtilement qu'aujourd'hui, "voyages-sncf.com, c'est plus loin que vous ne l'imaginez". Malheureusement, dans ce slogan se trouvent les quatre lettres qui symbolisent pour les français le train : SNCF. Il y a des acronymes comme ça, qui à force d'être vus et entendus régulièrement laissent des traces difficiles à éliminer : EDF = électricité, ASSEDIC = chômage, URSSAF = impôts, RATP = métro, et SNCF = train. Les qualités de détermination, de conviction et d'espoir sont admirables, mais il faut bien réaliser que chaque mention d'une grève SNCF dans l'actualité va à l'encontre des effets souhaités d'une publicité vantant les activités multiples de voyages-sncf.com, aussi intrigante soit-elle. Autant uriner dans une contrebasse. Chose ironique, c'est un peu le message de cette dernière publicité...
Si cette contradiction n'affectait que le choix de l'image d'en-tête, on ne s'en porterait pas plus mal. Mais elle impacte aussi l'organisation de la page, sa lisibilité et donc son efficacité. Voyages-sncf.com voulant promouvoir son offre commerciale plus riche que son nom pourrait le laisser entendre, la barre de navigation s'est vue assigner le rôle de refléter cette pluralité, en suivant la règle du "plus y'en a, plus on verra qu'y en a beaucoup et plus ça sera mieux". Y'a que du "plus" là dedans, ça ne peut pas être mauvais ! Et bien si, c'est très mauvais. Les mots ont besoin d'espace autour d'eux pour respirer et exister en tant qu'entités distinctes, lisibles et utiles. Pour le démontrer, voici une modification temporaire de l'espacement des mots dans cette phrase ; et pour marquer le coup, de l'espacement entre les lignes. Seriez-vous prêt à dire que vous lisez ceci aussi confortablement que le reste de la page, ou sentez-vous cette petite gêne venant du fait que vous avez besoin de vous concentrer un peu plus qu'il y a quelques secondes pour poursuivre votre lecture au même rythme ? C'est ce qui arrive quand le regard parcourt ce menu : il faut faire un effort pour le lire, ce qui est dommage quand on pense au rôle essentiel qu'il a dans le fonctionnement du site.
D'autres erreurs typographiques et graphiques participent à ce manque de lisibilité : manque d'aération entre les lettres (crénage), manque d'espace entre les onglets, décalage blanc entre l'empreinte de l'onglet dans l'image de fond et le dégradé de couleur de l'onglet, et "arrondis" des coins supérieurs en escaliers plus qu'en quarts de cercle. C'est ce qui s'appelle une belle saucisse de mots ; moins un outil de navigation. Un code couleur fait une tentative d'apport de sens à cette farandole, car en y regardant bien, il reprend celui du contenu présenté dans le cœur de page (les trois guichetiers mentionnés plus haut, "Voyages" en bleu, "Magazines" en brun et "Bons Plans" en rouge). Mais l'ensemble est si confus qu'il est possible que l'association d'une couleur à un type de contenu ne se fasse pas tout de suite pour tout le monde. D'autant plus qu'un Pro de couleur non identifiée s'incruste dans la chenille. Ah, et là un petit personnage se joint à la fête, à côté du mot "Aide" dont on ne sait plus si c'est elle qui va nous en proposer, ou si c'est elle qui en a besoin, coincée comme elle est dans sa petite case. Il existe une loi en interaction homme-machine qui démontre que plus on a de choix, plus on met du temps à choisir. C'est un phénomène qui se remarque très bien au restaurant, lorsque la carte présente des menus interminables et que le serveur perd patience, alors que tout le monde ère de plats en entrées sans se décider. Sur internet, l'unité de temps est beaucoup plus petite que celle d'un restaurant - on parle de fractions de seconde. La moindre hésitation est vécue, plus ou moins consciemment, comme une gêne. Si les choix possibles sont trop nombreux, cela se traduit souvent par une absence de décision, l'utilisateur passant à autre chose en s'intéressant à une autre partie de la page où les informations sont plus faciles à intégrer, voire en la quittant tout simplement. Dans le cas où les usagers sont dans l'obligation d'accomplir une tâche avec une telle interface, comme c'est le cas ici, ils repartent avec un souvenir désagréable et associent des valeurs négatives à l'expérience vécue. Il est donc très avantageux de réduire le nombre de choix que l'on donne pour améliorer l'efficacité d'une page et la satisfaction des utilisateurs.
En poursuivant la descente de la page, nous croisons deux liens qui n'ont pas l'air de savoir où ils devraient se placer, entre l'en-tête et le corps de la page : "accéder à mon compte" et "mes réservations train". La taille de caractère, la couleur choisie et leur emplacement font qu'ils sont presque invisibles dans la page ; regardez-la en fermant légèrement vos yeux et vous les verrez presque disparaître. Ces deux services sont pourtant très utiles dans un site comme celui-ci, et il est dommage qu'ils ne soient pas plus mis en avant.
L'organisation du cœur de page pâtit elle aussi de la nature diversifiée de voyages-sncf.com puisque presque deux tiers sont assignés à d'autres buts que la réservation d'un voyage en train. L'espace laissé au formulaire ne permet pas d'en optimiser la lisibilité et la simplicité, rendant sa complétion moins efficace et moins plaisante que ce qu'elle pourrait être. Au-delà de ce choix d'ordre structurel, ce sont quelques détails qui procurent à cette page son aspect confus souvent remarqué. Quelques négligences dans le rendu de certains composants graphiques et leur alignement incertain accentuent les efforts que le visiteur doit faire pour s'approprier cette page, son organisation et son fonctionnement – ce qu'on peut appeler l'image mentale, ou le souvenir qui reste après l'utilisation du site. Ces efforts sont, il est vrai, relativement minimes, mais c'est leur accumulation qui finit par constituer une gêne notable.
Puisque nous parlions du formulaire :
En passant votre souris sur l'image, vous pourrez en voir une version modifiée, où les éléments ont été alignés dans le but de rendre l'ensemble plus lisible. La présence d'une trame sous-jacente sur laquelle s'arrangent les éléments graphiques (comme les mots ou les icônes) guide le regard du visiteur et lui fait comprendre les liens hiérarchiques qui existent dans le contenu présenté. C'est comme si on avait réorganisé les meubles dans une grande pièce pour créer des ensembles à thème (coin salon, coin cuisine,...), et des passages plus confortables permettant de circuler sans se cogner. Dans un premier temps, l'interlignage a été homogénéisé sur une seule valeur qui donne un rythme vertical régulier, plus confortable, comme sur un papier à lettre ligné. Puis les éléments ont été répartis horizontalement par rapport aux bords gauches et droits des champs texte. Ce sont eux qui ont le plus d'impact visuel, ils sont les mieux placés pour donner le La dans cet arrangement. D'autres axes d'alignement vertical intermédiaires ont été placés par rapport à la largeur de certains éléments, et non par rapport à une grille pré-établie ; par exemple l'alignement de "à partir de" sur le bord gauche du bouton "rechercher". Ce ne sont que des améliorations superficielles pour un formulaire qui mériterait d'être revu de façon plus profonde comme nous l'avons vu plus haut, mais on a déjà la sensation d'une amélioration comparable à celle offerte par le repassage d'une chemise froissée.
Le reste de la page pourrait aussi être améliorée de la même façon, et voici une liste des points qui me semblaient souhaitable de corriger. Certains points pourront paraître tirés par les cheveux tant les nuances peuvent sembler imperceptibles à un œil non averti, mais leur correction permettrait de rendre cette page un peu plus présentable et digeste par effet d'accumulation.
1 : L'arrondi se prend pour une ligne droite,
2 : l'ombre portée de l'encadré est en contradiction avec l'éclairage mis en avant par les reflets à la Vista / MacOSX au niveau des titres. Le reflet qu'on voit sous "Réservez votre voyage" simule la présence d'une boite à lumière (éclairage diffus) au dessus de la page, dans son axe médian. L'ombre portée de ce même encadré simule quant à elle une source de lumière qui serait placée en haut à gauche, puisque l'ombre n'apparait que d'un côté,
3 : le bouton d'action flotte, le lien entre le texte et lui devrait être beaucoup plus fort,
4 : rarement un bouton de confirmation n'a été aussi petit et proche des limites du lisible,
5 : le titre a un fond de couleur unie alors qu'il est supposé être sur un fond dégradé,
6 : justification à droite du texte en contradiction avec l'alignement central des autres éléments de cet encadré,
7 : l'image ne va pas jusqu'au bout de son emplacement, créant une barre grise disgracieuse,
8 : ce bouton n'a malheureusement rien à envier à celui de la note 4,
9 : mauvaise répartition horizontale des trois liens et de leur icônes,
10 : le bouton d'action n'est pas lié à la phrase qui le définit, mais à l'encadré à coin arrondi. Son incarnation précédente remarquée en note 3 l'associait pourtant à du texte,
11 : le dégradé bleu en fond de page a subi le même traitement de faveur que les rubans dans la tête de page, un arrêt aussi brusque qu'injustifié,
12 : arrondi frisé de fuschia,
13 : un encart qui devait être prévu en forme de gélule qui finit comme un ballon de rugby,
14 : la fameuse ombre portée permettant de donner du relief à la page a subitement disparu.
15 : la différence entre ces deux astérisques n'est pas lisible. Il existe d'autres caractères plus identifiables pour les notes en bas de page, comme par exemple la dague †.
16 : la composition de ce pied de page ressemble plus à un pâté de liens qu'à un service qu'on offre à ceux qui seraient perdus.
Un autre aspect du métier qui ne sera pas abordé ici est la production du code qui permet aux sites d’être lus par votre navigateur. C’est une question assez spécialisée qui ne parlera pas beaucoup aux curieux, mais c’est une facette importante sans laquelle les autres considérations vues jusqu'à maintenant n’ont pas beaucoup de raison d’être. Vous avez beau concevoir le plus beau site "sur le papier", si le code ne traduit pas vos intentions de façon fidèle et efficace, autant ne rien faire. Il est donc très important pour un webdesigner de connaître les limites et les possibilités des langages (HTML, PHP, CSS, Javascript,...) dans lequel le site projeté sera concrétisé.
J'espère que le webdesign est maintenant un peu plus clair pour ceux qui voulaient en savoir plus. Ce qu'il faut retenir, c'est que c'est une approche de la formalisation d’un site qui commence par se mettre dans les pas de l’utilisateur pour comprendre ses besoins, pour y répondre en utilisant l’architecture d’information, l’interactivité, le graphisme, quelques langages informatiques et bien-sûr la créativité .
Dans le cas de voyages-sncf.com, il est encore possible d'optimiser grandement l’expérience des usagers et de proposer un produit plus performant qui aurait toutes les chances de devenir populaire en utilisant ces méthodes de travail. Pourquoi est ce que ce n'est pas encore fait ? Les raisons de ce manque peuvent être multiples, et le sujet n’est pas ici d'essayer de les identifier. Mais chez les personnes avec lesquelles j'ai discuté de ce site, l'argument qui revient le plus souvent est à peu de choses près que "de toutes façons ils sont en situation de monopole, pourquoi passeraient-ils du temps à améliorer leur site". Voyages-sncf.com aurait beaucoup à gagner en proposant un service de meilleure qualité : si la réservation d’un billet de train devenait une tâche satisfaisante, réalisée sans encombres, et si les autres offres de voyages proposées étaient mises en avant de façon plus convaincantes, ce site pourrait devenir la destination par défaut lorsqu'on pense au voyage, même s'il n'est pas fait en train. Le monopole sur la vente des billets SNCF n'est pas une excuse au laissez-faire, c'est au contraire ce qui devrait motiver les améliorations dont ce site a besoin, car il s'agit d'un levier commercial incroyable que bien des concurrents doivent leur envier.
