Bref, j’ai passé une commande sur le web

Je suis allée sur le site où je voulais acheter le produit que je souhaitais.

J’ai cherché le produit dans le menu. Je l’ai trouvé. Il y avait écrit « Offre spéciale ». J’ai cliqué.

J’ai cherché l’offre spéciale. Je cherche encore. (Problème 1)

J’ai cliqué sur le bouton pour commander. On m’a demandé de créer un compte.

J’ai choisi une adresse e-mail avec un alias (moi+lesite@monmail.com) pour savoir d’où vient le spam si ce site revend mes données. Mon adresse e-mail a été acceptée.

On m’a demandé mes coordonnées de facturation. Le numéro de téléphone était facultatif. Je ne l’ai pas renseigné.

Je suis arrivée sur un autre environnement pour personnaliser ma commande. Pas d’en-tête de site, pas de pied de page. J’ai voulu retrouver la fiche détaillée du produit pour la revoir en parallèle. J’ai dû réécrire l’adresse du site dans un autre onglet et pour retrouver mon produit via le menu. (Problème 2)

J’avais une option à choisir pour pouvoir passer ma commande. Je n’en voulais pas. J’ai vu le bouton « Commander le produit seul ». Il était grisé, désactivé. J’ai choisi une option. Le bouton s’est dégrisé. J’ai cliqué. Je voyais toujours l’option à la page suivante. Je n’ai pas compris. Je suis revenue en arrière en me disant que, de toutes façons, ça faisait six mois que j’hésitais à prendre cette option, peut-être que c’était le moment. J’ai cliqué sur « Suivant » au lieu de « Commander le produit seul ». Quitte à avoir l’option, autant l’avoir pour de vrai. (Problème 3)

J’ai confirmé le produit que je voulais.

L’écran des options complémentaires s’est affiché. Il y en avait une pour garantir plus de vie privée. J’ai cliqué pour en savoir plus. Je n’ai pas compris : normalement, c’est inclus avec la première option que j’ai dû choisir. La vie privée, c’est important ; j’ai validé quand même.

À l’étape suivante, on m’a proposé le truc que fait l’option que je venais d’activer (ou alors j’ai rien compris). L’infobulle disait que c’était gratuit. Je n’ai pas compris. Je suis retournée en arrière dans les étapes. J’ai relu. Je n’ai toujours pas compris. J’étais pressée, je voulais mon produit immédiatement alors j’ai continué quand même avec l’option payante, dans le doute. Tant pis. Au pire, on avisera plus tard. (Problème 4)

On m’a demandé à nouveau mes coordonnées. Elles étaient pré-renseignées. J’ai validé.

J’ai eu un message d’erreur. Mon numéro de téléphone était obligatoire. (Problème 5)

J’ai cliqué sur le bouton qui ouvrait une popin (une fenêtre surgissante qui s’ouvre au sein de la page web) pour modifier ses coordonnées. J’ai saisi mon numéro de téléphone. J’ai encore eu une erreur. Mon adresse e-mail n’était pas valide : elle ne pouvait pas contenir de signe +. (Problème 6)

En nouvel onglet, je suis partie dans mon espace client, un autre environnement différent, pour trouver l’endroit où ajouter mon numéro de téléphone à mes coordonnées, en espérant ne pas avoir à modifier mon adresse e-mail. Il y avait un élément de menu pour modifier son adresse e-mail, un autre pour le mot de passe, un autre pour le profil. Je ne trouvais pas. J’ai fouillé. (Problème 7)

J’ai fini par trouver. J’ai ajouté mon numéro de téléphone. J’ai validé. J’ai été redirigée vers la page d’origine. Ça semblait correct.

Je suis retournée sur la page de commande. J’ai actualisé. Mon numéro de téléphone n’apparaissait toujours pas. Je me suis déconnectée. J’ai vidé mes cookies. J’ai vidé mon cache. Je me suis reconnectée. J’ai refait la commande. Mon numéro de téléphone n’apparaissait toujours pas. (Problème 8)

Finalement, je l’ai ajouté via la popin et j’ai retiré l’alias de mon adresse e-mail. J’ai encore eu un message d’erreur : numéro de téléphone invalide. Je n’ai pas compris. J’ai regardé le champ de deuxième numéro de téléphone : le placeholder (le texte écrit en gris dans le champ) indiquait « +xx (0)x xx xx xx xx ». J’ai essayé d’ajouter le + devant mon numéro, le curseur est parti à la fin du champ. Je n’ai encore pas compris. (Problème 9) J’ai effacé mon numéro. J’ai écrit « +33 (0)x xx xx xx xx » (les « x » étaient les vrais chiffres, bien sûr). J’ai validé. Enfin, c’était bon ! Mais je n’ai plus d’alias dans mon adresse e-mail…

