9 bonnes pratiques pour optimiser la fiche produit de son application mobile

Suite et fin de notre série d’articles sur les bonnes pratiques UX-UI des apps de Retail. Place maintenant à la page star, celle qui rassemble toutes les caractéristiques dont l’utilisateur a besoin pour procéder à l’achat : la fiche produit ou la PDP pour Product Detail Page. Elle comptabilise plus du tiers de l’ensemble des pages vues lors d’une session sur mobile (web & app) et un tiers des utilisateurs se plaignent régulièrement de la difficulté à y visualiser les produits.

Les mots d’ordre : inspiration, organisation pour afficher toutes les informations de façon intelligible et réassurance (qualité du produit, délais et modalités de livraison, retours, paiements). Si certaines fonctionnalités semblent être inconditionnelles, l’ajout aux favoris (82% des apps le proposent), le partage à ses proches (adopté à 86%) ou encore l’ajout d’une strate dédiée au cross-sell en fin de page (généralisée à 86%), d’autres posent question. Comment intégrer les avis ? Quelles informations privilégier dans la buy section ? Le bouton d’ajout au panier doit-il être stické en bas de l’écran ? Quels outils d’aide à la décision fournir à l’utilisateur ? C’est parti pour 9 bonnes pratiques, accompagnées des chiffres issus de notre analyse des 50 apps de retailers les plus téléchargées / utilisées en France.

Plusieurs vues variées du produit pour le découvrir sous toutes ses coutures

