Une interface réussie est donc une interface ou on a bien travaillé, du niveau « macro » au niveau « micro ».

Dans ce billet précédent, je parlais de l’idée de mettre plusieurs images pour un bouton :

  • Une image pour le bouton au repos ;
  • Une image quand la souris passe au dessus du bouton (mouseover) ;
  • Une image quand on clique sur le bouton.

Petit détail qui compte : il ne faut pas que le navigateur ait à charger les images lors de l’action. Il faut que les images soient pré-chargées.

Sinon ? L’utilisateur risque d’avoir un effet très désagréable : avoir un bloc blanc qui s’affiche lors de l’action. Et oui, le temps que l’image se charge…

Comment pré-charger les images ?

Une solution (il y en a surement d’autres) : on charge une seule image, qui contient tous les états du bouton, et avec un petit code javascript, on déplace la partie visible en fonction de l’action. C’est assez facile à faire, et ça marche très bien.