Tout e-commerçant place au cœur de ses préoccupations, la conversion.
Attirer, séduire, convaincre, jusqu’à la fiche produit, c’est bien.
Amener l’internaute à ajouter un produit dans son panier, c’est encore mieux.
Il conviendra donc, pour le bouton d’ajout au panier, de choisir judicieusement, le bon emplacement et la bonne couleur.
Cela étant fait, se pose la question de la matérialisation de l’ajout au panier.
Différentes pratiques existent :
- Une lightbox de confirmation d’ajout au panier avec un push de services additionnels
Pixmania.com a opté pour une light box qui confirme que le produit a été ajouté au panier.
Le fond du site est grisé et l’information principale est mise en surbrillance.
Le client se voit proposer à cette étape des services tels que des extensions de garantie et des assurances contre le vol.
Deux boutons d’action sont proposés : « Continuer mes achats » qui est présenté comme le bouton secondaire (bouton grisé) et « Valider mon panier », comme le bouton principal (couleurs flashy : vert et violet).
- Une pop-in de confirmation d’ajout au panier avec une partie cross-selling
Laredoute.fr utilise une pop-in pour rappeler le produit ajouté au panier et en profite pour faire du cross-selling.
Le site en arrière-plan n’est pas grisé mais la pop-in reste cependant bien visible.
La photo du produit ainsi que le prix sont mis en avant dans la pop-in.
Le cross selling prend quant à lui la forme du conseil (« La redoute vous conseille ») et de la recommandation (« Les clients ont acheté avec ce produit »)
Tout comme chez Pixmania.com, la hiérarchie des deux boutons d’action est respectée.
- Un panier extensible et un bouton d’action interactif
Brandbazar.com propose un bouton d’action qui se modifie pendant quelques secondes pour indiquer que le produit a bien été ajouté au panier.
Le wording du bouton passe de « Ajouter au panier » à « √ Article ajouté »
Mais ça ne s’arrête pas là, la zone panier située dans le header s’étend pour indiquer la présence du produit dans le panier et met en avant un bouton « commander ».
- Une page intermédiaire entre la fiche produit et le panier
Fnac.com a choisi de mettre en place une page intermédiaire avant d’arriver à la page panier.
Cette page propose à la fois des services additionnels tels que des garanties mais aussi du cross-selling en mettant en avant des accessoires associés au produit ajouté au panier.
On retrouve également un mini panier qui récapitule les articles ajoutés et met en avant un bouton « Passez la commande ».
Ces différentes méthodes sont toutes de bonnes pratiques.
Ajouter une page intermédiaire n’est pas problématique à partir du moment où votre processus de commande derrière est très simple et ergonomique. C’est la raison pour laquelle Amazon et Fnac.com peuvent se le permettre.
Faire du cross-selling de produits et services en lightbox est légitime si votre fiche produit est déjà relativement chargée ou que vous ne souhaitez pas polluer votre parcours de commande avec ces éléments.
Le panier extensible façon Brandbazar, Asos ou Gap semble être la méthode la moins intrusive, du fait de l’absence d’étape intermédiaire. Cependant, celle-ci ne permet pas le crosselling.
Vous l’aurez donc compris, à chaque site, sa façon de faire !
Petite découverte intéressante sur Yves-Rocher.fr :
Dans les codes du E-commerce, le panier est le plus souvent placé en haut à droite et représenté par un sac, un panier ou un caddie (cart) mais ici ce sont les infos accolées au pictogramme qui nous intéressent ; chez Yves Rocher elles sont particulièrement nombreuses :
Le panier Yves Rocher
-Le nombre d’articles
-Le prix total entre parenthèse
-Le cadeau offert si vous achetez
-Le montant des frais de port
-Les frais de ports gratuits si vous dépassez 25€ d’achat
Ce panier illustre bien l’envie d’informer le client au maximum sur sa future commande depuis n’importe quelle page d’accueil. En effet, le nombre d’articles ainsi que le prix sont des caractéristiques habituelles du panier mais la promesse du cadeau à cet endroit est plutôt quelque chose de nouveau.
Par ailleurs, le fait de dire au client qu’il ne paiera pas de frais de port s’il dépasse un certain montant dès le panier de la Home page est un plus dans l’optimisation du parcours.
Alors qu’une majorité de paniers se ressemble (Priceminister, 2xmoinscher, Amazon, La Redoute, Quelle, 3 suisses) et comporte soit un ou deux éléments – le mot « Panier » et le montant total- certains tentent d’innover et heureusement !
Prenons l’exemple du site de vente de chaussettes archiduchesse.com (ci-dessous) qui indique en live combien de paires de chaussettes il vous reste à ajouter au panier avant d’avoir les frais de port offerts : plutôt incitateur !
Plus que 6 paires !
Plus que 4 !
Certains choisiront de placer l’accès au compte et le numéro de contact à côté du panier afin de rassurer le client comme winaretta.com (ci-dessous).
Le panier Winaretta
Autre exemple, bijouxenligne.net (ci-dessous), place carrément un bouton pour simuler un paiement en plusieurs fois afin d’illustrer les facilités de paiement aux clients: Vive le crédit revolving ! Ce genre de pratiques poussera sans doute le client à traverser le tunnel d’achat en s’étant déjà posé la question du financement… ou le fera hésiter à mettre la main au panier.
Le panier bijouxenligne
Ces pratiques apportent aux visiteurs de l’information parfois primordiale pour augmenter votre taux de transformation alors sachez les utiliser à bon escient en fonction de la nature de votre E-boutique.
Après notre petite analyse de la fiche produit chez Yves Rocher, voici un zoom sur le cross-sell tout au long du parcours d’achat.
| L | Ma | Me | J | V | S | D |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | ||||
| L | Ma | Me | J | V | S | D |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 | |
| « jan | avr » |
accompagnement Actualité Aide à l'achat Amazon Ateliers buzz cashstore Catherine Barba cdiscount chiffres Coliposte cross selling design E-commerce ecologie ecommerce emailing ergonomie Facebook fevad Fiche produit Fnac formulaires Google innovation interview iPhone livraison malinea conseil microsoft Noël optimisation panier Parcours de commande personnalisation pixmania process de commande réalité augmentée relation client site Taux de rebond taux de transformation Transformation twitter web 2.0
WP Cumulus Flash tag cloud by Roy Tanck and Luke Morton requires Flash Player 9 or better.