davidbgk
/
larlet-fr-david

<!doctype html>
<html lang=fr>
<head>
  <!-- Always define the charset before the title -->
  <meta charset=utf-8>
  <title>Interfaces d&#39;identification/enregistrement, OpenID et ergonomie — Biologeek — David Larlet</title>
  <!-- Define a viewport to mobile devices to use - telling the browser to assume that the page is as wide as the device (width=device-width) and setting the initial page zoom level to be 1 (initial-scale=1.0) -->
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!-- Fake favicon, to avoid extra request to the server -->
  <link rel="icon" href="data:;base64,iVBORw0KGgo=">
  <link type="application/atom+xml" rel="alternate" title="Feed" href="/david/log/" />
  <link rel="manifest" href="/manifest.json">
  
  <link rel="stylesheet" href="/static/david/css/larlet-david-_J6Rv.css" data-instant-track />
  
  <noscript>
    <style type="text/css">
      /* Otherwise fonts are loaded by JS for faster initial rendering. See scripts at the bottom. */
      body {
        font-family: 'EquityTextB', serif;
      }
      h1, h2, h3, h4, h5, h6, time, nav a, nav a:link, nav a:visited {
        font-family: 'EquityCapsB', sans-serif;
        font-variant: normal;
      }
    </style>
  </noscript>
  
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://larlet.fr/david/biologeek/archives/20081024-interfaces-didentificationenregistrement-openid-et-ergonomie">

</head>
<body>
  <div>
    
    <header>
      <nav>
        <p>
          <small>
            Je suis <a href="/david/" title="Profil public">David Larlet</a>, <a href="/david/pro/" title="Activité professionnelle">artisan</a> du web qui vous <a href="/david/pro/accompagnement/" title="Activité d’accompagnement">accompagne</a><span class="more-infos"> dans l’acquisition de savoirs pour concevoir des <a href="/david/pro/produits-essentiels/" title="Qu’est-ce qu’un produit essentiel ?">produits essentiels</a></span>. <span class="more-more-infos">Discutons ensemble d’une <a href="/david/pro/devis/" title="En savoir plus">non-demande de devis</a>.</span> Je partage ici mes <a href="/david/blog/" title="Expériences bienveillantes">réflexions</a> et <a href="/david/correspondances/2017/" title="Lettres hebdomadaires">correspondances</a>.
          </small>
        </p>
      </nav>
    </header>
    
    
  <section>
    <h1 property="schema:name">Interfaces d&#39;identification/enregistrement, OpenID et ergonomie</h1>
    <article typeof="schema:BlogPosting">
      <div property="schema:articleBody">
        <img src="/static/david/biologeek/images/logos/open_id.png" alt="vignette" style="float:left; margin: 0.5em 1em;" property="schema:thumbnailUrl" />
        <p>Suite aux récentes recherches de la part de Google pour <a href="https://sites.google.com/site/oauthgoog/UXFedLogin">avoir une interface de login unifiée</a>, 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).</p>
<h2>L'interface de base recommandée</h2>
<p>Je la rappelle ici pour identifier les différents éléments :</p>
<ul>
<li>on commence par demander son email à l'utilisateur car il sera nécessaire dans tous les cas ;</li>
<li>on lui demande ensuite s'il a un mot de passe pour ce site :</li>
<li>si non, il sera redirigé lors de la soumission vers un formulaire d'enregistrement pré-complété ;</li>
<li>si oui, il a juste à le taper et à soumettre le formulaire.</li>
</ul>
<p>
    <img
        src="/static/david/biologeek/images/interfaces_openid/identify_email.png"
        alt="Identification par email simple"
        style="margin: 0pt auto; display: block;"/>
</p>

<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.</p>
<h2>L'interface de base avec email et OpenID</h2>
<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>

<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é.</p>
<p>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 <a href="https://larlet.fr/david/biologeek/archives/20070104-comment-utiliser-openid-la-solution-d-identification-tant-attendue/">ce qu'est OpenID</a>.</p>
<h2>L'interface du choix : email ou OpenID</h2>
<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>

