Simplifier le panier Prestashop pour le rendre plus performant (ép. 114)

Est-ce que vous aimez les vampires ? Sucer le sang ne vous fait pas peur ? Alors c’est parfait, parce qu’on va faire exactement comme Vampirella. On va planter les crocs et laisser uniquement la carcasse de Prestashop, ça effraie au début… mais c’est tellement mieux.

On se dit souvent : « Si c’est fait comme ça alors c’est bien ! »

Peut-être que vous êtes aussi comme moi, en fait pendant très longtemps (surtout au début), j’ai déployé des boutiques Prestashop sans vraiment trop me poser de question, en partant toujours du principe que ce qui était proposé en standard par Prestashop (ou autre solution e-commerce) était optimal.

En fait grave erreur, j’ai mis du temps à comprendre la différence entre « fonctionnel » et « optimisé ». Quand on déploie un Prestashop, qu’on installe un thème Prestashop ou un module… on a souvent quelque chose d’utilisable, mais rarement boosté à 100%.

C’est plutôt une bonne nouvelle en soi, parce que cela laisse aussi une grande marge de progression pour beaucoup d’e-commerçants (imaginez si on était tous à 99% avec des boutiques quasi parfaites, le challenge d’optimisation serait impossible).

Trop de boutiques Prestashop oublient de rester simples

Comme je le dis souvent à mes clients, ce n’est pas le nombre de fonctionnalités qui sont présentent sur votre site e-commerce qui vont vous aider à déclencher des ventes. Il faut dans un 1er temps rester sur une approche basique qui concentre votre énergie sur l’essentiel.

Le plus important est d’avoir des mécanismes simples, minimalistes et optimisés. Le e-commerce a fait des avancées fulgurantes ces dernières années, mais trop d’e-commerce mettent en place des modules superflus. Par exemple, je vois régulièrement des sites e-commerce avec des Wishlist et des boutons partout… Pensez-vous que cela est vraiment indispensable ?

A quoi bon installer une navigation à facette, alors que votre structure de catégories n’est pas optimale et peu enrichie ? Très souvent les basiques sont négligés.

Cette obsession de « toujours + » de fonctionnalités, est souvent liée au fait que l’e-commerçant aimerait vendre plus. Pour cela il est préférable de regarder du côté du SEO Prestashop. Le cerveau de vos clients a une attention limitée (quelques secondes) il faut rester « simple ».

Le comportement d’ajout au panier

L’autre jour quand j’ajoutais un produit au panier en mode mobile sur le site d’un e-commerçant, j’ai vu un pavé « énorme » qui s’affichait à l’écran avec toutes les informations liées au produit, le montant… la photo, le stock, le total et j’en passe…

A ce moment-là, je me suis dit : « C’est fou… j’ai presque l’impression d’être devant un exercice comptabilité (ok j’exagère un peu ». Ce que je veux dire par là c’est pourquoi on ne dit pas simplement « OK produit ajouté » sans aucune autre information de détail.

Si on montre trop d’informations à l’utilisateur, il va se poser des questions. C’est ça aussi le danger, il faut que le client arrive le plus rapidement possible à l’étape du paiement il faut juste lui montrer les informations qu’il a besoin de savoir et accepter de retirer le superflu.

Vous connaissez cette phrase culte de Spiderman ?

Cela fait 1000 ans que je n’ai plus regardé un film (ahaha), mais je me souviens de cette citation « Un grand pouvoir implique de grandes responsabilités ». Et bien dans Prestashop c’est exactement pareil, « Beaucoup de fonctionnalités impliquent de grandes responsabilités ».

Quand vous avez de nombreuses fonctionnalités activées sur Prestashop, certaines fonctionnent parfois à moitié ou mal et pour la partie UX design c’est pareil… (des boutons mal formés, coupés sur certain supports…. des polices non uniformes, des blocs qui débordent, des actions non-testées, etc…).

En théorie tout devrait bien fonctionner, mais souvent la réalité est tout autre. C’est pour cela que plus vous réduisez le nombre de modules « front-office », moins vous aurez besoin d’optimiser votre Prestashop (que ce soit en termes de performances ou ergonomie), plus il sera aussi facile d’accès. Limiter les fonctionnalités c’est faire un très grand pas en avant.

Pas besoin d’être un génie du code ! Mais avoir du bon sens

Vous le savez, je ne suis pas forcément un fan de devoir « coder » beaucoup pour obtenir un résultat conséquent. Quand on parle d’optimisation UX souvent on imagine de réfléchir avec des experts sur l’amélioration de l’interface.

Mais vous allez le voir dans la vidéo ci-dessous, j’essaie de me poser des questions avec vous et finalement si on regarde sur la partie technique je touche 1 seul fichier j’enlève ce qu’il n’y a pas besoin. La méthode est applicable très facilement sur n’importe quelle page du shop.

Sur le processus ajout au panier, on va rendre l’expérience beaucoup plus percutante juste en masquant des zones inutiles. Quand on compare le « avant-après », sincèrement c’est le jour et la nuit. Vous pouvez ensuite appliquer la même logique sur d’autres emplacements de votre boutique Prestashop.

Pour ce tutoriel Prestashop vous avez à disposition :

• 1 x custom.css (pour améliorer l’action d’ajout au panier)

Télécharger

Résumé de la vidéo : Révisez l’action panier Prestashop en 10 lignes de code

• Tout d’abord on teste le rendu sur ordinateur, tablette et mobile.
• Actuellement 1 utilisateur sur 2 verra le rendu sur mobile. Trouvez-vous que l’expérience est pertinente ?
• Simplement en ajoutant 10 lignes dans le fichier CSS on améliore le rendu de cette action, qui sera exécutée des milliers de fois sur votre boutique (les actions fréquentes nécessitent une attention particulière).
• L’icône qui va définir l’action doit être aussi percutante.
• En bonus, on va voir une nouvelle fonctionnalité de Prestashop 1.7.7.0