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é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
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 :
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.
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. […]