Les bonnes pratiques de design e-commerce selon la page consultée : accueil, navigation, catégories, recherche, fiches produits et mobile, avec les éléments à inclure et les erreurs fréquentes.
Une navigation organisée selon la façon dont les clients pensent aux produits, des pages rapides, de grandes photos de produits avec zoom, le prix et les frais de livraison près du bouton Ajouter au panier, des avis visibles, une recherche fonctionnelle et un paiement court avec commande en invité. Concevez d’abord pour les téléphones, où se déroule la plupart de la navigation en boutique.
Assez pour comparer sans devoir parcourir un nombre infini de pages. Beaucoup de boutiques affichent 24 à 48 produits par page ou un bouton Charger davantage. Le plus important reste la qualité des filtres selon les critères de choix des clients, comme la taille, la couleur, le prix et la disponibilité.
Nom du produit, image principale, prix, principaux choix de variantes (taille, couleur), disponibilité, bouton Ajouter au panier et indication de livraison ou de délai. La note en étoiles et le nombre d’avis doivent aussi apparaître s’ils sont disponibles.
Généralement, non. Les diaporamas qui changent automatiquement sont souvent ignorés et peuvent nuire à l’accessibilité et à la vitesse de chargement. Une seule bannière principale, avec un message clair et des liens vers les meilleures catégories, fonctionne généralement mieux.
Un bon design e-commerce permet aux acheteurs de faire rapidement 3 choses : trouver le bon produit, avoir suffisamment confiance pour l’acheter et payer sans obstacle. En pratique, cela suppose une navigation adaptée aux attentes des clients, des pages rapides sur téléphone, de grandes photos de produits, l’affichage anticipé des prix et frais de livraison, des avis visibles et un paiement court.
Au lieu d’énumérer des principes généraux, ce guide avance page par page, car les questions de l’acheteur changent à chaque étape.
La page d’accueil a quelques secondes pour confirmer ce que vous vendez et à qui cela s’adresse.
À inclure :
À éviter : les carrousels automatiques, les fenêtres surgissantes avant le chargement de la page et les vidéos principales qui retardent le premier affichage sur mobile.
C’est à cette étape que se font la plupart des comparaisons.
| Élément | Bonne pratique |
|---|---|
| Vignettes produits | Même ratio d’image pour chaque produit, nom, prix, note et deuxième photo au survol |
| Filtres | Critères de choix réels : taille, couleur, prix, matériau, stock. Affichez le nombre de résultats. |
| Tri | Par défaut « À la une » ou « Meilleures ventes », avec options prix et nouveautés |
| Stock | Masquez les articles épuisés ou indiquez-le clairement |
| Pagination | Bouton Charger davantage ou pages numérotées ; conservez les filtres lorsque le client revient |
| Mobile | Filtres dans un volet coulissant avec bouton clair « Afficher 34 résultats » |
Une erreur fréquente : les filtres disparaissent lorsque le client ouvre un produit puis revient. Testez le bouton Retour.
Les clients qui font une recherche ont généralement une forte intention d’achat ; une mauvaise barre de recherche coûte donc directement des ventes.
La fiche produit assure la vente. Construisez-la de haut en bas.
Commencez par l’utilité du produit pour le client, puis ajoutez ses caractéristiques. Présentez dimensions, matériaux et entretien dans un tableau court. Le guide des tailles doit s’ouvrir dans un panneau sur la même page au lieu d’envoyer le client ailleurs.
Ajoutez des données structurées Product (nom, image, prix, disponibilité, avis) afin que les résultats de recherche puissent afficher prix et notes.
Le design du paiement est un domaine à part entière. En résumé : affichez le coût complet tôt, autorisez les commandes en invité, gardez un formulaire court et proposez les portefeuilles rapides comme Apple Pay et Google Pay. Notre guide sur l’optimisation du paiement explique chaque étape en détail.
Le design ne s’arrête pas au bouton Payer. Presque tous les clients lisent attentivement la page et l’e-mail de confirmation.
La plupart des visites viennent des téléphones : concevez et testez d’abord la version mobile, puis élargissez pour ordinateur.
Ce sont aussi des décisions de conception, pas seulement des questions techniques.
Vitesse : compressez les images et servez-les au format WebP ou AVIF, indiquez leur largeur et leur hauteur pour éviter les sauts de mise en page, limitez les applications et scripts tiers, et vérifiez les Core Web Vitals avec PageSpeed Insights de Google.
Accessibilité : contraste conforme à WCAG 2.2 AA, texte alternatif sur les photos produits, champs de formulaire étiquetés, menus et filtres accessibles au clavier et messages d’erreur expliquant le problème. Une boutique accessible est plus simple d’utilisation pour tout le monde ; dans de nombreuses régions, l’accessibilité est aussi une obligation légale.
Si vous commencez de zéro, une bonne mise en page de départ évite beaucoup de décisions. Parcourez nos modèles de boutique ou décrivez votre commerce à We.Inc dans un chat : l’outil crée une boutique en ligne avec fiches produits, panier et paiement, que vous pourrez ensuite modifier visuellement ou dans le code, avec hébergement et SSL inclus.
Commencer gratuitement · Sans carte bancaire