Conception UX fiche produit

Conception UX de fiche produit

La Conception UX de fiche produit revient à considérer l'expérience du client final comme source principale du travail de design. Concevoir l'UX design des fiches produits nécessite une approche transdisciplinaire : psychologie, marketing, conception fonctionnelle, design graphique. La valorisation des leviers et la neutralisation des freins doivent être traitées au sein de la fiche produit.

Des problématiques transversales à l'acte d'achat ont un impact direct sur l'attractivité, l'efficacité et la capacité de la fiche produit à transformer (convertir). L'expérience utilisateur (UX) de la fiche produit passe également par le processus de commande, la logistique de livraison, la disponibilité, le prix, la qualité et les attributs effectifs des produits. La saisonnalité, la concurrence, la notoriété du site marchand sont autant de facteurs qui vont impacter l'expérience d'utilisation et les performances du site web... Bref, autant de points qui doivent être considérés au moment de concevoir l'UX des fiches produits. Sachez que la conception UX d'une fiche produit est un travail délicat et complexe qui va générer de nombreuses itérations... Pour autant, l'ergonomie et l'expérience ne sont pas les seuls variables qui influencent l'acte d'achat...

Alors, comment concevoir l'UX d'une fiche produit ?
Quelle méthode pour la conception de fiches produits ?Comment améliorer les performances de vos fiches produits ?
Nous allons esquisser les méthodes et les techniques qui permettent d'optimiser l'efficacité de vos fiches produits. Une vingtaine de maquettes fonctionnelles sont illustrées dans les exemples de fiche produit. Ces travaux relèvent principalement de l'ergonomie des interfaces et du design de l'information. L'ebusiness et le design stratégique ne sont jamais bien loin de l'optimisation d'une fiche produit.
En effet, il ne suffit pas que l'interface utilisateur soit bien conçue pour déclencher des ventes. Le marketing, le positionnement, l'agressivité prix sont autant de facteurs qui rentrent en ligne de compte.
L'importance de l'ergonomie dans le processus d'achat est surévaluée, à partir du moment où l'ergonomie n'est pas un frein :), tout est en ordre. Il y a beaucoup d'autres ressorts rattachés au savoir-faire en matière de commerce qui doivent entrer en ligne de compte...

La création d'une fiche produit doit être envisagée sous l'angle du taux de transformation et de la conversion. Les questions à se poser sont les suivantes :

• Quel est le parcours d'utilisation qui amène l'acheteur potentiel sur votre fiche produit ?
• Comment mieux répondre aux interrogations des utilisateurs ?
• La fiche produit apporte-t-elle toute l'information que recherchent les prospects ?
• La présentation des informations à l'écran est-elle séduisante ?
• En quoi votre fiche produit apporte un contraste face à la concurrence ?
• Le positionnement prix du produit ou du service est-il compétitif sur le marché ?
• Les appels à l'action - call to action sont-ils bien mis en scène ?
• Les parcours d'utilisation centraux sont-ils bien valorisés ?

Concevoir une fiche produit est un moment délicat dans la conception d'un site marchand ou d'un dispositif transactionnel... L'architecture de l'information et le design d'information, plus globalement l'expérience utilisateur revêtent ici un caractère plus que sensible...
Sur le plan de la conception, le problème principal réside dans le fait que les concepteurs travaillent les fiches produits comme des coquilles vides sous l'angle du templating : phrase en latin, cas farfelus... La conception de la fiche produit n'est pas toujours assise sur des bases tangibles. On cherche d'abord à produire un dispositif digital plus qu'à créer une machine optimisée pour la transformation :).
Il y a des conséquences en matière de design : les fiches produits ne répondent pas toujours efficacement aux spécificités de votre business (règles des bundle, contenus sur-mesure).

Fiche produit et expérience utilisateur

Un acheteur potentiel ne passera pas à l'acte d'achat sans avoir vérifié que votre offre tient la route, ce qui dépasse notablement le cadre de l'ergonomie de la fiche produit, vous en conviendrez. L'utilisateur réalise quasi systématiquement une mini étude de marché avant de passer à l'achat. Toutes les études le démontrent. Et vous pouvez observer votre propre comportement en la matière.

