Ep. 2 La Page Produit
Nouvel épisode dans notre série d’articles dédiés aux sites e-commerce du point de vue de l’expérience utilisateur (client en devenir 😉). Le premier article était consacré à la page catalogue.
Pour le deuxième épisode nous allons nous pencher sur une page décisive dans le parcours utilisateur : la page produit.
Vous cherchez à convertir ? Vous souhaitez plus que tout convaincre vos utilisateurs d’acheter vos produits ou services ? Le parcours utilisateur ne doit pas ressembler à un parcours du combattant, au risque de le voir fuir votre site.
Il ne sera pas question ici de marketing, de chiffres, de performances commerciales mais de répondre aux attentes (en partie du moins) de vos utilisateurs en appliquant des principes d’utilisabilité.
Les principes d’utilisabilité
Fil rouge de notre série d’articles, les principes d’utilisabilité définissent les interactions homme-machine : la capacité de l’objet à être facilement utilisé par une personne donnée pour réaliser la tâche pour laquelle il a été conçu.
Transposé à l’UX design, les 10 principes - appelés heuristiques de Nielsen - sont toujours un point de départ indispensable à garder en tête lors de la conception d’une interface, d’une expérience utilisateur !
Listés intégralement dans notre infographie, nous allons illustrer certains de ces principes par des exemples concrets sur une page catalogue d’un site e-commerce.
Petit disclaimer ! Ces principes d’utilisabilité ne se substituent en aucun cas aux autres principes d’ergonomie, d’accessibilité ou d'autres phases du design, telle que la recherche utilisateurs.
3 principes heuristiques appliqués sur une page produit
Les numéros utilisés reprennent les principes listés dans notre infographie.
Principe heuristique n°2 : Modèle Mental
“Le système correspond au modèle mental de l’utilisateur”
L’interface doit rappeler à l’utilisateur des concepts, un lexique que l’utilisateur connait déjà. L’exemple souvent cité est “la notion de panier”. Dans le monde réel, le panier est l’objet avec lequel nous faisons les courses. Sur le web, il remplit la même fonction.
Sur la page produit, il est donc logique d’employer un même mot pour désigner ce concept.
Le bouton “ajouter au panier” de votre page produit
Principe heuristique n°9 : Réparation des erreurs
“Faciliter l’identification et la gestion des erreurs”
Lorsqu’une erreur survient dans la navigation, l’utilisateur doit être guidé: c’est l’aider à en prendre conscience et réparer rapidement. Il n’est pas responsable ou “mauvais utilisateur” (l’ux bannit ce terme !) c’est au système de s’adapter et prendre en compte 3 critères :
- visibilité : l’utilisateur remarque son erreur rapidement
- compréhension : expliciter la source de l’erreur (pas avec des codes! “erreur 298603")
- aider à résoudre le problème
“À quelques pixels” de l’ajout au panier, il serait dommage que votre utilisateur, frustré, par une erreur quitte le site !
Dans notre exemple, le système rappelle à l’utilisateur de sélectionner la taille de son article avant de cliquer sur "ajouter au panier".
Un message explique clairement de sélectionner la taille avant de l’ajouter au panier.
Principe heuristique n°10 : l’aide en cas de besoin
“L’utilisateur peut obtenir de l’aide et accéder à une documentation”
Une interface doit permettre à l’utilisateur d’accéder immédiatement à de l’aide s’il en a besoin :
Info bulle discrète, rubrique plus globale facile d’accès dans la navigation, toute forme d’assistance doit être pensée en cas de doute de l’utilisateur.
Si jamais nous n’avons pas encore assez insisté 😉, votre page produit est l’étape pour convaincre l’utilisateur d’ajouter le produit au panier. Vos visuels sont soignés, les informations de prix, de stock, etc. sont présents mais votre utilisateur voudrait bien savoir si cette chemise va être à sa taille ? C’est là que vous arrivez avec l’assistance. Personne ne lit un guide des tailles jusqu’à ce qu’il en ait besoin !
L’accès au guide des tailles se trouve juste en dessous de celles-ci chez Asphalte.
Conclusion et petit bonus 🎉
Nous venons de découvrir 3 nouvelles heuristiques de Nielsen en parcourant des pages produits. Apparentés souvent à du bon sens, ces principes d’utilisabilité sont encore régulièrement négligés. Un petit tour sur le web nous le confirme en quelques clics !
Les heuristiques de Nielsen sont une première piste solide pour cibler les problèmes et les corriger. Cette solution d’évaluation, certes pertinente, ne doit pas rester la solution ultime.
Chez Refine Agency, nous accompagnons de nombreuses entreprises du e-commerce dans la création et la refonte de leurs interfaces. Cette première phase d’évaluation est pleinement intégrée lors de la phase d’audit pour engager avec nos clients la bonne prise en compte de leurs besoins et la connaissance de leurs utilisateurs.
Pour terminer ce deuxième épisode consacré à la page produit d’un site e-commerce, voici une liste non-exhaustive d’éléments pertinents à l’expérience utilisateurs :
Au delà des éléments de bases indéniables d’une fiche produits réussie comme le descriptif, le prix, les images etc., il est pertinent de proposer aussi des éléments tels que:
-
Avis clients - Conforter l’utilisateur dans son choix avec la présence des avis clients : les bons et les moins bons, notés, avec des témoignage textuels. C’est ce qu’on appelle la preuve sociale.
-
Cross-selling - Recommander des produits connexes au produit que l’utilisateur est en train de consulter. Sans être du “forcing”, le cross-selling personnalisé donne du contexte au produit. (associer un vêtement avec des chaussures pour visualiser une tenue par exemple).
- Eléments de réassurance - Information sur la livraison, les délais de retour, la présence du SAV etc., tout est bon pour rassurer l’utilisateur.
Cette première approche des principes d’utilisabilité vous interroge sur l’approche UX de votre site? N’hésitez pas à contacter l’équipe d’experts Refine pour toute demande d’information.
Le prochain épisode sera consacré à la page du panier.
Laura Croix, UX Designer.
