Comment eviter un cliqueur frénétique dans une application web ?

Tout le monde a déjà eu le coup ! Un utilisateur clique frénétiquement sur un bouton save ou launch parce que le serveur a un load de 40 et résultat ?

• 40 éléments rajoutés à la base de donnée
• 40 lancements de rapport avec des requêtes MySQL de la mort
• 40 requetes AJAX qui vont répondre dans n’importe quel ordre et surtout n’importe quand.
• bref…. 40 COQUILLES.

Alors que faire contre l’utilisateur frénétique qui en est déjà a son 5eme café et qui va massacrer votre interface graphique car elle ne répond pas a la milliseconde ?

Du Feedback

Je n’ai eu qu’a de très rare occasion vu une application qui montre que quelque chose est en train de se faire en arrière plan.

Afin de dire a votre utilisateur que votre application web a bien pris en compte l’opération, vous pourriez mettre un petit sablier.

Pour cela rien de plus simple. Un peu de CSS.

body.waiting {
   cursor: wait;
}

Puis tout simplement avoir un code JS (ici avec prototypes)

document.body.addClassName('waiting');
new Ajax.Request(uri, {
   onComplete: function() {
      document.body.removeClassName('waiting');
   }
});

Simple non ? Vous pouvez aussi enregistrer un changement de curseur plus globalement au niveau du Responders ajax.

Ajax.Responders.register({
   onCreate: function(){
      document.body.addClassName('waiting');
   },
   onComplete: function(){
       document.body.removeClassName('waiting');
   }
});

Et n’oubliez pas l’evenement “window.load” de votre navigateur lorsque ce n’est pas un appel ajax.

BRAVO ! A présent votre utilisateur est au courant que quelque chose se passe .

Toute ces petites choses paraissent évidente et pourtant… beaucoup de site sérieux ne le font pas.