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.

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).

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

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

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« ) :

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 :

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.