Demander deux fois le mot de passe lors de la création d’un compte

C’est idiot. Et pourtant ce modèle de conception est particulièrement courant sur le web. CDiscount le fait, Vente Privée le fait, Les 3 Suisses le fait, Auchan le fait, Carrefour le fait, Leclerc le fait, La Redoute le fait…

C’est bien simple, j’ai pris la liste des vingt premiers e-commerçants de France sur JournalDuNet, et sur ces vingt sites, seuls deux (Sarenza et Éveil et jeux) ne demandent pas de saisir deux fois le mot de passe lors de la création d’un compte. Il se trouve que j’ai aussi pêché par le passé en faisant exactement la même chose. Et puis j’ai eu l’occasion de réaliser à quel point c’était idiot il y a quelques années en travaillant sur la refonte d’un gros site e-commerce.

Pour se rendre compte à quel point c’est idiot, il faut se poser une question simple mais récurrente dans la conception web : quel problème est-ce que j’essaie de résoudre ?

À la base, l’origine du besoin de ce deuxième champ est totalement saine d’esprit. Ce champ est là pour s’assurer que l’utilisateur n’a pas fait d’erreur en tapant son mot de passe. Ça arrive de faire des erreurs. Et encore plus quand on ne voit pas ce qu’on écrit, comme dans un champ de mot de passe.

Mais du coup, le fait de taper deux fois son mot de passe dans des champs où l’on ne voit pas ce qu’on écrit ne résout pas du tout le problème. L’utilisateur a désormais deux fois plus de chances de faire des erreurs. Et corriger son erreur devient désormais deux fois plus long, puisque sans voir ce qu’il a écrit ni où se trouve l’erreur, l’utilisateur sera obligé de retaper ses deux mots de passe.

Alors comment résoudre ce problème ? Plusieurs solutions existent :

  • Permettre d’afficher le mot de passe en clair. C’est ce qui existe depuis un bail sous OS X, et plus récemment sur Windows 8 (et c’est la solution adoptée chez les deux bons élèves cités en début d’article). C’est extrêmement facile à mettre en place avec jQuery (ici un tutoriel en français chez Creative Juiz).
  • Afficher les lettres en clair au fil de la saisie. C’est le comportement par défaut sous iOS et Android. C’est un peu plus lourd à mettre en place (ici un exemple chez CSS Tricks), et le comportement n’est peut-être pas du meilleur effet sur desktop.
  • Afficher le mot de passe en clair. C’est ce que Jakob Nielsen implorait en 2009 dans son article Stop Password Masking. C’est radical, et à peser avec la sensibilité des informations accessibles derrière le compte. Mais rien n’empêche de combiner cette solution avec la première, en affichant par défaut le mot de passe en clair, et en permettant à l’utilisateur de le masquer si besoin.

Je vais conclure en casant cet XKCD.

Le champ important

Si vous êtes sur un site de vente en ligne et qu’on vous demande deux fois votre adresse e-mail et deux fois votre mot de passe, mais qu’une seule fois votre adresse postale, ça en dit surement beaucoup plus sur la volonté du vendeur à détenir vos informations personnelles plutôt que sa volonté de vous livrer à bon port.