Ergonomie : le moindre détail compte toujours

C'est joli les bords arrondis, mais c'est traître...
C'est joli les bords arrondis, mais c'est traître...

Faire tester un site par de « vrais » utilisateurs réserve toujours des surprises et se révèle toujours d’une grande utilité. La semaine dernière, ma mère, profitant de ma présence d’expert, me demanda de l’aider à passer la commande d’une housse de canapé sur le site de Becquet.fr, un vadiste bien connu du Nord. Flatté et content de l’intérêt que ma mère portait pour une fois à mon métier, j’acceptai donc de l’aider à faire pour la première fois de sa vie un achat en ligne.

Je précise que ma mère n’est pas une novice totale de l’Internet. Elle sait se servir des mails, faire une recherche sur Google, mais son niveau d’expertise s’arrête à peu près là. Autrement dit, je peux le dire, ça n’allait pas être de la tarte et, à la vérité, si je n’avais pas été derrière elle à lui donner des indications, elle n’aurait pas réussi à finaliser sa commande.

Une chose m’a particulièrement surpris. Bien sûr je m’attendais à ce qu’elle ait du mal à s’y retrouver dans la complexité du formulaire de commande, mais un détail m’a carrément étonné. Et ce détail, ce défaut d’usabilité, je n’aurais jamais pu l’imaginer si je n’avais pas vu ma mère en être gênée à plusieurs reprises. Que vous le croyez ou non, il s’agit des bords arrondis des champs du formulaire.

Ces petits bords arrondis sont d’un très jolis effet esthétique, mais ils ont un défaut : ce sont des images. Et curieusement, ma mère, en voulant bien faire, ne pouvait s’empêcher de cliquer exactement sur ces images pour obtenir le focus sur les champs (c’est à dire pour activer le champ et pouvoir le remplir). Dans son désir de bien faire, donc, elle essayait systématiquement de cliquer exactement au début du champ pour pouvoir « démarrer au bon endroit », mais malheureusement, le début de ce champ n’était autre que le bord arrondi, donc l’image, donc une zone non cliquable. Et à plusieurs reprises, je la vis commencer à saisir des informations sans avoir le focus sur le champ. Une fois, deux fois, puis trois fois, jusqu’à provoquer un certain énervement contre ce formulaire « qui ne marchait pas ».

C’est tout bête, mais je suis certain qu’aucun expert n’aurait pu voir ce « défaut » (à moins de l’avoir déjà rencontré). Bien sûr, je n’imagine pas qu’il empêche une personne d’aller jusqu’au bout de sa commande, mais cumulé à d’autres problèmes, il aurait pu finir par provoquer un échec.

Cela montre bien que faire tester son site par de vrais utilisateurs reste toujours la meilleure solution pour détecter les défauts d’utilisabilité d’un site et que jamais aucun expert, malgré son regard acéré, ne pourra remplacer efficacement les tests.

Et vous, avez-vous fait tester votre site récemment ?

