8 bonnes pratiques pour dynamiser le catalogue produit de son application mobile

Il est déjà l’heure de découvrir le deuxième article de notre trilogie dédiée à l’UX-UI des applications mobiles de Retail. Issu d’une récente étude conduite par les experts de USERADGENTS, cet article vise à résumer en 8 bonnes pratiques les must have et les nice to have d’une Page Listing Product (PLP)... Oui, bon du “catalogue produit” pour ceux qui ne seraient pas encore adeptes du jargon de designer. Pour ce faire, nous avons passé au crible les 50 apps mobiles de retailers les plus téléchargées / utilisées en France, qu’elles soient branchées mode, beauté, déco, luxe, nées sur le digital ou brick & mortar... 

La PLP, c’est la vitrine de votre catalogue de produits et c’est aussi l’une des pages (avec les catégories) qui concentrent le plus grand nombre d'activités sur une app¹. Elle doit être homogène et attrayante, claire, informative, et éviter toute surcharge de contenus au risque de provoquer une fatigue visuelle chez l’utilisateur. Au-delà des options de tri et filtres, la PLP doit permettre à l’utilisateur d’aller efficacement au produit idéal et d’en comprendre l’essentiel, tout en fournissant des arguments qui peuvent avoir un impact direct sur la conversion. Alors, comment structurer son catalogue ? Quels types de visuels privilégier ? Les avis ont-ils leur place dès cette étape ? Et les modalités de livraison ? Voici 8 bonnes pratiques pour une PLP efficace.

Un affichage personnalisé de la grille / liste 

Certains acteurs laissent la main à l’utilisateur : mode grille ou mode liste, nombre de produits par colonne, vue du produit packshot (seul) ou mis en situation / porté par un mannequin… Autant de paramètres qui permettront à l’utilisateur d’améliorer son confort de consultation du catalogue produit.   

De façon générale, c’est la grille qui l’emporte avec 88% des apps analysées qui l’ont adoptée pour présenter leurs produits dans la PLP vs. 34% qui ont opté pour une vue liste. 
La différence est moins marquée en ce qui concerne les types de visuels : 88% mettent en avant des packshot et 70% ont recours à des visuels de produits mis en situation ou portés par des mannequins. Ce type de sélection permet de se concentrer sur les détails du produit ou de mieux se rendre compte du tombé d’un vêtement.

La best practice consiste à garder en mémoire les préférences de l'utilisateur pour ses prochaines connexions. Une bonne façon de personnaliser l'expérience dans le détail à moindre coût !

Marie Billon, Directrice des études

Une grille homogène mais fluide pour donner du rythme 

La grille est utile pour montrer un grand nombre de produits sur un même écran mais risque de causer une fatigue visuelle au fil du scroll. L’option vue liste quant à elle laisse davantage de place au produit et ses attributs mais son impact sur le scroll est non négligeable avec un risque que l'utilisateur découvre moins de produits que par le biais d'une grille. Ce choix ergonomique dépend également de la nature des produits à afficher.

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

L’harmonisation des vues produit (packshot ou porté) et des fonds (neutres de préférence) est une bonne façon de soulager l'œil, tout comme l'emphase sur des encarts qui prennent alors la place des 2 colonnes par exemple pour casser la monotonie et donner du rythme. Ces éléments visuels peuvent alors présenter une promotion, un produit particulier dont le visuel est traité différemment, un message de réassurance,... 

Une PLP éditorialisée & personnalisée

Il est plutôt efficace de miser sur l’inspiration de la PLP en la thématisant grâce à un header qui définit la catégorie de produits dans laquelle l’utilisateur se situe, complétée par des cards à swiper pour effectuer un premier filtre, des conseils, offres du moment... avant de découvrir la sélection (en liste ou grille).

Par ailleurs, la personnalisation de la PLP en fonction des préférences et des tailles enregistrées par l’utilisateur dans l’app permet de trouver plus facilement / rapidement un produit en évitant la déception de s’intéresser à un produit qui n’est plus disponible dans la taille de l’utilisateur.Une fonctionnalité essentielle chez les apps de seconde main notamment.

Cette personnalisation qui est la clé pour améliorer la conversion va être chamboulée par la nouvelle génération d'IA mais ne nous y trompons pas : si vos PLP ne sont pas déjà perfusées au machine learning, focalisez-vous sur les fondamentaux avant d'intégrer les dernières innovations à la mode.

Michel Buonomo, Directeur Conseil

Des filtres persistants tout au long du scroll

Afin de faciliter l’affinage d’une recherche, la bonne pratique consiste à proposer les filtres et options de tri en haut de page à l'arrivée sur la PLP mais aussi de permettre, au fil du scroll, d'y avoir recours facilement grâce à un CTA persistant en haut ou en bas de page.

Plusieurs possibilités : réduire l'opacité du bouton, le faire disparaître lors du scroll et réapparaître lors des pauses, conserver des sous-catégories en haut de l’écran...

Les filtres sont essentiels pour que l’utilisateur puisse atteindre son objectif avec le moins de frustration possible. Il restreint lui-même la richesse de l’offre pour personnaliser le catalogue à ses propres besoins.

Noemi Sponga, UX Designer

Par ailleurs, le nombre d’items présents dans la PLP est une donnée essentielle pour inciter l’utilisateur à interagir avec les filtres (64% des apps l’intègrent en haut des PLP) pour affiner la recherche face à une trop grande quantité de produits (qui peut être décourageante) ou au contraire l’élargir.

Des informations utiles sur le produit 

