/ Ergonomie

Réflexion sur la fonctionnalité d’affichage dans un champ de mot passe

Hello, je déterre un peu mon blog avec cet article, qui a pour but de mettre à l’écrit ma réflexion que j’ai eue lors qu’il a fallu dans mon projet actuel plancher sur comment j’allais réaliser graphiquement la fonctionnalité qui permettrait d’afficher le contenu des champs de mot de passe.

Me voilà parti à penser aux différentes possibilités de le faire, au vu de ce que j’avais déjà rencontré et de ce qui me semblait pertinent et ergonomique. Après un petit tri j’arrive à quatre propositions :

tumblr_inline_nrlh5ym98k1qk57ah_500

La première version était la première à laquelle j’ai pensé de par sa simplicité. Néanmoins j’ai vite été amené à penser à des alternatives puisqu’elle était selon moi pas assez explicite : la fonctionnalité n’est pour l’instant pas très répandue sur le web, je ne la considère donc pas comme un standard d’élément d’interface, quelque chose dont peut réduire la lisibilité au profit de l’esthétisme parce que tout le monde la connait.

J’en viens donc à produire les variantes 3 et 4, qui avaient le mérite d’être plus clair.

Je pars donc à la recherche d’avis extérieurs du côté de mes amis de chez Design Diver et des gens qui me suivent sur Twitter.

Me vient donc des points intéressants :

  • L’œil est assez explicite pour beaucoup (mais j’ai un public technophile sur Twitter).
  • Bien que je ne trouvais pas ça dérangeant puisque dans le sens de lecture, mais mettre le bouton à l’extérieur du champ casse le lien d’action entre le champ et le bouton (on sait que tel bouton agit sur tel champ).
  • Penser à faire l’action (d’afficher le mot de passe en clair) qu’au survole, question de sécurité pour l’utilisateur.
  • Le bouton de droite du cas n°3 pourrait, de par son placement, faire penser à un bouton pour générer un mot de passe.

Donc déjà ces remarques ont déjà évincées les n°2 et 3. Reste donc les deux variantes de boutons à l’intérieur du champ, soit en version pictogramme, soit en version texte. Il faut donc peser le pour est le contre de chacun.

tumblr_inline_nrlmt8th9j1qk57ah_500

Se pose donc la question de la lisibilité. Mon projet s’adresse dans un premier temps à un public de technophiles, mais je voudrais pouvoir qu’il puisse s’adresser dans un second temps à un public moins familier avec la technologie. Je penche donc vers la “version texte”.

Se pose devant moins le principal problème de ma version préférée : dans sa version petit écran (puisque mon projet est responsive), le “afficher” risque de prendre une largeur importante, beaucoup plus gênante. Je ne sais pas vous, mais dans un champ de mot de passe, je me repère grâce au nombre de points/lettres, donc si celui-ci est coupé c’est rageant.

Vient alors deux remarques décisives :

Le pictogramme “œil” à l’intérieur du champ est ce qu’il se trouve dans les champs des interfaces MetroUI (l’interface des logiciels de chez Microsoft, Windows >= 8 par exemple).

Ceci est génial, ça veut dire que cette fonctionnalité va se démocratiser pour les gens lambda qui ont un Windows récent chez eux ! Il semble donc une bonne chose pour moi d’adopter le même élément d’interface pour profiter de l’expérience utilisateur de tous les utilisateurs de Windows.

Et remarque finale qui m’a décidé :

Pour les non-habitués ou les néophytes, le fait de savoir que l'on puisse afficher un mot de passe est plus effrayant qu'une aide

Donc tout compte fait ma première idée est celle qui semble dans mon cas la meilleure. Mais cette réflexion m’aura permis d’être encore plus sûr de mon cas et je peux l’argumenter.

J’ai tenté une dernière modification, qui entoure mon icône d’un encart plus grand pour faciliter le hover (comme l’action se passe qu’au hover, on passe pas son temps à chercher où passer sa souris).

tumblr_inline_nrlnsn2g1K1qk57ah_500

Mais encore une fois j’ai fais marche arrière : ce n’est pas une fonctionnalité principale, il ne faut pas qu’elle soit mise en avant autant, comme pourrait l’être un bouton de validation de formulaire.

Résultat final

tumblr_inline_nvfo78mn341qk57ah_500

Voilà voilà, je m’éclate toujours autant à réfléchir au comment améliorer l’expérience utilisateur de mes interfaces et j’espère que ce billet pourra vous éclairer si vous tombez dans une situation similaire à la mienne.

Merci à @GeoffreyFrogeye, @Jeanba88, @lechatleon, @LaBoiteVerte, @VChabrette, @IntranetTroyes et à tous les autres qui m’ont aidés avec leurs retours.