Meilleures pratiques du formulaire de connexion

Si les utilisateurs ont besoin de se connecter à votre site, une bonne conception du formulaire de connexion est
critique. Cela est particulièrement vrai pour les personnes disposant de mauvaises connexions, sur mobile, en
pressé ou stressé. Les formulaires de connexion mal conçus obtiennent des taux de rebond élevés.
Chaque rebond peut signifier un utilisateur perdu et mécontent - pas seulement une connexion manquée
occasion.

Voici un exemple de formulaire de connexion simple qui illustre toutes les meilleures pratiques:

Liste de contrôle

• Utilisez des éléments HTML significatifs: , ,
  , et .
• Étiquetez chaque entrée avec un .
• Utilisez les attributs d'élément pour accéder au navigateur intégré
  fonctionnalités: taper, patate douce, Saisie automatique, obligatoire,
  mise au point automatique.
• Donnez votre avis patate douce et va attribue des valeurs stables qui ne changent pas
  entre les chargements de page ou les déploiements de sites Web.
• Mettre la connexion en son propre élément.
• Assurez-vous que la soumission du formulaire est réussie.
• Utiliser autocomplete = "nouveau-mot de passe" pour la saisie du mot de passe
  dans un formulaire d'inscription et pour le nouveau mot de passe dans un formulaire de réinitialisation du mot de passe.
• Utiliser autocomplete = "mot de passe actuel" pour une connexion
  saisie du mot de passe.
• Fournissez la fonctionnalité Afficher le mot de passe.
• Utiliser étiquette aria et aria décrit par pour
  entrées de mot de passe.
• Ne doublez pas les entrées.
• Concevez les formulaires de sorte que le clavier mobile ne masque pas les
  boutons.
• Assurez-vous que les formulaires sont utilisables sur mobile: utilisez du texte lisible,
  et assurez-vous que les entrées et les boutons sont suffisamment grands pour fonctionner comme des cibles tactiles.
• Maintenez l'image de marque et le style sur vos pages d'inscription et de connexion.
• Tester sur le terrain et en laboratoire: construire des analyses de page,
  analyse des interactions et mesure de la performance centrée sur l'utilisateur dans votre
  inscription et flux de connexion.
• Test sur les navigateurs et les appareils: le comportement du formulaire varie
  de manière significative sur toutes les plates-formes.

Utilisez du HTML significatif

Utilisez des éléments conçus pour le travail: , et . Ceux-ci permettent
fonctionnalité de navigateur intégrée, améliorez l'accessibilité et donnez du sens à votre
balisage.

Utiliser

Vous pourriez être tenté de regrouper les entrées dans un <div> et gérer les données d'entrée
soumission uniquement avec JavaScript. Il est généralement préférable d'utiliser un vieux

élément. Cela rend votre site accessible aux lecteurs d'écran et autres aides
périphériques, active une gamme de fonctionnalités de navigateur intégrées, simplifie la création
connexion fonctionnelle de base pour les navigateurs plus anciens, et peut toujours fonctionner même si
JavaScript échoue.

Gotchas!

Une erreur courante consiste à envelopper une page Web entière dans un seul formulaire, mais cela est susceptible
pour causer des problèmes aux gestionnaires de mots de passe du navigateur et à la saisie automatique. Utilisez un autre
pour chaque composant de l'interface utilisateur nécessitant un formulaire. Par exemple, si vous avez
connectez-vous et recherchez sur la même page, vous devez utiliser deux éléments de formulaire.

Utiliser

Pour étiqueter une entrée, utilisez un !

<label pour="courrier électronique">Courrier électronique</label>
<contribution va="courrier électronique" …>

Deux raisons:

• Un appui ou un clic sur une étiquette déplace le focus vers son entrée. Associer une étiquette à un
  entrée en utilisant les étiquettes pour attribut avec l'entrée patate douce ou alors va.
