Ok

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies. Ces derniers assurent le bon fonctionnement de nos services. En savoir plus.

4 systèmes de paniers qui font "plus" que les panier traditionnels

Image 4.png

L'emplacement du panier sur un site e-commerce semble être une question existencielle pour certains, alors que pour d'autres, la question ne se pose pas. C'est en haut à droite. Point barre.

L'objectif primordial assigné à l'emplacement, mais aussi au design, du panier est que le client puisse identifier immédiatement dans la page l'endroit où il a stocké ses achats, et y retourner facilement pour conclure sa commande.

Au final, on se retrouve souvent avec ça : les sempiternels pictogrammes de sac à shopping ou de caddie.

Image 5.png

Pourtant, on peut faire bien mieux, et certains sites ne manquent pas d'imagination, quite à changer un peu les règles du jeu :

  • Le panier déroulant
  • Le panier glissant
  • Le panier en bas de page
  • Le panier en drag and drop

Voici quelques exemples en image.

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.

American-retro-panier-ferme.png

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.

American-retro-panier-ouvert.png

 

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.

Free-People-Clothing panier1.png

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 ?

plusdebulle-panier1.png

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.

plusdebulle-panier2.png

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.

plusdebulle-panier3.png

 

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.

monguidesante-panier1.png

Un coup de scroll et le panier descend.

monguidesante-panier2.png`

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.

monguidesante-panier-ouvert.png

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.

 

Image 2.png

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

Image 1.png

 

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.

Image 6.png

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.

Image 3.png

 

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.

Image 1.png

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é.

Image 2.png

 

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

Commentaires

  • Salut Ludovic,
    et merci de cet article complet.
    Hormi pour la boutique freepeople.com, quel est le point commun entre toutes ses boutiques ?

    Réponse : il est impossible d'ajouter un article au panier ou même de visualiser ce dernier si javascript est désactivé...
    En effet, seul Freepeople a pensé à une alternative au javascript.

    Je suis rabat-joie, je sais et c'est un argument récurrent que l'on entend pour les intégristes de l'accessibilité comme je peux l'être parfois.

    Beaucoup de ces boutiques jouissent d'une bonne notoriété, et n'ont presque plus rien à prouver : on pourrait comprendre qu'elles peuvent se permettre d'"écarter" un certain panel de clients potentiels : plus de 2 millions de personnes atteintes d'un handicap uniquement en France quand même.
    Source : http://www.andibox.com/blog/laccessibilite-des-sites-web-2330.html.

    Alors oui, il est bon de briser un peu les standards, mais je ne recommanderais sûrement pas ce genre de fantaisies à une jeune boutique, ce serait à mon sens un frein à son développement.

    J'crie pas, j'explique =)

    A te lire.

  • Merci pour ces exemples innovants et même ludiques pour certains.

    Vous le soulignez déjà, un des éléments clefs du panier est sa visibilité. J'ajouterais deux autres caractéristiques qui me semblent importantes : l'utilisateur doit pouvoir visualiser facilement le contenu du panier, si possible sans perdre le fil de sa navigation. De plus la fonction "checkout" ou "passer la commande" doit être mise en évidence.
    Pour en savoir plus sur l'ergonomie du panier vous pouvez consultez l'article d'Usaddict sur l'ajout au panier : http://www.ergonomie-interface.com/ergonomie-interfaces-web/ajouter-au-panier-bonnes-pratiques-et-idees-originales/

  • Bonjour est il possible d'avoir une animation visuelle de l'article vers le panier sur prestashop 1.6 ? Parce que par défaut j'ai un vilain pop up d'ajout d'articles au panier que j'aimerai remplacer. Quelles modifications dois-je faire sur ajax-cart.js et quels autres fichiers sont à modifier svp ?

Les commentaires sont fermés.