25 commentaires

  1. Hello,

    En effet, c’est au pied du mur qu’on voit le mieux le mur, ^^ ! Perso j’aurais jamais pensé à un souci comme ça, donc c’est bon à savoir.
    Donc au final soit virer les bouts arrondis, soit intégrer l’image du bout arrondi dans un label for du input pour qu’au click sur l’image ça donne le focus au input (ca permettrai d’éviter de le faire en javascript, histoire d’être plus accessible).

    C’est à nous de nous adapter au comportement utilisateur et à leurs réflexes, encore faut il les connaitre et c’est souvent là le souci TT_TT

  2. Remarque très intéressante, car il est vrai que les comportements des utilisateurs sont souvent étonnant pour des experts.

    Perso, j’ai rencontrer d’autres idées comme le fait que les utilisateurs ne connaissent pas le fait que le logo doit toujours permettre le retour à la page d’accueil, donc on est obligé de rajouter un lien nommé Accueil.

    Où encore, penser à mettre un bouton ou lien de retour à la page précédente, car les visiteurs ne pensent que très rarement à la flèche retour du navigateur et encore moins au raccourcis clavier correspondant.

    Toutes ces petites choses ne peuvent apparaitre que lors d’un test grandeur nature.

    Je conseil vivement au sites de eCommerce de contacter régulièrement certains de leurs clients pour discuter de ce genre de points de détails qui peuvent provoquer une annulation de commande.

  3. @Loic : le diable se cache toujours dans les détails. Outre ce problème, il y en avait d’autres que je n’avais pas cités. L’important à retenir, c’est que les utilisateurs font toujours ce à quoi vous ne vous attendez pas. Et c’est exactement l’intérêt des tests utilisateurs. Découvrir ce que même l’expert ne peut découvrir.

  4. Le test utilisateur « idiot proof », c’est le B.A. BA : le problème de experts, justement, c’est qu’il le sont et que les problèmes de l’utilisateur de base, celui qui sait répondre à un mail et chercher « à quelle heure c’est, des Chiffres et des Lettres », il n’en ont pas idée…

    J’avoue que moi non plus je n’aurais pas imaginé que ta maman puisse bloquer là dessus, j’aurais sûrement dit « cool, super jolis les champs de formulaire », donc je ne suis pas là pour donner des leçons, mais il est clair que le « test consommateurs » est absolument obligatoire avant la mise en ligne d’un site. Bien souvent le webmarchand est dans les starting blocs et les tests, bof… il considère que c’est juste l’affaire de passer deux ou trois commandes : « je veux mon site demain ! » et c’est bien souvent une cause de soucis par la suite car ce sont les clients et non les testeurs qui essuient les plâtres.

    Dans ce cas précis, il eut été judicieux, peut-être, de pré-remplir les champ avec des données « votre nom », « votre prénom », pour que l’utilisateur clique dessus et non à côté, sur l’image

  5. En ce qui me concerne, je fais toujours tester mes sites par ma mère (débutante et réfractaire aux achats en ligne)et mon frère (Geek de base devant l’éternel).
    Les résultats obtenus par des utilisateurs chevronnés sont aussi intéressants que ceux des débutants, il ont par exemple tellement l’habitude de trouver le panier en haut à droite que leur main se déplace presque naturellement pour pointer dessus. Si il n’y a pas de panier ? Stupeur !. Il faut donc résoudre l’équation impossible : satisfaire tout le monde… C’est notre « Graal » d’e-commerçant…

  6. on a tous les mêmes réflexes 😉

    Bien entendu les tests des utilisateurs chevronnés sont importants, mais pour il est évident qu’ils sont faits par les concepteurs de la boutique, par le webmarchand (s’il est lui même chevronné) et par son propre réseau. C’est ensuite qu’on jette le site en pâture aux « débutants »

  7. Les bords arrondis dans iTunes Mac provoquent le même problème : il y a une zone morte de 3px sur tout le tour du champ de recherche.

    Et c’est pire encore dans http://www.google.com/contacts/, le de recherche n’a pas de bords, alors que le div autour est stylé comme un input. La zone morte fait 60px de large, soit 20% du div !

  8. Bien vu Cap’tain ! Je taille mes champs à la serpette de ce pas. A l’occasion, je te prêterai ma mère aussi, y a pas mal d’enseignement à en tirer. C’est mon maître étalon internaute depuis toujours !!

  9. En tous cas, ils sont réactifs chez Becquet car en voulant aller voir de mes yeux vus le formulaire incriminé, j’arrive sur un formulaire à bords carrés classiques … Bravo les gars, trop forts !

  10. Quand j’ai fait tester mon site par ma mère elle m’a fait rajouter un lien « Accès boutique » sur la page d’accueil car elle trouvait que c’était pas évident de comprendre qu’il s’agissait d’une boutique quand on arrivait.

    Et là j’ai eu des sueurs froides en me disant « Argh… ça promet, si tous les utilisateurs de plus de 50 ans qui tombent sur mon site se disent la même chose, je suis plutôt mal barrée pour faire des ventes !!! »

    Bon cela dit depuis j’en ai fait (des ventes), qui sait c’est peut-être justement grâce à ce lien « Accès boutique » qui trône désormais sur ma page d’accueil 🙂

  11. Je sais pas si vous êtes de mon avis ou pas, mais les input de formulaires à bords arrondis, moyen moyen !

    C’est un peu trop complexe à l’oeil, et j’ai mis quelques secondes à convaincre les miens que c’était bien un formulaire… 🙂

  12. Bien d’accord avec le message sur les tests, mais le raccourci des champs arrondis = jolis mais défectueux, tu te trompes de problème.

    C’est, comme le mentionne NoX ci-dessus, un soucis d’intégration.
    La frustration vécue par ta mère ne vient pas de la décision esthétique d’avoir arrondi les coins, mais du manque de rigueur de l’intégrateur qui a mis le design en application.

    Pour l’avoir pratiquée, l’intégration de formulaires à champs arrondis sans zone morte prend plus de temps – surtout à cause de nos chers amis IE6&IE7 – mais elle est tout à fait possible et compatible avec une utilisation fluide.

    Donc merci pour la piqûre de rappel sur les tests, mais c’est dommage que suite à cet article, Sylvia ait décidé de remettre ses champs au carré en suivant un conseil qui s’avère faussé même si bien intentionné.

  13. @Tanguy : C’est vrai relativement beaucoup d’utilisateurs ne comprennent pas qu’en cliquant sur le logo, on peut revenir à la page d’accueil ou que le fil d’ariane sert à s’y retrouver…
    Au début on me disait souvent « ca sert à rien d’ajouter un lien « accueil ».. mais force est de constater que c’est très utile ! ^^

  14. Je n’aurais jamais pu penser à ce détail. Le problème avec les tests, c’est que tout le monde est d’accord pour dire qu’il faut en faire, mais que les réaliser est une autre paire de manche. On a rarement de panels de personnes sous la main et faire une véritable batterie de tests coûte cher en temps et en argent.
    Merci de ce retour d’expérience !

Laisser un commentaire

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

Merci de taper les caractères de l'image Captcha dans le champ

Merci de saisir ces caractères dans le champ
ci-dessous afin de valider votre commentaire.

Capitaine

Article de : Capitaine

Olivier Sauvage est le fondateur de Capitaine-commerce.com et de Wexperience, agence spécialisée en expérience utilisateur digitale.