• Les lecteurs d'écran annoncent le texte de l'étiquette lorsque l'étiquette ou l'entrée de l'étiquette est
  se concentrer.

N'utilisez pas d'espaces réservés comme étiquettes d'entrée. Les gens sont susceptibles d'oublier ce que
l'entrée était pour une fois qu'ils ont commencé à saisir du texte, surtout s'ils obtiennent
distracted («Was I entering an correo electrónico address, a phone number, or an account
IDENTIFIANT? "). Il existe de nombreux autres problèmes potentiels avec les espaces réservés: voir non
Utiliser l'espace réservé
Attribut et
Les espaces réservés dans les champs de formulaire sont
Nuisible si vous êtes
pas convaincu.

Il est probablement préférable de mettre vos étiquettes au-dessus de vos entrées. Cela permet une
conception sur mobile et ordinateur de bureau et, selon Google AI
recherche,
permet une analyse plus rapide par les utilisateurs. Vous obtenez des étiquettes et des entrées pleine largeur, et vous
pas besoin d'ajuster l'étiquette et la largeur d'entrée pour s'adapter au texte de l'étiquette.

Ouvrez le position-étiquette Glitch sur un
appareil mobile pour voir par vous-même.

Utiliser

Utiliser

pour les boutons! Les éléments Button fournissent un comportement accessible et une forme intégrée
fonctionnalité de soumission, et ils peuvent facilement être stylisés. Il ne sert à rien
utilisant un <div> ou un autre élément prétendant être un bouton.

Assurez-vous que le bouton d'envoi indique ce qu'il fait. Les exemples comprennent Créer un compte ou alors
S'identifier, ne pas Soumettre ou alors Démarrer.

Assurer une soumission réussie du formulaire

Aidez les gestionnaires de mots de passe à comprendre qu'un formulaire a été soumis. Il y en a deux
façons de faire cela:

• Accédez à une autre page.
• Émuler la navigation avec History.pushState () ou alors History.replaceState (),
  et supprimez le formulaire de mot de passe.

Avec un XMLHttpRequest ou alors aller chercher demande, assurez-vous que la connexion est réussie
signalé dans la réponse et traité en prenant également le formulaire hors du DOM
comme indiquant le succès à l'utilisateur.

Pensez à désactiver le S'identifier bouton une fois que l'utilisateur a tapé ou cliqué
Article. De nombreux utilisateurs cliquent sur les boutons plusieurs fois
même sur des sites rapides et réactifs. Cela ralentit les interactions et
ajoute à la charge du serveur.

Inversement, ne désactivez pas la soumission de formulaire en attente de saisie par l'utilisateur. Par example,
ne désactivez pas le S'identifier bouton si les utilisateurs n'ont pas saisi leur client
ÉPINGLER. Les utilisateurs peuvent manquer quelque chose dans le formulaire, puis essayez à plusieurs reprises d'appuyer sur le
(désactivée) S'identifier bouton et pense que cela ne fonctionne pas. À tout le moins, si
vous devez désactiver la soumission du formulaire, expliquer à l'utilisateur ce qui manque quand il
cliquez sur le bouton désactivé.

Mise en garde:
Le type par défaut d'un bouton dans un formulaire est nous faire parvenir. Si vous souhaitez en ajouter un autre
bouton dans un formulaire (pour Montrer le mot de passe, par exemple) ajouter type = "bouton".
Sinon, cliquer ou appuyer dessus soumettra le formulaire.

Ne doublez pas les entrées

Certains sites forcent les utilisateurs à saisir deux fois des e-mails ou des mots de passe. Cela pourrait réduire
erreurs pour quelques utilisateurs, mais entraîne un travail supplémentaire pour là utilisateurs, et augmente
abandon
les taux.
Asking twice also makes no sense where browsers autofill correo electrónico addresses or
suggest strong passwords. It’s better to enable users to confirm their correo electrónico
adresse (vous devrez le faire de toute façon) et leur permettre de réinitialiser facilement leur
mot de passe si nécessaire.

Tirez le meilleur parti des attributs d'élément

C'est là que la magie opère vraiment!
Les navigateurs ont plusieurs fonctionnalités intégrées utiles qui utilisent des attributs d'élément d'entrée.

Aidez les utilisateurs à démarrer plus rapidement

Ajouter un mise au point automatique attribuer à la première entrée de votre formulaire de connexion. Qui fait
il est clair par où commencer et, sur le bureau du moins, cela signifie que les utilisateurs n'ont pas à
sélectionnez l'entrée pour commencer à taper.

Gardez les mots de passe privés - mais permettez aux utilisateurs de les voir s'ils le souhaitent

Les entrées de mots de passe doivent avoir type = "mot de passe" pour masquer le texte du mot de passe et aider le
navigateur comprend que l'entrée est pour les mots de passe. (Notez que les navigateurs utilisent
une variété de techniques pour comprendre les rôles d'entrée et décider
proposer ou non d'enregistrer les mots de passe.)

Vous devriez ajouter un Montrer le mot de passe icône ou bouton pour permettre aux utilisateurs de vérifier
texte qu'ils ont saisi - et n'oubliez pas d'ajouter un Mot de passe oublié enlace. See
Activez l'affichage du mot de passe.

Offrez aux utilisateurs mobiles le bon clavier

Utiliser <input type="correo electrónico"> pour donner aux utilisateurs mobiles un clavier approprié et
enable basic built-in correo electrónico address validation by the browser… no JavaScript
obligatoire!

If you need to use a telephone number instead of an correo electrónico address, active un clavier de téléphone sur mobile. Vous pouvez également utiliser le
mode d'entrée attribut si nécessaire: inputmode = "numérique" est idéal pour le code PIN
Nombres. Tout ce que vous avez toujours voulu savoir
mode d'entrée
a plus de détails.

Mise en garde:
type = "nombre" ajoute une flèche haut / bas pour incrémenter les nombres, alors ne l'utilisez pas pour
les numéros qui ne sont pas destinés à être incrémentés, tels que les identifiants et les numéros de compte.

Empêchez le clavier mobile d'obstruer le S'identifier bouton

Malheureusement, si vous ne faites pas attention, les claviers mobiles peuvent couvrir votre formulaire ou,
pire, obstruer partiellement le S'identifier bouton. Les utilisateurs peuvent abandonner avant
réalisant ce qui s'est passé.

Where possible, avoid this by displaying only the correo electrónico/phone and password inputs and S'identifier bouton en haut de votre page de connexion. Mettez un autre contenu ci-dessous.

Test sur une gamme d'appareils

Vous devrez tester sur une gamme d'appareils adaptés à votre public cible et ajuster
par conséquent. BrowserStack permet free testing for de código abierto
projets sur une gamme d'appareils réels
et les navigateurs.

Pensez à utiliser deux pages

Certains sites (y compris Amazon et eBay) évitent le problème en demandant
correo electrónico/phone and password on two pages. This approach also simplifies the
expérience: l'utilisateur n'est chargé que d'une chose à la fois.

Idéalement, cela devrait être mis en œuvre avec un seul . Utilisez JavaScript
to initially display only the correo electrónico input, then hide it and show the password input.
If you must force the user to navigate to a new page between entering their correo electrónico and
mot de passe, le formulaire de la deuxième page doit avoir un élément d'entrée masqué avec le
correo electrónico value, to help enable password managers to store the correct value. Mot de passe
Styles de formulaire que Chromium comprend
fournit un exemple de code.

Aider les utilisateurs à éviter de ressaisir les données

Vous pouvez aider les navigateurs à stocker correctement les données et à remplir automatiquement les entrées, afin que les utilisateurs ne
have to remember to enter correo electrónico and password values. This is particularly important
on mobile, and crucial for correo electrónico inputs, which get taux d'abandon élevés.

Il y a deux parties à cela:

1. le Saisie automatique, patate douce, va, et taper les attributs aident les navigateurs à comprendre
   le rôle des entrées afin de stocker des données qui pourront ensuite être utilisées pour le remplissage automatique.
   Pour permettre le stockage des données pour le remplissage automatique, les navigateurs modernes nécessitent également des entrées pour
   avoir une écurie patate douce ou alors va valeur (non générée aléatoirement à chaque chargement de page ou
   déploiement de site), et être dans un avec un nous faire parvenir bouton.

2. le Saisie automatique attribut aide les navigateurs à remplir automatiquement les entrées à l'aide de
   les données stockées.

For correo electrónico inputs use autocomplete = "nom d'utilisateur", puisque Nom d'utilisateur est reconnu
par les gestionnaires de mots de passe dans les navigateurs modernes - même si vous devez utiliser type="correo electrónico"
et vous voudrez peut-être utiliser id="correo electrónico" et name="correo electrónico".

Pour les entrées de mot de passe, utilisez le Saisie automatique valeur pour aider les navigateurs
faire la différence entre les mots de passe nouveaux et actuels.

Utiliser autocomplete = "nouveau-mot de passe" pour un nouveau mot de passe

• Utiliser autocomplete = "nouveau-mot de passe" pour la saisie du mot de passe dans un formulaire d'inscription, ou le nouveau
  mot de passe sous forme de changement de mot de passe.

Utiliser autocomplete = "mot de passe actuel" pour un mot de passe existant

• Utiliser autocomplete = "mot de passe actuel" pour la saisie du mot de passe dans un formulaire de connexion, ou
  saisie de l'ancien mot de passe de l'utilisateur sous la forme d'un changement de mot de passe. Cela raconte le
  navigateur pour lequel vous souhaitez qu'il utilise le mot de passe actuel pour lequel il a stocké
  le site.

Pour un formulaire d'inscription:

<contribution taper="password" Saisie automatique="new-password" …>

Pour vous connecter:

<contribution taper="password" Saisie automatique="current-password" …>

Prise en charge des gestionnaires de mots de passe

Different browsers handle correo electrónico autofill and password suggestion somewhat
différemment, mais les effets sont sensiblement les mêmes. Sur Safari 11 et supérieur sur ordinateur de bureau,
par exemple, le gestionnaire de mots de passe s'affiche, puis biométrique
l'authentification (empreinte digitale ou reconnaissance faciale) est utilisée si disponible.

Chrome on desktop displays correo electrónico suggestions, shows the password manager, and autofills the password.

Mise en garde:
Les systèmes de mot de passe du navigateur et de saisie automatique ne sont pas simples. Les algorithmes pour
deviner, stocker et afficher les valeurs ne sont pas standardisés et varient de
plate-forme à plate-forme. Par exemple, comme le souligne Hidde de
Vries:
«Firefox’s password manager complements its
heuristique
avec un système de recette. »

Remplissage automatique: ce que les développeurs Web devraient savoir, mais
non
a beaucoup plus d'informations sur l'utilisation patate douce et Saisie automatique. le HTML
spec
répertorie les 59 valeurs possibles.

Activez le navigateur pour suggérer un mot de passe fort

Les navigateurs modernes utilisent l'heuristique pour décider quand afficher l'interface utilisateur du gestionnaire de mots de passe et
suggérez un mot de passe fort.

Voici comment Safari le fait sur le bureau.

(La suggestion de mot de passe unique fort est disponible dans Safari depuis la version 12.0.)

Grâce aux générateurs de mots de passe de navigateur intégrés, les utilisateurs et les développeurs n'ont pas besoin
pour comprendre ce qu'est un «mot de passe fort». Étant donné que les navigateurs peuvent stocker en toute sécurité
mots de passe et remplissez-les automatiquement si nécessaire, il n'est pas nécessaire que les utilisateurs se souviennent
ou entrez des mots de passe. Encourager les utilisateurs à profiter du navigateur intégré
les générateurs de mots de passe signifient également qu'ils sont plus susceptibles d'utiliser un
mot de passe sur votre site, et moins susceptible de réutiliser un mot de passe qui pourrait être
compromis ailleurs.

L'inconvénient de cette approche est qu'il n'y a aucun moyen de partager des mots de passe
plates-formes. Par exemple, un utilisateur peut utiliser Safari sur son iPhone et Chrome sur
leur ordinateur portable Windows.

Aide à sauver les utilisateurs des entrées manquantes accidentellement

Ajouter le obligatoire attribute to both correo electrónico and password fields.
Les navigateurs modernes invitent et définissent automatiquement les données manquantes.
Aucun JavaScript requis!

Conception pour les doigts et les pouces

La taille du navigateur par défaut pour à peu près tout ce qui concerne les éléments d'entrée
et les boutons sont trop petits, surtout sur mobile. Cela peut sembler évident, mais c'est
un problème courant avec les formulaires de connexion sur de nombreux sites.

Assurez-vous que les entrées et les boutons sont suffisamment grands

La taille et le remplissage par défaut des entrées et des boutons sont trop petits sur le bureau et
encore pire sur mobile.

Selon Accessibilité Android
conseils
la taille cible recommandée pour les objets à écran tactile est de 7 à 10 mm. Interface Apple
les directives suggèrent 48 × 48 px, et le W3C suggère au moins 44 × 44 CSS
pixels. Sur ça
base, ajoutez (au moins) environ 15 px de remplissage aux éléments d'entrée et aux boutons pour
mobile et environ 10 pixels sur ordinateur. Essayez ceci avec un vrai appareil mobile et
un vrai doigt ou un vrai pouce. Vous devriez être en mesure de toucher confortablement chacun de vos
entrées et boutons.

Les cibles Tap ne sont pas dimensionnées de manière appropriée
L'audit Lighthouse peut vous aider à automatiser le processus de détection des éléments d'entrée
qui sont trop petits.

Conception pour les pouces

Rechercher cible tactile et
vous verrez beaucoup de photos d'index. Cependant, dans le monde réel, de nombreux
les gens utilisent leurs pouces pour interagir avec les téléphones. Les pouces sont plus gros que
l'index, et le contrôle est moins précis. Raison de plus pour une
cibles tactiles de taille.

Rendre le texte suffisamment grand

Comme pour la taille et le remplissage, la taille de police par défaut du navigateur pour les éléments d'entrée et
boutons est trop petit, en particulier sur mobile.

Les navigateurs sur différentes plates-formes dimensionnent les polices différemment, il est donc difficile de
spécifiez une taille de police particulière qui fonctionne bien partout. Un bref aperçu de
les sites Web populaires affichent des tailles de 13 à 16 pixels sur le bureau: correspondant à cette taille physique
est un bon minimum pour le texte sur mobile.

Cela signifie que vous devez utiliser une taille de pixel plus grande sur mobile: 16px sur Chrome pour
le bureau est assez lisible, mais même avec une bonne vision, il est difficile à lire 16px
texte sur Chrome pour Android. Vous pouvez définir différentes tailles de pixels de police pour différents
tailles de fenêtre utilisation moitié
requêtes.
20px est à peu près juste sur mobile - mais vous devriez le tester avec des amis ou
collègues malvoyants.

Le document n'utilise pas de tailles de police lisibles
L'audit Lighthouse peut vous aider à automatiser le processus de détection du texte qui l'est aussi
petit.

Fournir suffisamment d'espace entre les entrées

Ajoutez suffisamment de marge pour que les entrées fonctionnent correctement en tant que cibles tactiles. En d'autres termes, viser
pour environ une largeur de doigt de marge.

Assurez-vous que vos entrées sont clairement visibles

Le style de bordure par défaut des entrées les rend difficiles à voir. Ils sont presque
invisible sur certaines plates-formes telles que Chrome pour Android.

En plus du remplissage, ajoutez une bordure: sur un fond blanc, une bonne règle générale est
utiliser #ccc ou plus sombre.

Utilisez les fonctionnalités de navigateur intégrées pour avertir des valeurs d'entrée non valides

Les navigateurs ont des fonctionnalités intégrées pour effectuer la validation de formulaire de base pour les entrées avec un
taper attribut. Les navigateurs vous avertissent lorsque vous soumettez un formulaire avec une valeur non valide,
et mettre l'accent sur l'entrée problématique.

Vous pouvez utiliser le : invalide Sélecteur CSS pour mettre en évidence les données invalides. Utiliser
: not (: placeholder-shown) pour éviter de sélectionner des entrées sans contenu.

input[type=email]:not(:placeholder-shown):invalid {
Couleur: rapporter;
outline-color: rapporter;
}

Essayez différentes manières de mettre en évidence les entrées avec des valeurs non valides.

Utilisez JavaScript si nécessaire

Basculer l'affichage du mot de passe

Vous devriez ajouter un Montrer le mot de passe icône ou bouton pour permettre aux utilisateurs de vérifier
texte qu'ils ont entré. Convivialité
souffre lorsque les utilisateurs
ne peut pas voir le texte qu'il a saisi. Il n'y a actuellement aucun moyen intégré de faire
ceci, bien que il y a des plans pour
la mise en oeuvre. Vous
besoin d'utiliser JavaScript à la place.

Le code suivant utilise un bouton de texte pour ajouter Montrer le mot de passe Fonctionnalité.

HTML:

<section>
  <label pour="password">Mot de passe</label>
  <bouton va="toggle-password" taper="bouton" étiquette aria="Show password as plain text. Warning: this will display your password on the screen.">Montrer le mot de passe</bouton>
  <contribution va="password" patate douce="password" taper="password" Saisie automatique="current-password" obligatoire>
</section>

Voici le CSS pour que le bouton ressemble à du texte brut:

button#toggle-password {
Contexte: rien;
border: rien;
cursor: pointer;
font-size: var(--mobile-font-size);
font-weight: 300;
padding: 0;
position: absolute;
Haut: 0;
right: 0;
}

