Prestashop affichage en mode liste

Le mode liste sur Prestashop plus performant que l’affichage bloc ? (ép. 106)

Un site e-commerce est principalement constitué de fiches produits et vos clients passent beaucoup de temps à naviguer sur votre Prestashop… Avez-vous déjà réfléchi si le mode d’affichage bloc était vraiment la meilleure solution?

On a tendance à laisser faire les créateurs de templates

Au niveau des interfaces de sites e-commerce, j’ai bien l’impression que ce sont les développeurs de templates qui définissent la tendance de navigation et d’ergonomie UX. Vous me direz, c’est normal… « à chacun son travail » (c’est vrai), mais le temps passant on ne se pose plus les questions fondamentales. On voit certains comportements intégrés massivement dans la plupart des thèmes Prestashop et on en convient que c’est la normalité et que c’est ce qui doit se faire de mieux.

Le mode d’affichage liste ou bloc dans les catégories

Vous avez déjà certainement vu ce petit carré en haut à droite dans vos catégories produits, qui permet de faire le switch entre le mode liste et bloc (si vous avez un thème payant). En standard c’est le mode « bloc » qui est utilisé… cela fonctionne bien, mais cela présente certains inconvénients.

Le nombre de produits par ligne n’est pas toujours identique selon le support, parfois on a des lignes avec un trou (produit manquant)… l’équilibre visuel n’est pas forcément toujours optimal selon les résolutions. Et cela veut dire qu’on ne peut pas savoir à l’avance « combien » de produits s’afficheront sur une ligne, car cela dépendra du support utilisé.

Uniformiser et standardiser l’affichage

L’affichage en mode liste présente un gros avantage en terme de design d’interface, on a la certitude qu’un seul élément par ligne sera affiché. Il est vrai que sur un format « ordinateur » l’affichage pourra sembler un peu plus aéré, mais vous aurez la garantie d’avoir un format d’affichage universel.

En mode bloc je suis souvent tombé sur des surprises d’affichage, des décalages de blocs (liés à quelques pixels de trop)… surtout sur des résolutions un peu plus exotiques. Le mode liste permet de limiter les combinaisons d’affichages possibles & donc de limiter les bugs + les multiples exceptions CSS à gérer.

Vision mobile first mono-colonne

On sait que le mobile est en train de dominer le trafic sur internet… Pourtant, bien souvent les e-commerçants testent leur site Prestashop sur leur ordinateur (car c’est leur outil de travail), alors que leurs clients sont la plupart du temps sur mobile. Sur un smartphone l’espace est limité et il faudrait idéalement que la version mobile du site soit le plus proche possible de la version tablette & ordinateur.

Ce que je veux dire par là c’est que le mobile devrait être le coeur de la réflexion et que c’est l’interface mobile qui devrait ensuite déterminer à quoi ressembleront les autres supports (et non l’inverse). Pourtant en réalité dans la réflexion, trop souvent on part du desktop -> vers le mobile (la réalité c’est qu’il faut simplifier et que le mobile doit être l’épicentre).

Apprendre à repenser

Assez souvent sur les thèmes Prestashop que j’achète, je choisis soit le mode liste ou soit le mode bloc et je masque l’option de switch pour limiter les combinaisons (je définis ce qui est mieux pour l’e-commerçant). Bien sûr cela vous semblera du détail, mais je pense qu’il est important de se donner la liberté de repenser si certains mécanismes proposés sont optimaux ou non.

C’est un peu comme les sliders Prestashop, tout le monde en met parce que c’est le standard, mais par exemple je reste persuadé qu’un banner aléatoire en homepage est plus efficace (impact & performances) que 3 images qui tournent. Souvent on met les choses par habitudes parce que c’est le standard, mais ça fait du bien aussi de repenser les bases.

Pour ce tutoriel Prestashop vous avez à disposition :

  • 1 x fichier custom.css (pour afficher en liste)
  • 1 x fichier cool-background.png (pour dynamiser l’arrière-plan)

Télécharger

Résumé de la vidéo : Mode liste ou bloc sur Prestashop, il faut choisir !

  • Tout d’abord on commence à regarder le comportement d’affichage dans les catégories et on change aussi de résolution pour voir le résultat.
  • Via le CSS on va forcer la largeur du contenu à 100% afin que chaque produit occupe toute la ligne, le but étant d’uniformiser l’affichage sur tous les supports.
  • Si l’espacement semble trop important, un arrière-plan peut aider à atténuer cette impression… n’oubliez pas (sur beaucoup de business) la plupart du trafic vient du mobile aujourd’hui.
  • C’est bien sûr un parti pris, le mode bloc est plus conventionnel… il n’y a pas de réponses « juste » c’est à vous d’expérimenter.
  • Si on raisonne mobile first, alors la règle serait de faire du mono-colonne autant que possible afin de standardiser.

