Un visiteur arrive sur votre site et clique sur « Se connecter ». Il s'attend à une connexion fluide. Il tombe à la place sur un formulaire qui l'agace. Les règles du mot de passe sont cachées jusqu'à l'envoi. Le champ du mot de passe est petit et difficile à remplir. Il n'y a pas d'option « Afficher le mot de passe », il ne peut donc pas vérifier ce qu'il a tapé. Il se trompe de mot de passe. Il clique sur « Mot de passe oublié » et arrive sur une réinitialisation confuse. Quelques minutes plus tard, il abandonne et ne revient jamais.
Les formulaires de connexion et de réinitialisation du mot de passe sont des points de contact critiques. Ils se dressent entre un visiteur de retour et son compte. Si l'expérience est mauvaise, il ne se contente pas de partir. Il juge votre site peu fiable. Ce chapitre explique comment créer des formulaires de connexion et de réinitialisation qui sont sûrs, intuitifs et respectueux du temps de vos utilisateurs.
De quels champs un formulaire de connexion a-t-il besoin ?
Un formulaire de connexion a besoin d'exactement trois choses. D'abord, un moyen d'identifier la personne. Ensuite, un moyen de vérifier son identité. Enfin, un moyen de rester connecté. Cela fait trois champs au minimum.
Le champ e-mail
Utilisez l'e-mail, pas un identifiant. L'e-mail est plus simple. Les utilisateurs oublient leurs identifiants. Ils n'oublient pas leur adresse e-mail. Faites en sorte que ce champ accepte une adresse e-mail et nommez-le clairement « Adresse e-mail ». Utilisez le HTML `type="email"` pour que les claviers mobiles affichent le symbole @ et que la validation de l'e-mail se fasse automatiquement. Dans l'attribut HTML, ajoutez `autocomplete="username"` pour que les navigateurs et les gestionnaires de mots de passe sachent que c'est ici que va l'identifiant de connexion et puissent le préremplir pour les utilisateurs qui ont enregistré leurs identifiants.
Le champ mot de passe
Utilisez `type="password"` pour que le texte soit masqué. Ajoutez `id="current-password"` et `autocomplete="current-password"` pour que les gestionnaires de mots de passe identifient ce champ et préremplissent les mots de passe enregistrés. Autorisez le collage. Les experts en sécurité s'accordent à dire que bloquer le collage dans les champs de mot de passe n'empêche pas les attaques. Cela ne fait qu'agacer ceux qui utilisent un gestionnaire de mots de passe.
Donnez au champ du mot de passe une largeur visuelle d'au moins 10 caractères. Un champ étroit paraît à l'étroit. Les utilisateurs doutent que leur long mot de passe y tienne. Un champ plus large inspire confiance et réduit les erreurs d'envoi.
Bouton pour afficher le mot de passe
Incluez un bouton « Afficher le mot de passe » ou « Révéler le mot de passe » (en général une icône d'œil ou une case à cocher). Quand il est activé, le champ passe en `type="text"` pour que les utilisateurs voient ce qu'ils ont tapé. Ce n'est pas un risque de sécurité. C'est une fonction d'usage qui réduit les erreurs d'envoi et la frustration. Les utilisateurs tapent leur mot de passe avec soin et veulent le vérifier avant de valider.
Case « Se souvenir de moi » (facultative mais recommandée)
Une case « Se souvenir de moi sur cet appareil » ou « Rester connecté » est facultative, mais elle améliore l'expérience. Quand elle est cochée, la session dure plus longtemps ou le navigateur conserve un jeton de connexion persistant (de façon sécurisée). Les utilisateurs n'ont donc pas à se connecter à chaque visite. Pour les comptes à faible risque, c'est sans danger. Pour les comptes très sensibles (finance, santé, espaces d'administration), évitez-la ou exigez une nouvelle authentification pour les actions sensibles.
Si vous incluez une case « Se souvenir de moi », soyez explicite sur ce qu'elle fait. « Se souvenir de moi pendant 30 jours » est plus clair que « Se souvenir de moi ».
Lien « Mot de passe oublié »
Placez un lien « Mot de passe oublié ? » juste sous le champ du mot de passe ou à sa droite. Ce n'est pas facultatif. Les utilisateurs oublient leur mot de passe. Offrez un chemin évident pour le réinitialiser. S'ils ne trouvent pas le lien, ils quittent le site et ne reviendront peut-être jamais.
Comment doit fonctionner un formulaire de réinitialisation du mot de passe ?
Une réinitialisation du mot de passe comporte plusieurs étapes. Chaque étape compte. Chaque étape est un endroit où les utilisateurs peuvent se perdre et abandonner.
Étape 1 : demander la vérification par e-mail
La réinitialisation commence quand un utilisateur clique sur « Mot de passe oublié » dans le formulaire de connexion. Il arrive sur une page qui dit par exemple « Saisissez votre adresse e-mail pour réinitialiser votre mot de passe ». Un seul champ e-mail apparaît. C'est tout. Pas de champs en plus. Pas de demande d'identifiant ni de questions de sécurité. Juste l'e-mail.
Le bouton doit dire quelque chose de clair et orienté action. « Envoyer le lien de réinitialisation » ou « Recevoir les instructions » indique ce qui se passe ensuite. « Envoyer » est vague.
Étape 2 : envoyer le lien de réinitialisation par e-mail
Quand ils envoient leur e-mail, votre système leur envoie immédiatement un e-mail de réinitialisation. L'e-mail doit arriver en quelques secondes, pas en quelques minutes. La rapidité compte. Si l'e-mail met 10 minutes, les utilisateurs pensent que cela n'a pas marché et recommencent, ou pire, ils partent.
L'e-mail de réinitialisation contient un lien unique (ou un code à saisir sur la page suivante). Ce lien doit expirer après un délai défini, en général 24 heures. Un lien qui n'expire jamais est un risque de sécurité si quelqu'un accède à leur messagerie.
Étape 3 : vérifier le lien et afficher le formulaire de réinitialisation
Quand ils cliquent sur le lien de réinitialisation dans l'e-mail, ils arrivent sur le formulaire de réinitialisation. Cette page doit confirmer clairement ce qui se passe : « Réinitialisez votre mot de passe » ou « Créez un nouveau mot de passe ». Aucun doute sur le fait d'être au bon endroit.
Affichez l'adresse e-mail dont ils réinitialisent le mot de passe. « Vous réinitialisez le mot de passe de example@email.com. » Cela les rassure sur le fait qu'il s'agit du bon compte.
Étape 4 : énoncer clairement les règles du mot de passe avant l'envoi
Affichez les règles du mot de passe sur le formulaire de réinitialisation AVANT qu'ils essaient d'envoyer. Ne les faites pas deviner. « Votre mot de passe doit contenir au moins 12 caractères, dont une majuscule, un chiffre et un caractère spécial. » Soyez précis. Montrez des exemples de ce qui convient.
Un indicateur de robustesse du mot de passe (une barre qui montre faible, moyen, fort) aide les utilisateurs à savoir si leur mot de passe respecte les règles sans l'envoyer et recevoir une erreur. Certains le trouvent utile. D'autres le trouvent frustrant si les règles ne sont pas claires. Si vous utilisez un indicateur de robustesse, associez-le à des règles écrites explicites.
Étape 5 : champ du mot de passe et confirmation
Demandez un nouveau mot de passe. Puis demandez de le confirmer en le saisissant de nouveau. Cette confirmation détecte les fautes de frappe. L'inconvénient est qu'un champ de confirmation ajoute de la friction. Des études montrent que supprimer le champ de confirmation du mot de passe augmente les taux de complétion. Si vous le gardez, équipez les deux champs d'un bouton « Révéler le mot de passe » pour qu'ils puissent vérifier que les deux saisies correspondent avant d'envoyer.
Étape 6 : confirmation immédiate et suite
Quand ils réinitialisent leur mot de passe avec succès, affichez un message de réussite. « Votre mot de passe a été réinitialisé. Vous pouvez maintenant vous connecter avec votre nouveau mot de passe. » Proposez ensuite un lien vers le formulaire de connexion ou un bouton « Aller à la connexion » pour qu'ils n'aient pas à naviguer ni à chercher.
Envoyez-leur aussi un e-mail de confirmation. « Votre mot de passe vient d'être réinitialisé. Si ce n'était pas vous, cliquez ici pour sécuriser votre compte. » Cela les alerte si quelqu'un d'autre a réinitialisé leur mot de passe et leur donne un moyen d'annuler.
Où placer les formulaires de connexion sur votre site ?
Les formulaires de connexion ne sont pas décoratifs. Ils doivent être faciles à trouver sans chercher.
En-tête ou navigation
L'endroit le plus visible est l'en-tête. Un lien (ou bouton) « Se connecter » en haut à droite de votre site est l'endroit où les utilisateurs l'attendent. Au clic, menez-les vers une page de connexion dédiée ou ouvrez une fenêtre modale avec le formulaire. Les utilisateurs mobiles s'attendent à trouver la connexion dans le menu hamburger. Ne la cachez jamais derrière plusieurs niveaux de navigation.
Page de connexion dédiée
Créez une page dédiée `/login` ou `/sign-in`. Cette page contient le formulaire de connexion, rien d'autre. Pas d'articles de blog. Pas de texte marketing. Juste le formulaire et le texte d'aide nécessaire. Une page claire et ciblée convertit mieux qu'un formulaire de connexion intégré à une page générale.
Page de réinitialisation du mot de passe
Le formulaire de réinitialisation du mot de passe doit se trouver à une URL dédiée comme `/reset-password` ou `/forgot-password`. Cette page n'est accessible que depuis le formulaire de connexion ou depuis un lien dans l'e-mail de réinitialisation. Elle ne doit pas être indexée par les moteurs de recherche. Ajoutez `noindex` à cette page dans votre HTML ou votre robots.txt pour que Google n'essaie pas de la classer.
Erreurs courantes dans le design des formulaires de connexion
Même bien intentionnés, les formulaires de connexion ont souvent des défauts qui nuisent à l'expérience.
Trop de champs avant la connexion
Certains sites demandent identifiant, e-mail, téléphone et réponse de sécurité dans le formulaire de connexion lui-même. Ne le faites pas. La connexion n'est pas l'inscription. Ne demandez que l'e-mail et le mot de passe. Tout le reste est de la friction en plus.
Règles du mot de passe cachées ou peu claires
Si les règles du mot de passe sont cachées jusqu'à l'envoi, les utilisateurs s'agacent. Ils saisissent un mot de passe. Ils valident. Une erreur apparaît : « Le mot de passe doit contenir 12 caractères et un chiffre. » Ils doivent recommencer. Affichez les règles dès le départ.
Pas d'option pour afficher le mot de passe
Les utilisateurs ne peuvent pas voir ce qu'ils ont tapé. Ils valident. Ils se trompent. Ils réessayent. Ils se trompent encore. Un simple bouton évite cette frustration.
Messages d'erreur confus
Ne dites jamais aux utilisateurs « Connexion invalide ». Cela n'aide pas. Utilisent-ils le mauvais e-mail ? Le mauvais mot de passe ? Le compte n'est-il pas activé ? Soyez précis. « Aucun compte trouvé pour cette adresse e-mail » ou « Le mot de passe est incorrect » leur indique quoi corriger. Ou, si vous voulez rester vague pour des raisons de sécurité, proposez un moyen de récupération. « L'e-mail et le mot de passe ne correspondent pas. Réessayez ou réinitialisez votre mot de passe. »
Le lien de réinitialisation expire trop vite
Un lien de réinitialisation qui expire en 15 minutes agace les utilisateurs. Ils consultent leur messagerie après le travail. Le lien est mort. Ils doivent tout recommencer. Donnez-leur au moins 24 heures.
La réinitialisation mène à une page confuse
Certaines réinitialisations envoient les utilisateurs vers une page qui n'explique pas clairement quoi faire. Ils cliquent sur le lien de réinitialisation. Ils arrivent sur une page au texte flou et sans formulaire. Ils pensent que quelque chose a mal tourné. Rendez-la évidente. « Réinitialisez le mot de passe de example@email.com » avec un champ de mot de passe et un bouton d'envoi.
Considérations de sécurité pour la connexion et la réinitialisation du mot de passe
Un formulaire de connexion est une partie critique de la sécurité de votre site. Protégez-le correctement.
Utilisez HTTPS pour tout le trafic de connexion
Votre page de connexion doit être servie en HTTPS, pas en HTTP. HTTPS chiffre les données en transit pour que les pirates ne lisent pas l'e-mail et le mot de passe pendant leur trajet vers votre serveur. C'est non négociable. Si votre site n'a pas de certificat SSL, obtenez-en un. La plupart des hébergeurs fournissent aujourd'hui des certificats SSL gratuits.
Validez la robustesse du mot de passe côté serveur
La validation dans le navigateur aide les utilisateurs, mais ne vous y fiez pas seule. La validation JavaScript peut être contournée. Validez le mot de passe sur votre serveur. Vérifiez qu'il respecte vos règles. N'acceptez que les mots de passe qui répondent à vos exigences de robustesse.
Hachez et salez les mots de passe dans votre base de données
Ne stockez jamais de mots de passe en clair. Utilisez un algorithme de hachage sûr (comme bcrypt ou Argon2) avec un sel. Même si quelqu'un pirate votre base de données, il ne peut pas lire les mots de passe. Un mot de passe correctement haché ne peut pas être reconverti en mot de passe d'origine.
Limitez le nombre de tentatives de connexion
Si quelqu'un tente de se connecter 10 fois en une minute, bloquez-le. La limitation du débit empêche les attaques par force brute, où les pirates essaient des milliers de combinaisons. Après quelques échecs, faites une pause de 15 minutes avant d'autoriser de nouveaux essais.
Faites expirer rapidement les jetons de réinitialisation
Un jeton de réinitialisation valable 24 heures est la norme. Des jetons valables 7 jours ou plus augmentent le risque qu'une messagerie compromise mène à un compte compromis sur votre site. Gardez des jetons de courte durée.
Journalisez l'activité de connexion pour détecter la fraude
Gardez une trace des tentatives de connexion réussies et échouées. Si quelqu'un se connecte depuis un nouveau pays ou à une heure inhabituelle, signalez-le. Certains systèmes envoient un e-mail quand un compte est utilisé depuis un nouvel appareil. Cela alerte le propriétaire du compte si quelqu'un d'autre y a accédé.
Formulaires de connexion sur mobile : qu'est-ce qui change ?
Le mobile change la façon dont les formulaires de connexion doivent fonctionner.
Zones tactiles et taille des boutons
Sur mobile, les doigts sont moins précis que des curseurs. Les boutons et champs de saisie doivent être plus grands. Le bouton d'envoi doit faire au moins 44 pixels de haut. Les champs de saisie doivent être assez hauts pour une saisie confortable. Visez 44 à 48 pixels de hauteur.
Claviers mobiles et types de champs
Utilisez `type="email"` pour le champ e-mail. Cela indique aux appareils mobiles d'afficher le clavier e-mail avec @ et le point. Sans cela, les utilisateurs doivent changer de mode de clavier. Utilisez `type="password"` pour le champ du mot de passe pour que le clavier soit adapté. Ce petit détail économise des appuis et de la frustration.
Saisie automatique et gestionnaires de mots de passe
Les navigateurs mobiles et les applications de gestion de mots de passe peuvent préremplir les identifiants de connexion. Vérifiez que vos attributs HTML le permettent. Ajoutez `autocomplete="username"` sur le champ e-mail et `autocomplete="current-password"` sur le champ du mot de passe. C'est un énorme confort sur mobile, où la saisie est plus lente.
Disposition du formulaire sur petit écran
Empilez les champs verticalement. Ne placez pas l'e-mail et le mot de passe côte à côte sur un écran mobile. Un champ par ligne. Le formulaire doit occuper toute la largeur avec des marges suffisantes. Un formulaire à l'étroit sur mobile n'est pas terminé.
Éviter que le clavier mobile ne masque le formulaire
Quand le clavier mobile apparaît, il couvre la moitié de l'écran. Assurez-vous que le bouton de connexion reste visible au-dessus du clavier, ou prévoyez un moyen simple de fermer le clavier. Certains sites n'affichent le bouton qu'après la fermeture du clavier. Cela agace les utilisateurs. Gardez le bouton visible.
Questions fréquentes
Combien de règles de mot de passe dois-je imposer ?
Dois-je afficher un indicateur de robustesse du mot de passe ?
Que faire si quelqu'un oublie son mot de passe ET son adresse e-mail ?
Ai-je besoin de l'authentification à deux facteurs sur mon formulaire de connexion ?
À quelle fréquence faut-il réinitialiser son mot de passe ?
Vaut-il mieux demander un identifiant ou une adresse e-mail ?
Comment WEMASY vous aide avec les formulaires de connexion et de réinitialisation
Le créateur de formulaires de WEMASY prend en charge des parcours de connexion et de réinitialisation du mot de passe sécurisés. Créez un formulaire de connexion avec des champs e-mail et mot de passe. Ajoutez un bouton pour afficher le mot de passe en un clic. Définissez les règles du mot de passe (longueur, majuscules, chiffres, caractères spéciaux). Utilisez la logique conditionnelle pour afficher ou non une case « Se souvenir de moi » selon vos besoins de sécurité. Connectez le système d'authentification de WEMASY ou intégrez des fournisseurs d'authentification externes via l'API. WEMASY gère automatiquement le hachage des mots de passe, la limitation des tentatives et la gestion des sessions. Les e-mails de réinitialisation sont envoyés de façon sécurisée depuis votre domaine. Les jetons de réinitialisation expirent après 24 heures. Voyez ce qui est inclus dans les offres WEMASY.