Capitaine commerce 2.1

Faire toujours tester votre site par des utilisateurs non avertis : cette règle, du moment qu’un site a un objectif de transformation, ce qui est le cas de la plupart des sites aujourd’hui (prise de contact, inscription à une communauté, transaction, vente, etc.), devrait être gravée dans le marbre des tablettes des concepteurs de sites ecommerce.

Beaucoup de sites comportent encore des erreurs grossières d’ergonomie

Encore trop souvent des sites non finis, non testés, comportant des erreurs grossières naissent sur le web, pénalisant dès le départ leurs chances de réussite.

Je vous donne un exemple, extrait d’un site vendant des cafetières expresso portatives.

L’objectif de cette page étant de pousser l’utilisateur vers le paiement, on ne peut pas dire que les 2 liens ci-dessus soient incitatifs.

Ils ne sont pas hiérarchisés : leur taille, leur couleur et leur typo étant identiques, le seul fait qu’ils soient placés l’un au dessus de l’autre ne suffit pas à donner de l’importance à l’un plus qu’à l’autre (même si, et c’est bien pire encore, le lien « back to website » ait plus de chance d’être cliqué que « Confirm your basket »). Encore plus bête, ces liens ne sont pas soulignés. Pour info, même si c’est moins beau, un lien hypertexte doit être souligné (un jour, on verra dans quels cas on  peut se passer de cet attribut). C’est bien sûr une grossière erreur.

Le bouton « Terminer ma commande » doit toujours être le plus excitant possible

Sur la page panier, il doit absolument y avoir une action mise en avant plus que les autres, c’est « TERMINER MA COMMANDE ». Et pas sous forme de lien, of course, mais bien sous la forme d’un bouton, le plus gros, le plus excitant et le plus appétissant possible. Rappelez-vous que le taux d’abandon entre la page panier et le reste du processus de commande est l’un des plus forts qui soit sur tout votre site. Alors ce n’est pas la peine d’encourager encore plus vos acheteurs à s’enfuir au moment où, précisément, vous souhaiteriez (vraiment fort) qu’ils aillent jusqu’à la page de paiement. On ne sait jamais, vous pourriez avoir une commande. Ca peut toujours être intéressant.

Voilà peut-être ce à quoi aurait vraiment dû ressembler ce panier.

Bon, j’ai traduit en français pour que tout le monde comprenne bien mon idée.

3 conseils pour améliorer vos liens et vos boutons

1. Faites bien la différence entre un lien et un bouton : un lien emmène vers une autre page du site sans aucune autre action. Un bouton engendre un processus, une action, avant d’emmener vers une autre page. Ici, sans préjuger de ce qui se passer derrière mon bouton « Commander », on peut imaginer que l’on demandera à l’utilisateur de se loguer, de se créer un compte ou bien de valider son adresse de livraison. Dans le cas du panier, on utilise le bouton pour « forcer » visuellement l’action. Instinctivement un utilisateur verra toujours en premier un bouton (surtout s’il est seul sur la page) et sera tenté de le cliquer sans réfléchir.
2. Faites attention au « wording ». Mais c’est quoi le « wording » me répondrez-vous en vous caressant lentement le menton de la paume de la main ? Le « wording », c’est le boulot qui consiste à choisir les meilleurs mots pour les boutons, les liens, etc. qui engendreront, une fois cliqués, une réation du système. Si l’on reprend la première capture d’écran (ci-dessus), on s’aperçoit d’ailleurs que le « wording » n’est vraiment pas bon :
   1. « back to website » signifie « Retour au site » : mais quel site ? L’utilisateur peut se demander (consciemment ou non) sur quel site on va l’emmener et pourquoi on l’emmènerait sur un un autre site. C’est bien ici ce que suggère ce texte.
   2. « Confirm your basket » : « confirmer votre panier » est compréhensible, mais suggère une étape supplémentaire dans votre commande un peu comme si, lorsque vous passiez à la caisse d’un supermarché, la caissière derrière son tapis roulant, vous demandait si vous étiez bien sûr de bien vouloir acheter tout ce que vous aviez déposé dessus avant de continuer. Logique ou pas, selon vous ?
   3. Le « wording » est un art compliqué qui peut paraître tiré du bon sens, mais détrompez-vous : il n’y a rien de pire que de mettre les mauvais mots sur un bouton ou un lien. Posez-vous la question de savoir ce que signifie réellement « Poursuivre mes achats » ou bien « Valider mon panier »
3. Hiérarchisez les call-to-actions : rien ne doit jamais être fait au hasard lorsque vous demandez à l’utilisateur d’interagir avec l’interface de votre site. Celui-ci doit pouvoir toujours identifier quelles options il a, les bonnes comme les mauvaises (retirer un article du panier, par exemple) et ce de manière hiérarchiser. Comme on l’a vu, dans le panier, il vaut mieux mettre l’accent sur le processus de commande. Sur une page produit, il vaut mieux mettre l’accent sur l’action d’ajout au panier (même si d’autres actions peuvent être proposées : « se renseigner sur les tailles », dans le cas d’un vêtement, « plus d’informations sur ce produit » dans le cas d’un produit technique, etc. En gros, il ne devrait jamais y avoir 2 boutons de la même importance sur une page d’un site ecommerce

J’espère que ces conseils ne vous auront pas endormi ni ne vous auront paru obsolètes. Si vous avez d’autres remarques à ce sujet ou si vous pensez que j’ai dit des bêtises, n’hésitez pas à faire vos commentaires.