J’ai validé ma commande. Je suis arrivée dans mon espace client pour payer. Il y avait de quoi se perdre.

Il y avait trois gros carrés : carte bancaire, PayPal, virement. Le site n’est pas français, alors pour éviter les frais bancaires (je me suis déjà faite avoir !), j’ai cliqué sur « PayPal ». Ça m’a affiché un contenu d’onglet où il n’y a rien pour payer avec PayPal. Il était juste écrit que pour un renouvellement automatique, mieux valait payer par carte bancaire. (Problème 10) Pas trop le choix… J’ai cliqué sur « Carte bancaire ». Ça m’a affiché un autre contenu d’onglet pour mettre les informations de ma carte. Dans le doute, je voulais voir le contenu de l’onglet pour le paiement par virement. J’ai cliqué sur le bouton « Virement ». Ça m’a ouvert une popin (!) qui me demandait si j’étais sûre. J’ai pensé que ça allait m’ouvrir un autre contenu d’onglet. J’ai validé.

Je suis arrivée sur une page qui me disait que ma commande était confirmée et qu’il fallait que j’envoie mon virement à telles coordonnées bancaires au lieu d’avoir un nouveau contenu d’onglet qui s’affiche. (Problème 11) J’étais pressée d’avoir mon produit mais je l’aurais donc sous 10 jours. Ça m’a soûlée. J’ai regardé les coordonnées bancaires : elles sont en France. J’aurais pu payer par carte bancaire sans problème. Il fallait le savoir ! (Problème 12)

J’ai cherché un moyen de revenir en arrière pour changer de moyen de paiement. Pas de bouton retour. J’ai hésité à cliquer sur le bouton « Précédent » de mon navigateur mais ça aurait pu m’entraîner dans un nouveau bug en relançant une requête passée. Je ne l’ai pas fait. (Problème 13)

Je suis allée sur le site de ma banque. J’ai fait le virement. (Je vous passe les détails du site de ma banque car ça pourrait faire un article dans l’article.)

Je suis revenue sur le site d’achat. J’ai cliqué sur le bouton « Voir ma commande ». J’ai vu que la possibilité de payer par carte bancaire existait toujours. J’étais bien contente de le savoir alors que je venais de faire un virement.

Je me suis rappelée de l’histoire du numéro de téléphone dont l’ajout n’avait visiblement pas été pris en compte. Je suis retournée dans mon profil pour revoir mes coordonnées. J’ai vu que mon numéro de téléphone n’avait pas été enregistré. À gauche du champ, j’ai vu un drapeau qui correspondait au pays du site. Mon numéro de téléphone ne s’était donc pas enregistré parce qu’il ne correspondait pas à ce pays ! J’ai choisi le bon drapeau. J’ai saisi mon numéro de téléphone, sans le « +33 » et sans le « (0) ». Ce n’était pas le même processus que dans l’autre champ où je l’avais saisi pendant ma commande. (Problème 14 (ou alors on l’inclut dans le 8))

Bref, j’ai passé une commande sur un site web. Je ne suis pas prête de l’avoir, et le site a mon adresse e-mail enregistrée quelque part avec alias et ailleurs sans alias.

Ce qu’il faut retenir de cette expérience d’achat déplorable

Voilà, j’ai vécu une expérience d’achat déplorable. Je ne dirais pas de quel site il s’agit car je vis des bribes plus ou moins grandes de cette expérience en permanence sur le web, voire même avec des problèmes beaucoup plus embêtants. Je sais que je ne suis pas la seule. Je suis agacée ; d’autant plus qu’il existe des référentiels qui, si on les suivait, permettraient d’éviter un grand nombre de ces problèmes qui sont, pour beaucoup connus, depuis fort fort longtemps.

Je parle du RGAA (Référentiel Général d’Amélioration de l’Accessibilité), qui s’appuie sur la norme internationale WCAG (Web Content Accessibility Guidelines) écrite par le W3C (World Wide Web Consortium). Celui-ci vient d’être mis à jour, en 2019, vers une version 4 après la mise à jour 2.1 des WCAG.

Je parle aussi des bonnes pratiques de qualité web d’Opquast qui sont d’ailleurs en cours de mise à jour vers une version 4.

