Expérience utilisateur : little big mistakes, les petites erreurs qui agacent (Lastminute, Carrefour, EDF)

Petite compilation de bugs, d’oublis et de mesquineries glanés sur l’internet ces derniers jours.

• Lastminute : les cases invisibles

Je lance une recherche sur le site de Lastminute. Après avoir patienté quelques secondes, je suis redirigé sur cette page d’erreur :

Little big mistakes : Lastminute, cases invisibles

Le message indique : « Veuillez relancer une recherche en cochant l’option dates flexibles ». Très bien, mais où puis-je trouver cette case ? Plus loin : « Veuillez aussi ne pas cocher la case vols directs ». Euh… Même question ? J’ai jeté un œil aux combo box à tout hasard, je n’y ai rien trouvé.

J’en profite pour relever une erreur que je croise fréquemment : si j’ai un fils de 2 ans, dois-je le compter comme un enfant (2-11) ou comme un bébé (0-2) ? Dans le doute, je choisirai ce qui me coûte le moins cher…

Une dernière petite remarque. Je ne suis pas certain que beaucoup de gens lisent les messages commerciaux que l’on trouve sur des pages d’erreur, mais tout de même : l’encart de droite, qui liste les avantages du voyage sur mesure, reprend deux fois le point « la flexibilité des dates et horaires de voyage ». Ça ne gênera pas grand monde, c’est le principal.

• Carrefour : triste sournoiserie ?

Je souhaite créer mon espace personnel sur le site de Carrefour. Je me rends donc sur cette page :

Little big mistakes : Carrefour, petite sournoiserie ?

Je passe rapidement sur la balise <title>, qui m’indique que je suis sur la page… « recherche » du site. Je note également que l’url de la page ne me donne pas beaucoup d’informations.

La première rubrique « Vos identifiants » mériterait une structure mieux pensée : séparer à ce point les champs « e-mail » et « confirmer l’e-mail » n’est pas une très bonne idée (même remarque concernant les champs relatif au mot de passe) ; quant au captcha je me demande ce qu’il fait ici. Mais ce n’est pas ce qui m’intéresse.

Ce qui m’intéresse, c’est la troisième partie, étrangement intitulée « Votre information ». Au premier coup d’œil, je distingue quatre cases, bien alignées, à gauche de la page. Les libellés des cases fonctionnent tous de la même manière : d’abord un message qui indique de quoi il est question (exemple : « Recevez des informations de la part de Carrefour Market »), puis la phrase « Si vous le souhaitez, cochez cette case. » Jusque là, pas de problème — même si la tournure pourrait être moins lourde.

Le problème vient de la première phrase du paragraphe. Cette première partie ne fonctionne pas du tout de la même manière que les quatre cases qu’elle surmonte. En terme de structure : la case se trouve à la fin de la phrase, et pas alignée à gauche comme les quatre autres. En terme de message : il ne faut pas cocher la case « si vous le souhaitez » comme c’est le cas en dessous, il faut cocher la case « si vous ne le souhaitez pas » !

Cette façon de présenter m’étonne — à vrai dire, je ne suis même pas sûr qu’elle soit légale. Si je ne dis pas de bêtise, cette première case fonctionne en opt-out, c’est-à-dire qu’il faut la cocher pour éviter de recevoir des messages de Carrefour et des autres sociétés du groupe. Or il me semble bien que cette méthode est interdite en France.

• EDF : un e-mail bien mal conçu

Je me suis inscrit au service « relevé de compteur » d’EDF. Je reçois donc une fois tous les 2 mois un e-mail m’indiquant de faire mes relevés et de les transmettre à EDF.

J’ai reçu mon premier e-mail il y a quelques jours. Je pense qu’il se passe de commentaire.

Little big mistakes : EDF, un e-mail bien mal conçu

À vrai dire je ne sais pas si le problème vient de l’e-mail ou du webmail. Ce que je sais, c’est qu’EDF aurait dû le tester.

J’espère qu’il s’agit d’un bug ponctuel : le webmail de Voila est le même que celui d’Orange, et j’imagine que de nombreux utilisateurs d’Orange sont aussi abonnés au service « relevé de compteurs »…

Expérience utilisateur : interlude sécurité

L’une de mes premières notes traitait du site d’Ameli et de la sécurité toute relative qu’offre un mot de passe composé uniquement « de 8 à 13 chiffres ». En ajoutant les contraintes « pas de numéro de sécu, pas de suite de chiffres ni de date de naissance personnelle », je tablais sur un grand nombre de dates de naissance (enfant, conjoint) et de numéros de téléphone.

J’ai aujourd’hui trouvé plus fort. Chez Verspieren, le mot de passe doit impérativement être… une suite de 4 chiffres. Je table cette fois sur un (très) grand nombre de dates de naissance et de codes de carte bleue (ou de codes PIN, ce qui revient au même, non ?)

Interlude sécurité - un mot de passe à 4 chiffres chez Verspieren

Note : j’aime beaucoup la mention « site sécurisé » en bas à droite.

Verspieren est une mutuelle (entre autre). On trouve ainsi sur le site différentes données plus ou moins intéressantes : le nom du client, son adresse, son numéro de téléphone, son e-mail, son numéro de sécurité sociale, ses coordonnées bancaires, ses remboursements, etc.

Quatre chiffres pour protéger ce genre de choses ? 10000 possibilités, est-ce vraiment sérieux ?

J’en ai discuté avec une amie. Sa réaction m’a particulièrement étonné : « Tu sais, la Caisse d’épargne fait pareil ». Une banque ?!

Je me rends sur le site de la Caisse d’épargne, j’entre son identifiant client pour tester et je valide. La page se recharge et m’affiche ceci :

Interlude sécurité - le clavier spécial 4 chiffres du site de la Caisse d'épargne

Il s’agit bien d’un code confidentiel à 4 chiffres. Avec une petite différence toutefois : il est impossible de taper le code dans le champ dédié. L’utilisateur doit impérativement utiliser le clavier numérique affiché sur la page, clavier dont les numéros s’affichent dans un ordre aléatoire.

Je ne sais pas ce que cette méthode vaut en terme de sécurité (mais 4 chiffres, ça m’inquiète un peu). Je ne sais pas non plus ce qu’elle vaut en terme d’accessibilité (mais j’ai une petite idée). Ce que je sais, c’est qu’en terme d’expérience utilisateur, cette méthode n’est pas satisfaisante du tout.

Je suis très surpris de voir des sites aussi importants imposer des mots de passe aussi faibles.

Il y a quelques jours, une personne a hacké (je suppose) mon compte Vimeo. Je ne sais pas comment ça s’est passé*, j’ai simplement constaté qu’une vidéo au titre particulièrement explicite avait été postée sur mon compte. Mon mot de passe n’était pas extrêmement sécurisé (j’utilise différents mots de passe, je les sélectionne entre autre en fonction de l’importance des données protégées) mais présentait tout de même 8 caractères alphanumériques.

Interlude sécurité - compte Vimeo hacké

S’il est si facile de récupérer un mot de passe potentiellement complexe, j’ai bien peur que quatre petits chiffres ne résistent pas longtemps à une personne mal intentionnée et un peu douée…

Bonus

On trouve à l’inverse de très bonnes initiatives visant à sécuriser l’accès à un compte personnel. Chez Twitter par exemple, l’utilisateur est assisté lorsqu’il crée un mot de passe. Un message lui indique en temps réel le niveau de sécurité du code utilisé. (L’image ci-dessous est un gif animé, apparemment elle ne s’anime pas lorsqu’elle est redimensionnée… Il faut cliquer dessus pour l’afficher.)

Interlude sécurité - assistant de création de mot de passe Twitter

* Je me suis toujours connecté depuis mon ordinateur portable, que je n’ai jamais prêté et que j’avais avec moi le jour où c’est arrivé. J’ai peut-être commis une erreur, j’aimerais bien savoir laquelle.

Baromètre INRIA, un « nouveau monde numérique » peu clair (1/2)

Une amie m’a transmis hier via Twitter un lien intitulé « Les français et le nouveau monde du numérique ». Je me suis rendu sur le site et j’ai noté quelques points qui pourraient être améliorés.

Baromètre Inria - splashpage

Plusieurs choses me perturbent dès la première page.

• On y trouve de nombreux éléments peu hiérarchisés. Le titre « Les Français et le Nouveau Monde numérique » (avec toutes ces majuscules, oui oui) est heureusement mis en avant ; le reste du contenu ressemble à un assemblage hétérogène de logos et de blocs.

Son intérêt m’échappe. Je comprends qu’il soit important de mettre en avant les partenaires de l’opération, mais est-ce une bonne façon de faire ? Quelles informations le visiteur peut-il tirer de cette page, que je qualifierais de simple splashpage ? N’aurait-il pas été intéressant d’utiliser cet espace pour présenter le site et expliquer clairement de quoi il retourne ?

Note : Cette explication existe mais n’est pas vraiment mise en valeur (elle se cache derrière le lien « À propos du baromètre » situé dans le footer.)

Le gros bouton permettant de passer à la page suivante manque réellement de contraste. Ce problème est d’autant plus important qu’il s’agit du seul élément offrant l’accès au véritable contenu du site : il serait dommage de passer à côté ! Même souci pour son contenu : une flèche blanche dans un bouton gris clair, le tout sur un fond gris clair, est-ce vraiment une bonne idée ?

Globalement, cette entrée en matière manque un peu d’intérêt et de clarté.
Je clique sur le gros bouton gris pour accéder à la page suivante.

Baromètre Inria - choix

Deux possibilités : à gauche découvrir les résultats de l’enquête, à droite faire le test.

Ici aussi les boutons permettant d’accéder au contenu manquent de contraste. Par ailleurs, ils portent tous les deux le même libellé peu informatif « Commencer ». N’aurait-il pas été plus intéressant de rendre les légendes « Découvrez… » et « Faites le test » cliquables ?

Je constate également que le logo Inria a été modifié : sa taille a été réduite afin de permettre l’ajout d’éléments « sociaux » (bouton Twitter). Je ne sais pas si c’est à cet endroit que les visiteurs s’attendent à trouver ce type de contenu ; ce que je sais c’est qu’ils risquent de passer à côté.

Au sujet du choix des mots : le second bouton est intitulé « Et vous, quel voyageur êtes-vous ? » Je comprends l’image « nouveau monde numérique / voyageur », mais ce genre de figure de style n’a pas vraiment sa place ici. Remplacer « voyageur » par « internaute » me semble plus approprié.

Un dernier point pour finir : il n’est pas possible de revenir à la page précédente. Le bouton « page précédente » de mon navigateur me renvoie au site précédemment consulté.

Je préfère commencer par faire le test, je clique sur le second bouton.

Baromètre Inria - test

La structure de cette nouvelle page me surprend : la question se trouve à droite, les réponses à gauche. Les occidentaux lisent de gauche à droite, il me semble donc plus logique de commencer par la question plutôt que par les choix proposés comme c’est le cas ici. La question est fortement mise en valeur dans un bloc rouge, peut-être pour pallier cette présentation inversée.

Le formulaire utilise des éléments d’interface relookés (les cases à cocher, en rouge). C’est plus élégant… mais moins clair. Lorsque je clique sur l’une de ces cases, un carré rouge apparaît à l’intérieur pour me signaler que la case est cochée. Rouge sur fond rouge, encore un choix qui dégrade la lisibilité.

Toujours au sujet des choix : les libellés ne sont pas cliquables. Encore une fois ce n’est pas très grave, mais ça aurait amélioré l’expérience.

Un bouton gris en haut de la page me permet d’accéder aux résultats de l’enquête. Bon point : si je veux jeter un œil aux résultats et revenir au test ensuite, je n’aurai pas à répondre à nouveau aux questions auxquelles j’ai déjà répondu. Mauvais point : si je clique sur le logo Inria (cliquable ici alors qu’il ne l’était pas avant), je retourne à la splashpage et mes choix ne sont pas mémorisés. En d’autres termes : je devrai répondre à nouveau à toutes les questions auxquelles j’ai déjà répondu.

Note : le message d’erreur « Réponse obligatoire » pourrait être davantage mis en avant (il y a de la place). Mieux : la mention « Toutes les réponses sont obligatoires » (puisque c’est le cas) pourrait figurer sur le questionnaire.

Après avoir répondu aux 18 questions, je suis redirigé sur une page de résultat.

Baromètre Inria - résultat

Là encore, beaucoup de contenu peu hiérarchisé. Le titre « Vous êtes plutôt parmi » est bien visible, à l’inverse du nom de la catégorie « Les grands explorateurs », quasiment invisible. Il s’agit pourtant d’un élément très important, j’ai répondu à 18 questions pour en arriver là ! La page, très chargée en couleurs / blocs / textes / pictos / illustrations, manque vraiment de lisibilité.

Bonne idée : je peux connaître les autres profils d’internautes. Je note toutefois que si je clique sur un picto (dont il faut deviner la signification puisqu’il ne sont pas légendés), le texte et l’illustration changent… mais pas le titre « Vous êtes plutôt parmi ». Pas très cohérent.

Baromètre Inria - autre profil

Mauvaise idée : si je quitte cette page, il me sera impossible de revenir dessus autrement qu’en refaisant tout le test !

Je terminerai ma visite du site dans les prochains jours, avec deux points qui m’ont particulièrement ennuyé.

Bonus

En cliquant sur le menu du haut, j’ai fini par arriver sur cet écran.

Baromètre Inria - bug

Pour reproduire ce bug (Firefox & Safari), il faut se placer sur la page « Faire le test », cliquer 2 fois sur l’intitulé « Faire le test » puis une fois sur « Les résultats de l’enquête ». Rien de grave bien sûr, mais c’est la conséquence d’autres choix plus gênants.

Bilan

libellés peu clairs
structure de certaines pages
éléments de formulaires revus
bug
manque de hiérarchie
manque de lisibilité
pictos non légendés
splashpage
boutons gris très peu visibles
modification d’éléments d’interface au fil du site
bouton page précédente non fonctionnel
choix non mémorisés si retour à la splashpage
impossible de revenir sur la page du résultat du test