Bonnes pratiques concernant le formulaire d'inscription

Aidez vos utilisateurs à s'inscrire, à se connecter et à gérer les informations de leur compte en toute simplicité.

Sam Dutton

Si un jour les utilisateurs ont besoin de se connecter à votre site, il est essentiel de bien concevoir votre formulaire d'inscription. Cela est particulièrement vrai pour les personnes dont la connexion est mauvaise, 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 signifier 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 illustre toutes les bonnes pratiques:

Checklist

Éviter de vous connecter dans la mesure du possible

Avant de mettre en place un formulaire d'inscription et de demander aux utilisateurs de créer un compte sur votre site, déterminez si cela est vraiment nécessaire. Dans la mesure du possible, évitez de bloquer des fonctionnalités derrière la connexion.

Le meilleur formulaire d'inscription est l'absence de formulaire !

En demandant à un utilisateur de créer un compte, vous interférez entre lui et ce qu'il essaie d'accomplir. Vous demandez à l'utilisateur de vous faire confiance en ce qui concerne ses 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" liée à la confidentialité et à la sécurité, et devient donc un coût et une responsabilité pour votre site.

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

Indiquez clairement comment se connecter

Indiquez clairement comment créer un compte sur votre site à l'aide d'un bouton Connexion ou Connexion en haut à droite de la page. Évitez d'utiliser une icône ambiguë ou des formulations vagues ("Get on board!", "Rejoignez-nous") et ne masquez pas l'option de connexion dans un menu de navigation. Steve Krug, spécialiste de la facilité d'utilisation, a résumé cette approche de l'ergonomie des sites Web: Ne me faites pas réfléchir ! Si vous devez convaincre d'autres membres de votre équipe Web, utilisez les données analytiques pour montrer l'impact des différentes options.

Deux captures d'écran d'une maquette de site Web d'e-commerce consultée sur un téléphone Android. Celle de gauche utilise pour le lien de connexion une icône quelque peu ambiguë. Celle de droite indique simplement "Connexion".
Faites en sorte que la connexion soit évidente. Une icône peut sembler ambiguë, mais un bouton ou un lien Se connecter est bien visible.
Captures d'écran de la connexion à Gmail: une page sur laquelle est affiché le bouton "Se connecter" lorsqu'un utilisateur clique dessus pour accéder à un formulaire qui contient également un lien "Créer un compte".
La page de connexion à Gmail contient un lien permettant de créer un compte.
Lorsque la fenêtre est plus grande que celle présentée ici, Gmail affiche un lien Se connecter et un bouton Créer un compte.

Veillez à associer les comptes des utilisateurs qui s'inscrivent via un fournisseur d'identité tel que Google, et qui s'inscrivent également avec une adresse e-mail et un mot de passe. Cette opération est simple 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 détails du compte

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

Réduire l'encombrement du formulaire

Dans le flux d'inscription, votre travail consiste à minimiser la complexité et à garder l'utilisateur concentré. Libérez de l'espace. Ce n'est pas le moment pour les distractions et les tentations !

N'empêchez pas les utilisateurs de finaliser leur inscription.

Lors de l'inscription, demandez le moins de crédits 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 remarque un avantage évident à fournir ces données. Gardez à l'esprit que chaque élément de données que vous communiquez et stockez entraîne des coûts et une responsabilité.

Ne redoublez pas d'efforts 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 renseignés automatiquement. Envoyez plutôt un code de confirmation à l'utilisateur une fois qu'il a saisi ses coordonnées, puis poursuivez la création du compte une fois qu'il a répondu. Il s'agit d'un schéma d'inscription courant: les utilisateurs y sont habitués.

Envisagez de vous connecter sans mot de passe en envoyant un code aux utilisateurs chaque fois qu'ils se connectent sur un nouvel appareil ou navigateur. Des sites tels que Slack et Medium utilisent une version de cette méthode.

Connexion sans mot de passe sur medium.com.

Comme pour la connexion fédérée, cette méthode présente l'avantage supplémentaire de ne pas avoir à gérer les mots de passe des utilisateurs.

Tenir compte de la durée de session

Quelle que soit l'approche que vous adoptez concernant l'identité des utilisateurs, vous devez prendre une décision réfléchie concernant la durée de la session: la durée pendant laquelle l'utilisateur reste connecté et ce qui peut vous amener à se déconnecter.

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

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 de navigateurs tiers et intégrés à suggérer et stocker des mots de passe, afin que les utilisateurs n'aient pas à choisir, mémoriser ou saisir eux-mêmes des mots de passe. Les gestionnaires de mots de passe fonctionnent bien dans les navigateurs modernes, car ils synchronisent les comptes entre les appareils, les applications Web et spécifiques à la plate-forme, ainsi que pour les nouveaux appareils.

Il est donc extrêmement important de coder correctement les formulaires d'inscription, en particulier d'utiliser les bonnes valeurs de saisie semi-automatique. Pour les formulaires d'inscription, utilisez autocomplete="new-password" pour les nouveaux mots de passe et ajoutez des valeurs de saisie semi-automatique correctes dans les autres champs du formulaire, tels que 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 pour tous les éléments input, select et textarea.

Vous devez également utiliser l'attribut type approprié pour fournir le clavier droit 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.

Vérifier que les utilisateurs saisissent des mots de passe sécurisés

Autoriser les gestionnaires de mots de passe à suggérer des mots de passe est la meilleure option. 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 pour le niveau de sécurité du mot de passe. Le National Institute of Standards and Technology des États-Unis 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 brèches 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 qui a déjà été compromis. Le site Have I Been Pwned fournit une API pour la vérification des mots de passe, mais vous pouvez l'exécuter vous-même 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, expliquez-lui précisément pourquoi il a été refusé. Présentez les problèmes de façon intégrée et expliquez comment les résoudre, dès que l'utilisateur saisit une valeur, et non après avoir envoyé le formulaire d'inscription et avoir attendu la réponse de votre serveur.

