10 pratiques inspirantes pour votre formulaire de connexion

Le formulaire de connexion, c’est le grand classique dans la navigation web ou mobile. Il est omniprésent, et pourtant, il n’a jamais été aussi mal conçu… C’est bien dommage, car une inscription ou une connexion, c’est une première marque d’engagement de la part de vos utilisateurs. C’est une étape très importante qu’il ne faut surtout pas négliger.

Les utilisateurs sont de plus en plus habitués à s’inscrire ou à se connecter sur des interfaces web ou mobile. Certains veulent de la simplicité, rapidité, d’autres une sécurité renforcée. Aujourd’hui, il est courant d’avoir une double authentification ou des connexions simplifiées via les réseaux sociaux. Même si on est habitués, ça ne veut pas dire que c’est plus simple ou plus agréable à utiliser. Au contraire, rajouter toujours plus d’éléments ne peut que rendre l’utilisation désagréable voire compliquée.

C’est pourquoi, aujourd’hui j’ai décidé de vous partager 10 pratiques inspirantes et innovantes pour créer votre formulaire de connexion.

#1 Faites attention aux labels « Connexion » et « Inscription »

Généralement, lorsqu’on arrive sur un site ou une application et qu’on se dirige vers l’espace profil, on se retrouve face à deux choix : s’inscrire ou se connecter.
Le problème, lorsqu’on affiche deux boutons, assez proches, « Connexion » et « Inscription », ça peut créer de la confusion. Essayez par exemple d’utiliser des labels différents :

• Pour « Inscription », vous pouvez par exemple écrire « Créer un compte » ou « Essayez gratuitement » (dans le cas où vous avez une offre promotionnelle par exemple)
• Pour « Connexion », vous pouvez utiliser « Se connecter » ou « Rejoindre« 

Dans tous les cas, il est toujours conseillé de personnaliser ses boutons d’actions en évitant d’utiliser des termes génériques comme « Inscription » ou « Connexion ». N’hésitez-pas à employer le « Je » et en décrivant l’action que l’utilisateur s’apprête à réaliser.

#2 La place des liens « Mot de passe oublié » ou « Créer un compte »

Lorsqu’on est sur un formulaire de connexion, il faut toujours penser à deux liens : « Mot de passe oublié » et « Créer un compte ». Car il arrive que des utilisateurs ne se rappellent plus de leur mot de passe, s’ils ont un compte, ou qu’ils se trompent de page. Vous pouvez ainsi les aider ou les rediriger facilement.

Les utilisateurs sont habitués à retrouver ces liens en bas du formulaire de connexion et c’est là qu’est la place de ces liens.

Parfois, on retrouve des liens de mot de passe oublié directement dans le champ du mot de passe. Ce n’est pas une bonne pratique, ça peut créer des erreurs et distraire l’utilisateur. Car il ne faut pas oublier que la plupart du temps, les utilisateurs n’auront pas besoin de cette aide, donc ne mettez pas ces liens trop en avant alors qu’ils ne sont que secondaires.

#3 Pensez toujours à indiquer les labels hors du champ

C’est une erreur que je vois partout et tout le temps. Ça paraît tellement simple de construire un formulaire de connexion ou d’inscription. Et pourtant, 80% des formulaires que je vois sont mal construits. Et même chez certains web designers…

Quand vous faites un formulaire, mettez les labels hors du champ. Surtout quand vos utilisateurs doivent saisir plusieurs champs, mais cette règle c’est la base de tout bon formulaire.

Si vous masquez le champ une fois que l’utilisateur écrit dedans, ça arrive qu’il ne se rappelle même plus ce qu’on était en train de lui demander. L’utilisateur doit toujours pouvoir voir en un coup d’œil qu’est-ce qu’il doit remplir dans un champ de formulaire.

Aujourd’hui il existe en plus plein de manières de présenter ces labels pour qu’ils soient toujours visibles. Soit en proposant un design adapté soit parfois en utilisant l’interaction et l’animation de vos champs.

#4 Indiquez les champs obligatoires et les contraintes

Le point précédent sur les labels dans vos formulaires me ramène naturellement vers cette nouvelle pratique obligatoire selon moi.

Premier point indiquez tous les champs obligatoires, ou alors, ceux qui ne le sont pas. Trouver une manière adaptée de l’indiquer mais prévenez vos utilisateurs. Parfois tous les champs sont obligatoires, donc on précise juste une note qui indique que tous les champs sont obligatoires plutôt que de l’indiquer individuellement sur chaque champs. Si seulement certains le sont, marquez-les individuellement. Si certains ne le sont pas, alors marquez plutôt ceux qui ne le sont pas.

Second point, spécifique aux mots de passe. Souvent, je choisis un mot de passe et on m’indique une erreur au moment de la création du compte parce que je n’ai pas mis 8 caractère minimum, que je n’ai pas mélangé majuscules et minuscules ou que je n’ai pas mis un caractère spécial. Clairement, c’est le genre de pratique qui m’agace.
Donc pensez à vos utilisateurs, et indiquez les contraintes de sécurité qu’il y a sur le choix du mot de passe, s’il y en a.

Prévenez vos utilisateurs des obligations et des contraintes. Il n’y a rien de plus frustrant que de se faire retoquer sur des champs mal renseignés alors qu’on n’a pas été prévenu en amont des contraintes ou obligations.