Avant d'entrer dans les détails de la PDP (Product Detail Page), un certain nombre d'informations clés peuvent impacter la décision de l'utilisateur, des données qu’il convient de structurer et hiérarchiser pour éviter la surcharge visuelle, en fonction de la nature du produit et de son marché. Les modalités de livraison ont un vrai intérêt pour du gros mobilier par exemple, de même qu’une indication morphologique dans l’habillement…

Marie Billon, Directrice des études

Au sein même d'un bloc produit, au-delà de son prix, il peut être utile d'indiquer le caractère nouveau du produit, éco-responsable, tendance sur les réseaux sociaux, ou encore le type de coupe d’un vêtement, s’il est en promotion… Chez 74% des apps, un tag est rattaché à certains blocs de produits depuis la PLP pour afficher ces détails. 

De la même manière, les modes d’accès au produit (livraison, click & collect), délais et coûts ont un impact direct sur l'achat (ou en tout cas sur la volonté de chercher un autre biais pour l’obtenir plus rapidement / facilement et moins cher). Selon les produits, notamment pour l’ameublement ou l’électroménager, la PLP peut d’ores et déjà apporter cette information à l’utilisateur de façon simplifiée. Ici, la mise en avant du magasin favori ou du magasin le plus proche à travers l’état de son stock concernant le produit, est également un insight très utile pour l’utilisateur. Plus d’un quart des acteurs analysés (16%) affichent les modalités de livraison depuis la PLP, 6% informent de la disponibilité des stocksen magasin et 2% des options de click & collect.

Les avis en guise de réassurance

Ce facteur de réassurance est essentiel et peut conditionner la suite du parcours : 30% affichent les avis clients depuis la PLP et 26% donnent également le nombre d’avis déposés.

Sur la PLP, nous préconisons un système d’étoiles facilement reconnaissable, complété du nombre de notes et commentaires déposés par la communauté et pourquoi pas, le nombre de produits vendus (comme par exemple ici sur AliExpress) pour crédibiliser le produit. 

La PLP constitue une vitrine produit qu’il convient de valoriser pour aider l’utilisateur dans son choix, et trouver le produit qui lui convient parmi une vaste sélection : avis utilisateurs, spécificité produit différenciante de ses concurrents (puissance, matière, quantités limitées,...), nombre de ventes réalisées, avantage prix ou fidélité, délais de livraison,... sont autant d’arguments et d’éléments de réassurance pouvant inciter le visiteur à s’orienter vers ce produit plus qu’un autre.

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

Plusieurs visuels à swiper 

De nombreuses PLP permettent à l’utilisateur d’interagir avec les visuels sans pour autant que cela soit réellement compréhensible. Nous conseillons de rendre ce swipe clair par le biais d’une flèche discrète, d’une barre de progression / ronds de progression ou encore grâce à une animation sur le premier visuel produit (voir ASOS) dès l’arrivée sur la PLP. 

Des ajouts rapides : aux favoris et/ou au panier

Inconditionnel, l’ajout à la wishlist est instinctivement reconnu de tous les utilisateurs par le biais d’une icône “cœur” (une étoile ou un marque-page sont aussi parfois utilisés), placé dans le coin supérieur droit du visuel produit ou bien juste à côté de son prix. 66% des apps le proposent et 4% affichent également le nombre d’utilisateurs ayant ajouté le produit aux favoris (idéal pour la seconde main où chaque produit est “unique”).

Une excellente façon côté marque d’affiner sa connaissance client et proposer ainsi une offre personnalisée sur un produit, une alerte de baisse de prix... Et côté utilisateur, d’offrir un “quick access” utile dans son processus de décision, notamment en phase de recherche, pour par la suite revenir effectuer l’achat plus facilement et plus rapidement.

Se pose ensuite une grande question : la wishlist doit-elle être accessible depuis la tab bar ? L'espace étant compté, est-ce qu'elle remplace par exemple le panier qui se retrouve souvent niché en haut à droite des interfaces, peu accessible, ou bien se retrouve-t-elle associée à l'onglet "Mon compte", liant ainsi les envies de l'utilisateur à ses paramètres ?

Michel Buonomo, Directeur Conseil

D’autre part, permettre de sauter l’étape de la PDP pour ajouter un produit directement au panier peut être utile dans le cas où l'utilisateur sait exactement ce qu'il veut ou qu’il est pressé par le temps (pour une vente éphémère sur un acteur tel que Veepee). ?

Ce bouton Quick-buy, valorisé par 20% des apps analysées, prend tout de même beaucoup de place dans une grille et fonctionnera mieux en mode liste pour laisser le contenu respirer. Il peut toutefois se contenter d’une icône sans label qui reste compréhensible mais peut poser un potentiel problème d'accessibilité.

Concernant le quickbuy, si son ajout est pratique côté utilisateur, son intégration peut poser des challenges techniques : il s'agit souvent d'extraire des PDP les sélections de coloris, de taille, etc et parfois de gérer la notion de stock. Un point à bien prévoir en amont des développements pour mettre en place des interfaces flexibles qui peuvent être ré-utilisées dans l'app.

Michel Buonomo, Directeur Conseil

Vous avez loupé le 1er article de la série sur la page d’accueil ? Remédions à cela par ici.

Pour plus de bonnes pratiques, d’exemples et de chiffres exclusifs, l’étude complète est en libre téléchargement et peut vous être présentée en format conférence. N’hésitez pas à nous contacter pour en discuter. L’agence peut également vous accompagner dans tous vos projets mobiles, qu’il s’agisse de commencer par un audit UX-UI, de reprendre la TMA/TME de vos interfaces ou que vous ayez un projet de refonte d’app ou de site en tête !

¹  C’est-à-dire le temps passé à interagir avec ces pages par rapport au temps de la session au global.