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