Bonnes pratiques pour les √©crans d’identification

Souvenez-vous, il y ¬†quelques ann√©es je me r√©jouissais de la simplification de la proc√©dure d’identification avec Open ID : La cr√©ation de compte simplifi√©e avec OpenID. Depuis, les choses ont bien chang√© avec l’av√®nement des r√©seaux sociaux et leurs m√©canismes de social login. Je veux bien croire que le fait de s’appuyer sur les profils des internautes permet de gagner du temps et d’augmenter le taux de conversion, mais de l√† √† ne proposer que cette option comme¬†Klout, c’est extr√™mement g√™nant.

L'écran d'identification de Klout

Ce type de m√©canisme d’identification fonctionne bien pour ceux qui ont un compte Facebook ou un profil Twitter, mais pour ceux qui en ont plusieurs, cela ¬†engendre des conflits insolubles (j’ai d√Ľ avoir recours au support technique pour me d√©patouiller de ce bazar). Il n’est pourtant pas tr√®s compliqu√© de proposer deux syst√®mes d’identification : d√©l√©gu√© (avec Facebook ou Twitter) et internalis√©. C’est ce que proposent des services comme Spotify ou¬†Storenvy, et √ßa fonctionne tr√®s bien. De plus, ce double syst√®me permet de rendre l’√©diteur du service moins d√©pendant des r√©seaux sociaux qui fournissent le profil (Astuce : Utiliser Facebook Connect pour de la pr√©-inscription).

L'écran d'identification de Storenvy

Sinon dans le même genre il y a aussi Asana qui restreint le choix à Google Account et le met en première position :

L'écran d'identification d'Asana

On trouve aussi la même chose chez Pinterest avec un formulaire minimaliste, mais soigné :

L'écran d'identification de Pinterest

Vous remarquerez que dans les deux cas, une fine ligne de s√©paration permet de faire comprendre que le bouton “Login” n’est √† utiliser que si l’on rentre un nom d’utilisateur et un mot de passe.

De tous les √©crans d’identification que j’ai pu croiser, je pense que la palme revient √†¬†500px¬†avec un¬†formulaire tr√®s bien proportionn√©, explicite (“No account yet?“, “Can’t access your account?“) et surtout qui l√®ve toute ambigu√Įt√© concernant l’utilisation de l’une ou l’autre technique (“or login using your username or email“) :

L'écran d'identification de 500px

Une authentique référence en matière de simplicité, de guidage et de pédagogie. Dans un registre plus formel, nous avons aussi le formulaire de Forbes, propulsé par le widget de social login de Gigya :

L'écran d'identification de Forbes

Ce formulaire est d’une efficacit√© redoutable, propose une panoplie compl√®te de mode d’identification, mais v√©hicule une sensation glaciale (froid et rigide). Bref, comme vous avez pu le voir au travers de ces diff√©rents exemples, il y a des choses √† faire et des choses √† √©viter. Notez que je ne me suis concentr√© que sur les intitul√©s et la mise en page, mais il existe d’autres leviers d’am√©liorations :¬†Innovative Techniques To Simplify Sign-Ups and Log-Ins.

Comme toujours, si vous avez de bons exemples, merci de les mentionner dans les commentaires.

 

4 commentaires pour “Bonnes pratiques pour les √©crans d’identification”

  1. Posté par Francois Thibeault a dit : le

    Bonjour M. Cavazza,

    C’est √©trange, je me questionne justement depuis plusieurs jours pour trouver une m√©thode d’identification rempla√ßant OpenID. Ce post apporte d’excellentes pistes de r√©flexion.

    Au plaisir de vous écouter en sol québécois ou canadien dans un avenir rapproché!

    Francois

  2. Posté par Fred Cavazza a dit : le

    Un autre très bon exemple à prendre chez Buffer : http://bufferapp.com/

  3. Posté par Harold a dit : le

    Bonjour, a-t-on des r√©sultats de tests disponibles sur les impacts de la mise en place d’une identification via Facebook, Google Account ou Twitter sur le taux de conversion ?

  4. Posté par Fred Cavazza a dit : le

    Un autre bel exemple : https://everplaces.com/login

Laisser un commentaire