<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.</p>
<p>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.</p>
<p><em>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 <a href="http://therealmccrea.com/2008/10/20/live-blogging-the-openidoauth-ux-summit/">un événement dédié à ces questions en Californie</a>.</em></p>
<p>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...</p>
<p><strong>En attendant, vous en pensez quoi de ces interfaces ? D'autres idées sur le sujet ?</strong></p>
<p>PS : j'ai fait des formulaires un peu fantaisistes pour montrer que <a href="http://www.inkscape.org/">Inkscape c'est bien</a> 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).</p>
      </div>
    </article>
    <footer>
      <h6 property="schema:datePublished">— 24/10/2008</h6>
    </footer>
  </section>
  <section>
    <div>
      <h3>Articles peut-être en rapport</h3>
      <ul>
        <li><a href="/david/biologeek/archives/20070819-l-importance-du-rythme-vertical-en-design-css/" title="Accès à ★ L&#39;importance du rythme vertical en design CSS">★ L&#39;importance du rythme vertical en design CSS</a></li>
        <li><a href="/david/biologeek/archives/20070522-des-css-de-qualite/" title="Accès à ★ Des CSS de qualité">★ Des CSS de qualité</a></li>
        <li><a href="/david/biologeek/archives/20070205-ergonomie-d-un-blog-analyse-des-reponses/" title="Accès à ★ Ergonomie d&#39;un blog : analyse des réponses">★ Ergonomie d&#39;un blog : analyse des réponses</a></li>
      </ul>
    </div>
  </section>
  <section>
    <div id="comments">
      <h3>Commentaires</h3>
      
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">Nicolas Froidure</span> le <span class="comment-date" property="schema:commentTime">24/10/2008</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>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.</p>

<p>En effet, il est accessible à tous (même si pour l&#39;instant, j&#39;ai pas trouvé le temps de m&#39;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.</p>

<p>Je crois que je vais attendre un peu que le soufflet retombe pour implémenter la fonctionnalité.</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">Oncle Tom</span> le <span class="comment-date" property="schema:commentTime">24/10/2008</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>J&#39;ai une préférence pour la dernière solution.</p>

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

<p>PS : une autre recherche plus simpliste mais pas déconnante <a href="http://netmesh.info/jernst-files/openid/login-dialog.html">http://netmesh.info/jernst-files/openid/login-dialog.html</a></p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">David, biologeek</span> le <span class="comment-date" property="schema:commentTime">24/10/2008</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>@Nicolas Froidure :<br />&gt; Il va falloir mettre en place des blacklists de domaine etc...</p>

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

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

<p>Merci pour le lien, le toggle est intéressant mais déstabilise à mon avis ceux qui n&#39;ont pas l&#39;habitude du web.</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">Kizlum</span> le <span class="comment-date" property="schema:commentTime">24/10/2008</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>J&#39;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&#39;utilisateur l&#39;utilise, soit il passe son chemin.</p>

<p>J&#39;expérimente aussi la 3ème manière expliquée dans le lien donné par Oncle Tom (que je ne connaissait pas).</p>

<p>En ce moment, je regarde une identification &quot;étape par étape&quot;, en Ajax :</p>

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

<p>Bonne continuation =)</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">victor</span> le <span class="comment-date" property="schema:commentTime">24/10/2008</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Bon article et bonnes questions.</p>

<p>Moi j&#39;ai opté pour séparer les 2 possibilités de login avec 2 boutons différents:<br /><a href="http://www.musiic.net/myartists/login.php5">http://www.musiic.net/myartists/login.php5</a> <br />Même chose pour la création d&#39;un compte:<br /><a href="http://www.musiic.net/myartists/create.php5">http://www.musiic.net/myartists/create.php5</a></p>

<p>Et sinon pour mes utilisateurs je propose le service Emailtoid <a href="http://emailtoid.net/">http://emailtoid.net/</a> pour transformer un email en une identité OpenID, et ça marche plutôt bien.</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">Louis</span> le <span class="comment-date" property="schema:commentTime">24/10/2008</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>N&#39;est-il-pas imaginable d&#39;avoir la configuration grossièrement schématisée ci-dessous ?</p>

<p>LOGIN<br />_adresse mail ou OpenID_<br />____________<br />|___________|</p>

<p>PASSWORD<br />_sauf si Open ID_<br />____________<br />|___________|</p>

<p>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&#39;on détecte un OpenID.</p>

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

