Dire aux utilisateurs que les mots de passe ne correspondent pas et ne sont pas assez forts
J'ai deux fonctions dans mon formulaire d'inscription d'utilisateur
- On vérifie que le mot de passe et le mot de passe confirmé sont identiques.
- L'autre vérifie si le mot de passe est suffisamment fort.
J'ai deux questions liées à la présentation
- Quels mots dois-je utiliser si les mots de passe ne correspondent pas ou ne sont pas assez forts? J'ai un champ de texte à côté du premier mot de passe qui est initialement vide mais est mis à jour à mesure que chaque caractère est tapé (je peux ajouter un deuxième champ de texte à côté de la partie de confirmation du mot de passe).
- Quand et dans quel ordre appeler les fonctions? Par exemple, si j'appelle uniquement la fonction de correspondance des mots de passe dans la section de confirmation du mot de passe, si l'utilisateur revient et change le premier mot de passe, les choses seront gâchées. Si j'appelle la fonction de correspondance des mots de passe la première fois que l'utilisateur tape le mot de passe, il remplacera le message indiquant que le mot de passe n'est pas assez fort ou le mot de passe suffisamment fort remplacera le message "le mot de passe ne correspond pas".
La fonction qui vérifie si le mot de passe est assez fort est très simple, juste pour empêcher "123" et le mot de passe. À l'avenir, je voudrais faire une option pour démasquer le mot de passe et n'avoir qu'un seul champ et aucune confirmation.
Rester simple:
- Au fur et à mesure que l'utilisateur tape dans le premier champ de texte, ayez un indicateur de force à proximité en indiquant à l'utilisateur si son mot de passe est fort qui se met à jour au fur et à mesure qu'il tape. N'activez pas le champ de confirmation tant qu'ils n'ont pas entré un mot de passe correspondant à vos besoins.
- Lorsqu'ils cliquent dans le deuxième champ pour confirmer, une étiquette à côté de celle-ci se met à jour au fur et à mesure de leur frappe, indiquant si les mots de passe correspondent.
- Si l'utilisateur retourne au premier champ de texte et effectue une modification, videz le champ de texte de confirmation et faites-le saisir à nouveau le tout.
Votre objectif final d'avoir éventuellement un champ unique non masqué est bon . Je les ai laissés démasqués dans le schéma ci-dessous à des fins de démonstration.
La clé à retenir est : concentrez votre utilisateur sur une tâche à la fois, et validez une fois que l'utilisateur a terminé cette tâche, puis déplacez-les vers la suivante étape dans le flux de travail. Donnez des informations en temps réel sur leur statut à cette étape du flux de travail.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
