# Interfaces d'identification/enregistrement, OpenID et ergonomie

Suite aux récentes recherches de la part de Google pour avoir une interface de login unifiée, je me suis mis à essayer de voir ce qu'il était possible de faire lorsque OpenID entre dans la danse. Au départ c'était juste comme ça pour griffonner sur mon carnet mais l'exercice s'est révélé plus difficile que prévu (ou comment demander de l'aide en faisant semblant d'apporter des solutions).

## L'interface de base recommandée

Je la rappelle ici pour identifier les différents éléments :

- on commence par demander son email à l'utilisateur car il sera nécessaire dans tous les cas ;
- on lui demande ensuite s'il a un mot de passe pour ce site :
- si non, il sera redirigé lors de la soumission vers un formulaire d'enregistrement pré-complété ;
- si oui, il a juste à le taper et à soumettre le formulaire.

Ce formulaire présente l'avantage de n'avoir que deux champs mais l'utilisateur doit faire un choix à un moment donné, choix qui ne nécessite aucune action dans le cas de l'identification par défaut. Simple et efficace comme on les aime. Ne pas oublier de mettre des tabindex cohérents.

## L'interface de base avec email et OpenID

On introduit ici une nouvelle question au départ pour savoir si l'utilisateur utilise un OpenID. Dans ce cas, la seconde partie devra être désactivée pour ne pas que ça prête à confusion si OpenID est choisi (on ne veut surtout pas que l'utilisateur soumette son mot de passe OpenID sur notre service !). Dans le cas contraire, le champ OpenID pourra être désactivé.

Néanmoins, je n'étais pas très satisfait. Ce nouveau champ donne tout de suite l'impression qu'il va y avoir 3 saisies nécessaires pour arriver à s'identifier ce qui est trop coûteux. De plus ça peut dérouter ceux qui n'ont aucune idée de ce qu'est OpenID.

## L'interface du choix : email ou OpenID

Ici on marque clairement la séparation entre les deux façons de s'identifier grâce à deux parties de formulaire séparées. Le choix initial grise ainsi toute une partie et permet d'identifier clairement ce qu'il reste à faire (au passage on voit bien qu'il est plus simple d'utiliser OpenID, un peu de promo ne fait pas de mal). Un petit texte d'aide permet d'en savoir plus sur ce qui se cache derrière le terme d'OpenID.

Reste la question du placement du bouton de soumission qu'il faut garder unique dans la mesure du possible. Il pourrait passer d'un côté à l'autre en fonction de la question initiale mais ça introduit du bruit. J'ai finalement choisi de le placer au milieu mais c'est pas génial non plus car il rompt la continuité verticale de la soumission du formulaire.

En allant chercher l'icône OpenID, j'ai découvert sur le dernier billet de la page d'accueil (coup de bol) qu'il se tenait il y a quelques jours un événement dédié à ces questions en Californie.

C'est intéressant car l'une des conclusions c'est qu'il serait génial de pouvoir avoir des OpenID basé sur les adresses emails. C'est clair que convertir en arrière plan david@orange.fr en http://orange.fr/openid/david/ serait vraiment utile mais ça demanderait aux providers d'aller plus loin dans la gestion de l'identité. Chose dont ils n'ont pas tous saisi l'intérêt pour l'instant...

En attendant, vous en pensez quoi de ces interfaces ? D'autres idées sur le sujet ?

PS : j'ai fait des formulaires un peu fantaisistes pour montrer que Inkscape c'est bien mais gardez les contrôles par défaut des navigateurs qui sont cohérents avec le système. Vos utilisateurs apprécieront (votre DA moins mais rappelez-lui que le site n'est pas pour lui).

### Articles peut-être en rapport

- ★ L'importance du rythme vertical en design CSS
- ★ Des CSS de qualité
- ★ Ergonomie d'un blog : analyse des réponses

### Commentaires

Nicolas Froidure le 24/10/2008 :

Open Id ça peut être sympa, mais je ne sais pas si ils ont pu régler les soucis de sécurité. Et surtout, un moyen de lutter contre le spam.

En effet, il est accessible à tous (même si pour l'instant, j'ai pas trouvé le temps de m'y pencher) de devenir openid provider, même pour les spammers. Il va falloir mettre en place des blacklists de domaine etc... bref, ça risque de compliquer encore plus.

Je crois que je vais attendre un peu que le soufflet retombe pour implémenter la fonctionnalité.

Oncle Tom le 24/10/2008 :

J'ai une préférence pour la dernière solution.

Aujourd'hui on en aperçoit quelques uns de formulaires OpenID et c'est soit :
* comme sur ta dernière maquette
* sur une page séparée
* à la Blogger (selectbox qui permet de choisir son type d'identification)
* à la fourre-tout (comme la maquette #2) avec ID Selector (https://www.idselector.com/)

PS : une autre recherche plus simpliste mais pas déconnante http://netmesh.info/jernst-files/openid/login-dialog.html

David, biologeek le 24/10/2008 :

@Nicolas Froidure :
> Il va falloir mettre en place des blacklists de domaine etc...

Ça a déjà été tenté (cf http://simonwillison.net/2008/Jun/24/openid/), mais je ne pense pas que ce soit une bonne solution d'aller dans cette direction. Une couche de confiance plus étendue serait beaucoup plus intéressante à de nombreux égards.

@Oncle Tom : zut je voulais parler d'IDSelector et j'ai complètement oublié... je trouve l'initiative vraiment intéressante pour simplifier le processus, dommage que ça ne soit pas libre :(

Merci pour le lien, le toggle est intéressant mais déstabilise à mon avis ceux qui n'ont pas l'habitude du web.

Kizlum le 24/10/2008 :

J'me pose à peu prêt la même question en ce moment. Pour certains (très petits) services, je ne laisse que OpenID de disponible : soit l'utilisateur l'utilise, soit il passe son chemin.

J'expérimente aussi la 3ème manière expliquée dans le lien donné par Oncle Tom (que je ne connaissait pas).

En ce moment, je regarde une identification "étape par étape", en Ajax :

1) Vous utilisez OpenID ou vous avez un mot de passe / email ?
2) A ce moment là, l'interface diffère :
* Si OpenID est choisi je demande l'adresse.
* Sinon j'affiche le formulaire email / passwd.

Bonne continuation =)

victor le 24/10/2008 :

Bon article et bonnes questions.

Moi j'ai opté pour séparer les 2 possibilités de login avec 2 boutons différents:
http://www.musiic.net/myartists/login.php5
Même chose pour la création d'un compte:
http://www.musiic.net/myartists/create.php5

Et sinon pour mes utilisateurs je propose le service Emailtoid http://emailtoid.net/ pour transformer un email en une identité OpenID, et ça marche plutôt bien.

Louis le 24/10/2008 :

N'est-il-pas imaginable d'avoir la configuration grossièrement schématisée ci-dessous ?

LOGIN
_adresse mail ou OpenID_
____________
|___________|

PASSWORD
_sauf si Open ID_
____________
|___________|

On aurait une discrimination du type de login côté serveur, via Expressions Régulières, et on ignorerait la case mot de passe si l'on détecte un OpenID.

Je ne connais pas bien OpenID, mais si la forme de l'identifiant est différenciable de celle d'une adresse mail, alors cela peut être une interface simplifiée avec seulement deux champs.

Note : les underscores dans l'exemple représentent des italiques, puisque je pense bien que c'est sur ce blog que l'HTML n'est pas interprété dans les commentaires.

David, biologeek le 25/10/2008 :

@Kizlum : j'y ai pensé aussi mais je ne suis pas très fan des wizards pour les formulaires qui pourraient être visibles dès la première page.

@victor : merci pour EmailtoID, je l'avais trouvé il y a quelques temps mais impossible de remettre la main dessus. C'est une solution intéressante, si ça arrive dans les spécifications d'OpenID c'est encore mieux.

Concernant les formulaires, je n'avais jamais vu de liens "J'ai oublié mon OpenID", il faut que je réfléchisse à ça.

@Louis : le problème d'un champ unique pour mettre un email ou une OpenID, c'est qu'on ne sait pas forcément quoi renvoyer comme erreur à l'utilisateur. Et ça doit prêter à confusion au premier abord aussi à mon avis si tu ne sais pas ce qu'est OpenID (sans compter qu'il faut normalement mettre le logo OpenID dans l'input).

Yoan le 26/10/2008 :

Essai intéressant, petite question, pourquoi vouloir grouper l'inscription et l'enregistrement ? Ça me semble déjà être destiné à des utilisateurs avancés.

Ensuite, je pense que ce type de formulaire va prendre une forme totalement différente suivant ton approche d'OpenID. Souhaites-tu en promouvoir l'usage ou est-ce une facilité pour les-dits utilisateurs avancés ?

Par exemple Dopplr (l'éternel) n'offre OpenID qu'uniquement comme alternative de login à un compte existant, ce qui est dommage.

Aimant le minimalisme, n'avoir que utilisateur/mot de passe comme point d'entrée me séduit. Si et seulement si le système d'inscription est plus complexe, alors je pourrais envisager d'y aller à coup d'OpenID. Enfin, je considère OpenID comme une solution de facilité et pas de sécurité. Dans ce cas, il m'est utile là où c'est plus complexe à faire sans, ou plutôt où ça m'apparait plus complexe.

Je pense qu'il est possible de contenter tout le monde non pas en offrant la solution universelle, mais la plus simple.

David, biologeek le 26/10/2008 :

@Yoan :

> pourquoi vouloir grouper l'inscription et l'enregistrement ?

En fait ça groupe aussi l'oubli du mot de passe quelque part. C'est la conclusion de l'étude Google (et c'est grandement inspiré du formulaire d'Amazon).

> Souhaites-tu en promouvoir l'usage ou est-ce une facilité pour les-dits utilisateurs avancés ?

L'idée initiale était de promouvoir aussi OpenID. Sinon ça restera un truc de geeks.

> Je pense qu'il est possible de contenter tout le monde non pas en offrant la solution universelle, mais la plus simple.

Prenons Dopplr justement, sur la page d'accueil je peux switcher entre les deux formulaires mais j'ai aussi un lien (pas très visible) pour créer un compte et un lien d'oubli du mot de passe un peu posé là parce qu'il fallait le caser. Je suis pas sûr que ce soit plus simple qu'un unique formulaire qui laisse directement ces choix.

WebTik le 27/10/2008 :

Article très intéressant David, comme svt :)
Peut etre vous connaissiez déjà mais j'ai trouvé très instructive les recherches menées par yahoo concernant ce sujet.

Dans cette étude il est ressort qu'il peut etre facile d'embrouiller le message pour son client.

En tous cas moi cette étude m'a permis de voir autrement certains aspect que je croyais établi et oui je sais personne n'est parfait :)
Le sujet sur l'étude ici :
http://developer.yahoo.net/blog/archives/2008/10/open_id_research.html

Le PDF (que je conseille de lire):
http://developer.yahoo.com/openid/openid-research-jul08.pdf

David, biologeek le 30/10/2008 :

@WebTik : en effet cette étude est intéressante, j'en étais resté au moment où ils demandent de spécifier clairement un YahooID! car je trouvais ça assez aberrant de leur part (et les autres ?!) mais il y a des remarques pertinentes par la suite.