Bonnes pratiques pour les formulaires d’identification

Avec la vague du tout social, chaque site (ou presque) propose une couche sociale, donc des comptes pour les utilisateur. Il en résulte l’omniprésence des formulaires d’identification que l’on retrouve un peu partout. Oui mais voilà, l’espace se fait rare et il ne reste plus beaucoup de place pour ce type de formulaire. Qu’à cela ne tienne, il existe différentes astuces pour palier à cette contrainte.

Le site Design Reviver nous propose ainsi une très belle collection de formulaires d’identification : 100 Outstanding Login Forms. De cette collection je retiens trois tendances :

  • Les sites qui affichent le formulaire directement sur la page d’accueil ;
  • Les sites qui affichent un lien ouvrant un panneau flottant avec le formulaire ;
  • Les sites qui affichent un lien menant vers une page spécialement prévu à cet effet.

Afficher les deux champs d’identifiant et de mot de passe sur la page d’accueil est la solution idéale, mais ça prend de la place là où vous en avez désespérément besoin. Utiliser un lien ouvrant un panneau est une très bonne solution de replie, mais cela pénalise les utilisateurs qui ont désactivé le javascript sur leur navigateur. Utiliser une page spécifique est encore mieux car cela ne pénalise personne et peut être combiné avec le formulaire de création de compte et les éléments de réassurance / incitation qui vont avec.

Des formulaires présentés, je retiens celui de WordPress (simple et efficace) :

Le formulaire d'identification de WordPress
Le formulaire d'identification de WordPress

Dans le même style mais avec un peu plus de… style il y a celui de Tumblr (minimaliste mais cordial) :

Le formulaire d'identification de Tumblr
Le formulaire d'identification de Tumblr

Signalons aussi celui de Facebook (très faible encombrement) :

Le formulaire d'identification de Facebook
Le formulaire d'identification de Facebook

Notez au passage qu’avec des intitulés en français c’est tout de suite plus laborieux comme chez Ning :

Le formulaire d'identification de Ning
Le formulaire d'identification de Ning

Enfin mon préféré est celui de RedBrick Health avec un mélange de compacité et de sophistication :

Le formulaire d'identification de RedBrick Health
Le formulaire d'identification de RedBrick

Je serais bien incapable de vous sortir une règle d’or sur l’emplacement des intitulés de champs car il existe plusieures possibilités :

  • Au-dessus des champs ;
  • À gauche des champs aligné à gauche ;
  • À gauche des champs aligné à droite ;
  • Dans le champ.

Ces quatre solutions fonctionnent bien, c’est juste une question de place disponible.

Par contre je peux vous recommander les bonnes pratiques suivantes :

  • Localiser le formulaire ou le lien vers le formulaire en haut à droite de la page (là où se trouvera le nom de l’utilisateur une fois identifié) ;
  • Afficher un lien vers l’oubli de mot de passe ET d’identifiant ;
  • Prévoir un lien vers la création de compte ;
  • Proposer de retenir le mot de passe pour une durée fixe (2 semaines semble une convention) ;
  • Utiliser un cadenas pour symboliser la connexion sécurisée.

Voilà, si vous en avez d’autres, n’hésitez pas.

7 commentaires sur “Bonnes pratiques pour les formulaires d’identification

  1. Si l’on part du principe que l’identifiant est l’adresse email de l’utilisateur, on a plus besoin du lien pour retrouver son identifiant.

    L’email en identifiant à l’avantage d’être unique, et potentiellement très difficilement oubliable par l’utilisateur et identique pour tout les sites…

    Si on veut être encore moins intrusif pour l’utilisateur en ne lui demandant pas son email, il ne pourra de toutes façon pas récupérer son identifiant, à moins d’une phrase secrète, mais c’est à mon avis une faille de sécurité.

    L’utilisation de l’email en identifiant ne dispense pas de proposer l’utilisation d’un pseudonyme pour masquer l’email aux autres utilisateurs.

  2. En même temps comment est il possible de rater un tel formulaire ??? C’est tous les même…

    On aurait pu mettre celui de google dans cette liste non ?

    Là ou ca devient intéressant c’est lorsqu’on peut faire du OpenID, ou FacebookConnect… Il faut proposer la possibilité d’authentification de cette manière, sans pour autant perdre les gens qui n’y comprennent rien.

  3. Celui de Twitter est intéressant aussi. Si Javascript n’est pas activé, ou si le js n’a pas eu le temps de charger, alors le formulaire est sur une deuxième page, par contre si javascript est activé et chargé, alors le formulaire s’ouvre dans une div.

Laisser un commentaire