UX fail #1

Où mes pérégrinations web en tant qu’utilisateur presque lambda

Ne me demandez pas pourquoi mais je paie mes factures d’énergie (gaz et électricité) par carte chaque mois. Pas de virement automatique, essentiellement pour le plaisir (je l’avoue) de payer en retard Engie chaque mois. Un petit plaisir pour compenser une erreur d’Engie, l’hiver dernier, qui m’avait purement et simplement coupé l’accès au gaz suite à “mauvaise communication entre nos services”… On s’amuse comme on peut.

Dimanche soir, je tente donc de régler la facture en attente. Alors même que je n’attendais aucune rétribution spécifique à cette action, Engie a su me distraire lors de la saisie de mes données de paiement et transformer un banal acte d’achat, répétitif, en cet article medium. Merci à eux, donc.

Première réaction en tant qu’utilisateur lambda. J’ai un intitulé “Numéro de carte” à ma disposition au dessus du champs principal. Allons y

Le numéro de carte saisie est évidemment un numéro dédié aux tests. N’essayez pas de vous offrir vos prochaines vacances à Noirmoutier avec, vous risqueriez d’être déçu.

Avant d’aller plus loin, un rappel qui semble s’imposer sur le concept d’affordance: “capacité d’un objet à suggérer sa propre utilisation”. Ce champs sera probablement interprété comme étant le champs de saisie principal par l’utilisateur. Or comme on le voit dans l’exemple, la saisie est perdue lors du changement de champs.

Voilà ce qui est réellement attendu pour pouvoir procéder au paiement: il faut renseigner les 4 champs afin que le principal agrège les données saisies.

En tant qu’utilisateur j’étais déjà confus, en tant qu’UX Designer la confusion laisse place à l’interrogation: est-ce vraiment le comportement usuel ? Je n’arrive pas à croire qu’un formulaire de paiement ait pu être conçu, testé, recetté et mis en production en l’état. Surtout lorsque l’on compare le desktop et le mobile:

Mobile First ? C’est la porte à côté.

Ce premier champs au positionnement erratique pose évidemment problème en desktop et mobile. Mais son comportement pourra être interpreté par certains utilisateurs en desktop. En mobile en revanche ce sera bien plus difficile surtout avec un clavier actif qui, dans certains cas, masquera les 4 champs dédiés à la saisie du numéro de carte.

L’exemple, si il en fallait un, de l’importance des tests utilisateurs et de la QA même sur des sujets basiques avant mise en production. Est-ce que cette page fera l’objet d’amélioration ? Rendez-vous en juin.

Ps: une pensée saugrenue m’a traversé l’esprit avant de rédiger cet article. Et si Engie avait volontairement crashé ce formulaire pour faire en sorte que ses clients récalcitrants activent le prélèvement automatique ?

C’est possible mais l’absence du numéro d’assistance sur cette page me laisse penser que ce n’est pas le cas.