Et le JavaScript pour afficher le mot de passe:

const passwordInput = document.getElementById('password');
const togglePasswordButton = document.getElementById('toggle-password');
togglePasswordButton.addEventListener('click', togglePassword);
une fonction togglePassword() {
si (passwordInput.taper === 'password') {
passwordInput.taper = 'text';
togglePasswordButton.textContent = 'Hide password';
togglePasswordButton.setAttribute('aria-label',
'Hide password.');
} else {
passwordInput.taper = 'password';
togglePasswordButton.textContent = 'Show password';
togglePasswordButton.setAttribute('aria-label',
'Show password as plain text. ' +
'Warning: this will display your password on the screen.');
}
}

Voici le résultat final:

Rendre les entrées de mot de passe accessibles

Utiliser aria décrit par pour décrire les règles de mot de passe en lui donnant l'ID du
élément qui décrit les contraintes. Les lecteurs d'écran fournissent le texte de l'étiquette, le
type d'entrée (mot de passe), puis la description.

<contribution taper="password" aria décrit par="password-constraints" …>
<div va="password-constraints">Eight or more characters with a mix of letters, numbers and symbols.</div>

Lorsque vous ajoutez Montrer le mot de passe fonctionnalité, assurez-vous d'inclure
un étiquette aria pour avertir que le mot de passe sera affiché. Sinon, les utilisateurs peuvent
révéler par inadvertance les mots de passe.

