Le formulaire de login de la GMF

Publié le 11 nov 08 à 10:51 | Catégorie : Ergonomie | 16 commentaires

Cela fait un moment que j’ai cette idée de série d’articles sur les erreurs de conception que l’on peut rencontrer sur certains sites Internet. Il ne s’agit la plupart du temps que de détails qui vont à l’encontre d’une bonne expérience utilisateur. Mais parfois, les choix adoptés sont vraiment surprenants. Pour commencer, je vous propose de nous intéresser au site Internet de la GMF.

Je passerais outre l’introduction en Flash (so 1999 comme diraient nos amis anglos-saxons) dont le lien d’évitement n’est même pas visible avec une résolution standard (il faut alors scroller vers le bas pour le voir, sachant que le reste de la page ne contient que l’indicateur de chargement et ne laisse pas présager de la présence d’un autre élément).

Je mettrais également de côté le comportement assez inhabituel du formulaire de login qui va recharger la page lorsque l’utilisateur va cliquer sur le champ où il est censé rentrer son identifiant. Cela part semble-t-il d’une bonne intention, à savoir faire basculer la connection en HTTPS pour sécuriser l’envoi des informations de connection, mais le résultat est plutôt déroutant.

Du point de vue de l’agencement de l’information, la page d’accueil est d’ailleurs un véritable patchwork où il est difficile de s’y retrouver. Le bandeau publicitaire en Flash et la présentation en 3 colonnes avec le contenu principal au milieu ne font rien pour arranger les choses. Cela manque de structure et de clarté. Pourtant, la signalétique est intéressante.

Mais ce dont je voudrais surtout vous parler, c’est de la merveilleuse idée qu’ont eu les concepteurs du site de placer un bouton Effacez en vert juste en dessous du pavé numérique (qui ressemble à s’y méprendre à une calculatrice). Le bouton de validation se trouve lui pour, une raison inexplicable, en dehors de ce pavé en haut sur sa droite :

Le formulaire de login de la GMF

Pour rappel, ce pavé numérique est un mécanisme destiné à améliorer encore la sécurité, puisque l’utilisateur est obligé de cliquer sur ces touches (placées aléatoirement) avec sa souris pour préciser son mot de passe. De cette manière, il n’est pas possible pour un pirate de capturer les touches grâce un logiciel de keylogging pour récupérer ce mot de passe frauduleusement.

Mais revenons à ce bouton vert. D’après vous, combien de personnes vont cliquer sur ce bouton Effacez en pensant valider ce formulaire ? Il existe des conventions d’usage et de bon sens que la GMF n’a malheureusement pas réussi à assimiler. En comparaison, le pavé numérique utilisé par la Société Générale est un vrai bonheur :

Le formulaire de login de la Société Générale

Le bouton Valider est en rouge, mais il se démarque très bien du bouton Corriger. Pour information, la Société Générale propose même un pavé plus grand avec un contraste amélioré lorsque l’utilisateur clique sur l’option Agrandir. Bref, il serait temps que la GMF retravaille ces aspects là. Mais peut-être connaissez-vous d’autres exemples de formulaires de login problématiques ?

A lire également

Vous pouvez continuer votre lecture sur des sujets similaires en consultant les articles suivants :

Les visiteurs qui ont vu cette page ont consulté ensuite :

A savoir

La rédaction de cet article a nécessité 57 minutes. Si vous le souhaitez, vous pouvez être prévenu de la parution de nouveaux articles en vous abonnant par RSS ou par email.

