Grille ou liste: quel affichage adopter pour son site de e-commerce ?

👴 Attention Cet article a quelques années et n’est peut-être plus à jour !

Vous souhaitez vendre des produits en ligne et hésitez sur la manière de présenter vos produits. Trois solutions sont envisageables: grille, liste ou hybride.

Grilles

Quand les utiliser?

Quand l’image du produit est suffisante pour le distinguer d’un autre produit (ex: vêtements).  Certains sites (comme Etam) proposent une vision 360° du produit dès la page catalogue, ce qui permet à l’utilisateur d’avoir un « feeling » du produit avant même d’atteindre la fiche produit détaillée.

Avantages / Inconvénients

• Permet d’afficher plus de produits sur une page
• Confortable pour l’utilisateur qui n’a pas à lire de texte
• Nécessité d’avoir des images de bonne qualité, fidèle au produit réel

Exemple :

Site Internet de Etam

Listes

Quand les utiliser?

Quand le produit a des informations complexes associées, ou qu’il est difficile de distinguer deux produits différents par une image (exemple: meubles de tailles différentes). Il est nécessaire dans ce cas là de faire apparaître l’information à l’utilisateur sous forme textuelle.

Avantages / Inconvénients

• Information mise à disposition de l’utilisateur, ce qui le met en confiance et favorise la conversion
• Texte à lire parfois rebutant pour les utilisateurs: nécessité d’aller à l’essentiel (présentation sous forme de liste…)

Exemple :

Priceminister (qui propose à ses utilisateurs de switcher en mode grille) ou encore ThemeForest (pour afficher plus de détails sur la structure et compatibilité du template)

Affichage sous forme liste

Hybride

On adopte un affichage type grille et au survol d’un produit, on affiche plus de détails sur le produit.

Avantages/Inconvénients

• On conserve les avantages des deux catégories: pouvoir montrer plus de produits tout en affichant un détail sur le produit (s’il est complexe).
• Être vigilant sur le temps de chargement de la page (Javascript à ajouter pour la gestion du texte à afficher au survol des images)

Exemple :

Ikea

Affichage hybride

Source

Increasing eCommerce conversion rates category page