<p>Note : les underscores dans l&#39;exemple représentent des italiques, puisque je pense bien que c&#39;est sur ce blog que l&#39;HTML n&#39;est pas interprété dans les commentaires.</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">David, biologeek</span> le <span class="comment-date" property="schema:commentTime">25/10/2008</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>@Kizlum : j&#39;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.</p>

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

<p>Concernant les formulaires, je n&#39;avais jamais vu de liens &quot;J&#39;ai oublié mon OpenID&quot;, il faut que je réfléchisse à ça.</p>

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

<p></p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">Yoan</span> le <span class="comment-date" property="schema:commentTime">26/10/2008</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Essai intéressant, petite question, pourquoi vouloir grouper l&#39;inscription et l&#39;enregistrement ? Ça me semble déjà être destiné à des utilisateurs avancés.</p>

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

<p>Par exemple Dopplr (l&#39;éternel) n&#39;offre OpenID qu&#39;uniquement comme alternative de login à un compte existant, ce qui est dommage.</p>

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

<p>Je pense qu&#39;il est possible de contenter tout le monde non pas en offrant la solution universelle, mais la plus simple.</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">David, biologeek</span> le <span class="comment-date" property="schema:commentTime">26/10/2008</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>@Yoan :</p>

<p>&gt; pourquoi vouloir grouper l&#39;inscription et l&#39;enregistrement ?</p>

<p>En fait ça groupe aussi l&#39;oubli du mot de passe quelque part. C&#39;est la conclusion de l&#39;étude Google (et c&#39;est grandement inspiré du formulaire d&#39;Amazon).</p>

<p>&gt; Souhaites-tu en promouvoir l&#39;usage ou est-ce une facilité pour les-dits utilisateurs avancés ?</p>

<p>L&#39;idée initiale était de promouvoir aussi OpenID. Sinon ça restera un truc de geeks.</p>

<p>&gt; Je pense qu&#39;il est possible de contenter tout le monde non pas en offrant la solution universelle, mais la plus simple.</p>

<p>Prenons Dopplr justement, sur la page d&#39;accueil je peux switcher entre les deux formulaires mais j&#39;ai aussi un lien (pas très visible) pour créer un compte et un lien d&#39;oubli du mot de passe un peu posé là parce qu&#39;il fallait le caser. Je suis pas sûr que ce soit plus simple qu&#39;un unique formulaire qui laisse directement ces choix.</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">WebTik</span> le <span class="comment-date" property="schema:commentTime">27/10/2008</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Article très intéressant David, comme svt :)<br />Peut etre vous connaissiez déjà mais j&#39;ai trouvé très instructive les recherches menées par yahoo concernant ce sujet.</p>

<p>Dans cette étude il est ressort qu&#39;il peut etre facile d&#39;embrouiller le message pour son client.</p>

<p>En tous cas moi cette étude m&#39;a permis de voir autrement certains aspect que je croyais établi et oui je sais personne n&#39;est parfait :)<br />Le sujet sur l&#39;étude ici :<br /><a href="http://developer.yahoo.net/blog/archives/2008/10/open_id_research.html">http://developer.yahoo.net/blog/archives/2008/10/open_id_research.html</a></p>

<p>Le PDF (que je conseille de lire):<br /><a href="http://developer.yahoo.com/openid/openid-research-jul08.pdf">http://developer.yahoo.com/openid/openid-research-jul08.pdf</a></p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">David, biologeek</span> le <span class="comment-date" property="schema:commentTime">30/10/2008</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>@WebTik : en effet cette étude est intéressante, j&#39;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.</p>
    </div>
</div>

    </div>
  </section>

    
    <footer>
      <nav>
        <p>
          <small>
            Je réponds quasiment toujours aux <a href="m&#x61;ilto:d&#x61;vid%40l&#x61;rlet&#46;fr" title="Envoyer un email">emails</a> (<a href="/david/signature/" title="Ma signature actuelle avec possibilité de chiffrement">signés</a>) et vous pouvez me rencontrer à Montréal. <span class="more-infos">N’hésitez pas à <a href="/david/log/" title="Être tenu informé des mises à jour">vous abonner</a> pour être tenu informé des publications récentes.</span>
          </small>
        </p>
      </nav>
    </footer>
    
  </div>
  
  <script src="/static/david/js/larlet-david-3ee43f.js" data-no-instant></script>
  
  <script data-no-instant>InstantClick.init()</script>
  
</body>
</html>