Le design de votre fiche produit doit prendre en compte cet état de fait : l'achat en ligne peut suivre un cycle long. Et déclencher un achat en magasin, et inversement. L'internaute viendra à plusieurs reprises sur votre fiche produit, si vous faîtes partis de sa sélection - short list. Les concepteurs d'interface (User Interface design) et les UX designers (User eXperience design) doivent tenir compte de ce phénomène dans la conception de l'interface et de l'expérience.

Ainsi, qu'il s'agisse d'acheter de nouvelles cartouches d'encre, de changer de véhicule ou de commander un billet d'avion, l'acheteur potentiel procède à un travail comparatif, comme une sorte de benchmark sauvage.
Sont évalués :

• La qualité du produit :
  C'est la valeur clé immédiate.
  Qualité perçue du produit. Qualité perçue du service. Le concepteur doit mettre en scène les déclencheurs de l'acte d'achat : neutralisation des freins, valorisation des atouts et activation des motivations. La base.
• La fiabilité du vendeur :
  On n'y pense plus tant cela semble acquis, mais c'est un fondamental de l'acte d'achat...
  Est-ce que les concepteurs ont bien pensé à parler du vendeur, de la marque, de votre entreprise, de sa notoriété, de sa fiabilité, de son savoir-faire ?
• L'existence d'un support produit sérieux :
  Service après-vente efficace, possibilité de retourner le produit en cas de problème, remboursement. Là encore, n'oublions pas que l'être humain est une machine à produire des scénarios : certains utilisateurs ont de forte capacité à envisager le pire... Votre fiche produit doit apporter toutes les réponses sur le plan des garanties. Il faut RASSURER !
  Votre SAV ou des informations sur le support sont-elles bien présentes sur votre fiche produit ?
• Les modalités de livraison du produit :
  A offre égale, c'est un facteur différenciant crucial. Temps de livraison, prix de la livraison, options alternatives (retrait en magasin, relais colis, drone de livraison - pour bientôt :). Êtes-vous sûr que toutes ces informations figurent sur la fiche produit ?
• Le prix :
  Le prix du produit ou du service, et surtout les mécaniques de fidélisation... Si j'achète le produit sur tel site, je vais avoir un cagnottage ou une ristourne. Peu importe que l'effet soit différé, le méga-marché a conduit les utilisateurs a exigé des récompenses - rewarding. Et il faut y penser au moment de la conception de la fiche produit...
• Les visuels et les photographies :
  La mise en valeur visuelle du produit est primordiale. Un utilisateur privilégie toujours un site qui montre le produit sous toutes ces coutures... Si les chefs de produits n'ont pas renseigné toutes les vues du produit, il est possible que cet écueil alimente une inquiétude côté utilisateur : le site bidule montre parfaitement le produit et c'est bien celui que je veux. Sur le site machin, je ne vois pas bien le [...]. Cruel mais véridique. On achète autant avec les yeux qu'avec son portefeuille.
• Les descriptions détaillées du produit :
  Ce que l'on peut faire avec. Spécifications techniques. Usages. Exemples d'utilisation. Démonstration...

Les types de fiches produits

Une fiche produit peut prendre différentes formes. Sur le plan de la conception, une fiche produit peut s'apparenter à un mini-site (site dans le site) : dans ce cas, l'envergure fonctionnelle et l'envergure éditoriale sont très importantes.
A l'inverse, une fiche produit peut se présenter de façon très minimaliste, on parle de fiche produit minifiée.

Au-delà de la densité informationnelle du dispositif, une fiche produit peut servir à mettre en scène différentes typologies d'articles :

• Fiche produit matérielle :
  Vente de produit physique. Produit de type stock. On valorise les fonctions du produit. La description fonctionnelle est importante.
• Fiche produit dématérialisée :
  Vente de produit téléchargeable ou streamable (streaming). Produit de type flux. On valorise les contenus du produit. La description éditoriale est essentielle.
• Fiche produit de service transactionnel :
  Vente d'assurance, couverture santé, prévoyance. Produit d'assurance. On valorise les aspects contractuels et juridiques. Les descriptions techniques détaillées font la différence.