#5 Ne gardez pas les mots de passe masqués dans votre formulaire de connexion

Le clavier est assez petit, on veut aller vite car on connaît son mot de passe par cœur. Et pourtant… Les fautes de frappes ça arrive tout le temps. Ou parfois c’est votre correcteur automatique qui vous trolle. Quoiqu’il en soit, pour pallier à ce problème frustrant pour vos utilisateurs : permettez-leur de démasquer leur mot de passe. Grâce à cette petite icône qui permet de basculer d’un état à l’autre, on peut voir en un coup d’œil si le mot de passe est bon. Ça évite les erreurs frustrantes pour l’utilisateur et ça ne craint rien en terme de sécurité.

#6 N’abusez pas des boutons de connexion via un réseau social

Les connexions via un réseau social sont de plus en plus présentes. Elles sont très pratiques quand on veut s’inscrire ou se connecter à un site en quelques clics.

Au départ, on en voyait souvent via la connexion Facebook. Désormais, d’autres connexions rapides sont proposées : via Google, Apple, LinkedIn ou même Twitter.
Mais il ne faut pas en abuser et proposer une liste interminable de connexions rapides. Ça donne beaucoup d’informations à l’utilisateur. Il va passer plus de temps à lire les choix et évaluer lequel est le mieux à utiliser sur un site.

Limitez-vous à 4 connexions rapides via un réseau social.

#7 Remplacez le bouton « Se souvenir de moi » ou « Rester connecté »

C’est un élément que je n’ai encore jamais vu sur un site. Je l’ai découvert récemment et c’est vrai que je le trouve bien plus adapté.

Quand on se connecte à un site, on entre son adresse, son mot de passe et on clique sur le bouton de connexion. Et souvent, on oublie de cocher la case juste en-dessous, « Se souvenir de moi » ou « Resté connecté« . Ça dépend des usages, mais dans le cas d’une visite récurrente voire quotidienne, ça peut vite devenir frustrant d’oublier de cocher cette case et devoir saisir ses identifiants à chaque fois.

Pour contrer le problème, proposez plutôt une case « Me déconnecter après ». Vos utilisateurs n’aurons plus à se soucier de cette case, sauf s’ils souhaitent que leur session expire après avoir fermé leur navigateur.

#8 Si vous le pouvez, rendez votre champ d’identification flexible

Ici, cela dépend de votre site ou de votre application. Mais si vous le pouvez, proposez à vos utilisateurs de s’identifier avec d’autres formes d’identification.

L’adresse mail est souvent courante, mais il arrive parfois qu’elle soit trop longue, ou alors qu’on se rappelle de son nom d’utilisateur mais pas de son adresse mail, etc.
Pour que ça soit plus simple, proposez à vos utilisateurs de se connecter avec une adresse mail, un pseudo ou encore un numéro de téléphone.

Bien sûr, il faut que ce choix soit pertinent et que ces informations soit stockées de votre côté.

#9 Prévenez un utilisateur lorsqu’il n’a que quelques essais pour se connecter

Concentrons-nous maintenant sur les blocages de compte. Souvent, les erreurs de mot de passe sont difficilement pardonnables pour des raisons de sécurité. Toutefois, vous avez quelques moyens de rendre cet événement un peu moins frustrant pour les utilisateurs.

Ça arrive quelques fois de ne pas se rappeler de son mot de passe. Avec toutes les connexions possibles et les particularités en matière de sécurité, c’est difficile de se rappeler de tous ses mots de passe. On peut aussi faire une faute de frappe. Les raisons peuvent être diverses.

Ainsi, lorsqu’un utilisateur se trompe, prévenez-le qu’il y a une erreur mais surtout indiquez combien d’essais il lui reste avant de se retrouver bloqué. Par ailleurs, n’hésitez pas à ne pas trop limiter ces essais. Je pense que de 3 à 5 c’est une bonne moyenne, ça permet à un utilisateur de faire plusieurs tests sur ses mots de passe. Je me suis déjà retrouvée bloquée après une erreur et ça, c’est très punitif comme expérience.

#10 Ne dites jamais quel champ est incorrect

Et pour finir, toujours sur les erreurs. Lorsqu’un utilisateur se trompe, n’indiquez pas quel champ est incorrect, entre l’identifiant et le mot de passe. Certes, ça peut être frustrant pour l’utilisateur, car il ne sait pas où il s’est trompé. Toutefois, pour des raisons de sécurité, il vaut mieux éviter d’indiquer le champ qui n’est pas bon. Notamment si quelqu’un essaie de vous pirater.

En revanche, vous pouvez peut-être donner plus de précisions si un utilisateur se trompe en proposant un pseudo au lieu d’une adresse mail. Vous pouvez lui indiquer qu’une adresse mail est requise et non pas un pseudo.

Formulaire de connexion : ce qu’il faut retenir

Les formulaires de connexion ou d’inscription sont à priori des éléments simples et basiques à concevoir. Pourtant, vos utilisateurs peuvent avoir de mauvaises expériences sur ces formulaires.

Faire simple, c’est souvent compliqué.

Si vous souhaitez également en savoir plus sur les bases de l’UI Design, je vous invite à lire mon article sur les règles fondamentales à connaître.