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.

Darty veut vous vendre ses extensions de garantie

Les marges réalisées sur les produits high-tech par les marchands en ligne sont souvent assez réduites. Pour augmenter leur chiffre d’affaire, la plupart des sites e-commerce proposent à leurs clients de nombreux services complémentaires, sous forme de cartes de membres et d’assurances notamment. Darty propose par exemple plusieurs formules de garanties… de façon plutôt insistante.

À la recherche d’un modèle bien précis d’imprimante, je me rends sur le site de Darty, qui propose à ses clients de venir retirer leurs commandes en magasin (note : comme son concurrent Boulanger). Je tape la référence de l’imprimante dans le moteur de recherche, je clique sur l’unique résultat pour afficher la fiche produit et après avoir vérifié qu’il s’agit bien du modèle que je recherche, je l’ajoute à mon panier. Un layer s’affiche.

Darty.com - layer permettant de choisir sa durée de garantie

Cette fenêtre me propose de choisir ma durée de garantie. Je choisis « Garantie Darty 1 an » en cliquant sur le bouton rouge associé. Je suis redirigé sur une nouvelle page.

Darty.com - page interstitielle

Cette page interstitielle me propose à nouveau de choisir la durée de ma garantie. Note : si cette page propose l’intégralité du contenu du layer, quel est l’intérêt du layer ?

Différents produits complémentaires me sont également suggérés. Je n’ai besoin de rien, je clique sur le bouton rouge « voir mon panier » pour quitter la page.

Darty.com - page panier

Le panier me propose… de choisir la durée de ma garantie. Est-il vraiment nécessaire d’insister de cette manière ?

Je poursuivrai ma visite du site de Darty dans les jours à venir.

Castorama : un enchainement page-liste / fiche produit mal maîtrisé

La transition entre la page-liste et la fiche produit est un point souvent abordé lorsque l’on parle de site e-commerce. Comment faire en sorte qu’une fois sur la fiche produit, le client puisse facilement accéder aux autres articles de la catégorie ?

Il existe plusieurs techniques offrant à un visiteur la possibilité de balayer rapidement tous les produits d’une page-liste. La plus populaire en ce moment semble être la mini fiche produit (également appelée « Quickview », « Quicklook »…), qui permet d’afficher le détail d’un article sans quitter la page-liste.

L’équipe du site de Castorama a choisi une autre méthode : le carrousel en haut de la fiche produit. Le but de ce billet n’est pas de comparer les 2 techniques, mais de montrer les difficultés que peuvent rencontrer les visiteurs du site de Castorama.

Je me trouve ici sur la page-liste de la catégorie « étagère et armoire », qui comporte 56 produits comme me l’indique le message situé en haut de la page.

Castorama.fr - page-liste

En dessous de la tête de gondole, j’ai accès aux 4 premiers articles de la page. Je clique sur le quatrième, « meuble 4 tiroirs Concept résine 91 x 65 x 45 cm », pour accéder à la fiche produit correspondante.

Castorama.fr - fiche produit avec carrousel

Cette page peut être découpée en 2 parties : le contenu « traditionnel » d’une fiche produit en bas, surmonté d’un carrousel permettant d’accéder à d’autres articles sans repasser par la page précédente.

Premier problème rencontré : il est vraiment difficile de distinguer le produit sur lequel je me trouve parmi tous les articles du carrousel. Le fin contour (2 pixels) bleu canard cernant la miniature manque de visibilité.

Deuxième souci, très gênant : le nombre de produits de la catégorie a été revu à la baisse, passant de 56 sur la page-liste à 17 ici. Où sont passés les articles manquants ? Je me trouve pourtant toujours dans la même catégorie si j’en crois le fil d’ariane. Pour ne rien arranger, l’ordre de ces articles a également été modifié. Dans ces conditions, il est vraiment difficile de s’y retrouver.

Pour finir, les flèches de navigation ont un comportement relativement inattendu : elles ne sont pas cliquables, un simple survol suffit à faire défiler les produits. Et comme les états « il y a des produits de ce côté » et « il n’y a plus de produit de ce côté » sont visuellement identiques, il faudra attendre d’être arrivé au bout du carrousel pour être sûr qu’il n’y a plus rien à voir.

La bonne nouvelle, c’est que contrairement à d’autres sites, il est toujours possible de cliquer sur le bouton « page précédente » de son navigateur pour revenir sur la page-liste.

Il y a beaucoup à dire sur les sites e-commerce de bricolage (et de décoration, et de jardinage, et de…), j’y reviendrai plus tard.

Bonus

Le site de Castorama a été mis à jour durant la rédaction de ce billet. L’opération s’étalant sur plusieurs minutes, une page d’attente accueillait les visiteurs pendant toute la durée de l’intervention.

Castorama.fr - site indisponible, page d'attente

Malheureusement, cette page ne présente aucun lien permettant de « renouveller [sa] visite ultérieurement ». Et comme son url est différente de celle de la page d’accueil, un simple rafraîchissement ne donnera rien. En d’autres termes, il est nécessaire de retaper l’adresse à chaque nouvelle tentative. Pas très pratique.