<bouton va="toggle-password"
étiquette aria="Show password as plain text.
Warning: this will display your password on the screen.">
  Montrer le mot de passe
</bouton>

Vous pouvez voir les deux fonctionnalités ARIA en action dans le Glitch suivant:

Créer des formulaires accessibles a plus de conseils pour rendre les formulaires accessibles.

Validez en temps réel et avant soumission

Les éléments et attributs de formulaire HTML ont des fonctionnalités intégrées pour la validation de base,
mais vous devez également utiliser JavaScript pour effectuer une validation plus robuste pendant que les utilisateurs sont
saisir des données et quand ils essaient de soumettre le formulaire.

Avertissement:
La validation côté client aide les utilisateurs à saisir des données et peut éviter un serveur inutile
charge, mais vous devez toujours valider et nettoyer les données sur votre backend.

Étape 5 du formulaire de connexion
codelab utilise le Validation des contraintes
API (lequel est
largement soutenu) ajouter
validation personnalisée à l'aide de l'interface utilisateur du navigateur intégrée pour définir le focus et afficher les invites.

En savoir plus: Utilisez JavaScript pour un temps réel plus complexe
validation.

Analytics et RUM

«Ce que vous ne pouvez pas mesurer, vous ne pouvez pas vous améliorer» est particulièrement vrai pour les inscriptions
et formulaires de connexion. Vous devez définir des objectifs, mesurer le succès, améliorer votre site - et
répéter.

