Ces 15 exemples très réussis ont pour objectif d’illustrer les principales bonnes pratiques en matière de mise en page et de conception des fiches produits. Ces bonnes pratiques ne sont pas toujours bien appliquées, ce qui peut être préjudiciable pour votre site e-commerce. La qualité des fiches produits a un impact réel sur le taux de conversion. Dans ces exemples, nous avons notamment cherché à illustrer l’importance :
- Des avis-clients. Vos clients doivent avoir la possibilité de laisser un avis sur vos produits. Ces avis doivent être bien visibles sur vos fiches produits.
- Des images produits. Elles doivent être de bonne qualité et montrer toutes les facettes de vos produits.
- Des call to actions (et notamment du bouton « ajout panier »). Ils doivent attirer l’attention de vos visiteurs et les inciter à passer à l’étape suivante du parcours client.
- Des informations relatives aux conditions de livraison et de retours.
- Des informations relatives au produit et à ses caractéristiques.
Exemple fiche produit #1 – FiftyThree
Fiftythree produit et commercialise des produits très originaux destinés au mobile. Notamment un stylet en bois pour iPad et iPhone. Ce qui frappe dans cet exemple de fiche produit, c’est qu’elle est à la fois très légère tout en réussissant à véhiculer toutes les informations importantes. Le produit est décrit et caractérisé au moyen de tous petits paragraphes très aérés, eux-mêmes surmontés de logos parlant. On recommande souvent, pour les fiches produits, les descriptions longues. Si c’est une très bonne recommandation pour le SEO, les descriptions longues, surtout lorsqu’elles ne sont pas « aérées », peuvent décourager les internautes. Ici, tout est dit en très peu de mots, avec une insistance sur les informations « fonctionnelles ».
On remarquera aussi sur cet exemple :
- La qualité des images du produit.
- La présence d’un sous-titre (« Digital stylus for iPad, iPad Pro, and iPhone« ) qui permet au premier regard de comprendre la fonction du produit. Sans ce sous-titre, on aurait tendance à penser qu’il ne s’agit que d’un simple crayon (« pencil »).
- La mention de la livraison gratuite. Le concepteur de la fiche produit aurait toutefois pu choisir une police un peu plus grosse, pour mieux mettre en valeur cet argument de poids. Ici, le « Free Shipping to US & Canada » ne saute pas vraiment aux yeux.
- Le bouton d’ajout panier, qui est quant à lui très visible. Sa forme comme sa couleur tranchent avec les autres éléments de la fiche produit, sans pour autant faire tache. C’est exactement ce qu’il faut rechercher.
Le petit conseil de La Fabrique du net
Utilisez des images HD pour présenter vos produits. Pour présenter le produit sous tous les angles, intégrez plusieurs images sous forme de galerie.
Exemple fiche produit #2 – Vintage Teaworks
Vintage Teaworks commercialise des mélanges de thé artisanaux et haut-de-gamme. Le nom du produit et le prix sont bien mis en évidence, ce qui est une très bonne chose. L’image utilisée pour présenter le produit est en HD. Il n’y en a qu’une. Mais dans ce cas, en proposer plusieurs aurait été parfaitement inutile. La description est complète et bien structurée. A ce sujet, on remarquera la présence de la petite miniature, du titre (Fun & Fruity) et les espaces entre les paragraphes. Evitez autant que possible les longs paragraphes dans les descriptions produits. Sinon, on obtient des textes assez indigestes. Le bouton d’ajout panier ne saute pas aux yeux, à cause de sa couleur un peu pâle. Les concepteurs auraient peut-être pu choisir une couleur plus prononcée, un orange un peu plus vif. C’est un détail. Le petit plus : la mise en avant, dans le bloc gris, des indications concernant la manière de préparer le thé. Ces petits détails sont très appréciés par les internautes. Le fait d’avoir placer ce bloc gris juste sous le bouton d’ajout panier est bien pensé et permet d’attirer indirectement le regard des visiteurs sur lui.
Le petit conseil de La Fabrique du net
La qualité des fiches produits joue un rôle important dans la conversion globale de votre site ecommerce. D’où l’importance de bien les travailler. Sur ce sujet, découvrez comment doubler le taux de conversion de fiches produits.
Exemple fiche produit #3 – Darty
Le site e-commerce de Darty est probablement l’un des meilleurs actuellement en France. Nous n’avons pas pu reproduire ici l’intégralité de la fiche produit. Nous vous invitions à jeter un oeil sur la page, en cliquant sur le lien ci-dessus pour avoir une vue globale. Voici quelques remarques concernant les fiches produits Darty :
- La mise en avant des avis-clients. La note globale apparaît sous forme numérique et sous forme d’étoiles tout en haut de la fiche produit. Le détail des avis est affiché plus bas dans la page. C’est une très bonne pratique, utilisée par beaucoup de sites e-commerce.
- La très bonne visibilité du bouton « Ajouter au panier », en rouge vif.
- La mise en avant de la livraison offerte (et du retrait gratuit en magasin). Quand vous proposez un service pareil, vous vous devez de bien le faire apparaître ! A noter aussi l’utilisation de logos qui attirent le regard des internautes et permettent une compréhension plus rapide.
- La mise en avant des « points forts » du produit, sous forme de liste. C’est une excellente idée.
- Plus bas dans la page, Darty propose aux visiteurs des produits similaires. Cette technique de cross-selling est également excellente. Elle permet d’augmenter la valeur des paniers.
Découvrez notre guide complet sur la conception et la rédaction des fiches produits.
Exemple fiche produit #4 – Not on The High Street
Not on the High Street, créé en 2006 commercialise des produits créatifs dans plusieurs domaines : la bijouterie, la maison, la décoration, etc. Il s’agit d’idées cadeaux qui sortent de l’ordinaire. Les fiches produits de ce site ecommerce sont de très bonne qualité, avec une mise en page assez originale. On remarquera notamment : la quantité et la qualité des photos, l’option de zoom sur les photos ou encore la mise en avant des informations de livraison et de retour. Les produits commercialisés par NOHS sont personnalisables, d’où la présence du formulaire dans la partie droite.
Exemple fiche produit #5 – Johnny Cupcakes
Johnny Cupcakes, créé en 2001, commercialise des vêtements composés de motifs sur l’univers de la pâtisserie et des cupcakes. Notamment des t-shirts, des shorts, des bijoux, etc. Leurs fiches produits sortent clairement de l’ordinaire, que ce soit au niveau de la mise en page, du choix de la police, des couleurs, de la forme des éléments (des boutons notamment). Une originalité qui ne va pas à l’encontre de la fonctionnalité. Le choix des options (couleur, genre, taille, quantité) se fait sans difficulté. Le bouton d’ajout panier, en bleu, tranche bien avec les autres éléments, plutôt black & white. Le petit plus : la mise en avant de photos de personnes portant le produit – en l’occurrence le t-shirt. Cela suppose d’avoir une bonne communauté et une forte présence sur les réseaux sociaux. On remarquera que chaque produit a son propre hashtag. Mais, de manière plus générale, il est très efficace de contextualiser les produits en les replaçant dans leur environnement. Ikea a été un des pionniers dans ce domaine.
Exemple fiche produit #6 – Zalando
Zalando est un site e-commerce d’origine allemande créé en 2008. Il s’est spécialisé dans la vente de vêtements et de chaussures et constitue aujourd’hui un acteur majeur du e-commerce au niveau mondial. Toutes les bonnes pratiques sont globalement appliquées au niveau des fiches produits : images de qualité et galerie, visibilité du bouton d’ajout panier (en orange sur une page à forte dominante blanche), affichage des avis-clients, mention des informations concernant la livraison. La description du produit, sous forme de liste à puces, est peut-être trop courte. Un ou deux paragraphes auraient pu être inséré au-dessus de cette liste, ne serait-ce que pour le SEO.
Sur l’utilisation de plus en plus fréquente des fonds blancs dans le ecommerce, lire notre article sur les 8 tendances ergonomie / design sur les sites ecommerce en 2016.
Exemple fiche produit #7 – ModCloth
ModCloth propose des produits de mode de style vintage, essentiellement des vêtements et des chaussures. Leurs fiches produits sont assez originales du point de vue du design, notamment en ce qui concerne les boutons (les boutons de taille par exemple). On ne peut pas dire que le rendu soit très esthétique (c’est un jugement subjectif), mais l’efficacité est là. Là encore, on remarque la très bonne visibilité du bouton d’ajout panier. La mention « Easy returns and Exchange » est très bien placée, juste sous le bouton d’ajout panier (comme pour inciter les visiteurs qui hésitent encore un peu à cliquer pour acheter). Les images des produits sont à la fois nombreuses et en haute définition. L’utilisation des mannequins est aussi un vrai plus.
A noter aussi le popup qui s’affiche à l’ouverture de la fiche produit :
100% gratuit - 3 min
Exemple fiche produit #8 – Fnac
Le site de la Fnac a connu une importante refonte en 2015, avec notamment pour objectif de renforcer l’expérience client. Le résultat est très réussi, comme vous avez peut-être déjà eu l’occasion de le constater en naviguant sur le site. On remarquera : le choix du blanc en arrière plan, qui donne un caractère sobre aux fiches produits et accroît la lisibilité des différents éléments ; l’option de zoom sur l’image ; l’importance accordée aux avis-clients, clairement mis en avant (avec le fond noir) ; les informations sur la livraison (avec des modalités très avantageuses). Le site de La Fnac a été refondu dans une logique omnicanale. Il propose en ce sens : la livraison à domicile et le retrait en magasin. On remarquera le fort contraste entre les deux call-to-action « Ajouter au panier » et « Retrait 1J gratuit ». De manière plus globale, l’organisation des fiches produits en blocs offre une très bonne visibilité des nombreux éléments présents sur la page.
Le petit conseil de La Fabrique du net
L’utilisation d’un arrière plan blanc permet de bien faire ressortir les éléments colorés, et notamment les CTA.
Exemple fiche produit #9 – Victoria’s Secret
Victoria’s Secret commercialise des produits de lingerie, d’habillement et de beauté féminins. On notera ici la place prise par les images, de très grande taille. Une image a été créée pour chaque coloris, ce qui est un vrai plus. Les modèles sont portés par des mannequins en chair et en os, ce qui apporte une vraie valeur ajoutée aux fiches produits. Si l’on excepte les images, le bouton d’ajout panier et le bouton Facebook, tous les éléments sont en noir, ce qui donne un côté très sobre aux fiches produits. Et permet encore une fois de faire ressortir le bouton d’ajout panier rose. La mention des conditions d’échange et de retour apparaît juste sous le bouton d’ajout panier (non visible dans la capture d’écran). On a déjà pu constater cette proximité fréquente entre le bouton d’ajout panier et les informations de livraison / retour. C’est une pratique excellente pour rassurer les visiteurs et favoriser l’acte d’achat.
Exemple fiche produit #10 – La Redoute
La Redoute commercialise des produits de prêt-à-porter et de décoration. L’enseigne constitue aujourd’hui le deuxième vendeur d’habillement féminin en France. Pour l’anecdote, le site internet de Le Redoute est l’un des tous premiers sites ecommerce à avoir vu le jour en France. Le site a en effet été lancé en 1994. La structure des fiches produits est excellente. La Redoute a fait le choix de mettre en avant les produits associés en les faisant apparaître très haut dans la page (au-dessus de la ligne de flottaison). Deux remarques pour terminer avec cet exemple :
- L’absence d’informations concernant la livraison et les retours, ce qui est assez préjudiciable.
- Le choix d’une couleur grise très pâle pour le bouton d’ajout panier. Ce qui, en définitive, n’empêche pas ce bouton d’être suffisamment visible, en raison des couleurs très sobres utilisées dans le reste de la fiche.
Exemple fiche produit #11 – Fitbit
Fitbit est réputé pour la qualité de ses fiches produits. La structure des fiches produits sort de l’ordinaire. Le prix n’apparaît pas tout en haut tandis que le bloc d’images est placé en haut à droite. Le paragraphe placé en haut à gauche est très intéressant : il ne décrit pas le produit et ses caractéristiques, mais illustre l’intérêt du produit, sa valeur. C’est une très bonne idée. Le bouton d’ajout panier est quant à lui très en retrait, ce qui va à l’encontre des recommandations générales. En contrepartie, les informations situées sous le bouton d’ajout panier ont clairement pour objectif d’inciter au clic. Ce qui compense les choses. Les fonctionnalités et les caractéristiques du produit sont indiquées au moyen d’une mise en page très réussie, assez proche de celle de FiftyThree (exemple 1). Là encore, on insiste davantage sur les fonctionnalités que sur les caractéristiques. Ce qui, pour ce genre de produits, est très cohérent et efficace.
Exemple fiche produit #12 – Amazon
On ne présente pas Amazon, l’un des grands géants d’internet, aux côtés de Facebook, Google ou Apple. Les fiches produits d’Amazon constituent des modèles pour tous les ecommerçants. Amazon a été l’un des premiers sites ecommerce à accorder une place essentielle aux avis clients et à recommander des produits complémentaires / similaires. Amazon est une référence en matière de cross-selling. Les bonnes pratiques évoquées dans les exemples précédents sont appliquées. Le bouton d’ajout panier est bien visible, de même que les informations relatives à la livraison (LE gros argument de vente d’Amazon).
Exemple fiche produit #13 – Made
Made, crée à Londres en 2010 par trois Français, propose des meubles design et personnalisables à des prix discounts. Ce qui est très marquant dans leurs fiches produits, c’est la place des visuels. Le haut des fiches produits est occupé par une galerie d’images étalée sur toute la longueur de l’écran. C’st l’occasion d’illustrer une nouvelle fois le pouvoir et le poids des images dans l’économie d’une fiche produit. Le bouton d’ajout panier, en jaune vif, est particulièrement bien visible. La présentation des caractéristiques du produit est elle aussi très réussie. A noter pour finir l’affichage de photos montrant le meuble dans son environnement. Il s’agit de photos envoyées par les clients ayant acheté le produit (cf. l’exemple Johnny Cupcakes). Nous vous conseillons cette pratique, qui permet d’obtenir de beaux visuels gratuitement. Le petit plus : le paragraphe « Conseils » qui permet d’humaniser la fiche produit et d’instaurer une forme de proximité avec le visiteur.
Exemple fiche produit #14 – Rent the Runway
Rent the Runway est un site ecommerce spécialisé dans la location de robes. Pas de grandes innovations au niveau des fiches produits. On constate simplement que tout y est des images aux avis clients. Le bouton d’ajout panier est ici remplacé, c’est logique, par le bouton « Reserve Now ». Sa couleur noire sur fond blanc lui permet de bien ressortir. Il est placé juste sous l’option de livraison gratuite. Le petit plus : le zoom automatique lorsque l’on place la souris sur l’image du produit et qui permet d’apercevoir tous les détails. Les options de taille sont également très détaillées. On notera la grande qualité de la présentation des avis-clients ainsi que celle des paragraphes « Stylist Notes » et « Size & Fit » qui ajoutent un côté expert très rassurant pour le visiteur.
Exemple fiche produit #15 – Indochino
Pour le dernier exemple, nous avons choisi le site ecommerce Indochino, qui propose des costumes pour homme ajustables et personnalisables. Une proposition de valeur en soi assez rare pour être notée. Comme dans l’exemple Fitbit, le choix a été fait de positionner les images à la droite de l’écran. La pastille de réduction (50% Off) est particulièrement bien placée et saute tout de suite aux yeux. Les boutons Add to Bag et Customize Now sont eux aussi bien visibles, avec le choix d’une couleur très contrastante (bleu clair). A noter enfin le choix d’une police de taille inférieure pour la liste à puces qui énumère les caractéristiques produits. Ce jeu sur la taille des polices permet d’organiser et de hiérarchiser entre eux les éléments textuels. Le petit plus : l’utilisation de vrais modèles pour présenter les costumes.
Si vous souhaitez trouver plus d’inspirations, vous pouvez consulter des dizaines d’autres exemples de fiches produits réussies en vous rendant ici ou ici. En résumé, on constate que les « bonnes pratiques » se résument finalement à peu de choses, ce qui laisse des marges de manoeuvre très importantes concernant la mise en page. C’est aussi la raison pour laquelle les fiches produits présentées dans cet article sont très différentes les unes des autres.
Si le sujet du ecommerce vous intéresse, je vous invite fortement à parcourir ces articles :
Laisser un commentaire