Identité

Aider les utilisateurs à s'inscrire

Le formulaire d'inscription est souvent la première interaction avec un formulaire sur votre site Web. Il est essentiel de concevoir un formulaire d'inscription efficace et sécurisé.

Examinez un formulaire d'inscription pour découvrir comment aider les utilisateurs à s'inscrire sur votre site Web.

Limitez le formulaire d'inscription et n'affichez que les commandes de formulaire requises pour créer un compte. Ne dupliquez pas les contrôles de formulaire pour aider les utilisateurs à saisir correctement les informations de leur compte. Envoyez plutôt un e-mail de confirmation.

Détails du compte

Vous pouvez aider les utilisateurs à renseigner les informations de leur compte en utilisant l'attribut autocomplete approprié. Utilisez autocomplete="email" pour le champ d'adresse e-mail et autocomplete="new-password" pour le champ de nouveau mot de passe.

En savoir plus sur le remplissage automatique des commandes de saisie

Vous pouvez également aider les utilisateurs à saisir un mot de passe sécurisé en proposant une option d'affichage du mot de passe <button>. En savoir plus sur le schéma de mot de passe à révéler

Sécuriser votre formulaire d'inscription

Ne stockez ni ne transmettez jamais de mots de passe en texte brut. Veillez à saler et hacher les mots de passe, et n'essayez pas d'inventer votre propre algorithme de hachage.

Proposez l'authentification multifacteur, en particulier si vous stockez des données personnelles ou sensibles. Les bonnes pratiques concernant les OTP par SMS et l'activation de l'authentification renforcée avec WebAuthn expliquent comment implémenter l'authentification multifacteur.

Assurez-vous que les utilisateurs n'utilisent pas de mots de passe compromis. Par exemple, utilisez l'API Have I Been Pwned pour détecter les mots de passe compromis et suggérer à vos utilisateurs de saisir un nouveau mot de passe différent, ou les avertir si leur mot de passe est compromis.

Aider les utilisateurs à se connecter

Découvrez comment créer un formulaire de connexion pour permettre aux utilisateurs de se connecter à votre site Web.

Placez les boutons d'inscription et de connexion bien en évidence. Assurez-vous que votre formulaire est utilisable sur les appareils tactiles :

  • La taille de la zone de saisie des boutons est d'au moins 48 px.
  • La taille de font-size de vos éléments de formulaire est suffisante (20px est une bonne taille pour les mobiles).
  • Il y a suffisamment d'espace (margin) entre les commandes de formulaire et les entrées sont suffisamment grandes (utilisez au moins padding: 15px sur mobile).

Aider les utilisateurs à saisir leur adresse e-mail et leur mot de passe

Aidez les navigateurs et les gestionnaires de mots de passe à saisir automatiquement les informations de compte. Utilisez autocomplete="email" pour le champ d'adresse e-mail et autocomplete="current-password" pour le champ de mot de passe actuel.

Pour aider les utilisateurs à saisir manuellement les informations de leur compte, utilisez type="email" pour le champ d'adresse e-mail afin d'afficher le clavier à l'écran approprié sur les appareils mobiles.

Utilisez l'attribut required pour vos champs d'adresse e-mail et de mot de passe afin de pouvoir avertir l'utilisateur des valeurs non valides lorsqu'il envoie le formulaire. Envisagez d'utiliser la validation en temps réel pour aider les utilisateurs à corriger les données non valides dès qu'ils les ont saisies, plutôt que d'attendre l'envoi du formulaire.

Assurez-vous que les utilisateurs peuvent voir le mot de passe qu'ils ont saisi.

Le texte que vous saisissez pour <input type="password"> est masqué par défaut pour respecter la confidentialité des utilisateurs. Aidez les utilisateurs à saisir leur mot de passe en affichant une <button> pour activer/désactiver la visibilité du texte saisi.

En savoir plus sur l'implémentation d'un <button> de révélation de mot de passe

Assurez-vous que vos formulaires de connexion et d'inscription sont utilisables

Testez régulièrement vos formulaires de connexion et d'inscription auprès de vraies personnes pour vous assurer que l'authentification fonctionne comme prévu. Utilisez des outils d'analyse et de mesure des utilisateurs réels (RUM) pour collecter des données de terrain, et des outils tels que Lighthouse et PageSpeed Insights pour exécuter vous-même des tests. En savoir plus sur les tests d'utilisabilité et la collecte de données analytiques

Assurez-vous que vos formulaires fonctionnent dans différents navigateurs et sur différentes plates-formes. Testez votre formulaire sur différentes tailles d'écran, en utilisant uniquement votre clavier, ou à l'aide d'un lecteur d'écran tel que VoiceOver sur Mac ou NVDA sur Windows.

Aider les utilisateurs à modifier les paramètres de leur compte

Assurez-vous que les utilisateurs peuvent modifier tous les paramètres de leur compte, y compris les adresses e-mail, les mots de passe et les noms d'utilisateur.

Indiquez clairement les données que vous stockez et aidez les utilisateurs à télécharger toutes leurs données personnelles à tout moment. Assurez-vous que les utilisateurs peuvent supprimer leur compte s'ils le souhaitent. Dans certaines régions, les fonctionnalités de gestion de compte telles que celles-ci peuvent être une obligation légale.

S'assurer que les utilisateurs peuvent modifier leur mot de passe

Facilitez la mise à jour du mot de passe pour les utilisateurs.

Demandez aux utilisateurs leur mot de passe actuel avant de le modifier, et envoyez-leur un e-mail concernant la modification du mot de passe avec la possibilité de revenir en arrière et de verrouiller le compte.

Ajoutez l'option permettant de demander un nouveau mot de passe et envisagez de fournir une URL .well-known pour demander un nouveau mot de passe.

Ressources