Les visuels doivent à la fois servir le besoin d’information, de détails, tout en favorisant l’inspiration.?Pour présenter le produit au mieux, il faut occuper le plus de place possible dans l'écran. Nous conseillons également de limiter le nombre de photos pour éviter de perdre l'utilisateur (cela peut être différent selon le type de produit / le secteur : environ 5 visuels pour le BtoC quand le CtoC nécessite davantage de photos pour rassurer l'acheteur) et d’alterner entre vues packshot (96% des apps) et mises en situation (94%). La vidéo est aussi un excellent moyen, notamment dans l’habillement, de se rendre compte au mieux du rendu porté d’une pièce, d’ailleurs 16% des apps y ont recours.

La navigation entre les visuels est par ailleurs stratégique pour apporter confort et performance. Le simple fait de tronquer la dernière image peut suffire pour signifier que d'autres visuels suivent. Les pratiques les plus répandues consistent à opter pour des ronds qui se remplissent au fil de la navigation pour offrir un repère ou bien intégrer une barre de progression. Cependant, pour une meilleure accessibilité, la bonne pratique consiste à ajouter des flèches droite-gauche pour signifier le swipe.

Avec l’avènement de l’IA générative, les visuels des fiches produits vont évoluer pour permettre une projection ultra précise des utilisateurs. On peut imaginer par exemple la visualisation des produits sur un avatar aux mensurations de l’utilisateur ou sur son jumeau numérique.

Marie Billon, Directrice des études

Les infos clés rassemblées dans le header dans le cas de longues PDP

Dans le cadre d’une longue page produit, il est important de fournir à l’utilisateur un résumé de ce qu’il peut y trouver et de lui donner un accès rapide aux contenus plus profonds par le biais d’ancres. Une pratique particulièrement adoptée par les marketplaces consiste à transformer le header pour laisser la place à des onglets de la fiche produit. Par ailleurs, les descriptions trop basses sont à éviter dans la page car elles pourraient ne pas être lues. 

La “Buy section” doit contenir les modalités d’achat et les options dont les utilisateurs ont besoin pour ajouter le produit à leur panier, en un écran sous les visuels : la note moyenne, le nombre d’avis, les modalités de livraison, options et configurations possibles... Il est aussi possible d’intégrer des liens avec ancres vers des sections un peu plus basses dans la PDP.

Vous ne pouvez vous résoudre à faire une fiche produit light ? Il est d’autant plus essentiel de hiérarchiser le contenu ! Priorisez les infos clés, ajoutez des repères ou raccourcis pour sauter certaines sections et aller plus vite à l’information recherchée, ou encore, scindez le contenu : vue simplifiée dans la buy section / vue détaillée si besoin plus bas… Le but étant d’être exhaustif tout en étant clair et structuré pour une navigation fluide et efficace.

Séverine Dumont, Directrice de l’Expérience Client.

L’ajout au panier persistant en bas de page

Opter pour un "sticky CTA" en bas de page est une pratique particulièrement efficace pour faciliter l'interaction de l'utilisateur avec des actions clés et assurer une conversion optimale. 58% des acteurs du top 50 ont fait ce choix. 

Ce type de CTA offre plusieurs avantages : premièrement, une visibilité constante du fait qu’il reste visible et accessible lorsque l'utilisateur fait défiler la page. Deuxièmement, une réduction des frictions : les utilisateurs n'ont pas besoin de revenir en haut de la page pour trouver le bouton d'ajout au panier, ce qui simplifie le processus d'achat et améliore l'expérience utilisateur. Enfin, l’impulsion à l’achat : en gardant le CTA visible, on rappelle constamment aux utilisateurs l'action d'achat, ce qui peut encourager les décisions rapides et augmenter les conversions.

Manon Jeannin, UX/UI Designer.

Pour optimiser cette stratégie, il est nécessaire de considérer son placement et sa taille lors de la conception. Le CTA doit être assez grand pour être visible et cliquable, et doit être placé de manière à ne pas obstruer le contenu essentiel, pour ne pas le transformer au contraire en élément bloquant. L’idéal est de le placer en bas à droite, où il est directement accessible par le pouce de l’utilisateur sur mobile. Il peut être pertinent de créer un bloc distinct clairement mis en évidence par un contraste fort par rapport au reste de la page.Ensuite, si le CTA est animé (par exemple, s'il apparaît ou disparaît), l'animation doit être fluide ou minimale pour ne pas perturber l'utilisateur.

Des drawers ou modales pour les infos produit

Sur une PDP, les informations sont souvent disséminées. Le travail de rationalisation peut en partie être résolu par les drawers (systèmes de déploiement du texte au tap) qui permettent de contrôler la longueur des pages, malgré la multitude de contenus. 

La vue en accordéons fermés permet à l'utilisateur d'avoir en un coup d'œil les sections de la page et ainsi déplier celui qui l'intéresse. Quelques conseils : être clair & concis dans les titres, rassembler les infos dans des sections, optimiser l’ergonomie (marges, icônes), marquer visuellement les caractéristiques importantes. 

Le recours à des modales pour mettre instantanément en lumière certaines sections (modalités de livraison / paiement par exemple) permet par ailleurs de ne pas surcharger la PDP, sans pour autant passer sur une autre page. Elles peuvent également permettre à l’utilisateur de compléter des actions progressives : sélection de sa taille, coloris, quantité, avant l’ajout au panier.

Anne-Sophie Gotteland, Lead UI Designer.

La possibilité d’interagir avec les avis

Les avis des pairs conditionnent l’envie d’acheter le produit ou de poursuivre une recherche. Ils offrent une perspective pratique sur l'utilisation réelle d'un produit, apportant un regard critique qui complète la description marketing de la PDP. Plus d’un acteur sur deux (54%) affiche les avis clients sur la fiche produit ainsi que le nombre d’avis déposés.

Nous conseillons de fixer un nombre minimum d'avis pour afficher cette donnée, assurant ainsi une base d'info significative, et de symboliser la note moyenne par des étoiles. 
Afin de faciliter l'interaction avec ces avis, surtout lorsqu'ils sont nombreux, la note & le nombre d'avis doivent être tapables et diriger vers une section basse par le biais d'une ancre ou modale où l’utilisateur peut retrouver un tableau de répartition des avis avec le nombre de votes par note.

Au-delà de l’affichage des avis de la communauté, c’est véritablement leur manipulation par les utilisateurs qui peut lui apporter de la valeur, à savoir permettre de filtrer par note, par critère. Et parce qu’une image vaut mille mots, l’ajout de médias (photos, vidéos) fiabilisera les témoignages et favoriser la projection de l’utilisateur.

Noemi Sponga, UX Designer.

Des outils pour aider à la projection

Donner des détails sur la façon dont le produit taille, informer de la taille portée par le mannequin et de ses mensurations, sont autant de caractéristiques clés dans le processus de sélection de la taille, avant même de se diriger vers le guide des tailles complet. 

La nouvelle app de Place des Tendances conçue et développée par USERADGENTS propose par exemple un guide des tailles en 3D qui, sur simple scan de la morphologie de l’utilisateur (en plusieurs étapes pour une analyse fine des mensurations), va déterminer la taille idéale à choisir pour un vêtement et garder en mémoire le résultat du scan pour les futurs achats.

Michel Buonomo, Directeur Conseil.

Les utilisateurs peuvent aussi vivre une expérience immersive et réaliste en réalité augmentée grâce à la caméra de leur smartphone, une pratique qui sert la décision et la conversion, efficace dans de nombreux secteurs (beauté, mode, ameublement...) même si peu d’acteurs l’ont pour le moment intégrée (6% des acteurs du top).

Pour l'intégrer au mieux, l'option doit être clairement proposée (une icône, une animation...) et facilement accessible (au niveau du visuel produit, au sein même du carrousel de visuels comme adidas,...). Mieux vaut limiter les étapes nécessaires pour démarrer le processus, guider les utilisateurs pour éviter toute frustration et enfin permettre l’interaction, que ce soit pour ajuster le produit, changer sa couleur ou son emplacement pour un rendu plus personnalisé.

Des mécaniques de paiement ultra rapides 

L'achat express, également connu sous le nom d'achat en un clic, simplifie considérablement le processus d'achat pour les utilisateurs en éliminant des étapes grâce aux données pré-enregistrées (détails de facturation, d'expédition et de paiement sauvegardées dans l’app ou via Apple Pay, Google Pay). Il rend ainsi vraiment possible l’achat coup de cœur, impulsif, en un minimum d’effort. Pour autant, seulement 8% des apps le proposent.

Il conviendra de positionner ce bouton d'achat express de manière stratégique, généralement à côté du bouton d'ajout au panier afin qu'il soit facilement repérable, tout en veillant à ce qu’il soit distinctif de celui-ci (couleur différente, icône, texte).

Le bouton d'achat express, comme Apple Pay, peut augmenter significativement le taux de conversion en simplifiant le processus de paiement et en réduisant les abandons de panier. Sentiment de sécurité, efficacité de parcours, ergonomie éprouvée... les avantages sont évidents et les chiffres parlent d'eux-mêmes. Shopify rapporte que les taux de conversion doublent avec Apple Pay et Baymard Institute note une augmentation potentielle des conversions de 35%. Cependant, cette intégration n'est pas sans coûts. Les e-commerçants doivent faire face à des frais de transaction (comme dans le cas d'Apple Pay) sans oublier les coûts d'intégration évidents.