4 commentaires sur “Le mode liste sur Prestashop plus performant que l’affichage bloc ? (ép. 106)”

  1. 😂 L’irrésistible besoin de cliquer pour connaître un secret…😂

    Sinon belle vidéo qui nous montre qu’il faut aller dans les moindres détails afin d’avoir une vision globale la plus juste possible.

    Bonne journée.

    1. Ahahah… c’est une technique qui marche assez bien, on veut tous en savoir plus 😉 en e-commerce chaque détail compte… mais c’est vrai que là on s’attaque à du sujet avancé (sur le plan réflexion).

  2. Salut Germain,

    C’est une « discussion » très intéressante…

    Le seul critère de vérité ne reste-il pas le taux de conversion ? 🙂

    Il est certes pour « nous » tentant d’uniformiser le nombre d’articles par ligne quelque soit le support, mais est-ce une bonne idée pour l’internaute ? Est-ce qu’il y a une seule bonne solution ?

    Je suis partisan, de « perturber » l’acheteur le moins possible.
    Quelles sont, donc, les habitudes de cet acheteur ?

    Intéressons nous au TOP 10 du eCommerce en France, Comment sont affichés les produits : Listing en Bloc ou en ligne ?

    Sur Desktop, les « gros » eCommerçants ont visiblement tendance à allègrement mixer les deux modes.. en fonction du contexte.

    * Amazon : Résultats de recherche « en ligne », listing produits « catégorie » en Bloc
    * LeBonCoin : Listing produits « en ligne »
    * Cdiscount : Listing produits « en ligne » ou « en Bloc ».. Ca dépend !
    * EBay : Listing produits « en ligne »
    * Leroy Merlin : Listing produits « en bloc »
    * FNAC : Listing produits « en ligne » (même si il faut descendre dans les catégories pour retrouver cette affichage en ligne)
    * ALIEXPRESS : Résultats de recherche en ligne / Listing en bloc
    * ManoMano : En bloc
    * Vinted : En bloc

    Dans la pratique il faudrait faire de l’AB Testing et comparer les KPI… Mais il convient aussi de s’appuyer sur l’expérience des « leaders » et sur les classements dans Google (qui dicte les bonnes pratiques).

    Par exemple dans le domaine de la mode et des vêtements « j’ai l’impression » (aucune vérification) que le mode bloc est plus courant. Pour de nombreux sites généralistes le mode listing me semble plus courant pour la « recherche ».

    Ne faut-il pas en fonction de son contexte, aussi vérifier les sites que Google classe parmi les top résultats.. et s’inspirer de leur mise en page ?

    En extrapolant : si ils sont classés « en haut » c’est que Google considère qu’ils ont la bonne UX et la bonne mise en page (il y a bien sur plus plein d’autres critères).. et que cela correspond à la mise en page que Google veut voir « en haut » des ses résultats ?

    Un sujet passionnant, je trouve.

    1. Hello Christophe,

      C’est une très bonne remarque, c’est vrai qu’idéalement il faudrait faire de l’A/B testing pour tenter de mesurer l’impact.

      Super d’avoir été consulter cette série de sites, ce qui est intéressant c’est qu’on voit qu’il y a quand même une certaine mixité.

      Franchement je pense qu’il y a vraiment de quoi débattre très loin, dans le cas présent j’avoue avoir « jeté ça » sur un coin de table en me disant qu’il y avait réflexion à faire.

      Après je pense que la plupart des sites e-commerce doivent concentrer déjà leur énergie ailleurs (souvent l’essentiel est négligé)… mais pour ceux qui ont déjà un solide trafic & un shop qui tourne bien ça vaut la peine de s’y intéresser.

      La thématique du site ? Très bonne remarque, possible que certains types d’affichage sont plus adaptés à certains business. Encore une fois, est-ce que le fait de faire « différent » des autres peut-être un atout en terme de perception (si le visuel sublime l’expérience) ou vaudrait-il mieux de rester conventionnel ?

      On me siffle à l’oreillette, mais… mais… Google affiche ses résultats en ligne n’est-ce pas là un signe 😉 ?

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *