title:      Interfaces d'identification/enregistrement, OpenID et ergonomie
slug:       interfaces-didentificationenregistrement-openid-et-ergonomie
date:       2008-10-24 01:39:35
type:       post
vignette:   images/logos/open_id.png
contextual_title1:  ★ L'importance du rythme vertical en design CSS
contextual_url1:    20070819-l-importance-du-rythme-vertical-en-design-css
contextual_title2:  ★ Des CSS de qualité
contextual_url2:    20070522-des-css-de-qualite
contextual_title3:  ★ Ergonomie d'un blog : analyse des réponses
contextual_url3:    20070205-ergonomie-d-un-blog-analyse-des-reponses

Suite aux récentes recherches de la part de Google pour [avoir une interface de login unifiée](https://sites.google.com/site/oauthgoog/UXFedLogin), 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.

<p>
    <img
        src="/static/david/biologeek/images/interfaces_openid/identify_email.png"
        alt="Identification par email simple"
        style="margin: 0pt auto; display: block;"/>
</p>

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

<p>
    <img
        src="/static/david/biologeek/images/interfaces_openid/identify_email_and_openid.png"
        alt="Identification par email et par OpenID"
        style="margin: 0pt auto; display: block;"/>
</p>

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](https://larlet.fr/david/biologeek/archives/20070104-comment-utiliser-openid-la-solution-d-identification-tant-attendue/).


## L'interface du choix : email ou OpenID

<p>
    <img
        src="/static/david/biologeek/images/interfaces_openid/identify_email_or_openid.png"
        alt="Identification par email ou par OpenID"
        style="margin: 0pt auto; display: block;"/>
</p>

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](http://therealmccrea.com/2008/10/20/live-blogging-the-openidoauth-ux-summit/).*

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](http://www.inkscape.org/) mais gardez les contrôles par défaut des navigateurs qui sont cohérents avec le système. Vos utilisateurs apprécieront (votre <abbr title="Directeur Artistique">DA</abbr> moins mais rappelez-lui que le site n'est pas pour lui).