Hugo Subil, Directeur du Pôle Conseil.

La visualisation de ses points de fidélité

Si cette pratique est très peu représentée dans le top 50, seulement par 8% des apps, la visualisation des points de fidélité générés par un potentiel achat est une excellente façon de stimuler l'engagement des clients et d’encourager la décision d’achat. Le cumul de points ou encore les avantages liés à l’achat doivent être représentés de façon claire (encadré coloré, texte accompagné d’une icône) et la récompense, elle doit rester juste et atteignable par l’utilisateur. Une fidélité récompensée favorise directement la rétention. 

Sephora est un acteur assez différenciant du top 50, le seul à afficher dès l’arrivée en homepage les points de fidélité cumulés par le client.

Le mobile à travers les applications notamment est au cœur de la stratégie des marques sur la relation client, sujet d’une de nos dernières études. D’ailleurs, au-delà des simples cartes de fidélité dématérialisées, bon nombre de programmes relationnels naissent sur les apps et récompensent les actions et usages des utilisateurs, en plus de leurs achats passés. Par exemple, Urban Outfitters fait cumuler des points de fidélité à chaque nouvelle connexion à l’app, lors d’un abonnement à la newsletter ou encore lors de l’activation des notifications.

Marie Billon, Directrice des Études.

Shop the Look : de l'inspiration à l'achat

La fonctionnalité Shop de look est un bon moyen d'inspirer l'utilisateur et d'augmenter la valeur du panier en lui proposant un ensemble qui match bien. Elle est particulièrement utile dans la mode ou encore l'ameublement / décoration. 
Nous apprécions particulièrement les visuels avec des points d'intérêt tapables sur les produits, un call-to-action unique sous un look permettant d'ajouter au panier l'ensemble d'un coup, ou encore un bouton "voir le look" sur un produit. Si ce type de fonctionnalité est plutôt observée sur les PDP, on retient tout de même son intérêt en homepage au service de l’inspiration.

Plutôt qu’intégrer une rubrique de cross-sell classique en fin de page, le Shop the Look permet la mise en avant scénarisée de produits complémentaires que l’utilisateur sera susceptible de vouloir acheter ou reproduire avec des pièces en sa possession. Avec l’IA générative, ce type de fonctionnalité permettra de répondre par un look sur-mesure à une requête précise d’un utilisateur, par exemple “Je recherche une tenue pour une soirée d’anniversaire de mariage qui a lieu cet été”. Une tenue adaptée et complète se basant sur le catalogue de produits estivaux, en stock bien sûr, pourra alors être automatiquement composée.

Séverine Dumont, Directrice de l’Expérience Client.

La bonne nouvelle c’est que si vous n’avez pas lu les deux précédents articles, ils sont toujours en ligne ici et ici et qu’une étude plus complète est disponible en libre téléchargement sur notre site. 

Pour davantage de bonnes pratiques, d’exemples et de chiffres exclusifs, l’étude Retail Apps Top 50 est aussi disponible en libre accès et peut vous être présentée en mode conférence, n’hésitez pas à nous contacter pour en discuter. USERADGENTS peut aussi vous accompagner dans tous vos projets d’apps mobiles ou web et vient de lancer son offre UATOME de mise à disposition de talents pour mener à bien vos missions digitales.