Étude de cas : page produit et conversion

Beaucoup de boutiques en ligne ne travaillent pas leurs pages produits.

Résultats : peu de conversions.

C’est pourtant la page la plus importante sur un e-commerce.

Dans cette édition, on va analyser la page produit de Ziggy, une marque de croquettes pour chat.

Tu vas voir qu’il y a d’excellentes choses sur lesquelles tu peux t’inspirer.

Et quelques éléments qui clochent, à ne pas copier.

Les points positifs

🖼 Les images

Il est obligatoire pour un e-commerce de présenter plusieurs images.

Que ce soit pour montrer le produit dans un exemple d’utilisation ou pour que les utilisateurs se rendent compte de la taille du produit.

C’est ce que fait Ziggy ici.

Ils savent que la taille des croquettes pour chat est quelque chose d’important pour leurs clients car certains chatons ne supportent pas les croquettes trop grosses.

Au lieu de cacher cette information dans une description trop longue, ils en font un visuel qui fonctionne bien.

Cela permet :

1 - De savoir à quoi ressemblent les croquettes (car une photo du paquet ne suffit pas)

2 - De savoir leur taille précise.

Deuxième excellente image.

Elle permet de :

1 - Montrer la taille du sachet par rapport au chat

2 - De faire comprendre à l’utilisateur que les chats raffolent de ces croquettes (et qu’elles ont bon goût). Ça rajoute de façon subtile de la crédibilité.

Ce qu’il faut retenir :

Tu vois que les images ne sont pas uniquement là pour montrer le produit sur un fond blanc. Elles sont aussi là pour faire comprendre des choses au client, pour faire passer un message, pour mettre en valeur le produit, etc.

⭐️ La preuve sociale

Ziggy choisit de placer la note étoilée du produit très haut sur la page, juste en dessous du nom du produit.

C’est une bonne pratique pour 2 raisons :

1. Cela rajoute de la preuve sociale et de la crédibilité, forcément.
2. Placé juste en dessous du titre, cela permet de pousser les utilisateurs à lire la description et en savoir plus sur le produit.

Attention, la note étoile peut être placée très haut sur la page, mais les avis clients doivent rester en retrait.

Le plus judicieux est d’éparpiller la preuve sociale.

Si ta page produit est vraiment longue, tu peux placer de la preuve sociale sur 1/3 sections.

Tu peux parfois mettre des études de cas, des logos de marques reconnues, des avis clients, des témoignages vidéos.

Utilise différents formats.

Ziggy se sert des photos de leurs propres clients pour :

1. Ajouter de l’humain et du branding
2. Mettre en valeur les avis clients
3. Rendre plus crédible les avis clients

Ce qu’il faut retenir pour la preuve sociale :

Tu peux placer un élément de preuve sociale tout en haut de la page produit, à condition qu’il ne prenne pas trop de place.

Ensuite, en fonction de la taille de ta page produite, éparpiller des éléments de preuve sociale sur ta page grâce à différents formats : avis clients, études de cas, témoignages vidéos, etc.

Enfin, rends tes avis clients crédibles, en affichant la photo du client, son nom ou encore la date à laquelle l’avis a été émis.

Dernière chose, ça n’est pas grave d’afficher des avis négatifs sur ta page produit.

Les utilisateurs se méfient lorsqu’ils voient que les avis sont trop parfaits avec un 5/5 basé sur + 1500 avis…

Et si tu n’as encore pas d’avis client, n’en mets pas tout simplement.

N’affiche pas sur ta page “pas encore d’avis client”, tu te tires une balle dans le pied.

Évite ça :

Ne mets rien, tout simplement.

🔥 Urgence/rareté

Comme beaucoup d’e-commerces, Ziggy utilise le fameux levier psychologique lié à la rareté.

Pour ce faire, ils ont une offre d’abonnement qu’ils mettent en avant afin de faire comprendre que l’utilisateur peut faire une bonne affaire.

C’est placé juste en dessous du bouton d’ajout au panier, avec une info-bulle pour en savoir plus.

Pour jouer avec ce principe, il y a plusieurs solutions, voici 2 exemples :

• Mentionner le nombre de produits restants en stock
• Expliquer à l’utilisateur que la promotion n’est disponible que pendant une certaine période

Pour utiliser ce principe et booster tes conversions, voici un guide qui devrait t’intéresser 👇

Urgence & Rareté : 10 exemples pour booster les conversions

www.sdlv.fr/la-cargaison-ressources/urgence-rarete-10-exemples-booster-conversions

🎭 La réponse aux craintes

Je le répète beaucoup mais sur une landing page et sur une page produit, il faut savoir anticiper les questions, les doutes et les craintes que peuvent avoir les utilisateurs.

Ziggy le font assez bien sur leur page.

1 - Avec leur description produit très bien détaillée.

En fonction de ton produit, tes utilisateurs peuvent être amenés à vouloir des infos plus ou moins précises.

Tu dois leur donner les infos dont ils ont besoin, c’est une obligation.

2 - Avec des éléments qui rassurent

La livraison, le mode de paiement, le SAV…

Tous ces éléments sont des choses qui font peur aux acheteurs.

Tu dois répondre à ces craintes efficacement sur ta page produit.

Tu peux gagner des conversions, juste en ajoutant ce genre de chose.

💡 Aider l’utilisateur

Ziggy ne se contente pas de présenter son produit, la marque va bien au-delà de ça.

Un peu plus bas sur leur page produit, ils prennent le temps d’éduquer les utilisateurs.

En leur expliquant ce qu’on peut trouver dans leur produit, le choix des matières premières, le choix de la taille, etc.

Ils sont 100% transparents et expliquent la fabrication de leur produit.

Cela permet de :

1 - Ajouter de la crédibilité

2 - Eduquer leurs clients

3 - Renforcer la proximité avec leur client

4 - Améliorer leur image de marque

Un peu plus bas encore, Ziggy propose un outil de calcul pour savoir quelle quantité de croquette donner à son chat.

Bref, c’est un véritable cas d’école en termes d’expérience client.

🧠 Une UX efficace

La version mobile est elle aussi correcte avec des éléments bien lisibles, des liens accessibles, etc.

Ziggy a également intégré une barre sticky en bas de page.

Sachant que la page produit est assez longue, ils ont voulu rendre le bouton d’ajout au panier accessible à n’importe quel endroit de la page.

Les points négatifs

La page est déjà bien optimisée mais on peut relever quelques points négatifs.

🖍️ La hiérarchie visuelle et l’UI

Si on analyse la répartition des couleurs, on remarque que le vert est beaucoup utilisé.

Dans une hiérarchie visuelle, il est important d’assigner une fonction à chaque couleur.

En l’occurrence, pour Ziggy, j’aurais tendance à utiliser le vert pour les textes classiques, et l’orange pour les liens forts et les CTA.

Tu remarques ici que l’utilisation du vert et du orange n’a pas vraiment de sens.

En plus, tu vois ici qu’on a 2 éléments identiques en termes de style.

L’un est cliquable, l’autre non.

Voici comment j’aurai imaginé une optimisation facile de l’UI design :

Ici, 3 choses :

1. Les éléments d’interaction ont une couleur spécifique
2. L’utilisateur sait d’avance quels sont les éléments cliquables
3. Le CTA contraste avec le reste de la page

‍

‍