Expliquez clairement pourquoi un mot de passe est refusé.

N'interdisez pas le collage de mots de passe

Certains sites n'autorisent pas le collage de texte dans les mots de passe.

Interdire le collage de mots de passe entrave les utilisateurs, encourage les mots de passe faciles à mémoriser (et peuvent donc être plus faciles à compromettre) et, selon des organisations telles que le National Cyber Security Centre du Royaume-Uni, peut en fait réduire la sécurité. Les utilisateurs découvrent que le collage n'est pas autorisé après avoir essayé de coller leur mot de passe. L'interdiction du collage de mots de passe n'évit donc pas les failles du presse-papiers.

Ne jamais stocker ni transmettre 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.

Ne pas forcer la mise à jour des mots de passe

N'obligez pas les utilisateurs à modifier leurs mots de passe de manière arbitraire.

Forcer la mise à jour des mots de passe peut être coûteuse pour les services informatiques, agaçante pour les utilisateurs et n'a pas beaucoup d'impact sur la sécurité. Elle est également susceptible d'encourager les utilisateurs à utiliser des mots de passe non sécurisés et faciles à mémoriser, ou à conserver un enregistrement physique des mots de passe.

Plutôt que de forcer la mise à jour des mots de passe, vous devez surveiller toute activité inhabituelle sur le compte et avertir les utilisateurs. Si possible, vous devez également surveiller les mots de passe compromis par des 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 "Activité du compte Gmail"
Page "Activité du compte Gmail"

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

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

Bien entendu, vous devez également permettre aux utilisateurs de réinitialiser facilement leur mot de passe en cas d'oubli. Le projet Open Web Application Security Project fournit des conseils détaillés sur la gestion des mots de passe perdus.

Pour protéger votre entreprise et vos utilisateurs, il est particulièrement important d'aider les utilisateurs à modifier leur mot de passe s'ils découvrent que celui-ci a été piraté. Pour vous faciliter la tâche, vous devez ajouter à votre site une URL /.well-known/change-password qui redirige vers votre page de gestion des mots de passe. Cela permet aux gestionnaires de mots de passe d'accéder directement à la page permettant aux utilisateurs de modifier le mot de passe de votre site. Cette fonctionnalité est désormais disponible dans Safari et Chrome, et sera bientôt disponible dans d'autres navigateurs. La section Aider les utilisateurs à changer facilement de mot de passe en ajoutant une URL connue pour le changement de mot de passe explique comment implémenter cette procédure.

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'une adresse e-mail et d'un formulaire d'inscription. Toutefois, vous devez également permettre aux utilisateurs de 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 d'une connexion fédérée, telles qu'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 d'effectuer la validation vous-même. La connexion fédérée peut également faciliter considérablement l'achat d'un nouvel appareil pour les utilisateurs.

La page sur l'intégration de Google Sign-In à votre application Web explique comment ajouter la connexion fédérée à vos options d'inscription. De nombreuses autres plates-formes de gestion des identités sont disponibles.

Simplifiez le changement de compte

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

Gmail, affichage du changement de compte
Changement de compte dans Gmail.

Envisagez de proposer une authentification multifacteur

L’authentification multifacteur consiste à s’assurer que les utilisateurs fournissent une authentification 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 à usage unique envoyé par e-mail ou par SMS, ou à l'aide d'un code unique, d'une clé de sécurité ou d'un lecteur d'empreinte digitale basés sur l'application. Les bonnes pratiques concernant l'OTP par SMS et l'article Activer l'authentification forte avec WebAuthn expliquent comment mettre en œuvre l'authentification multifacteur.

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

Utiliser les noms d'utilisateur avec précaution

N'insistez pas sur un nom d'utilisateur à moins que vous n'en ayez besoin. Permettez aux utilisateurs de s'inscrire et de se connecter uniquement avec une adresse e-mail (ou un numéro de téléphone) et un mot de passe, ou avec une connexion fédérée s'ils le souhaitent. Ne les forcez 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 votre backend, vous devez générer un identifiant 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" pour les noms d'utilisateur.

Effectuez des tests sur plusieurs appareils, plates-formes, navigateurs et versions

Testez les formulaires d'inscription sur les plates-formes les plus couramment utilisées par vos utilisateurs. Les fonctionnalités des éléments de formulaire peuvent varier, et des différences de taille de fenêtre d'affichage peuvent entraîner des problèmes de mise en page. BrowserStack permet de tester sans frais des projets Open Source sur toute une gamme d'appareils et de navigateurs.

Implémenter l'analyse et la surveillance des utilisateurs réels

Vous avez besoin de données réelles ainsi que de données de laboratoire pour comprendre l'expérience utilisateur offerte par vos formulaires d'inscription. Analytics et Real User Monitoring (RUM) fournissent des données sur l'expérience utilisateur réelle, telles que le temps de chargement des pages d'inscription, les composants d'interface utilisateur avec lesquels les utilisateurs interagissent (ou non) et le temps nécessaire pour finaliser l'inscription.

Des modifications mineures peuvent avoir un impact significatif sur le taux d'achèvement des formulaires d'inscription. Analytics et le RUM vous permettent d'optimiser et de hiérarchiser les modifications, ainsi que de surveiller votre site pour détecter les problèmes qui ne sont pas exposés par les tests en local.

Poursuivre votre apprentissage

Photo de @ecowarriorprincess sur Unsplash.