Critique de l’ergonomie du site Voyages-Sncf

1 Million de visites par mois, il s’agit là d’une partie assez importante de la population française. Et pourtant, le site Voyages-Sncf n’est vraiment pas au top en ce qui concerne l’ergonomie.

Gestion des connexions

Pourquoi le site internet me demande à chaque fois de me connecter ? Ne pourraient-ils pas rajouter une case « Se souvenir de moi », cochée par défaut, qui me permettrait de ne pas avoir à retrouver mon login et mon mot de passe ? À noter également : l’endroit pour se connecter est assez compliqué à trouver, il n’y a pas de champ sur la page d’accueil, il faut réussir à trouver le lien « Compte Client ».

La réservation

voyages-sncf partie apparait disparait

Partie qui apparaît et disparaît

Si vous cliquez sur le lien « Réserver un billet » et que vous êtes suffisamment attentifs, vous verrez la page se modifier une fois chargée par le navigateur : les informations sur le voyageur sont affichées puis disparaissent une demi-seconde plus tard. C’est assez troublant une fois que vous y aurez fait attention, vous n’arriverez plus à ne pas le voir.

C’est une chose qui peut être très facilement corrigée, je ne comprends pas pourquoi ce bug n’a pas encore été réparé.

Temps de chargement

Partout sur le site, les temps de chargement sont élevés. La recherche de trains est tellement lente que Voyages-Sncf a décidé de mettre une page d’attente pendant la recherche. Il s’agit d’un réel problème pour l’utilisateur : commander un billet de train devient long et fatigant, et beaucoup d’utilisateurs sont assez déçus par cela.

Manque de clarté

Quand un utilisateur va sur le site Voyages-Sncf, il a généralement une chose en tête : réserver un billet de train. Et pourtant, le site n’est clairement pas pensé de cette façon. Quand on navigue sur ce site, on a l’impression que Voyages-Sncf est un site gratuit financé par de la publicité, et pourtant toute la pub est uniquement pour le site lui même ! Il en va de même si vous voulez un jour acheter une carte de fidélité payante : laquelle choisir? Voyages-Sncf a fait un tableau comparatif des différentes offres, mais cela ne répond clairement pas à mon besoin : quel est le coût de chaque carte et combien me permet-elle d’économiser ?

Le site internet a encore beaucoup de travail avant de pouvoir offrir une vraie expérience utilisateur, ce qui est dommage étant donné le nombre d’utilisateurs qui seraient davantage satisfaits avec un site de meilleure qualité.

La librairie jQuery: Principe, Utilisation et liens

 

Petite histoire du JavaScript

Javascript existe depuis bien longtemps, puisque en septembre 1995, le navigateur Nestcape Navigator 2.0 sort, et avec lui la première implémentation du Javascript qui porte à ce moment le joli nom de LiveScript. Ce nom a changé dans les versions suivantes.

Microsoft à l’epoque était un des grands précurseurs dans le domaine du web, et créa Internet Explorer 3.0 en 1996, qui supportait le Javascript. Cependant, le Javascript a toujours été un langage interprété différemment selon les navigateurs. Ceci a posé beaucoup de problèmes au développeurs pour qui le Javascript n’était pas un langage particulièrement mur et intéressant.

Inventer un nouveau langage pour remplacer le Javascript n’était pas concevable pour éviter de pénaliser une grande partie des utilisateurs qui ne mettent pas à jour leur navigateur fréquemment. C’est dans une optique de simplification du Javascript (et d’accessibilité pour les développeurs) que jQuery a vue le jour

Naissance de jQuery

Il faut savoir qu’il existe plusieurs langages qui ont été créés pour améliorer l’utilisation du Javascript, comme par exemple jQuery, Dojo, Backbone , Coffeescript, jQuery UI, EmberJS.

jQuery est devenu un des incontournables, puisqu’il permet de simplifier largement l’utilisation du Java-script: L’idée du créateur de jQuery est très simple: sélectionner un élément avec javascript est assez compliqué nativement:

En effet pour obtenir tous les éléments qui ont le tag html h1 par exemple, il faut utiliser le code suivant:

var h1_array = document.getElementsByTag('h1');

var h1_class_array = [];
for (var i=0, len=h1_array.length; i < len; i++) {
if (h1_array[i].className.indexOf(‘classname’) !== -1) {
h1_class_array.push(h1_array[i]);
}
}

En jQuery, l’operation est bien plus simple:

h1_object=$.("h1")

L’idée est d’utilisée les mêmes sélecteurs que ceux utilisés en CSS, pour ne pas avoir à apprendre un nouveau langage de sélecteur. C’est pourquoi jQuery a eu un tel succès:

Voici des graphiques montrant la répartition des sites qui utilisent jQuery:
Statistiques jQuery

Les gros sites (classés dans les top 10k) utilisent en majorité jQuery, les sites de plus grande ampleur ayant souvent peur de dépendre d’autres librairies, ou ont créés leur propre librairie. Cependant, jQuery reste un incontournable en terme de développement web, et je pense qu’il faut au moins réfléchir à cette possibilité lors de la création d’un site internet.

Exemples

Dans cette partie, je vais vous montrer quelques exemples de code permettant de faire certaines opérations rapidemment: 

Changer la couleur d’un élément

Exécuter$(this).css("color","red");

Ajouter un élément à une liste

  • Banane
  • Pêche
  • Framboise
Exécuter$("ul.ex2").append("<li>Myrtille</li>");

On utilise le sélecteur ul.ex2 qui signifie de choisir les éléments ul qui ont la classe ex2

Effectuer une action pour chaque élément




Résultat:
Exécuter$("div.ex3 input").each(function(){$("div.ex3").append("<b>"+$(this).val()+"</b><br>")});

Utiliser jQuery

Pour utiliser jQuery, c’est très facile, il suffit d’utiliser une simple balise script dans le code HTML de sa page. Une bonne pratique est de la placer juste avant la balise <body> pour éviter les temps de latence du à l’attente du chargement du javascript.

Il est possible d’utiliser une version de jQuery hostée par google. Cela offre les avantages suivants:

  • pas de téléchargement de la librairie pour chaque site qui utilise la librairie, puisque les utilisateurs auront très souvent cette librairie dans le cache de leur navigateur
  • pas de bande passante utilisée supplémentaire pour la librairie

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Rendez vos interfaces clients riches!

Les interfaces clients riches existent de plus en plus sur l’ensemble du web. Les sites internet où toutes les pages se rechargent à chaque clic sont devenus des sites qui déplaisent aux utilisateurs (surtout si le site est lent). Je pense que les sites gagneraient tous à être plus proches des utilisateurs en leur donnant une interface plus simple.

Souvent, les sites internet sont faits de manière à offrir une grande quantité de fonctionnalités, mais ces fonctionnalités ne sont pas/peu accessibles. Je pense que le fond du problème est dans la conception du site : plusieurs professionnels vont parler en terme de bases de données, de fonctionnalités. L’interface n’est pour eux qu’une partie insignifiante du site. Je pense au contraire que l’expérience est plus importante que toutes les abstractions qui peuvent se faire derrière. C’est pourquoi, quand on me confie un projet, je réfléchis en premier lieu à l’interface-client. L’utilisateur est l’élément central du site internet, et ceci dès sa conception.

Site du Javascript ninja

Bonjour,

Je m’appelle Edgar HIPP, créateur du site http://www.javascript-ninja.fr. Mon but est de montrer l’importance de l’ergonomie dans les sites internet, ainsi que de la bonne utilisation des langages de type client (c’est à dire qui s’exécutent sur le navigateur de chaque ordinateur). Je parlerai donc d’utilisabilité des sites internet en général, mais également des technologies intéressantes qui existent dans tout ce qui concerne le développement front-end des applications web.