E-commerce, les bonnes pratiques UX (2/3)

Publié initialement le 09.09.2022, pour Refine Agency

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é

Un point de repère dans l’histoire: c’est Jakob Nielsen qui dans les années 90 établit une liste de 10 principes d’utilisabilité (usability en anglais). Nous sommes plutôt loin du web à ce moment là, mais l’utilisabilité définie 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 aujourd’hui, ces 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 précédente 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 les autres phases du design, tel que la phase de 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 c’est l’objet avec lequel nous faisons les courses et sur le web il rempli la même fonction.

Sur la page produit, il est donc logique d’employer un même mot pour désigner ce concept.

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 banni 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

“A quelques pixel” 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 à 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 c’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 lui aller à sa taille habituelle? c’est là que vous arrivez avec l’assistance. Personne ne lit un guide des tailles jusqu’à ce qu’il en ai 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.

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éussi tels que 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. (associé un vêtements avec des chaussures pour visualiser une tenue par exemple)
  • Eléments de réassurance – Information sur la livraison, les délai de retour, la présence du SAV etc. tout est bon a rassurer l’utilisateur.

Le prochain épisode sera consacré à la page du panier.

Laura Croix, UX Designer