Bonnes pratiques concernant le formulaire d'inscription

Aidez vos utilisateurs à s'inscrire, à se connecter et à gérer les informations de leur compte avec un minimum de complications.

Sam Dutton

Si les utilisateurs doivent se connecter à votre site, une bonne conception du formulaire d'inscription est essentielle. Cela est particulièrement vrai pour les personnes qui ont une mauvaise connexion, qui utilisent un mobile, qui sont pressées ou qui sont stressées. Les formulaires d'inscription mal conçus enregistrent des taux de rebond élevés. Chaque rebond peut représenter un utilisateur perdu et mécontent, et pas seulement une opportunité d'inscription manquée.

Voici un exemple de formulaire d'inscription très simple qui respecte toutes les bonnes pratiques :

Checklist

Évitez de vous connecter si possible

Avant d'implémenter un formulaire d'inscription et de demander aux utilisateurs de créer un compte sur votre site, demandez-vous si vous en avez vraiment besoin. Dans la mesure du possible, évitez de bloquer l'accès à des fonctionnalités derrière une connexion.

Le meilleur formulaire d'inscription est celui qui n'existe pas !

En demandant à un utilisateur de créer un compte, vous vous interposez entre lui et ce qu'il essaie d'accomplir. Vous demandez un service et vous demandez à l'utilisateur de vous faire confiance en lui communiquant des données à caractère personnel. Chaque mot de passe et élément de données que vous stockez est associé à une "dette de données" et de confidentialité, ce qui devient un coût et une responsabilité pour votre site.

Si la principale raison pour laquelle vous demandez aux utilisateurs de créer un compte est d'enregistrer des informations entre les navigations ou les sessions de navigation, envisagez d'utiliser plutôt le stockage côté client. Pour les sites d'achat, le fait d'obliger les utilisateurs à créer un compte pour effectuer un achat est cité comme la principale raison de l'abandon du panier. Vous devez définir le paiement sans connexion comme mode par défaut.

Rendre la connexion évidente

Indiquez clairement comment créer un compte sur votre site, par exemple avec un bouton Se connecter ou Connexion en haut à droite de la page. Évitez d'utiliser une icône ambiguë ou un libellé vague ("Rejoignez-nous !", "Rejoignez-nous") et ne masquez pas la connexion dans un menu de navigation. L'expert en usabilité Steve Krug a résumé cette approche de l'usabilité des sites Web : Ne me faites pas réfléchir ! Si vous devez convaincre d'autres membres de votre équipe Web, utilisez Analytics pour montrer l'impact des différentes options.

Deux captures d'écran d'un modèle de site Web d'e-commerce consulté sur un téléphone Android. Celui de gauche utilise une icône pour le lien de connexion qui est quelque peu ambiguë, tandis que celui de droite indique simplement "Se connecter".
Rendez la connexion évidente. Une icône peut être ambiguë, mais un bouton ou un lien Se connecter est évident.
Des captures d'écran de la connexion à Gmail : une page affichant le bouton "Se connecter", qui mène à un formulaire contenant également un lien "Créer un compte".
La page de connexion à Gmail contient un lien permettant de créer un compte.
Lorsque la taille de la fenêtre est supérieure à celle illustrée ici, Gmail affiche un lien Se connecter et un bouton Créer un compte.

Assurez-vous d'associer les comptes des utilisateurs qui s'inscrivent via un fournisseur d'identité tel que Google et qui s'inscrivent également à l'aide d'une adresse e-mail et d'un mot de passe. Cela est facile à faire si vous pouvez accéder à l'adresse e-mail d'un utilisateur à partir des données de profil du fournisseur d'identité et faire correspondre les deux comptes. Le code ci-dessous montre comment accéder aux données de messagerie d'un utilisateur Google Sign-In.

// auth2 is initialized with gapi.auth2.init()
if (auth2.isSignedIn.get()) {
  var profile = auth2.currentUser.get().getBasicProfile();
  console.log(`Email: ${profile.getEmail()}`);
}

Indiquez clairement comment accéder aux informations du compte

Une fois qu'un utilisateur s'est connecté, indiquez clairement comment accéder aux informations de son compte. En particulier, indiquez clairement comment modifier ou réinitialiser les mots de passe.