Par ailleurs, on nous parle sans cesse d’expérience utilisateur / utilisatrice, aussi nommée par son petit nom : UX. Pourtant, si on en est là aujourd’hui, c’est qu’on ne prend justement pas suffisamment en compte l’expérience des utilisateurs et utilisatrices ; que ce soit sur des sites e-commerce ou non.

Alors voilà ci-dessous ce que je retiens de tout ça.

Pour les personnes qui travaillent à la réalisation de sites web

1. Soyons explicites :
   1. Expliquons ce que cette option apporte par rapport à ce qui existe déjà gratuitement ;
   2. Annonçons si le paiement par carte bancaire sur ce site étranger par rapport à l’utilisateur ou l’utilisatrice, risque d’occasionner des frais supplémentaires auprès de sa banque. Si le paiement part directement sur un compte bancaire dans le même pays, alors, non, il n’y en aura pas sinon, c’est fort probable qu’il y en ait ;
   3. Si un champ contient une erreur, affichons un message d’erreur et de façon explicite ;
   4. Si une modification a bien été prise en compte, affichons un message de confirmation.
2. Soyons cohérents et cohérentes :
   1. Si dans un processus, un champ devient obligatoire à une étape ultérieure, rendons-le obligatoire dès le début. C’est beaucoup moins fatiguant et les utilisateurs et utilisatrices se poseront moins de questions quand ce champ sera à nouveau affiché. Dans mon histoire, ça m’aurait évité un paquet de problèmes qui sont survenus ensuite ;
   2. Si nous autorisons quelque part qu’une adresse e-mail puisse s’écrire avec un alias, autorisons-le partout (oui, même sur les vieux environnements, faisons la modification) ;
   3. Si nous annonçons une offre spéciale quelque part, assurons-nous qu’elle soit expliquée en détails dans la fiche produit. Si elle n’est plus valable, supprimons la mention partout. À moins que ce ne soit un mensonge et là, on ne peut plus rien pour vous et votre manque d’éthique ;
   4. Même si le site est sur plusieurs environnements différents parce que la mise à jour est longue et coûteuse, assurons-nous d’avoir, a minima, toujours l’en-tête et le pied de page sur tous les environnements pour ne pas perdre les utilisateurs et utilisatrices.
3. Soyons prévisibles :
   1. Si nous utilisons un système d’onglets, faisons en sorte que tous les boutons visuellement attachés à ce système ouvrent bien tous des onglets. Sinon, les éléments qui ne le font pas doivent en être visuellement séparés (à nous de juger quel est la solution la plus pertinente selon les cas) ;
   2. Lorsque que nous attendons un format précis, écrivons-le dans le libellé bien visible au-dessus du champ et non pas dans le placeholder qui disparaît dès qu’on commence à saisir et qui n’est pas assez contrasté pour qu’on le voit correctement ;
   3. Permettons aux utilisateurs et utilisatrices de revenir en arrière facilement lorsque c’est effectivement possible. Un bouton « Retour » bien visible peut complètement changer la donne dans une expérience d’achat :
      1. On sait qu’on peut revenir en arrière ;
      2. On sait comment le faire.
4. Testons et soyons en mesure de recevoir les retours des utilisateurs et utilisatrices, d’y répondre et de corriger les problèmes remontés.

Pour les acheteurs et acheteuses…

… ou encore pour toutes les personnes qui ont des démarches à réaliser sur n’importe quel site. Finalement, les sites e-commerce ne sont pas les seuls concernés par tous ces problèmes.

1. Évitons d’acheter ou de se lancer dans des démarches sur le web, même si c’est pressé, le soir après le travail ; surtout quand on a des cernes sous les yeux. Le matin, si on est en forme ou le midi si on a le temps, ça peut être mieux pour réussir à comprendre des sites peu clairs ;
2. Ce n’est pas de notre faute si nous avons galéré à acheter un produit sur le web ou à réaliser une action quelle qu’elle soit. Le site est probablement mal conçu, mal testé. Et même très souvent, il n’est pas accessible aux personnes handicapées voire pas utilisable par les personnes handicapées ou par les personnes qui n’ont pas l’habitude d’utiliser Internet ou un ordinateur.

Je rappelle ici que WebAIM a publié, en février 2019, une analyse d’un million de pages d’accueil qui montre bien l’état d’inaccessibilité dans lequel le web se trouve actuellement. Cette analyse est à lire dans l’article « The WebAIM Million », en anglais.

Vous pouvez aussi lire le Livre blanc contre l’illectronisme publié en juin 2019 : PDF téléchargeable sur le site du Syndicat de la Presse Sociale.