Petite erreur : LaRedoute et la gestion des erreurs

LaRedoute a refondu quelques pages de son site, et le résultat est très sympathique. Ce qui nous intéresse ici est l’utilisabilité du contrôle d’erreurs de la fiche produit. Il permet d’informer d’avertir d’un manque plutôt que de signaler une erreur. Alors est-ce que ce système respect les règles de l’ergonomie ? réponse ci-dessous.

Ce contrôle d’erreur consiste donc à indiquer à l’utilisateur qu’il n’a pas sélectionné sa taille  avant d’ajouter le produit dans le panier grâce à une bulle d’information. L’effet est positif pour l’utilisateur qui se sent guidé dans le site, au lieu d’un rappel à l’ordre. Voici une copie d’écran de cette solution :

 

Prévenir les erreurs sur LaRedoute

Prévention des erreurs avant l’ajout au panier

La prévention.

L’utilisateur est  informé qu’il a oublié un paramètre, mais pourquoi ne pas lui montrer où se situe ce paramètre ? Entourer avec une couleur le choix des tailles, ou mettre la zone en surbrillance éviterai de chercher à l’utilisateur.

Où sont mes lunettes ?

La gestion des couleurs n’est pas idéale sur cette bulle d’information. La couleur du message par rapport au fond de la bulle est bonne, mais pas parfait. Voici les résultats du test W3C :

Résultat du test W3C sur les couleurs de la bulle d'information LaRedoute

Résultat du test W3C sur les couleurs de la bulle d’information

 

Par contre cette bulle d’information n’est pas visible par rapport au fond de la fiche produit, et peut vite devenir invisible pour de nombreux utilisateurs. ( Écran mal calibré, vue qui baisse, rapidité d’action etc… ) Un utilisateur qui ne comprend pas pourquoi il ne peut pas ajouter son futur achat au panier va vite perdre patience, et quitter le site.

Voici le résultat du test W3C sur la couleur de la bulle d’information par rapport au fond de la fiche produit :

Gestion visibilité de la bulle d'information sur LaRedoute par Fauveaux Mathieu

Différence contraste/luminosité entre le fond de la fiche produit et la couleur de la bulle d’information

 

Le résultat est parlant, la bulle est presque invisible. Heureusement un simple changement de couleur peut résoudre le problème.

Combien de personnes ont quittés ce site en pensant que le site avait un « bug », ne comprenait pas qu’il puisse y avoir une erreur etc… Un élément très intéressant pour guider l’utilisateur peut au final devenir négatif pour lui, et donc votre site. Prenez le temps de vérifier le taux de contraste / luminosité de vos blocs, et de vos écritures.

Partager sur facebook
Facebook
Partager sur pocket
Pocket
Partager sur twitter
Twitter
Partager sur linkedin
LinkedIn

Articles en relation :

Newsletter

Recevez les 10 meilleures actualités autour du CRO tous les mois: articles, process, outils, conférences, ...

Vous voulez savoir où et comment démarrer l'optimisation de votre site ?

Je peux détecter vos opportunités d'optimisation et vous délivrer les recommandations à appliquer, mais êtes-vous prêt ?

9 Comments

PUShAUNE · 10 mai 2012 at 8 h 05 min

Pour moi, la bulle n’est tout simplement pas a bon endroit.
On à l’impression que l’erreur vient du bouton ajout au panier, et non pas de la taille.

La loi de la proximité n’est pas respectée -_-

admin · 10 mai 2012 at 10 h 24 min

Merci pour cette remarque intéressante PUShAUNE. C’est vrai qu’en plaçant la bulle d’information au plus près du paramètre manquant, l’utilisateur ne perd pas de temps à chercher l’erreur. Il y aura toujours ce problème de choix des couleurs par contre.

LawReFAnaeway · 3 juin 2012 at 8 h 32 min

pourquoi pas:)

LawReFAnaeway · 3 juin 2012 at 8 h 32 min

pourquoi pas:)

Sébastien · 10 août 2012 at 13 h 44 min

Très bon analyse de l’impact de la couleur. Je suis d’accord avec PUShAUNE sur le besoin de respecter la loi de proximité.

Analyse : Tunnel de commande de la Fnac « Fauveaux Mathieu · 21 juin 2012 at 15 h 46 min

[…] La gestion des erreurs est très importante, un oubli peut vite arriver. Ici un contrôle se fait avant l’envoi du formulaire ce qui est plutôt bien. Le problème c’est qu’avec un écran avec une petite résolution comme le miens ( 1366px X 768px ), je ne vois pas les erreurs en haut du formulaire. J’ai cliquer 3 ou 4 fois sur le bouton, et rien ne se passe… prévoyez toujours vos messages d’erreurs pour tous types d’écrans, avec un message au plus proche de l’erreur. […]

Analyse : Tunnel de commande de la Fnac « Fauveaux Mathieu · 21 juin 2012 at 15 h 46 min

[…] La gestion des erreurs est très importante, un oubli peut vite arriver. Ici un contrôle se fait avant l’envoi du formulaire ce qui est plutôt bien. Le problème c’est qu’avec un écran avec une petite résolution comme le miens ( 1366px X 768px ), je ne vois pas les erreurs en haut du formulaire. J’ai cliquer 3 ou 4 fois sur le bouton, et rien ne se passe… prévoyez toujours vos messages d’erreurs pour tous types d’écrans, avec un message au plus proche de l’erreur. […]

Optimiser la conversion de votre tunnel de commande : Fnac.com · 8 août 2012 at 22 h 09 min

[…] La gestion des erreurs est très importante sur un formulaire, l’utilisateur peut vite oublier de remplir un champ, ou faire une erreur de saisie. Guidez-le au maximum dans vos messages avec des exemples, écrits en rouge, et surtout placez ce message au plus proche de l’erreur. […]

Optimiser la conversion de votre tunnel de commande : Fnac.com · 8 août 2012 at 22 h 09 min

[…] La gestion des erreurs est très importante sur un formulaire, l’utilisateur peut vite oublier de remplir un champ, ou faire une erreur de saisie. Guidez-le au maximum dans vos messages avec des exemples, écrits en rouge, et surtout placez ce message au plus proche de l’erreur. […]

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.