MDWeb

Simplifier le tunnel de commande sous PrestaShop3 min read

checkout

Le tunnel de commande est l’élément crucial de tout site de vente en ligne. Décomposé en plusieurs étapes (récapitulatif produits, identification, modes de livraison et moyens de paiement), il doit permettre aux visiteurs et futurs clients d’accéder à leurs paniers et de les concrétiser en futures commandes.

Plusieurs philosophies s’opposent, notamment celle d’un tunnel où chaque étape correspond à une page distincte, opposée à celle où chaque étape correspond à un bloc présent sur une seule et même page.

 

Un tunnel de commande classique…

Quand 4 Pieds, un de nos clients, nous fait part de son souhait de revoir totalement le fonctionnement de son tunnel de commande, nous y avons évidemment vu un beau challenge. Mais pourquoi se lancer dans la refonte de cette étape si importante avec les risques que cela peut impliquer (comme celui de déboussoler les clients habitués au tunnel déjà en place par exemple) ? Les buts de cette refonte étaient multiples. Simplifier au maximum le processus de commande actuel (et par extension accroître le taux de conversion), ou bien encore se conformer à la loi Hamon faisaient partis des points les plus importants.

tunnel1

Étapes de l’ancienne version du tunnel de commande.

A l’origine, l’internaute devait passer par 5 étapes pour voir sa commande validée. Qui plus est, il ne disposait d’une visibilité totale sur le montant de son panier qu’à partir de l’étape 3, celle du choix du mode de livraison qui nécessitait d’être connecté à son compte. Or, l‘internaute aime avoir une idée du montant final le plus tôt possible. L’obliger à se connecter pour qu’il puisse avoir une estimation de ce montant entraînait beaucoup de « sorties prématurées » du tunnel,  impactant de surcroît le taux de conversion.

 

… revu et simplifié.

tunnel2

Étapes de la nouvelle version du tunnel de commande.

L’idée ici n’était pas de passer d’un tunnel à plusieurs pages à celui d’une page unique, mais bien de le simplifier. Aussi, les maquettes prévoyaient la suppression de l’étape de livraison, ou tout du moins son déplacement. Cette étape se ferait dorénavant en début de tunnel, lors du récapitulatif commande. Ce choix astucieux permettrait d’accéder au prix final sans obliger l’internaute à s’identifier et répondrait à une des problématiques initiales. Qui plus est, si l’internaute avait déjà passé commande auparavant, il pourrait passer du récapitulatif commande au choix du moyen du paiement directement ; de quoi gagner encore quelques secondes.

Pour en revenir à la loi Hamon, celle-ci précise que désormais doivent être présents dès l’étape de récapitulatif commande les moyens de paiement proposés ainsi que les modes de livraison disponibles. Ce déplacement d’étape permet donc de s’y conformer.

 

Le résultat

La version précédente utilisait autant que possible un rafraîchissement asynchrone (via AJAX) de plusieurs éléments (prix des produits, total de la commande, etc.) et nous avons donc continué en ce sens en y incluant les données relatives au mode de transport. Après quelques coups de pinceaux supplémentaires, la première étape du tunnel était bouclée. En voici un extrait :

img1

Nous ne mentionnerons pas ici certaines spécificités de 4 Pieds concernant le choix des transporteurs, mais déplacer cette étape en début de tunnel fût un beau défi. PrestaShop ne permettant pas d’être aussi souple dans la gestion du tunnel, il eut fallu user de nombreux overrides et autres petites pirouettes techniques.

Ce nouveau tunnel a été mis en production il y a quelques semaines maintenant.  Aussi, n’hésitez pas à vous rendre sur le site de 4 Pieds pour y jeter un coup d’oeil !

Catégories: Blog.