La qualité d’un site passe par multitude de détails.
Des détails ?
Des détails qui impactent directement le taux de transformation du site. Des détails qui pèsent lourd donc !
Exemple : les boutons.
En premier lieu, le bouton doit avoir une forme sans équivoque, qui sera reconnu par l’Internaute comme un élément appelant le clic.
La couleur ressort bien du contexte, le libellé est clair. L’effet relief rajoute l’envie de cliquer.
En deuxième point, il me semble qu’on apporte un signal encore plus clair et « incitatif » en changeant la couleur ou la forme du bouton au survol de celui-ci par la souris :
(exemple extrait d’Amazon)
C’est bon ? Oui, mais je pense qu’on va aller dans un avenir proche un cran plus loin.
Je pense en effet qu’on pourrait améliorer l’expérience utilisateur en lui signifiant clairement, après le clic, qu’on a bien pris en compte sa demande.
En effet, le temps de traitement, qui suit le clic, est très variable, en fonction du débit de l’internaute, de l’engorgement du réseau, du taux de charge du serveur, …
Donc, il faut faire patienter l’internaute.
L’interface gagnerait en clarté si, après le clic, un signal visuel indiquait à l’internaute que sa commande est en cours de traitement. On pourrait par exemple ajouter sur le bouton, qui devrait être avoir un code couleur pour signifier que l’utilisateur a bien validé l’option, une animation représentant l’attente, dans le genre :
Je ne crois pas qu’on puisse faire ça en html / css standard. Il faut un brin de Javascript.
Je n’ai pas vu de site mettant ça en oeuvre (le dernier point je veux dire). Et vous ?
farecast http://farecast.live.com/ le moteur de recherche de voyage racheté récemment par Microsoft le fait bien :-). Il affiche en guise de message dans le bouton « recherche en cours » et il exploite bien l’Ajax. Je trouve que c’est une belle acquisition de Microsoft.
Sinon pour l’importance du détail des interfaces j’ai écrit un billet sur mon Blog qui illustre le concepte chez Yahoo et Google qui pratiquent du branding grâce à de petits détails insignifiants des fois.
http://blog.populiz.com/argent/soigner-son-branding-sur-internet-36.html
Bonjour,
Le problème est parfois plus compliqué. Lorsque l’activation entraîne un rafraîchissement la page, il faut à la fois figer le reste de l’interface et effectivement mettre animation d’attente.
Par habitude lorsque cela arrive, je met une ombre sur toute l’interface avec une animation en surbrillance sur le milieu de la page. Cela permet de mettre en attente l’utilisateur.
Cela dépend si le site web est tout en Ajax, ou par rafraîchissement de la page.
Nous venons de mettre en ligne une nouvelle version de notre site et nous avons apporté beaucoup d’importance aux détails.
Nous avons par exemple des boutons qui changent lorsqu’on les survols.
Ces détails prennent une part non négligeable dans le temps de développement et il est parfois difficile de justifier ce temps supplémentaire. En effet, certains site très moche, sont appréciés par le service qu’ils rendent.
Il est difficile de faire des sites « branchés » sans java script ou sans d’autre technologie comme flash.
On atteint très vite les limites du html…
@Mehdi, Mickael> Merci pour ces infos
@Guillaume> Oui, tout à fait : tous ces détails prennent du temps, et comme il faut une mise en œuvre impeccable…
Bref, si on n’a pas les moyens, il vaut mieux viser quelque chose de très basique et bien fini.