15 commentaires à propos de “Le formulaire de login de la GMF” :

  1. Celui de la BNP (celui que j’utilise, donc) est un coup à prendre car il n’y a pas de bouton “Valider” : après avoir rentré son code, il faut choisir la partie que l’on veut accéder, entre ses comptes ou ses titres boursiers.

    Kynerion le 11 novembre 2008 à 11:53 (#1)

  2. C’est vrai que le site de la société générale est pas mal du tout. Cela fait plusieurs années que je l’utilise pour consulter mon compte. Le pavé est numérique est bien fait, facile à utiliser et pour info, la société générale qui va changer le design de son site n’a pas touché à ce pavé. Pour voir ce que va donner le nouveau site c’est ici : https://alphaparticuliers.societegenerale.fr/index.html

    nabil le 11 novembre 2008 à 15:40 (#2)

  3. Personnellement, je te trouve sévère avec la page d’accueil en 3 colonnes.
    Ce n’est sûrement pas ce qu’il y a de moins bien sur ce site…
    Tu aurais pu donner 1 point pour la page Accessibilité…

    Je me rappelle avoir déjà pesté contre un de ces boutons “effacer” mal placé, mais impossible de retrouver où. Je me demande si ce n’était pas une ancienne version du site du Crédit Agricole IDF (sans garantie). Dans sa version d’aujourd’hui, ce site prévoit sur son formulaire de login une loupe pour ceux qui voient mal et différencie graphiquement le bouton de validation de celui destiné à effacer la saisie.
    https://www.paris-enligne.credit-agricole.fr/g1/ssl/identification/nav1/acc_ide1_1.htm

    A+

    Marcopolo le 11 novembre 2008 à 20:10 (#3)

  4. Bonsoir

    Et si nos grandes Banques françaises s’inspiraient de ce qui se fait ailleurs en terme de sécurité internet au lieu de jouer au jeu des milliards (perdu..)

    Cela fait 4 ans que j’utilise un Token http://www.rsa.com/node.aspx?id=1156 pour me connecter à ma banque.
    3 codes , le login un mot de passe et le token et me voila en 3 secondes sur mon compte.
    Au lieu de la souris, avec tab je passe d’un champs à l’autre, le vrai bonheur
    Je fais aujourd’hui 100% de mes opérations bancaire via internet.

    Saludos

    Nicolas le 12 novembre 2008 à 10:45 (#4)

  5. Je trouve que ces formulaires de “sécurité” sont une vraie plaie :
    - une lenteur incroyable pour saisir le code de sécurité (cf le site de la Banque Postale avec le pavé numérique qu’il faut survoler et attendre pour chaque chiffre sans cliquer)
    - la confidentialité du mot de passe est alors totalement compromise puisque n’importe qui visualisant votre écran peut voir très simplement votre code de sécurité en suivant votre souris
    - dans tous les cas, un bon screenlogger peut enregistrer une zone de l’écran à chaque mouvement de souris et ainsi récupérer le code facilement

    Donc mauvaise idée que ce pavé numérique calculatrice inbitable. A titre de contre exemple, lLe site de paypal est accessible via un simple champs password classique et je peux payer partout.

    Les banques nous prennent pour des jambons et nous sous traitent LEUR problème de sécurité.

    ElDiablo le 12 novembre 2008 à 11:08 (#5)

  6. Intéressant, cet article.
    Un travail sur l’ergonomie, lors de la conception de ce genre d’interface, me semble indispensable. Peu de banques se mettent à la place de leur client : entre les internautes avertis et les occasionnels, il y a quand m bcp de gens qui consultent leur comptes bancaires depuis le web. Souvent, les formulaires de login manquent de clarté, les étapes ne sont pas bien présentées, les mots choisis pas clairs pour l’internaute, les boutons mal placés etc.
    Le clavier virtuel n’est pas le plus sécurisé des systèmes, cela dit, l’exemple ci-dessous me semble plutôt bien conçu.
    https://www.monabanq.com/client/

    Sylvain le 12 novembre 2008 à 16:39 (#6)

  7. Entièrement d’accord avec la critique étayée du site de la GMF. Je profite de ce billet pour confirmer que les claviers virtuels de saisie de mot de passe ne sécurisent pas davantage les informations saisies : cela fait bien longtemps que les concepteurs de keyloggers ont développé des versions clavier-écran-souris de leur logiciel de capture de saisie-visualisation. Une meilleure méthode - au sens de l’accessibilité, de l’ergonomie et de la sécurité - consiste à :
    1) laisser saisir l’internaute son id et son pwd (bien sûr on profite pour logger tout ce que l’on peut : adresse ip, nature du client, etc)
    2) pour chaque opération “risquée” (virement externe ou désignation de bénéficiaire dans le cadre de virements réguliers par exemple), on demande à l’internaute un mot de passe supplémentaire qui lui a été envoyé par courrier Postal (en RAR ou non)
    On varie ainsi les vecteurs de communication des secrets. Déjà un bon pas en direction de la défense en profondeur.

    Antoine le 12 novembre 2008 à 18:28 (#7)

  8. Salut,

    Je suis du même avis que tous, surtout pour le site de la Société Générale (Logitelnet pour les intimes), cependant je trouve leur nouveau site (merci Nabil) pas si chouette que ça, surtout sur quelques points:

    - Les dégradés coupés a 1/4 de la hauteur ?
    - Les textes des menus principaux en images, dommage quand même, surtout pour utiliser une police assez standard (Tahoma non ?)
    - compression des images abusive :/ les bleus sont franchement vilains
    - Le formulaire de recherche… C’est joli les incrustations dans des beaux divs rondelés, mais beaucoup de sites oublient le outline:none; qui est indispensable sur des browsers comme Safari…

    Je travailles actuellement dans une entreprise presque Publique (Epic) et nous devons coder pour le navigateur standard dans la boite: IE 6 :( On fais un peu de forcing pour adopter Firefox comme standard et orienter nos devs un max vers le W3C mais l’Accessibilité et les Standards ne sont pas encore une grande mode Française visiblement :(

    Julien le 12 novembre 2008 à 20:14 (#8)

  9. Le même genre de pavé est dispo sur la banque postale, depuis bien 2 ans environ. Le système est louable, c’est une excellente sécurité à mon humble opinion. Reste à voir comment le pavé envoie ses informations au serveur, en clair ou pas.
    Celui de la banque postale diffère de celui de la SG, dans le sens où les chiffres sont “entrés” en survol. On reste 1 seconde sur un bouton, et le chiffre est entré. Pas de clic. Là, je ne vois clairement pas l’intérêt de la chose, ergonomiquement c’est une plaie, et ça n’apporte rien de plus par rapport au clic.

    Imrallion le 13 novembre 2008 à 14:33 (#9)

  10. Niveau ergonomie, les limitations imposées au choix du mot de passe, peuvent aussi être contre productives.
    Chez LCL, par exemple, l’utilisateur ne peut pas choisir librement son mot de passe (Je me rappelle avoir passé un moment particulièrement désagréable à modifier le miens). Non seulement les dates de naissance sont interdites (ce qui ne me semble pas aberrant, loin de là), mais toutes les suites le sont aussi. Interdit aussi d’avoir 2x le même chiffre, d’avoir un code trop ressemblant au précédent, etc, etc… Je comprend bien la logique de sécurité derrière cela : on interdit tout ce que l’on considère comme trop simple.

    Mais ce faisant on diminue fortement l’ensemble des codes possibles et -surtout- on enlève toute chance à l’utilisateur de se souvenir de son mot de passe… Utilisateur qui va devoir noter ce mot de passe sur un bout de papier, et pourquoi pas mettre ce bout de papier dans son porte-feuille.

    Je me rappelle être passé dans des entreprises qui avaient une politique analogue pour la gestion des mots de passe… et ceux-ci finissaient immanquablement sur des post-it collés aux écrans.

    Mieux vaudrait surement d’indiquer à l’utilisateur le niveau de sécurité de son mot de passe, tout en lui permettant plus de latitude…

    philippe le 13 novembre 2008 à 18:26 (#10)

  11. Bonjour

    Au Crédit Agricole de Champagne-Bourgogne, c’est “old school” en matière de désign pour la partie Comptes persos mais très lisible et plutôt rapide (je suis moins rapide que le script à la souris : jamais réussi à le prendre en défaut !)

    Je n’ai par contre jamais trop regardé côté accessibilité… mais je doute que ce soit la panacée !!! Déjà que leurs imprimés bancaires sont souvent illisibles pour le “bien voyant” ;-) je doute que les écrans web soient corrects de ce côté !

    Cédric le 15 novembre 2008 à 16:14 (#11)

  12. Ca fait très web 2.0 cette nouvelle interface de la Société Générale ;). Par contre, on perd encore une fois en lisibilité à cause de cette présentation 3 colonnes avec le contenu au milieu (il serait vraiment tant que ces grosses boîtes investissent un peu d’argent dans des sessions d’eyes tracking).

    Marcopolo : ah non, je me suis concentré uniquement sur l’utilisabilité, je n’ai pas regardé l’accessibilité ;). En passant, je me suis rendu compte cette semaine à Paris Web 2008 que je suis bien très loin de connaître ce domaine.

    Sinon j’ai eu la même réflexion que toi ElDiablo en me disant qu’il faut maintenant que je cache mon écran lorsque je spécifie mon mot de passe. Mais je suppose que c’est malgré tout plus sûr (il n’y a pas de solution parfaite).

    En effet Imrallion, je ne vois pas non plus l’intérêt d’avoir ce comportement sans clic. Encore une fois, il y a des usages en place, pourquoi les contourner (et encore, on est à mon avis qu’au tout début de ce genre de problématiques avec l’avènement des interfaces riches) ?

    Stéphane le 16 novembre 2008 à 20:21 (#12)

  13. Argh, tu me fends le coeur, Stéphane…
    Moi qui venais te remercier pour ta collaboration à l’E-book de Nicolas Bassot, dont j’ai même fini par parler sur mon blog dont le sujet est le même que le tien (en bien moins abouti, çà, c’est clair, mais je débute… je désespère pas…http://grainedidee.blogspot.com/ au cas où ça intéresse quelqu’un), voilà que j’y lis ce billet…

    Certes, tu ne pouvais pas savoir, mais voilà 11 ans que je suis à la Direction Informatique de la GMF (pas dans le web, par contre…), alors, ça fait mal!
    Mais je vais relayer ton billet en interne, et je pense que cela pourrait donner lieu à quelques échanges piquants entre collègues à moi :)
    Je te tiens au courant de ce que cela pourrait donner!
    Et lorsque j’aurai créer mon entreprise web 2.0, de toute façon, je pourrai arrêter de compter les années ;)

    Fred A. le 20 novembre 2008 à 22:30 (#13)

  14. Désolé Fred A. :)

    Tu devrais conseiller à tes collègues CrazyEgg, cet excellent service qui est capable de constituer des zones de chaleurs dans le but de mieux cerner le comportement des utilisateurs sur une page web. Je suis près à parier que la zone autour de ce bouton Effacez sera aussi chaude que celle du bouton Ok. En tout cas, bonne continuation pour la suite de ton projet !

    Stéphane le 22 novembre 2008 à 17:38 (#14)

  15. Non mais, tous ces “systèmes” de sécurités sont totalement inutiles …

    C’est la faute de la banque si un c*n va télécharger britney_spears_nue.jpg.exe, l’exécuter et choper un keylogger ?

    Un bon vieux champ pour saisir ses ID suffit ( et peut-être un petit avertissement affiché à l’utilisateur avec quelques conseils de sécurités ) .

    Bouazza le 7 janvier 2009 à 16:05 (#15)

Ajouter un commentaire

Les informations obligatoires sont indiquées par une étoile rouge *.


Un rétrolien à propos de “Le formulaire de login de la GMF” :

  1. Revue de presse
    Le 22 novembre 2008 à 18:07
Non, c'est vraiment le nouveau nom d'Haystack. Par contre, je ne savais que 37Signals avait rajouté la France dedans.

Articles Récents

Les derniers articles publiés

A Propos

Je m’appelle Stéphane Thomas et je suis Ingénieur Senior expert dans le développement d'applications web complexes. Etant également un peu Entrepreneur, j'ai tenté l'aventure de la création d'un nouveau service Internet appelé Loomiz. Je suis maintenant le cofondateur d'Hitomi Studio, un studio de développement spécialisé dans la réalisation de sites ecommerce haut de gamme pour de jolies marques.

Lire la suite…