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.