Réduction utilisabilité
essai peut être
utile pour essayer des changements, mais vous aurez besoin de données réelles pour
comprendre comment vos utilisateurs perçoivent vos formulaires d'inscription et de connexion:

• Analyse de la page: pages vues d'inscription et de connexion, taux de rebond,
  et sort.
• Analyse des interactions: but
  entonnoirs (où faire
  les utilisateurs abandonnent votre processus de connexion ou de connexion?) et
  événements
  (quelles actions les utilisateurs prennent-ils lorsqu'ils interagissent avec vos formulaires?)
• Performances du site Web: centrée sur l'utilisateur
  métriques (votre inscription et votre connexion
  formes lentes pour une raison quelconque et, si oui, quelle en est la cause?).

Vous pouvez également envisager de mettre en œuvre des tests A / B afin d'essayer
différentes approches d'inscription et de connexion, et des déploiements par étapes pour valider le
modifications sur un sous-ensemble d'utilisateurs avant de publier les modifications pour tous les utilisateurs.

Conditions générales d'Utilisation

Une interface utilisateur et une expérience utilisateur bien conçues peuvent réduire l'abandon du formulaire de connexion:

• Don’t make users hunt for sign-in! Put a enlace to the sign-in form at the top
  de la page, en utilisant un libellé bien compris tel que S'identifier, Créer un compte
  ou alors S'inscrire.
• Restez concentré! Les formulaires d'inscription ne sont pas l'endroit idéal pour distraire les personnes
  offres et autres fonctionnalités du site.
• Minimisez la complexité de l'inscription. Collectez d'autres données utilisateur (telles que des adresses ou
  détails de la carte de crédit) uniquement lorsque les utilisateurs voient un avantage clair à fournir
  Les données.
• Avant que les utilisateurs ne commencent sur votre formulaire d'inscription, indiquez clairement la valeur
  la proposition est. Comment bénéficient-ils de la connexion? Donner aux utilisateurs du béton
  des incitations à compléter l'inscription.
• Si possible, autorisez les utilisateurs à s'identifier avec un numéro de téléphone mobile
  instead of an correo electrónico address, since some users may not use correo electrónico.
• Facilitez la réinitialisation de leur mot de passe pour les utilisateurs et Oublié votre
  le mot de passe? enlace obvious.
• Enlace to your terms of service and privacy policy documents: make it clear to
  utilisateurs dès le début comment vous protégez leurs données.
• Incluez le logo et le nom de votre entreprise ou organisation sur votre inscription et
  connectez-vous et assurez-vous que la langue, les polices et les styles correspondent au reste de
  votre site. Certains formulaires n'ont pas l'impression d'appartenir au même site que d'autres
  contenu, surtout s'ils ont une URL très différente.

Continue d'apprendre

photo par Meghan Schiereck au Unsplash.