Le tunnel de commande est traditionnellement le talon d’Achille des boutiques en ligne. J’ai déjà eu l’occasion de pointer du doigt certaines faiblesses inacceptables (De l’intérêt de soigner votre page de paiement), mais il reste encore un gros travail à faire pour améliorer cette dernière étape. Certains y travaillent de façon isolée (Vive les tunnels de commande simplifiés), mais c’est globalement une des plus grosses lacunes du commerce en ligne.
Je ne voudrais pas jouer les donneurs de leçons, mais en pus de 10 ans, les tunnels de commande n’ont quasiment pas évolué : toujours les mêmes étapes et formulaires perfectibles. La seule évolution notable que j’ai pu remarquer est le passage d’un enchainement horizontal des étapes à un enchainement vertical que l’on a commencé à voir en 2009 chez Apple ou American Eagle (The Apple Store’s Checkout Form Redesign).
Pourtant la littérature sur le sujet ne manque pas :
- The State Of E-Commerce Checkout Design 2012
- Evolving E-commerce Checkout
- Checkout Champions: 10 Tips To Win More Ecommerce Sales
- Checkout Experience: Don’t Require Seemingly Unnecessary Information
- Fundamental Guidelines Of E-Commerce Checkout Design
Rassurez-vous, mon intention n’est pas de donner des leçons ou de me moquer, car je sais à quel point le quotidien d’un e-commerçant est complexe et force à prioriser le temps et les ressources. Malheureusement, les tunnels de commande généralement livrés avec les plateformes de commerce en ligne ne sont très clairement pas à la hauteur. Heureusement, les Français de WiziShop innovent avec le Smart Check-Out.
Ce nouveau tunnel de commande ambitionne de réduire par 2 ou 3 le temps et les erreurs de complétion : Smart Check-Out, le tunnel de commande qui permet de vendre plus. Force est de constater qu’ils ont fait du très bon travail pour améliorer l’existant et que les solutions proposées seront sans aucun doute très bénéfiques au taux de transformation. Vous pouvez tester ce tunnel sur la boutique de démonstration ou sur Dezerv (mais ça va faire exploser son taux d’attrition !).
Je vous propose de passer en revue les différentes innovations et d’y apporter quelques commentaires pour l’améliorer. Nous commençons donc avec le panier :
Comme vous pouvez le constater, ce panier est parfaitement clair, il met bien en évidence les informations essentielles (frais de port, date de livraison, montant à compléter pour bénéficier des frais port gratuits), le bouton de validation est bien mis en valeur et la mise en page est aérée.
Par contre il y a quelques détails qui me chagrinent :
- Comme nous sommes dans la première étape du tunnel de commande, le header ne devrait pas être affiché. Je sais que c’est un débat récurrent au sein de la communauté, mais il me semble qu’un compromis existe sur ce point précis : un header affiché pour le panier intermédiaire et pas de header pour un panier intégrer au tunnel de commande.
- Le champ de saisi de la remise ou du bon d’achat devrait être directement sous le total du panier. Placé sur la droite il risque de passer inaperçu, de plus, celà laisserait de la place pour ajouter des éléments de réassurance et d’incitation (promesses, engagements…).
- Le lien « Supprimer » devrait être situé dans la colonne des quantités et non sous les produits.
- Les étapes du tunnel de commande devraient être représentées sous forme de procecus à étapes (avec des flèches) et non avec des gros carrés. De plus, le choix de la couleur rouge est très discutable (c’est une couleur très complexe à mettre en oeuvre, car chargée émotionnellement).
- La lisibilité du bouton d’action n’est pas optimale, l’intitulé non plus qui aurait plutôt dû être « Valider le panier« .
- Je déteste les sites qui utilisent la première personne (« Je complète…« ), est-ce le rôle de l’interface de s’exprimer à la place de l’utilisateur ?
Passons maintenant à la deuxième étape du processus avec la page d’identification / livraison / paiement :
Là encore il y a eu un très gros effort de simplification avec l’inscription rapide (via Facebook ou Paypal), la commande en invité, des contrôles de surface sur les champs du formulaire, l’auto-complétion de la ville après avoir saisi le code postal (une fonctionnalité qui aurait dû être implémentée au siècle dernier), le ticket de caisse sur la droite qui descend en même temps que la page…
En chipotant, il est possible de faire trois remarques sur cette page :
- Les en-têtes de bloc (« Mode de livraison« …) sont bizarrement intégrés, il devraient être bien plus visibles ;
- Les liens « Changer » dans le ticket de caisse à droite de l’écran devraient être dans la colonne de gauche plutôt que sous le prix ;
- Le bouton « Valider ma commande » est le même que dans la précédente étape et il n’est pas très explicite (« Valider et payer la commande« ).
Outre ces quelques remarques, ce tunnel de commande est une vrai réussite, et je salue le travail des équipes. Il va s’affiner avec le temps et rehausser le niveau d’exigence des internautes, ce qui n’est pas plus mal. Voyons maintenant comment les concurrents vont réagir à cette évolution (42 Stores, Prestashop, Magento…).