Identité

Aidez les utilisateurs à s'inscrire

Le formulaire d'inscription est souvent la première interaction avec un formulaire sur votre site Web. Un formulaire d'inscription bien conçu est essentiel, et un formulaire sécurisé est essentiel.

Examinons un formulaire d'inscription et voyons comment vous pouvez aider les utilisateurs à s'inscrire sur votre site Web.

Limitez le contenu du formulaire d'inscription et n'affichez que les commandes nécessaires à la création d'un compte. Ne doublez pas les paramètres de votre formulaire pour aider les utilisateurs à fournir les bonnes informations sur leur compte. Envoyez plutôt un e-mail de confirmation.

Aider les utilisateurs à renseigner les informations de leur compte

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

En savoir plus sur la saisie automatique des commandes de saisie

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

Vérifier que votre formulaire d'inscription est sécurisé

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

Proposez une authentification multifacteur, en particulier si vous stockez des données personnelles ou sensibles. Les bonnes pratiques OTP envoyées par SMS et Activer l'authentification forte avec WebAuthn expliquent comment implémenter l'authentification multifacteur.

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

Aider les utilisateurs à se connecter

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

Faites en sorte que l'emplacement des boutons d'inscription et de connexion soit bien visible. Assurez-vous que votre formulaire peut être utilisé sur des appareils tactiles:

La taille de l'élément tactile des boutons doit être d'au moins 48 pixels.
La font-size des éléments de votre formulaire est suffisamment grande (20px est à peu près juste sur les mobiles).
L'espace entre les commandes du formulaire est suffisant (margin) et les entrées sont suffisamment grandes (utilisez au moins padding: 15px sur mobile).

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

Aidez les navigateurs et les gestionnaires de mots de passe à saisir automatiquement les informations des comptes. 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 détails de leur compte, utilisez type="email" pour que le champ d'adresse e-mail affiche le clavier à l'écran approprié sur les appareils mobiles.

Utilisez l'attribut required dans les champs d'adresse e-mail et de mot de passe afin d'être averti en cas de valeurs non valides lorsque l'utilisateur envoie le formulaire. Pensez à utiliser la validation en temps réel pour aider les utilisateurs à corriger les données incorrectes 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 renseignez pour <input type="password"> est masqué par défaut afin de 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'une procédure de récupération de mot de passe <button>

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 personnes réelles pour vous assurer que l'authentification fonctionne comme prévu. Utilisez les outils d'analyse et les mesures RUM (Real User Measurement) pour collecter des données réelles, et des outils tels que Lighthouse et PageSpeed Insights pour effectuer des tests par vous-même. En savoir plus sur les tests d'usabilité et la collecte des données d'analyse

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 un lecteur d'écran comme VoiceOver sous Mac ou NVDA sous Windows.

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

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

Indiquez clairement quelles données 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. Ces fonctionnalités de gestion de compte peuvent être obligatoires dans certaines régions.

S'assurer que les utilisateurs peuvent modifier leurs mots de passe

Permettez aux utilisateurs de modifier facilement leur mot de passe.

Demandez aux utilisateurs le mot de passe actuel avant de le modifier, et envoyez un e-mail à propos de la modification du mot de passe, avec la possibilité d'annuler 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.