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

Commande impossible si le produit n’est pas disponible dans ma région, bug ou e-commerce du moyen-âge ?

Je le disais il y a quelques mois dans une note consacrée au site de Boulanger, le retrait en magasin est une fonctionnalité parfois complexe à gérer pour les enseignes marchandes. Chez Darty, ce n’est pas le retrait qui pose problème, mais l’expédition.

Je poursuis la commande entamée lors de la rédaction de la note précédente.

Une fois sur la page panier, je clique sur le bouton « Terminer votre commande ». Je suis redirigé sur une page me permettant de m’identifier ou de créer un « espace client » (l’expression est étrangement utilisée : on crée plutôt un « compte » pour pouvoir ensuite gérer ses commandes dans un « espace »).

Darty.com - page d'identification

Je n’ai jamais commandé sur le site de Darty, je remplis donc les champs de droite. Note : l’utilisation de jaune pour le titre le rend vraiment peu lisible.
Je clique sur le bouton « valider » pour passer à l’étape suivante.

Darty.com - création de compte

C’est sur cette nouvelle page que je vais créer mon compte client. Esthétiquement parlant le formulaire n’est pas très attractif, et l’usage de petits caractères (en gris un peu plus clair que le texte) ne facilite pas son remplissage.

J’entre toutes les informations nécessaires et je clique sur le bouton « Valider ». Je suis redirigé sur la page de sélection du mode de livraison.

Darty.com - livraison et retrait impossibles

Deux possibilités me sont offertes : je peux retirer mon article en magasin ou me le faire livrer à domicile.

• Retrait en magasin : le site m’indique qu’« aucun magasin à moins de 100km de mon adresse ne dispose de la totalité de mon panier » (qui ne se compose que d’un seul article.) Je peux néanmoins choisir un magasin situé au delà de cette distance. Je n’ai pas l’intention de faire plus de 100km pour aller chercher mon imprimante, je passe mon chemin.

• Livraison à domicile : le site m’indique cette fois que « le contenu actuel de votre panier ne peut être livré car votre [article] n’est plus disponible dans votre région ». Dans ma région ? Mais quelle importance ? La Poste ne livre pas au delà de mon département ?

Ma commande s’arrête là. Impossible de se faire livrer une imprimante parce qu’elle n’est pas en stock dans un magasin situé à proximité de chez moi. Ce modèle est en stock dans de nombreux autres magasins (je peux le vérifier en cliquant sur le bouton « choisir un autre magasin »), mais il n’est apparemment pas possible de me l’envoyer.

S’agit-il d’un bug ? Le layer qui s’ouvre lorsque je clique sur « + d’infos » me donne un début de réponse : Darty livre… et installe le matériel gratuitement, ce qui implique une visite du livreur-installateur Darty à mon domicile. Ce service gratuit est sans doute un plus très appréciable quand l’article est en stock dans un magasin à proximité, mais dans mon cas il m’empêche tout simplement de terminer ma commande.

Et quand bien même, le magasin le plus proche de mon domicile ne peut-il pas se faire expédier l’article (depuis un autre magasin) pour ensuite me livrer ?

« Nous vous invitons à choisir un autre modèle ». C’est aimable à vous, mais je pense que je vais plutôt commander mon imprimante ailleurs. Par ailleurs, ce lien me renvoie… vers une page d’erreur.

Darty.com - page d'erreur