Aidez vos utilisateurs à s'inscrire, à se connecter et à gérer les détails de leur compte en toute simplicité.
Si les utilisateurs doivent se connecter à votre site, la conception du formulaire d'inscription doit être critiques. Cela est particulièrement vrai pour les personnes qui ont une mauvaise connexion, sur mobile, dans pressé ou stressé. 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 inscription manquée. opportunité.
Voici un exemple de formulaire d'inscription très simple qui illustre toutes les bonnes pratiques:
Checklist
- Évitez, si possible, de vous connecter.
- Indiquez clairement comment créer un compte.
- Indiquez clairement comment accéder aux détails du compte.
- Réduisez l'encombrement visuel.
- Tenez compte de la durée de la session.
- Aidez les gestionnaires de mots de passe à suggérer et à stocker des mots de passe de manière sécurisée.
- N'autorisez pas les mots de passe compromis.
- Autorisez la copie de mots de passe.
- Ne stockez ni ne transmettez jamais de mots de passe en texte brut.
- Ne forcez pas la mise à jour des mots de passe.
- Simplifiez la modification ou la réinitialisation des mots de passe.
- Activez la connexion fédérée.
- Simplifiez le changement de compte.
- Envisagez de proposer une authentification multifacteur.
- Attention aux noms d'utilisateur.
- Effectuez des tests sur le terrain et dans l'atelier.
- Effectuez des tests sur différents navigateurs, appareils et plates-formes.
Si possible, évitez de vous connecter
Avant d'implémenter un formulaire d'inscription et de demander aux utilisateurs de créer un compte sur votre site, pensez à si c'est vraiment nécessaire. Dans la mesure du possible, évitez de contrôler les fonctionnalités derrière la connexion.
Le meilleur formulaire d'inscription est de ne pas s'inscrire !
En demandant à un utilisateur de créer un compte, vous vous séparez de ce qu'il essaie d'obtenir. Vous demandez une faveur et demandez à l'utilisateur de vous confier ses données personnelles. Chaque mot de passe et élément des données que vous stockez portent sur une "dette de données" et votre confidentialité, ce qui devient un coût et une responsabilité sur 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 des sessions, envisagez d'utiliser plutôt le stockage côté client. Pour le shopping obliger les utilisateurs à créer un compte pour effectuer un achat est l'une des principales raisons de faire du shopping. d'abandon de panier. Vous devez définir le paiement sans connexion comme mode de paiement par défaut.
Rendre la procédure de connexion évidente
Indiquez clairement comment créer un compte sur votre site, par exemple à l'aide d'une connexion ou d'une connexion. en haut à droite de la page. Évitez d'utiliser une icône ambiguë ou une formulation vague ("Préparez-vous !", "Rejoignez-nous") et ne masquez pas la connexion dans un menu de navigation. L'expert en convivialité Steve Krug a résumé Cette approche de la facilité d'utilisation des sites Web: Ne me faites pas réfléchir. Si vous avez besoin de convaincre les autres membres de votre équipe Web, utilisez les données analytiques pour montrer l'impact de différentes options.
<ph type="x-smartling-placeholder">
Lorsque les fenêtres sont plus grandes que celles présentées ici, Gmail affiche un lien Connexion et un bouton Créer un du compte.
Veillez à associer les comptes des utilisateurs qui s'inscrivent via un fournisseur d'identité tel que Google et qui également s'inscrire en utilisant l'adresse e-mail et le mot de passe. C'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 détails du compte
Une fois qu'un utilisateur s'est connecté, indiquez-lui clairement comment accéder aux détails du compte. En particulier, faites en sorte la procédure à suivre pour 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. Désencombrez votre appareil Ce n'est pas le moment de laisser les distractions et les tentations !
<ph type="x-smartling-placeholder">Lors de l'inscription, demandez le moins de crédits possible. Collecter des données utilisateur supplémentaires (telles que le nom et l'adresse) que lorsque vous en avez besoin et lorsque l'utilisateur constate un réel avantage de fournir ces données. À noter que chaque élément de données que vous communiquez et stockez entraîne des frais et une responsabilité.
Ne redoublez pas vos saisies juste pour vous assurer que les utilisateurs comprennent bien 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 une confirmation à l'utilisateur une fois qu'il a saisi ses coordonnées, puis poursuivez la création du compte. une fois qu'il aura répondu. Il s'agit d'un modèle d'inscription courant: les utilisateurs y sont habitués.
Envisagez d'utiliser la connexion sans mot de passe en envoyant un code aux utilisateurs chaque fois qu'ils se connectent un nouvel appareil ou navigateur. Les sites tels que Slack et Medium en utilisent une version.
<ph type="x-smartling-placeholder">Comme pour la connexion fédérée, cela présente l'avantage de vous éviter d'avoir à 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 gérer l'identité des utilisateurs, vous devez durée: durée pendant laquelle l'utilisateur reste connecté et ce qui peut vous amener à le déconnecter.
Demandez-vous si vos utilisateurs utilisent des mobiles ou des ordinateurs, qu'ils partagent sur un ordinateur ou qu'ils partagent 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 au navigateur à suggérer et à stocker des mots de passe, afin que les utilisateurs n'ont pas besoin de choisir, de mémoriser ou de saisir eux-mêmes des mots de passe. Les gestionnaires de mots de passe fonctionnent bien dans les navigateurs récents, la synchronisation des comptes entre les appareils, entre les applications Web et spécifiques à la plate-forme, et pour les nouveaux appareils.
Il est donc extrêmement important de coder correctement les formulaires d'inscription, en particulier d'utiliser le bon format
pour la saisie semi-automatique. Pour les formulaires d'inscription, utilisez autocomplete="new-password" pour les nouveaux mots de passe et ajoutez
Corriger les valeurs de saisie semi-automatique dans les autres champs du formulaire dans la mesure du possible, comme autocomplete="email"
et autocomplete="tel". Vous pouvez également aider les gestionnaires de mots de passe en utilisant d'autres name et id.
dans les formulaires d'inscription et de connexion, pour l'élément form lui-même, ainsi que pour les input et 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.
S'assurer 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, et vous devriez encourager aux utilisateurs d'accepter les mots de passe sécurisés suggérés par les navigateurs et les gestionnaires de navigateurs tiers.
Toutefois, de nombreux utilisateurs souhaitent saisir leurs propres mots de passe. Vous devez donc implémenter des règles puissance. Le NIST (National Institute of Standards and Technology, É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 dans les 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 déjà ou compromis. Le site Have I Been Pwned fournit une API pour les mots de passe ou vous pouvez l'exécuter en tant que service vous-même.
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é compromises.
Si vous refusez le mot de passe proposé par un utilisateur, expliquez-lui précisément pourquoi il a été refusé. Affichez les problèmes en ligne et expliquez comment les résoudre. dès que l'utilisateur a saisi une valeur, et non après avoir envoyé le formulaire d'inscription et qu'il a dû attendez la réponse de votre serveur.
<ph type="x-smartling-placeholder">Ne pas interdire le collage de mots de passe
Certains sites n'autorisent pas le collage de texte dans la saisie du mot de passe.
Interdire le collage de mots de passe agace les utilisateurs, encourage les mots de passe faciles à mémoriser (et donc est plus facile à compromettre) et, selon des organisations telles que peut en fait réduire la sécurité. Les utilisateurs se rendent compte qu'il n'est pas possible de coller du contenu après avoir essayé de coller leur mot de passe. 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 les mises à jour des mots de passe peut être coûteux pour les services informatiques, agaçant les utilisateurs et n'a pas grand-chose sur la sécurité. Cela est également susceptible d'encourager les gens d'utiliser des mots de passe faciles à mémoriser non sécurisés ou de conserver une trace 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, surveillez également 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 à leur compte, en leur indiquant où et quand une connexion a eu lieu.
<ph type="x-smartling-placeholder">
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, il est étonnamment difficile.
Bien entendu, vous devez également permettre aux utilisateurs de réinitialiser facilement leur mot de passe en cas d'oubli. L'Open Web Application Security Project fournit des conseils détaillés sur la façon de gérer les pertes mots de passe.
Pour assurer la sécurité de votre entreprise et de vos utilisateurs, il est particulièrement important d'aider les utilisateurs à modifier leurs
s’il découvre qu’il a
été compromis. Pour vous faciliter la tâche, vous devez ajouter
/.well-known/change-password de votre URL
qui redirige vers votre page de gestion des mots de passe. Cela permet aux gestionnaires
de mots de passe de naviguer
vos utilisateurs directement à la page où ils
peuvent modifier leur mot de passe pour votre site. Cette fonctionnalité est
actuellement implémenté dans Safari et Chrome, et le sera dans d'autres navigateurs. Aider les utilisateurs à modifier leur mot de passe
en ajoutant une URL connue pour changer les mots de passe explique comment
pour la mettre en œuvre.
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 par 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.
<ph type="x-smartling-placeholder">
Cette approche présente plusieurs avantages. Pour les utilisateurs qui créent un compte à l'aide de la connexion fédérée, vous vous n'avez pas besoin de demander, de communiquer ni de stocker des mots de passe.
Vous pouvez également accéder à des informations de profil validées supplémentaires à partir d’une connexion fédérée, telles que en tant qu'adresse e-mail, ce qui signifie que l'utilisateur n'a pas à saisir ces données et que vous n'avez pas à le faire la vérification vous-même. La connexion fédérée peut également faciliter grandement la tâche des utilisateurs nouvel appareil.
Intégrer Google Sign-In à votre application Web explique comment ajouter une connexion fédérée à vos options d'inscription. Il existe de nombreuses plates-formes d'identité.
Simplifiez le changement de compte
De nombreux utilisateurs partagent des appareils et passent d'un compte à un autre dans le même navigateur. Accès des utilisateurs connexion fédérée ou non, vous devez faciliter le changement de compte.
<ph type="x-smartling-placeholder">
Envisager de proposer l'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 à l'aide d'un code secret à usage unique envoyé par e-mail ou SMS, ou d'un code unique par code secret, une clé de sécurité ou un lecteur d'empreinte digitale. Bonnes pratiques concernant l'OTP par SMS Activer l'authentification forte avec WebAuthn expliquer comment mettre en œuvre l'authentification multifacteur.
Vous devez certainement proposer (ou appliquer) l'authentification multifacteur si votre site gère des des informations sensibles.
Attention aux noms d'utilisateur
N’insistez pas sur un nom d’utilisateur à moins que vous n’en ayez besoin (ou jusqu’à ce que vous en ayez besoin). Permettez aux utilisateurs de s'inscrire et de se connecter avec Seulement une adresse e-mail (ou un numéro de téléphone) et un mot de passe, ou 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 exige des noms d'utilisateur, ne leur imposez pas de règles déraisonnables et n'empêchez pas les utilisateurs de modifier son 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" comme nom d'utilisateur.
Effectuez des tests sur différents appareils, plates-formes, navigateurs et versions
Testez les formulaires d'inscription sur les plates-formes les plus utilisées par 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 sans frais projets Open Source sur toute une gamme d'appareils et de navigateurs.
Implémentez des analyses et la surveillance des utilisateurs réels
Vous avez besoin de données réelles ainsi que de données de laboratoire. pour comprendre comment les utilisateurs consultent vos formulaires d'inscription. Analytics et Real User Monitoring (RUM) fournissent des données sur l'expérience réelle de vos utilisateurs, comme le temps que mettent les pages d'inscription à les composants d'UI avec lesquels les utilisateurs interagissent (ou non) et combien de temps ils mettent pour effectuer s'inscrire.
- Analyse des pages: les pages vues, les taux de rebond et les sorties pour chaque page du processus d'inscription.
- Analyse des interactions: entonnoirs de conversion vers l'objectif et les événements d'indiquer à quel moment les utilisateurs abandonnent le processus d'inscription et la proportion d'utilisateurs qui cliquent sur les boutons ; des liens et d'autres éléments de vos pages d'inscription.
- Performances du site Web: métriques centrées sur l'utilisateur peut vous indiquer si le processus d'inscription est lent ou visuellement instable.
De petites modifications peuvent avoir un impact important sur le taux d'achèvement des formulaires d'inscription. Analyse et 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ées lors de tests locaux.
Poursuivez votre apprentissage
- Bonnes pratiques concernant les formulaires de connexion
- Bonnes pratiques concernant les formulaires de paiement et d'adresse
- Créez des formulaires incroyables
- Bonnes pratiques de conception de formulaires mobiles
- Commandes de formulaire plus performantes
- Créer des formulaires accessibles
- Simplifier le processus d'inscription à l'aide de l'API Credential Management
- Valider des numéros de téléphone sur le Web avec l'API WebOTP
Photo de @ecowarriorprincess sur Unsplash.