2 minutes
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 :
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 :
Affichage hybride
Source