Consultant E-commerce & Webmarketing

1. Le panier déroulant

Americanretro.fr

Le panier fermé, bien que se résumant à un simple onglet, est parfaitement visible grâce à un traitement graphique différent, et une grosse taille de police.

Le panier s'ouvre au dessus du site avec un bel effet de slide, et occupe toute la largeur de l'écran permettant une présentation sobre et aérée. Le bouton "Commander" est idéalement placé juste au dessus de l'onglet Fermer.

Freepeople.com

Sur ce site américain très bien conçu à tous les niveaux, l'achat d'un article déclenche un déroulement automatique du panier reprennant le visuel produit et les information associées, puis il se retracte au bout de 2 secondes.

Une bonne technique pour attirer l'oeil sur cette zone de l'écran.

2. Le panier glissant

Le principe du pannier glissant consiste, comme son nom l'indique, à faire glisser le panier en même temps que le visiteur scrolle dans la page, de manière à le rendre toujours visible.

Ce système est particulièrement intéressant pour les sites qui ont des très longues pages.

Petit inconvénient, la zone du panier qui se déplace peut parfois recouvrir des contenus utiles, mais en scrollant un peu, on déplace le panier pour lire ce qu'il y a dessous.

Plus-de-bulles.com

En arrivant sur le site, il n'y a pas de panier visible. Mais ou est-il ?

Le panier fait son apparition sur la gauche (endroit inhabituel pour un panier), avec un beau design dans le même style que le reste du site.

Dès que je descend dans la page le panier descend aussi, restant (visuellement parlant) au même endroit dans la page. Le fond reste visible grâce à un léger effet de transparence.
Enfin, pour le côté ludique, la caisse se remplit avec une nouvelle bouteille de champagne à chaque fois que je sélectionne un produit. Ca donne envie de jouer avec, et de remplir la caisse :-)

A noter que Plusdebulles fait partie de la sélection du jury pour les Favor'i 2010 de la FEVAD dans la catégorie "Espoir e-commerce". A suivre donc.

Monguidesante.com

Le site a été réalisé par la même agence (Toucouleur) que Plusdebulles, il n'est donc pas très étonnant de retrouver le même système de panier, mais à son emplacement académique cette fois, en haut à droite.

Un coup de scroll et le panier descend.

`

Comme chez Freepeople.com, Archiduchesse et de nombeux autres sites, la mise au panier s'accompagne d'une petite animation qui envoie virtuellement le produit dans le panier, et ce dernier se déroule automatiquement quelques secondes pourt afficher son contenu.

Le panier peut aussi jouer le rôle d'un catalyseur d'achats en lui adjoignant des fonctions de merchandising. Par exemple, en calculant en temps réel le montant d'achat restant pour avoir un cadeau ou la livraison gratuite. Dans l'exemple ci-dessus, une phrase indique "Encore 7,60 € pour la livraison gratuite Kiala".

Allez, faut le remplir plus !

3. Le panier en bas

Il y a quelques rebelles du e-commerce qui ont eu envie d'essayer autre chose. Fuck les grand principes d'ergonomie, mettons le panier en bas ! Après tout pourquoi pas, si c'est bien fait ?

Mademoiselledimanche.com

C'est ce qu'a décidé de faire cette créatrice de textiles originaux sur son site. Le résultat est assez réussi car le site est intégralement fait en Flash, et c'est toute la logique de fiche produit qui est pensée pour coller au principe du panier en bas.

Lorsque l'on ajoute un produit au panier, le site remonte pour laisser apparaitre le détail.

Electronicarts.fr

Même principe. Le panier est intégré dans une bande qui fait office de footer et qui est "bloquée" lors du scrolling de la page. Le panier est très discret, je ne suis assez dubitatif sur son efficacité par rapport à l'emplacement traditionnel du panier.

A noter que la célébre chaine américaine de fournitures de cuisine Crateandbarrel.com a tenté l'expérience du panier en bas sur son site e-commerce, mais l'expérience n'a pas duré. Au bout d'un 1 an, le site a été refondu cet été, et le panier est revenu à un système beaucoup plus classique dans le style "Panier déroulant".

Connaissant le pragmatisme des américains en matière d'efficacité dans le e-commerce, il y a fort à parier que les résultats n'étaient pas au rendez-vous.

4. Le panier drag and drop 

Panic.com

Chez Panic, on combine 2 originalités sur le panier : le bas de page + le drag and drop. Le panier occupe tout le footer pour faciliter son usage. C'est une condition sinequanone si vous voulez mettre en place ce système car le panier nécessite une large zone de dropping pour faciliter son usage.

Au final, c'est très ludique. L''adéquation "produit simple + cible jeune" se prête assez bien à la mise en place d'un tel principe, et la réalisation est très bonne.

Icondock.com

Un système de drag and drop simple pour acheter des icones. Là encore, ce type de panierest bien adapté au produit car il permet de visualiser en permanence les icones que j'ai sélectionné.

Pour creuser le sujet de l'emplacement / design du panier sur un site e-commerce, je vous conseille ces quelques lectures :

• Le panier en haut à droite ?  chez François Ziserman
• Galerie d'exemples de paniers et de bons usages chez Smashing Magazine (en anglais)
• 10 astuces pour concevoir un panier efficace chez Webdesignerdepot (en anglais)