Limitez l'encombrement des formulaires

Votre travail consiste à réduire la complexité du processus d'inscription et à maintenir la concentration de l'utilisateur. Supprimez les éléments inutiles. Ce n'est pas le moment de se laisser distraire ni tenter !

Ne distrayez pas les utilisateurs de la procédure d'inscription.

Lors de l'inscription, demandez le moins d'informations possible. Ne collectez des données utilisateur supplémentaires (telles que le nom et l'adresse) que lorsque vous en avez besoin et lorsque l'utilisateur voit un avantage clair à fournir ces données. N'oubliez pas que chaque élément de données que vous communiquez et stockez entraîne des coûts et des responsabilités.

Ne doublez pas vos entrées simplement pour vous assurer que les utilisateurs saisissent correctement leurs coordonnées. Cela ralentit le remplissage du formulaire et n'a aucun sens si les champs du formulaire sont remplis automatiquement. Envoyez plutôt un code de confirmation à l'utilisateur une fois qu'il a saisi ses coordonnées, puis poursuivez la création de compte une fois qu'il a répondu. Il s'agit d'un modèle d'inscription courant, auquel les utilisateurs sont habitués.

Vous pouvez envisager la connexion sans mot de passe en envoyant un code aux utilisateurs chaque fois qu'ils se connectent sur un nouvel appareil ou un nouveau navigateur. Les sites tels que Slack et Medium en utilisent une version.

Connexion sans mot de passe sur medium.com

Comme pour la connexion fédérée, vous n'avez pas besoin de gérer les mots de passe des utilisateurs.

Tenir compte de la durée de la session

Quelle que soit l'approche que vous adoptez pour l'identité des utilisateurs, vous devrez prendre une décision réfléchie concernant la durée de la session : la durée pendant laquelle l'utilisateur reste connecté et les raisons pour lesquelles vous pouvez le déconnecter.

Déterminez si vos utilisateurs utilisent un appareil mobile ou un ordinateur, et s'ils partagent des fichiers sur un ordinateur ou des appareils.

Aider les gestionnaires de mots de passe à suggérer et à stocker des mots de passe de manière sécurisée

Vous pouvez aider les gestionnaires de mots de passe tiers et intégrés des navigateurs à suggérer et à stocker des mots de passe afin que les utilisateurs n'aient pas à choisir, mémoriser ni saisir eux-mêmes des mots de passe. Les gestionnaires de mots de passe fonctionnent bien dans les navigateurs récents, car ils permettent de synchroniser les comptes entre les appareils, les applications Web et spécifiques à une plate-forme, ainsi que les nouveaux appareils.

Il est donc extrêmement important de coder correctement les formulaires d'inscription, en particulier pour utiliser les valeurs de saisie semi-automatique appropriées. Pour les formulaires d'inscription, utilisez autocomplete="new-password" pour les nouveaux mots de passe et ajoutez des valeurs de saisie semi-automatique correctes aux autres champs de formulaire dans la mesure du possible, comme autocomplete="email" et autocomplete="tel". Vous pouvez également aider les gestionnaires de mots de passe en utilisant différentes valeurs name et id dans les formulaires d'inscription et de connexion, pour l'élément form lui-même, ainsi que les éléments input, select et textarea.

Vous devez également utiliser l'attribut type approprié pour fournir le bon clavier sur mobile et activer la validation intégrée de base par le navigateur. Pour en savoir plus, consultez les bonnes pratiques concernant les formulaires de paiement et d'adresse.

Assurer que les utilisateurs saisissent des mots de passe sécurisés

La meilleure option consiste à autoriser les gestionnaires de mots de passe à suggérer des mots de passe. Vous devez encourager les utilisateurs à accepter les mots de passe sécurisés suggérés par les navigateurs et les gestionnaires de navigateurs tiers.

Cependant, de nombreux utilisateurs souhaitent saisir leurs propres mots de passe. Vous devez donc implémenter des règles concernant le niveau de sécurité des mots de passe. L'Institut américain des normes et de la technologie (NIST) explique comment éviter les mots de passe non sécurisés.

Ne pas autoriser les mots de passe compromis

Quelles que soient les règles que vous choisissez pour les mots de passe, vous ne devez jamais autoriser les mots de passe qui ont été exposés lors de violations de sécurité.

Une fois qu'un utilisateur a saisi un mot de passe, vous devez vérifier qu'il ne s'agit pas d'un mot de passe déjà compromis. Le site Have I Been Pwned fournit une API pour la vérification des mots de passe. Vous pouvez également l'exécuter en tant que service.

Le Gestionnaire de mots de passe de Google vous permet également de vérifier si l'un de vos mots de passe existants a été compromis.

Si vous refusez le mot de passe proposé par un utilisateur, indiquez-lui précisément pourquoi. Affichez les problèmes dans le formulaire et expliquez comment les résoudre dès que l'utilisateur a saisi une valeur, et non après qu'il a envoyé le formulaire d'inscription et a dû attendre une réponse de votre serveur.

Indiquez clairement pourquoi un mot de passe est refusé.

Ne pas interdire le collage de mots de passe

Certains sites n'autorisent pas le collage de texte dans les champs de saisie de mot de passe.

Interdire le collage de mots de passe agace les utilisateurs, encourage les mots de passe faciles à mémoriser (et donc plus faciles à compromettre) et, selon des organisations telles que le National Cyber Security Centre du Royaume-Uni, peut même réduire la sécurité. Les utilisateurs ne s'aperçoivent que le collage est interdit après avoir essayé de coller leur mot de passe. Par conséquent, interdire le collage de mots de passe n'évite pas les failles du presse-papiers.

Ne stockez ni ne transmettez jamais de mots de passe en texte brut.

Assurez-vous de saluer et hacher les mots de passe, et n'essayez pas d'inventer votre propre algorithme de hachage !

Ne pas forcer la mise à jour des mots de passe

N'obligez pas les utilisateurs à modifier leur mot de passe de manière arbitraire.

Forcer la mise à jour des mots de passe peut être coûteux pour les services IT, gênant pour les utilisateurs et n'a pas beaucoup d'impact sur la sécurité. Il est également susceptible d'encourager les utilisateurs à utiliser des mots de passe mémorisables non sécurisés ou à conserver une trace physique des mots de passe.

Plutôt que de forcer la mise à jour des mots de passe, vous devez surveiller l'activité inhabituelle des comptes et en avertir les utilisateurs. Si possible, vous devez également surveiller les mots de passe compromis en raison de violations de données.

Vous devez également permettre à vos utilisateurs d'accéder à l'historique de connexion de leur compte, en leur indiquant où et quand une connexion s'est produite.

Page d'activité du compte Gmail
Page d'activité du compte Gmail.

Faciliter la modification ou la réinitialisation des mots de passe

Indiquez clairement aux utilisateurs où et comment mettre à jour le mot de passe de leur compte. Sur certains sites, c'est étonnamment difficile.

Vous devez également permettre aux utilisateurs de réinitialiser facilement leur mot de passe s'ils l'oublient. L'Open Web Application Security Project fournit des conseils détaillés sur la gestion des mots de passe oubliés.

Pour protéger votre entreprise et vos utilisateurs, il est particulièrement important de les aider à modifier leur mot de passe s'ils découvrent qu'il a été piraté. Pour faciliter la tâche, vous devez ajouter une URL /.well-known/change-password à votre site qui redirige vers votre page de gestion des mots de passe. Les gestionnaires de mots de passe peuvent ainsi rediriger directement vos utilisateurs vers la page où ils peuvent modifier leur mot de passe pour votre site. Cette fonctionnalité est désormais implémentée dans Safari et Chrome, et sera bientôt disponible dans d'autres navigateurs. Aidez les utilisateurs à modifier facilement leurs mots de passe en ajoutant une URL bien connue pour la modification des mots de passe explique comment procéder.

Vous devez également permettre aux utilisateurs de supprimer facilement leur compte s'ils le souhaitent.

Proposer la connexion via des fournisseurs d'identité tiers

De nombreux utilisateurs préfèrent se connecter aux sites Web à l'aide d'un formulaire d'inscription avec une adresse e-mail et un mot de passe. Toutefois, vous devez également autoriser les utilisateurs à se connecter via un fournisseur d'identité tiers, également appelé connexion fédérée.

Page de connexion WordPress
Page de connexion WordPress, avec les options de connexion Google et Apple.

Cette approche présente plusieurs avantages. Pour les utilisateurs qui créent un compte à l'aide de la connexion fédérée, vous n'avez pas besoin de demander, de communiquer ni de stocker de mots de passe.

Vous pouvez également accéder à d'autres informations de profil validées à partir de la connexion fédérée, comme une adresse e-mail. Cela signifie que l'utilisateur n'a pas besoin de saisir ces données et que vous n'avez pas besoin de les valider vous-même. La connexion fédérée peut également faciliter grandement la tâche des utilisateurs lors de l'obtention d'un nouvel appareil.

L'article Intégrer Google Sign-In à votre application Web explique comment ajouter la connexion fédérée à vos options de connexion. De nombreuses autres plates-formes d'identité sont disponibles.

Simplifier le changement de compte

De nombreux utilisateurs partagent des appareils et passent d'un compte à un autre à l'aide du même navigateur. Que les utilisateurs accèdent ou non à une connexion fédérée, vous devez faciliter le changement de compte.

Gmail, montrant le changement de compte
Changement de compte dans Gmail.

Envisager de proposer l'authentification multifacteur

L'authentification multifacteur consiste à s'assurer que les utilisateurs s'authentifient de plusieurs manières. Par exemple, en plus de demander à l'utilisateur de définir un mot de passe, vous pouvez également appliquer la validation à l'aide d'un code secret à usage unique envoyé par e-mail ou SMS, ou d'un code à usage unique basé sur l'application, d'une clé de sécurité ou d'un lecteur d'empreinte digitale. Les articles Bonnes pratiques concernant les codes OTP par SMS et Activer l'authentification forte avec WebAuthn expliquent comment implémenter l'authentification multifacteur.

Vous devez certainement proposer (ou appliquer) l'authentification multifacteur si votre site traite des informations personnelles ou sensibles.

Faites attention aux noms d'utilisateur

N'insistez pas sur un nom d'utilisateur, sauf si vous en avez besoin. Autorisez les utilisateurs à s'inscrire et à se connecter avec une adresse e-mail (ou un numéro de téléphone) et un mot de passe uniquement, ou avec une connexion fédérée s'ils préfèrent. Ne les obligez pas à choisir et à mémoriser un nom d'utilisateur.

Si votre site nécessite des noms d'utilisateur, ne leur imposez pas de règles déraisonnables et n'empêchez pas les utilisateurs de mettre à jour leur nom d'utilisateur. Sur le backend, vous devez générer un ID unique pour chaque compte utilisateur, et non un identifiant basé sur des données personnelles telles que le nom d'utilisateur.

Veillez également à utiliser autocomplete="username" comme nom d'utilisateur.

Effectuer des tests sur différents appareils, plates-formes, navigateurs et versions

Testez les formulaires d'inscription sur les plates-formes les plus courantes pour vos utilisateurs. Le fonctionnement des éléments de formulaire peut varier, et les différences de taille de la fenêtre d'affichage peuvent entraîner des problèmes de mise en page. BrowserStack permet de tester gratuitement des projets Open Source sur une gamme d'appareils et de navigateurs.

Implémenter des analyses et la surveillance des utilisateurs réels

Vous avez besoin de données sur le terrain et de données de laboratoire pour comprendre l'expérience des utilisateurs avec vos formulaires d'inscription. Les données analytiques et la surveillance des utilisateurs réels (RUM) fournissent des données sur l'expérience réelle de vos utilisateurs, comme le temps de chargement des pages de connexion, les composants d'interface utilisateur avec lesquels les utilisateurs interagissent (ou non) et le temps qu'ils mettent à finaliser la connexion.

De petits changements peuvent avoir un impact important sur les taux de remplissage des formulaires d'inscription. Analytics et RUM vous permettent d'optimiser et de hiérarchiser les modifications, et de surveiller votre site à la recherche de problèmes qui ne sont pas détectés par les tests locaux.

Poursuivez votre apprentissage

Photo de @ecowarriorprincess sur Unsplash.