• Fiche produit d'article en prévente - précommande :
  Réservation d'un produit en avant-première. Série limitée. Collection. Le caractère unique prévaut. On valorise la rareté.
• Fiche offre servicielle :
  Prestation de service (communication, médias, journalisme, digital, comptabilité, service à la personne). On valorise le bénéfice apporté par la prestation.
• Fiche produit combinée :
  Cas des bundle produits. Vente par lots. On valorise les aspects économiques.

Note :
un même produit peut appartenir à plusieurs catégories (exemple : achat en ligne d'une place de concert - produit matériel et immatériel + service transactionnel).

Les fonctionnalités d'une fiche produit

Voici un référentiel des fonctions d'usage d'une fiche produit en matière de conception d'interface utilisateur. La liste ne suit pas un ordre d'importance. Le périmètre fonctionnel d'une fiche article est toujours très variable. C'est fonctions sont à considérer comme une forme de checklist du scope fonctionnel.

• Prix. Modalités de paiement. Moyens de paiements acceptés. Calculateur. Devis in page. Paiement en plusieurs fois et frais éventuels associés.
• Vérification du stock. Disponibilité. Zone de chalandise. Check des disponibilités magasin. Rattachement à un magasin physique. Géolocalisation.
• Consultation et affichage du prix de livraison. Modalités de livraisons. Types de livraisons. Prix. Affichage dynamique sans travail de classification côté utilisateur.
• Ajout du produit au panier. Quantité. Taille. Couleur. Limites.
• Ajout aux favoris. Catégorisation.
• Ajout du produit à une liste. Liste d'articles. Liste de mariage. Liste de naissance. Anniversaire. Spécialité thématique.
• Mosaïque visuelle. Photographies et illustrations. Vue 3D. Rotation. Vidéo. Zoom. Haute-définition.
• Ajustement du visuel produit en fonction de la couleur. De la taille. Du modèle. De la version.
• Fonctionnalités de partage dans les réseaux sociaux. Rattachement des actions sur la fiche produit et diffusion dans les réseaux sociaux (j'ai acheté le produit X sur le site Y
• Fonction de contribution. Ajouter une photo. Uploader une vidéo. Il s'agit de favoriser la mise en scène du produit en situation d'usage.
• Description générale du produit. Synthèse. Structuration autour des titrailles hn.
• Caractéristiques détaillées du produit. Spécifications techniques. Tableau avec colonne.
• Fonction de comparaison du produit par gamme. Comparatif avec d'autres produits de la catégorie.
• Module d'avis. Commentaire pour les clients déjà possesseurs. Système de notation. Nombre de caractères à préciser. Prévoir des critères pour aider l'utilisateur à saisir les informations.
• Note globale. Possibilité de juger un avis utile.
• Gamification du dispositif. Connexion des actions avec le compte utilisateur. Exemple : +5 points pour un partage. + 10 points pour une ajout de photo utilisateur. + 15 points pour une revue du produit.
• Module FAQ. Réponses aux questions courantes. Par thématique. 10 questions par thèmes. In page.
• Fonction de bundle dynamique. Achat de produit par lots. Prix dégressifs.
• Cross-selling. Ventes croisées. Valorisation des produits de la même gamme.
• Accessoires indispensables. Possibilité d'ajout au panier in page. Quantité. Prix. Bundle. (exemple : pile, sacoche, batterie, carte mémoire...).
• Up-selling. Valorisation des produits de gamme supérieure.
• Ricochet produit social. Push communautaire. Valorisation des produits consultés par les utilisateurs en correspondance avec le produit affiché (ce qui ont acheté ce produit ont aussi acheté...).
• Mise en scène des assurances. Choix de l'assurance. Détail de l'assurance in page. Durée de l'assurance. Prix. Modalités de paiement. Ce qui est couvert ce qui n'est pas couvert.
• Théâtralisation des garanties. Choix des garanties. Durée. Détail des garanties. Prix. Modalités de paiement.
• Ajout d'un service transactionnel. Montage d'un meuble. Ménage pour une chambre... Prix. Modalités de paiement.
• Disponibilité du produit en occasion. Prix occasions. Disponibilités. Nombre de pièces. Conditions. Vendeur.
• Marketplace et injection des produits d'autres vendeurs... Prix. Informations détaillées. Ajout au panier. Tableau comparatif. Tri. Filtre.
• Zone de stress. Tel utilisateur vient de réaliser telle action
  Plus que 3 produits disponibles. Marketing de la compétition. Rareté.
• Impression (optimiser la page pour l'impression).
• Téléchargement d'un PDF.
• Newsletter. Newsletter conditionnelle : réduction instantanée si achat.
• Système d'alerte sur le prix.

Les contenus d'une bonne fiche produit

Le périmètre éditorial d'une fiche produit est assez dynamique et peut s'avérer particulièrement large et profond pour des fiches produits de type mini-site. En matière de bonnes pratiques, une fiche produit gagne à couvrir un large spectre de contenus. Voici une checklist du scope éditorial d'une fiche produit.

• Titre du produit. Aspects SEO à prendre en compte.
• Accroche marketing du produit. Slogan. Baseline. Motivation. Neutralisation du frein
• Chapô (ou chapeau) pour résumer la proposition de valeur.
• Principaux atouts du produit ou du service.
• Présentation du produit. Descriptif du chef de produit.
• Présentation du constructeur ou du vendeur. Descriptif produit du fabriquant.
• Catégorie thématique du produit dans le catalogue. Fil d'Ariane.
• Rattachement de l'article à une campagne marketing. Affectation du produit à une opération commerciale.
• Forum utilisateur in page : favoriser les interactions entre utilisateurs. Support produit et dynamique communautaire.
• Valorisation du prix. TVA. Hors-taxe. Ecotaxe...
• Signalétique de prix travaillée. Compteurs d'économies.
• Stickers produits. Avantages. Usages.
• Fidélisation et signalétique de prix client. Cagnottage. Avantage client. Ristourne. Rewarding.
• Conditions de remboursement.
• Conditions de vente.
• Spécificités juridiques.
• Particularités d'une vente (enchères).
• Partenaires des solutions de paiement.
• Cryptage des données. Respect de la vie privé.
• Autopromotion.
• Publicité externe.
• Informations pratiques.
• Heure de disponibilités du SAV.
• Moyens de contacter l'entreprise.
• Présentation synthétique de l'entreprise. Notoriété. Fiabilité. Sérieux.
• Testimoniaux in page.
• Contenus du packaging.
• Détails des APP liées (applications mobiles & co).
• Tutoriels vidéo.
• Conseil. Articles. Styles. Magazine. Editorial.
• Partenariat et sponsoring sportif ou célébrité.
• Storytelling.
• Origine du produit. Fabrication. Traçabilité.
• Label qualité (alimentaire, fabrication).
• Module de data (datavisualisation).

La fiche produit type et les cas marginaux

Lorsqu'une catégorie de produit est suffisamment originale et différente des autres, il est nécessaire de créer un second modèle de fiche produit. Par exemple, un site marchand peut vendre un produit dématérialisé (un jeu à télécharger), une machine à laver, une assurance, des vêtements...
Ce ne sont pas les mêmes typologies de produits et un seul modèle de fiche produit ne fera pas l'affaire pour agréger les informations de ces différentes catégories d'objets très hétérogènes. L'attention de l'utilisateur sera d'ailleurs portée sur des éléments différents pour chacun de ces cas...

L'erreur classique du concepteur dans la conception d'une fiche produit, c'est de considérer tous les cas marginaux pour créer une fiche 100% compatible avec tous les cas de figure. Vouloir couvrir toutes les possibilités n'est pas toujours un bon axe de conception. C'est louable, mais c'est une erreur. Cela conduit à complexifier le champ fonctionnel de l'interface. Les conséquences en matière d'expérience utilisateur peuvent être néfastes. En résulte la création de fiche article optimisée sur des cas qui peuvent représenter moins de 1% des situations réelles...

Le canevas de conception de la fiche article ou le patron de la fiche produit doit couvrir les cas les plus fréquents.
Ce sont les exceptions qui doivent faire l'objet de fiche produit spécifique (par exemple, assembler les pièces d'un meuble modulaire justifie la création d'une fiche produit spécifique... il serait malhabile de concevoir une fiche produit qui couvre tous les cas, y compris celui-là).

La règle est la suivante : tout cas de figure suffisamment original pour nécessiter des règles d'affichage très spécifique doit faire l'objet d'une conception fonctionnelle de fiche produit spécifique. Une assurance, ce n'est pas un jeu téléchargeable. On ne vend pas un vélo comme un paquet de Mars... On fait une fiche produit pour chaque cas spécifique, et pas une fiche produit qui couvre tous les cas.

La fiche produit considérée comme master (l'étalon de conception), c'est à dire la fiche produit type utilisée pour dynamiser le site, doit être une fiche produit rationnalisée et factorisée sur le plan fonctionnel et éditorial. Il faut éviter les modules vides car non dynamisés (support, FAQ...). Les pertes d'espace. Les spécifications doivent décrire précisément tous les cas et les règles d'affichage et de non affichage des modules.

Vous "devez" (essayer de) concevoir des fiches produits dynamiques et modulaires permettant d’agréger les caractéristiques de toutes vos typologies de produit, et pour les cas particuliers, identifiez les variables marginales pour adapter les modèles de l'interface aux spécificités de vos bases de données. Plus simplement : un site ecommerce de grande envergure s'articule autour de 2 à 10 fiches produits spécifiques... Le rayon boucherie n'est pas le rayon téléviseur qui n'est pas le rayon fruits et légumes... A chaque produit spécifique, son canevas de conception, pour un contexte adapté à l'usage.

Taux de transformation et fiche produit

Comme nous l'avons mentionné plus haut, l'interface utilisateur n'est pas seule responsable des performances et de la conversion. En effet, les caractéristiques du produit et le mix marketing sont les principaux facteurs de la performance.

Un bon taux de transformation oscille entre 1% et 3% : 1 achat pour 100 visites. Un taux de transfo fulminant peut dépasser les 10%. C'est rare. Entre 0,5% et 0,99%, il faut s'interroger sur les caractéristiques du produit. Sur l'interface. Mais cela reste encore un taux de conversion acceptable. En dessous de 0,5% le taux de transformation est jugé mauvais. En deçà de 2 ventes pour 1000 (0,2%), on considère généralement qu'il y a un problème.

Pour optimiser la transformation et la conversion, vous gagnez à vous appuyer sur toutes les techniques de l'ergonomie incitative et du marketing persuasif. L'optimisation des landing pages rentre également dans ce cas de figure. Voici quelques pistes pour viser l'amélioration du taux de transformation :

• Baisser le prix. Un basique. Mais ça ne marche pas toujours.
• Jouer sur la rareté. Opération limitée dans le temps. Vente éphémère.
• Associer des reward à l'achat : bon d'achat sous condition.
• Valoriser les commentaires positifs à côté de la boîte d'achat.
• Utiliser les marqueurs de l'ergonomie du stress. Zone de stress : Tel utilisateur vient d'acheter le produit. Il ne reste que 2 unités (exemple : Cdiscount). Dans quelques heures ce produit ne sera plus disponible (exemple : booking). Pas toujours louable, mais redoutablement efficace.
• Mettre en place un marketing satisfait ou remboursé.
• Valoriser le SAV. Valoriser le support.
• Rassurance en temps réel : live tchat (attention, il faut vraiment que l'opérateur soit disponible et très bon !
• Une dose d'humour et d'autodérision (apprécié des clients français ;).
• Alerte email : un classique qui fonctionne. Les spécificités des alertes peuvent être sophistiquées (prix, disponibilité, temps).
• Le design graphique. Mais n'y comptez pas trop... Les améliorations graphiques ont peu d'impact sur le taux de conversion contrairement aux idées reçues.

Le caractère complet de la fiche produit joue en faveur du taux de transformation. Une bonne fiche produit est une fiche produit qui décrit bien l'article mis en vente. La richesse éditoriale et fonctionnelle doit néanmoins être calibrée au sein de zone et de boîte. N'en déplaisent à ceux qui veulent (vous faire) penser en dehors des boîtes.

Modèle de fiche produit

Si vous souhaitez gagner du temps dans la conception de fiche produit, IAFACTORY met à votre disposition des kits de conception très complets en matière de site ecommerce. Vous pourrez vous consacrer aux contenus sans passer trop de temps à modéliser le fonctionnement. Ces modèles de fiche produit sont disponibles en téléchargement immédiat.

Concevoir des fiches produits qui transforment

Une bonne conception de fiche produit, c'est une fiche produit qui génère des performances.
Si vous êtes amenés à concevoir des fiches produits, gardez en tête les points suivants :

• Identifier les grandes familles de produits et leurs spécificités.
• Mettre à plat les attributs significatifs de chaque famille de produit.
• Modéliser des fiches produits valorisant au mieux vos produits.
• Concevoir des gabarits modulaires adaptés aux cas spécifiques.
• Adapter les gabarits aux cas spécifiques (produit matériel vs. dématérialisé...).
• Prévoir les modalités de rebond et d’intérêt ("cross selling", "up selling"...).
• Intégrer efficacement les feedbacks utilisateurs et les fonctions de partage.
• Fournir toute l’information nécessaire à la prise de décision.
• Clarifier les aspects logistiques engagés par l’acte d’achat.
• Mettre en avant les services associés au produit.
• Gérer efficacement les signalétiques de prix et les marquages spécifiques.
• Travailler la présentation des associations de produits, packs et bundle.
• Concevoir un système efficace pour explorer visuellement le produit.
• Spécifier toutes les règles de fonctionnement des gabarits conçus.
• ...

Fiche produit et parcours d'utilisation

Au niveau des méthodes de conception fonctionnelle, la modélisation de la fiche produit se rattache à un chantier plus global correspondant au parcours utilisateur de descente du catalogue, allant de la page d'accueil jusqu'à la fiche produit en passant par les pages d'accueil locales et les pages de listes...
Par extension "donc", il faudrait aussi optimiser l’affichage des listes de résultats, des moteurs de tris en intégrant les aides au choix et guides d’achat indispensables à la prise de décision.

Vous ne devriez pas travailler le fonctionnement de la fiche produit isolément du parcours interne au sein du site.
De la même façon que les parcours internes et les scénarios de déplacements intra-sites (dans le site) doivent être considérés, il convient d'étudier précisément la provenance externe des utilisateurs sur la fiche produit. La provenance externe au site a un impact important sur l'efficacité de la fiche produit (site référent, moteur, trafic direct, display, adwords)...
La consultation d'une fiche produit s'inscrit dans un parcours, et l'affichage d'une page article n'est qu'un élément éphémère dans la situation d'usage de l'utilisateur.

Cette approche globale de conception permet de bien situer la fiche produit dans le parcours (modalités de navigation, informations déjà présentées, etc.) pour éviter de la concevoir comme une fin de parcours sans interactions fonctionnelles avec le reste du dispositif.

Fiche produit et architecture de l'information

Lorsque le visiteur arrive sur la fiche produit, l'architecture de l'information doit favoriser le repérage au sein du catalogue. Il s'agit de préciser la localisation au sein du site (rayon, thématique, catégorie, sous-catégorie) et surtout d'offrir des modalités d'exploration contextuelles. Le rattachement à une opération commerciale, si elle existe, est un facteur déterminant dans l'acte d'achat.

L'interface utilisateur gagne à faire figurer un fil d'Ariane (repérage, SEO) permettant de remonter facilement à une liste de produits afin de faciliter le travail de comparaison de l'utilisateur.
Au-delà du fil d'Ariane, il revient au concepteur de créer des marqueurs d'incitation au sein de la fiche produit visant à faire circuler l'internaute au sein du catalogue. Cet axe de conception s'inscrit dans la logique des parcours d'utilisation. Une fiche produit n'est jamais la dernière étape du parcours utilisateur...

La conception de la fiche produit doit être assez explicite sur les caractéristiques du produit : les attributs de l'article, qu'il soit physique ou dématérialisé, qu'il s'agisse d'un produit ou d'un service, doivent être cohérents d'un produit à l'autre.
La fiche produit gagne à mettre en scène des attributs comparables d'un article à l'autre (caractéristiques fonctionnelles et techniques). Cela passe par la structure de la base de données, donc par un système d'architecture de l'information stable et homogène. Le design de l'information fait figurer en bonne intelligence les critères décisifs dans l'acte décisionnel. Des incitations à la comparaison sont bienvenues. Des explications complémentaires explicitant les caractéristiques sont toujours utiles (il ne suffit pas de valoriser la haute résolution de l'écran, le prospect doit pouvoir saisir le critère et le comparer par rapport à la moyenne...).

La fiche produit a également un rôle d'éducation, de formation, de clarification. Tous les internautes n'arrivent pas sur votre fiche produit avec un niveau d'information et de connaissance analogue. A vous de fournir les réponses et de présenter vos produits de façon pédagogique pour que les utilisateurs en phase initiale du cycle d'achat reviennent vers votre site pour comprendre et motiver les raisons du choix.

On parle d'architecture de l'information structurée autour des profils d'utilisateur : débutant, intermédiaire, expert, en fonction du niveau de connaissance de l'internaute. De même, on peut parler de phase de cycle d'achat : avant l'achat, en comparaison et en préparation de l'achat, pendant l'achat, après l'achat.
L'architecture de l'information doit être flexible et adresser les cycles d'achat comme le niveau de connaissance des utilisateurs. Cela passe par un développement de l'envergure éditoriale de la fiche produit.

Fiche produit et ergonomie des interfaces

La fiche produit doit naturellement s'inscrire dans le respect des conventions ergonomiques. Si ce facteur est de moins en moins déterminant dans sa capacité à déclencher l'acte d'achat, par le nivellement ergonomique des sites ecommerce sur les standards d'ergonomie, le non-respect des règles ergonomiques peut être un motif de non achat pour une catégorie d'utilisateurs !

Les basiques de l'ergonomie de la fiche produit :

• Repérage :
  L'utilisateur connait sa position dans le site.
• Guidage :
  L'internaute sait et peut se diriger dans la structure interne du site.
• Incitation :
  Le prospect est incité à effectuer une action. Les marqueurs de l'incitation doivent être très limités. 1 CALL TO ACTION et pas 10 CALL TO ACTION.
• Charge de travail :
  L'interface utilisateur doit limiter la densité informationnelle et fonctionnelle. Cela passe par un travail de design de l'information très fin. La mise en page et le maquettage visuel sont cruciaux. Les exemples de fiches produits illustrent bien les aptitudes du design d'information dans sa faculté à agréger des informations très importantes.
• Adaptabilité de l'interface :
  Adaptation de l'interface utilisateur au contexte de consultation (mobile, responsive design...). Mais aussi adaptabilité dans la capacité de l'interface à épouser le motif de visite de l'internaute. Cela passe par un travail poussé sur les scénarios de consultation qui peuvent couvrir toutes les phases du cycle d'achat.
• Cohérence des codes et homogénéité :
  Sur le plan du design, cela va dans le sens d'un design de l'information léché et d'une mise en page épurée.

L'ergonomie incitative est très importante en matière de design de fiche produit. L'interface doit guider l'utilisateur et le pousser à l'action. Ces marqueurs passent par le design des boutons, l'apparition de messages de guidages, les zones de stress... On parle de design persuasif.

Fiche produit et design de l'information

Le design. La simplicité...
Ok, mais comment maquetter fonctionnellement votre fiche produit ?
Le travail le plus important, dans la modélisation du design fonctionnel de la fiche produit, consiste à inventorier tous les contenus et tous les modules fonctionnels qui doivent figurer à l'écran :

• Inventaire des fonctionnalités de la fiche produit (exemple : sharing, choix des couleurs).
• Liste des modules interactifs riches de la fiche produit (exemple : système de FAQ avancé, modules de consultation de médias...).
• Enumération des contenus de la fiche produit.

La liste des fonctions et des contenus doit être considérée au travers du cycle d'achat :

• Contenus qui aident à préparer un achat.
• Contenus et fonctions déclenchant un achat.
• Contenus pour les visiteurs ayant achetés.

Tous les contenus et toutes les fonctionnalités peuvent être reportés au sein d'un tableau. Vous utilisez les lignes pour lister chaque contenu et chaque fonction de la fiche produit. Et vous vous appuyez sur les colonnes pour saisir les étapes du cycle d'achat, et la priorisation des informations.

Le design de l'information doit donner à voir une fiche produit bien rangée, propre, claire. Cela passe par une hiérarchisation de l'information. Par des priorisations des contenus. Ainsi, sur la base d'une séquence verticale, du haut vers le bas, et sur un modèle de pyramide inversée, vous allez déployer tous les modules au fur et à mesure.

Chaque module fonctionnel ou chaque contenu peut être considéré comme un tableau comme les exemples de fiche produit le reflètent bien. Ces tableaux peuvent reposer sur un système de navigation interne par ancre. Une fiche produit peut parfois être un vrai site dans le site !

Démarche pour concevoir une fiche produit

Centrez votre travail de conception sur la performance et l'élégance du rendu (less is more). Il ne faut pas vouloir tout dire en haut de la page comme le font trop de site ecommerce. Il convient de considérer les objectifs de transformation à chaque étape de la modélisation des wireframes.
La conception ux de fiche produit est un travail complet, impliquant plusieurs spécialités : architecture de l'information, design d'information, design d'interaction, ergonomie, experience design et design émotionnel au sens plus large.

Concevoir une fiche produit peut suivre le cycle de conception suivant :

• Etude des indicateurs web analytics quantitatifs.
• Recherche utilisateur : identification des profils d'utilisateurs.
• Etudes utilisateurs complémentaires : enquête terrain.
• Approche par personas : définition des profils d'utilisateurs. Cycle d'achat. Affinité à la marque.
• Parcours d'utilisation hors site (provenance).
• Parcours d'utilisation dans le site.
• Analyse des données du catalogue.
• Conception fonctionnelle de la descente du catalogue.
• Focus fonctionnel sur la fiche produit.
• Listing des contenus.
• Listing des fonctionnalités.
• Listing des médias à disposition.
• Reporting de tous les contenus dans un tableau. Priorisation.
• Architecture de l'information de la fiche produit.
• Zoning général de la fiche produit.
• Maquettage fonctionnel. Partie haute de la fiche produit.
• Maquettage fonctionnel. Partie basse de la fiche produit. Principes des tableaux.
• Conception détaillée des tableaux.
• Spécifications fonctionnelles si nécessaires.
• Projection responsive.
• Prototypage. Test. Amélioration continue.

Si vous recherchez des exemples de conception de fiche produit, veuillez jeter un oeil à la section galerie, il y a beaucoup de cas ecommerce intéressants : Auchan, Carrefour, Cidscount, Conforama, Orange, Pierre et Vacances, Alapage, Surcouf, Somfy, Sauter, Home and cook...

Résultats d’une fiche produit optimisée et conçue sur-mesure, générant une bonne expérience utilisateur :

• Augmentation des performances en matière de transformation.
• Augmentation du nombre de pages consultées (rebond produit).
• Augmentation du panier moyen.
• Attention et intérêt amélioré.
• Baisse du taux de rebond.
• Augmentation du partage et des contributions.

Travaux complémentaires à la conception de fiche produit

Comme nous l'avons évoqué, en matière de recherche utilisateur, le travail sur les profils d'utilisateurs - persona ainsi que sur leur parcours - parcours utilisateurs sont des moments clés du processus de conception.

Un inventaire fonctionnel permet de faire le point sur l'envergure de la fiche produit : inventaire fonctionnel. Ce sont des pages très denses.

Concevoir une fiche produit, c'est évidemment travailler autour des techniques de wireframing. Il faudra aussi se frotter à la rédaction des spécifications fonctionnelles... Sur le plan ecommerce, la conception ux de la fiche produit se rattache aux autres éléments du parcours utilisateur ecommerce :

• Conception du catalogue produit.
• Conception du processus du commande.
• Conception de l'espace client.

Dans tous les cas, l'analyse quantitative des performances web est un outil de pilotage incontournable pour optimiser la fiche produit et suivre les performances de la transformation.