Accéder au contenu principal

Simplifier le processus d'authentification

Avec l'explosion des réseaux sociaux, la belle vie des boutiques d'e-commerce, ou encore la personnalisation de portail (Netvibes, Google...), s'identifier sur un site est devenu courant.

Toutefois, si les techniques d'authentification restent sensiblement les mêmes, à savoir être reconnu à partir d'un couple de valeur saisies (je m'identifie pour montrer qui je suis, je donne mon mot de passe pour le prouver), il convient de suivre quelques bonnes pratiques afin de faciliter la reconnaissance du visiteur et rendre l'opération naturelle.

1 - Identifier clairement l'accès au formulaire d'authentification

2 alternatives :
  • Afficher le formulaire d'authentification sur toutes les pages du site

La technique semble de mois en moins répandue. Si elle facilite l'accès au visiteur, elle n'en reste pas moins une zone "morte" de la page tant que qu'il ne s'est pas connecté.

  • Afficher un lien vers la page de connexion

Les plus gros sites du moment (Google, YouTube, MySpace, Amazon) ont tous adopté le principe d'un lien présent sur toutes les pages du site, qui pointe sur la page de connexion.

Toutefois, il convient de porter une attention particulière sur le libellé de ce lien. Il doit être évident et être reconnu de manière unique, notamment ne pas être confondu avec le lien d'inscription).

Pour le positionnement, on choisira une zone fixe généralement en haut, position qui a tendance à devenir un standard de fait. Ceci évite de perdre le lien dans le contenu de la page.

Le choix de quelques sites parmi les plus importants :

  • Google, Youtube : Connexion
  • Yahoo, eBay : Ouvrez une session
  • Amazon : Identifiez-vous pour découvrir nos conseils personnalisés
  • PayPal : Connexion


Les liens d'authentification de Youtube

2 - Choisir l'e-mail comme clé d'identification

OpenID commence à faire son chemin, mais considérons pour le moment que notre visiteur lamba a déjà une dizaine d'autres comptes sur d'autres sites, et que l'authentification sur votre site est complètement indépendante.

Si la difficulté de retenir plusieurs mots de passe est évidente, celle de retenir également un pseudonyme est apparue clairement au fil des années. Dans certains cas, nous préfèrons apparaître sous identité "réélle" (nom.prenom), dans d'autres cas sous un pseudonyme, parfois même notre pseudo préféré est déjà pris. Et ocassionnellement, les règles de nommage des pseudonymes sont particulères (pas d'accents, ni de chiffres...).

L'e-mail apparait comme la clé la plus évidente d'identification.

Il convient d'ajouter que quelque soit la solution retenue, il ne faut pas oublier une des règles essentielles de l'utilisabilité : l'utilisateur n'est pas là pour ce poser des questions sur l'utilisation de votre formulaire.
Guidez le donc au maximum, en mettant vos libellés de champs en parfaite cohérence avec les données à saisir : adresse e-mail ou un pseudonyme. Évitez à nouveau les flous artistiques, du genre Identifiant qui peut vouloir tout dire.

Le choix des gros :
  • Yahoo, Google, Amazon, PayPal : adresse e-mail + mot de passe
  • eBay, YouTube : pseudonyme + mot de passe


Formulaire d'authentification de Facebook

3 - Concevoir une interface évidente

La page d'authentification n'a qu'un but, et il est technique. On ne s'attend donc pas à charger une page de 100 Ko et des bandeaux de publicité.

On s'attend à y trouver principalement 2 champs de saisie et un bouton de validation. En cas de problème, on s'attend aussi à y trouver une procédure de secours (que dois-je faire si j'ai oublié mon mot de passe ?).

N'oublions pas que notre visiteur est de passage sur cette page. Donnez lui alors quelques moyens techniques simple d'accélérer sa manipulation :

  • Au chargement de la page, positionner le focus sur le premier champ de saisie.
  • Utiliser l'attribut HTML tabindex pour passer d'un champ à l'autre avec la touche Tabulation.
  • Permettre (plus exactement ne pas empêcher) la validation du formulaire avec la touche Entrée.

4 - Proposer le rappel du mot de passe au plus tôt

Inutile de préciser que la fonctionnalité est primordiale.
Toutefois, ne pas attendre que le visiteur ait échoué pour lui proposer l'opération, et faire apparaître de façon claire l'existence de cette issue de secours.

On donnera un petit avantage au rappel du mot de passe par rapport à l'initialisation d'un nouveau mot de passe, pour des raisons de simplicité.

N'oubliez pas enfin qu'une adresse e-mail n'est pas forcément éternelle, prévoyez donc un mécanisme de changement d'e-mail pour l'utilisateur connecté.

Le choix des gros :

  • Google : Impossible d'accéder à mon compte
  • Amazon : Vous avez oublié votre mot de passe ? Cliquez ici
  • Yahoo : Mot de passe oublié ?
  • YouTube : Nom d'utilisateur oublié - Mot de passe oublié
  • eBay : J'ai oublié mon pseudo - J'ai oublié mon mot de passe
  • PayPal : Vous avez oublié votre adresse e-mail ou mot de passe ?

Formulaire d'authentification de Google

Pour aller plus loin :

Commentaires

Enregistrer un commentaire

Posts les plus consultés de ce blog

La compression HTTP pour accélérer vos sites

Avec les récents changements et déclarations de Google autour de la prise en compte de la performance des sites comme un éventuel futur critère de pertinence des sites, les problématiques d'optimisation vont (re)devenir d'actualité. Un des moyens très rapide pour optimiser sensiblement les performances de son site web consiste à compresser le flux de données qui transite entre votre serveur et le navigateur Internet de vos visiteurs.

Les outils d'analyse de requêtes HTTP

L'analyse des échanges HTTP entre navigateur et serveur web est un bon moyen de détection des opérations les plus consommatrices en temps, soit celles qui impactent le plus le temps de chargement global d'une page. Tour d'horizon des outils gratuits existants : Outils en ligne D'une utilisation simple et rapide, ces outils proposent une vision synthétique des échanges à travers une chronologie précise des opérations, ainsi que le détail des requêtes et réponses HTTP. Toutefois, ils ne proposent généralement pas les mêmes options qu'un navigateur, notamment en terme de gestion de cache. site-perf.com Pingdom tools L'analyse de ce blog par Pingdom tools Plugins navigateurs Ces outils s'intègrent à votre navigateur, ce qui vous permet de simuler exactement les situations de configurations de vos visiteurs. Firefox Le compagnon idéal est l'extension livehttpheaders , outil de capture des requêtes et réponses HTTP Firebug propose également une analyse complè

Optimiser son site en maitrisant sa mise en cache

Précédemment dans notre quête de la performance, nous avions vu qu'à l'aide de quelques consignes données à notre serveur, nous pouvons alléger la quantité de données reçues par nos visiteurs sans les altérer. Poursuivons le raisonnement. Plutôt que d'alléger les données, posons-nous la question : mon visiteur a t-il vraiment besoin de recevoir cette donnée ? Le principe du cache navigateur est de stocker sur le disque dur du visiteur les composants de pages (images, scripts, page HTML), pour ne pas avoir à les recharger plus tard.