UX-Files #1 : la Page Produit
Les fondamentaux : à quoi sert une page produit ?
Une page produit doit convaincre une personne la visitant, que le produit dont elle vend les mérites répond à ses besoins. Elle doit donc apporter des réponses à ses interrogations, faire disparaître ses craintes et mettre en valeur les bénéfices du produit.
En soi, il faut que les utilisatrices et les utilisateurs soit persuadées de faire le bon choix.
Je vous invite à consulter la vidéo de Simon Sinek sur le Golden Circle, un TedTalks de 2009 toujours d’actualité. Pour résumer ses propos grossièrement, il explique qu’il faut prendre en compte trois leviers :
- Why : il s’agit de définir l’objectif à atteindre. En général peu d’entreprises répondent à cette questions.
- How : il s’agit de définir l’objectif à atteindre. En général peu d’entreprises répondent à cette questions.
- What : ou le quoi. Ce qu’on produit. C’est plus rare qu’une société ne le sache pas.
Pour rapprocher ces notions de l’UX/UI, le why correspond aux enjeux business : pourquoi, en tant qu’entreprise, je veux mettre ce produit en vente ?
Le how peut être rapproché des besoins utilisateurs : quels besoins ont les utilisatrices et utilisateurs par rapport au produit que je propose ? Comment améliorer mon produit pour répondre à ces besoins ?
Enfin, le what va correspondre à des fonctionnalités : comment je réponds autant aux besoins business qu’aux besoins utilisatrices et utilisateurs ? Quelles fonctionnalités sont nécessaires pour y répondre ?
Une petite parenthèse Marketing…
En tant qu’UX ou UI Designer, vous pensez peut-être que vous n’êtes pas directement concerné par le marketing mais celui-ci a un impact sur l’expérience utilisateur. Je vous encourage donc fortement à consulter la vidéo de Yann Leonardi sur l’analyse du Bon Marché, qui pourrait vous apprendre une chose ou deux.
Il y parle du Product Market Fit : un produit doit rencontrer sa bonne audience avec le bon message. En soit, il faut connaître son audience pour lui proposer le produit adéquat. Au final, est-ce que ce n’est pas de l’UX ?
Pour terminer sur cette vidéo, le modèle AARRR mérite d’être étudié. Je le cite :
- Acquisition : on acquiert la connaissance que le produit existe.
- Activation : on comprend la valeur ajoutée pour soi.
- Retention : on reste, on revient même.
- Referral : on en parle, ça touche d’autres gens.
- Revenu : c’est l’argent qui rentre.
La première règle : connaître ses utilisatrices et utilisateurs et leurs besoins.
Sur un e-commerce, utilisatrices et utilisateurs essaient de revivre l’expérience du magasin. Puisqu’ils et elles ne peuvent ni toucher ni essayer les produits, il faut leur donner un maximum d’informations. Et je pense qu’on peut très bien se baser sur le modèle AARRR dont je viens de vous parler.
Connaître sa cible, c’est également trouver les bons mots pour s’adresser à elle. C’est savoir ce dont elle a besoin pour lui proposer la solution. Pour ça, il faut également connaître son contexte d’usage du produit.
Au fond, c’est devenir vendeur ou vendeuse d’un magasin.
Les images :
L’utilisateur ou utilisatrice doit déjà s’imaginer porter ou utiliser le produit que vous cherchez à vendre. Les images sont donc primordiales.
- De bonne qualité mais pas trop : attention au temps de chargement (ou load time) de la page.
- Des close-up (ou zoom-in) qui permettent de mieux voir les détails du produit.
- Des photos en porté pour le prêt-à-porter, ou des produits en cours d’utilisation. En soit, des mises en situation reprenant le contexte d’usage des personnes.
- Si possible, le même arrière plan pour les photos pour plus de cohérence. Je pense qu’un fond neutre est idéal pour que l’on puisse se concentrer sur le produit, en dehors des photos en contexte d’usage bien sûr.
- Au minimum une photo de produit à l’échelle quand c’est possible.
- Des vidéos quand vous pouvez : elles convertissent entre 64 et 85% mieux (c’est Neil Patel qui l’a dit 😉). Elles peuvent contredire les difficultés d’utilisation que certaines personnes vont anticiper, ou même se présenter sous la forme de tutoriels pour montrer comment utiliser le produit.
La description du produit :
- Privilégier les descriptions courtes mais complètes. Les listes à puce peuvent être une bonne idée. Il peut être bien d’avoir une description courte qui reprenne l’essentiel et une description plus longue pour les détails (ou un “accéder à plus d’informations…”).
- Puisque nous connaissons notre audience, adressons-nous à elle comme elle l’aime. C’est ici que le copywriting entre en jeu. En toute logique, le ton adopté va dépendre de l’image de la marque.
- Au niveau de l’UI (User Interface) pure : on évite les textes en gris clair sur fond blanc en taille 12px. 😉 (voir l’article sur l’accessibilité des couleurs)
- La description du produit doit répondre aux questions potentielles et doit lui donner envie d’acheter. Elle doit être claire, détaillée et donner confiance. 50% des consommatrices et consommateurs qui retournent un produit le font avec comme raison “non-conforme à la description”.
- Inclure les spécifications plus techniques et expliquer les termes qui pourraient interloquer. En soit, expliquer en quoi votre produit est pertinent, et le prouver avec des graphiques ou chiffres. La personne doit pouvoir s’imaginer l’utiliser et doit comprendre comment le produit fonctionne.
- Puisque vous connaissez votre cible, utilisez les informations récoltées pour que le copywriting soit le plus pertinent possible. Appuyez sur ce qui rend votre produit différent de ceux des autres. Vous pouvez également utiliser l’endowment effect, c’est-à-dire vous adresser à votre utilisatrices et utilisateurs comme si le produit leurs appartenait déjà.
- Le biais d’ancrage est parfois utilisé, voire abusé par certains services, pour faire apparaître le produit comme une bonne affaire malgré un prix élevé (l’exemple d’Apple). Attention cependant, si vous vous moquez trop de votre client (grosse différence, ou biais trop souvent utilisé) cela va avoir l’effet contraire de celui attendu.
- Puisqu’on connaît le contexte d’usage (on a bien fait la recherche UX en amont ! 😉), on peut lui expliquer dans quels cas utiliser le produit (Holstee le fait très bien).
- Inclure la taille du mannequin pour du prêt-à-porter afin de permettre une meilleure compréhension et visualisation.
- Si votre entreprise est internationale, n’oubliez pas d’adapter le ton et la communication à la culture du pays. Ce qu’on appelle la localisation. (et pas uniquement de la traduction)
Les informations supplémentaires :
- Écrire des titres clairs.
- Mettre le prix suffisamment en avant. N’oubliez pas, si vous avez un magasin physique, les clients risquent de comparer en ligne et sur place. Restez cohérents sur vos tarifs.
- Accompagner la personne avec un guide des tailles par exemple, et montrer les couleurs proposées (sans mettre l’accessibilité de côté 😉).
- Renseigner sur la disponibilité du produit.
- Si le produit est en rupture de stock, la bonne attitude à adopter peut être une pop-in qui permet de recevoir un e-mail dès qu’il sera à nouveau disponible. C’est du win-win : l’utilisatrice et utilisateur pourra l’avoir dès qu’il sera réapprovisionné, et vous gagnez une bonne excuse pour relancer votre client·e et faire de l’upsell. (attention à GDPR, vous ne pouvez établir ce contact qu’une fois et dans ces uniques buts)
- Le CTA (call to action = bouton) doit être bien visible et suffisamment clair. Le wording s’adapte toujours à la cible et à la marque. Il faut également un feedback visuel au moment du clic pour l’ajout au panier : un élément visuel (la petite notification sur le panier) additionné à une pop-in textuelle par exemple : “Le produit a bien été ajouté à votre panier !”.
- Si on creuse un peu autour des lois de la Gestalt vous remarquerez rapidement qu’il faut trouver un moyen visuel de rendre votre bouton d’ajout au panier distinctif. Pensez à une forme et une couleur qui lui permette de se détacher de manière cohérente dans votre design global.
- Attention aux techniques de vente rapide comme le one-click d’Amazon. C’est une bonne technique d’acquisition si vos valeurs reposent sur l’acquisition à tout prix, mais si vous misez sur une relation de confiance et croissance sur le long terme, préférez-lui un acte d’achat plus assumé.
- Est-ce qu’il faut faciliter l’acte d’achat pour qu’il soit presque irréfléchi ? Amazon, par exemple, permet l’achat en un clic si la carte bancaire est déjà renseignée (21% ont accidentellement acheté quelque chose qu’ils ne voulaient pas). De mon point de vue, il s’agit d’un risque de renvoie de l’objet, mais c’est aussi une décision qui a un impact écologique et psychologique. Êtes-vous de cette école des Deceptive Patterns ?
- Informer les personnes des modalités de livraison et de retour dans le but de les rassurer.
- Mettre en place une wishlist permettant de faire son choix sans forcément passer par l’acte d’achat. Il y reviendra peut-être plus tard ! Pandora permet également à ses utilisateurs de partager sa wishlist, une feature très intéressante pour des produits plus luxueux et coûteux.
- Inviter les utilisatrices et utilisateurs à poser leurs questions avant achat avec la présence d’un chat par exemple.
Les produits pour compléter (cross-selling) :
En tant qu’entreprise, vous cherchez surtout à garder la personne sur votre plateforme (on se souvient de la Rétention). Mais puisque nous sommes dans une démarche centrée utilisateurs, il faut lui apporter une plus-value.
- Recommandez des produits qui complètent vraiment le produit qui est visité. Decathlon fait ça plutôt bien d’ailleurs.
- Pour des vêtements, je pense que ça ne peut qu’être bénéfique de proposer les autres produits portés par le mannequin. Combien de fois avez-vous aimé un produit porté par le mannequin et peiné pour le trouver dans la Page Liste ? 😥 Ikea fait ça très bien.
Les avis :
Vos utilisatrices et utilisateurs sont vos meilleurs ambassadeurs. Il suffit de voir la côte qu’a Apple ! Ils font des produits qualitatifs, mais ils ont également une communauté qui met en avant leurs produits et en vante les mérites.
- 94% des utilisateurs se fient aux avis laissés par les précédents utilisateurs (donnée datant de décembre 2020). Cette donnée est liée au biais de la social proof : un individu ne sachant quelle attitude adopter aura tendance à reproduire le comportement ou le point de vue d’autres personnes.
- Je suis allée sur Lush il y a quelques semaines, et le fait que l’un avis soit mis en avant dans la description du produit m’a convaincue à chaque fois. Si je m’étais écoutée, j’aurais acheté la moitié du site internet. 😅
- Il peut être bénéfique de mettre des filtres aux avis pour permettre de trier plus facilement. Je ne sais pas vous, mais moi je regarde souvent les avis négatifs sur Amazon pour me faire mon propre avis.
Les non-catégorisés :
- Je pense que jouer sur la “rareté” des produits est quelque chose d’extrêmement puissant. Les collections éphémères donnent le sentiment d’être privilégiée et d’être unique, tout comme les skins des jeux comme Fortnite ou League of Legends pour ne citer qu’eux.
- De mon expérience personnelle, je pense que l’ajout d’échantillons ou de produits gratuits peut fédérer. Mon conjoint est récemment arrivé dans une nouvelle entreprise, d’où il est revenu le soir avec des goodies. Des cadeaux, ça fait toujours plaisir ! De même, dans l’une de ses vidéos, Louis-san parle avec un homme qui fait du papercraft. Sur son site, cet homme propose du contenu gratuit pour que les personnes s’y mettent, et si elles aiment, elles reviennent pour acheter. (Je sais que vous êtes designer et que ça ne dépend pas de vous, mais ça ne coûte rien de soumettre l’idée. 😉)
- Encore une fois, c’est très personnel mais pour en revenir à Lush, j’ai vraiment détesté avoir une facture de plus de 50€ et avoir encore plus de 8€ de frais de port pour être livrée à domicile… Sachant que j’habite dans le Nord et que le Lush le plus proche de chez moi est fermé. 😅 Je pense que mettre les frais de livraison gratuits pour un montant décent permet de convertir. Si je ne suis pas loin des 50€ requis chez Mademoiselle Biloba, je vais avoir tendance à les atteindre alors même que ça me fait perdre de l’argent en réalité. 😂
- N’oubliez pas de mettre à jour vos pages en fonction des changements de la marque pour conserver une certaine continuité dans l’expérience de vos visiteurs.
- Pour en revenir à l’UI, je pense qu’une page produit doit être minimaliste : elle contient déjà beaucoup d’informations, il ne faut donc pas surcharger au niveau des visuels et des couleurs. Et bien penser au white space !
- Enfin, les informations et le contenu doivent être disposés de la même manière sur toutes les pages produit. La page produit est un template réutilisé pour chaque produit.
Le mot de la fin :
J’ai pu lire d’autres choses (qui sont évidemment dans les sources) sur biais cognitifs et sur la psychologie adaptés à la fiche produit sur la création d’un sentiment d’urgence notamment. Personnellement, je ne les recommande pas. Pour moi, c’est flirter avec les deceptive design patterns et pousser à la surconsommation pour des enjeux business en mettant de côté l’humain. Créer des besoins fictifs, ce n’est pas lui rendre service.
J’ai essayé d’être la plus concise possible, mais je me suis fiée à beaucoup de ressources différentes que vous pouvez retrouver ci-dessous, et il y a beaucoup à dire.
Dans tous les cas, je vous remercie pour votre lecture et espère sincèrement que cet article aura pu vous apprendre des choses sur la Page produit. Pour ma part, j’ai beaucoup appris ! Merci à Youness Id bakkasse pour la suggestion du sujet.
Margaux Membré est une UX/UI Designer étudiante à Webstart Lille au moment où elle écrit ces lignes. Passionnée par l’UX et plus particulièrement l’UI, elle a décidé de mettre en place cette série d’articles pour répondre aux questions de son réseau LinkedIn, et en apprendre plus de son côté sur des sujets qui risquent de la toucher un jour ou l’autre.
Encore débutante, Margaux Membré s’est renseignée sur divers sites et des sources les plus récentes possibles. Néanmoins, elle reste junior dans le domaine et ne saurait être tenue responsable si de fausses idées se sont glissées dans ses mots.
Sources :
Magnifiques illustrations par SketchValley.
