Modèle de connexion en 2 pages et comment y remédier

Pourquoi voyons-nous formulaires de connexion divisés en plusieurs écrans partout? Au lieu de saisir un e-mail et un mot de passe, nous devons saisir un e-mail, passer à la page suivante, puis y saisir le mot de passe. Cela semble pour le moins inefficace.

Voyons pourquoi les formulaires de connexion sont répartis sur plusieurs écrans, quel problème ils résolvent et comment concevoir une meilleure expérience pour les utilisateurs. meilleure authentification UX (vidéo).

Cet article est une partie de notre série en cours sur modèles de conception. C’est aussi une partie à venir de la vidéothèque de 10h sur Modèles de conception d’interface intelligente 🍣 et le prochaine formation UX en direct aussi. Utiliser du code OISEAU pour économiser 15 % de réduction.

Le problème avec les formulaires de connexion

S’il y a une chose que nous avons apprise au fil des années en UX, c’est que concevoir pour les gens est difficile. Cela s’applique également aux formulaires de connexion. Les gens sont remarquablement oublieux. Ils oublient souvent avec quelle adresse e-mail ils se sont inscrits ou avec quel service ils se sont connectés la dernière fois (Google, Twitter, Apple, etc.)

Une idée est de rappeler aux clients avec quoi ils se sont connectés la dernière fois et peut-être d’en faire un option par défaut. Cependant, il révèle directement quel était le compte de l’utilisateur, ce qui pourrait poser un problème de confidentialité ou de sécurité :

Et si au lieu de montrer tous options à tous les clients à tout moment, nous demandez d’abord un e-mail, puis rechercher le service qu’ils ont utilisé la dernière fois et rediriger automatiquement les clients vers le bon endroit ? Eh bien, c’est exactement l’idée derrière Connexions sur 2 pages.

Rencontrez les connexions sur 2 pages

Vous les avez peut-être déjà vus. S’il y a quelques années, la plupart des formulaires de connexion demandaient un e-mail et un mot de passe sur une seule page, il est aujourd’hui plus courant de demander uniquement pour l’e-mail d’abord. Lorsque l’utilisateur choisit de continuer, le formulaire demandera un mot de passe dans une étape distincte. Brad explore quelques problèmes de ce modèle.

Une raison courante pour diviser le formulaire de connexion sur plusieurs pages est Authentification par authentification unique (SSO). Les grandes entreprises utilisent généralement le SSO pour les connexions professionnelles de leurs employés. Grâce à lui, les employés ne se connectent qu’une fois par jour et n’utilisent qu’un seul ensemble d’informations d’identification, ce qui améliore la sécurité de l’entreprise.

Les subtilités UX de l’authentification unique (SSO)

SSO aide également à conformité réglementaire, et il est beaucoup plus facile de fournir aux utilisateurs les autorisations appropriées et de les révoquer ultérieurement en même temps. Ainsi, si un employé quitte l’entreprise, tous ses comptes et données peuvent être supprimés en même temps.

À accompagner aussi bien les clients professionnels que les clients privés, les entreprises utilisent la connexion en 2 étapes. Les utilisateurs doivent d’abord saisir leur e-mail, puis le validateur vérifie à quel fournisseur l’e-mail est associé et y redirige les utilisateurs.

Les utilisateurs aiment rarement cette expérience. Parfois, ils disposent de plusieurs comptes (privés et professionnels) avec un seul service. De plus, les connexions en 2 étapes sont fréquentes briser la saisie automatique et les gestionnaires de mots de passe. Et pour la plupart des utilisateurs, la connexion/passe est bien plus rapide que la connexion en 2 étapes.

Bien sûr, il y a généralement pages de connexion d’entreprise dédiées pour que les employés se connectent, mais ils se dirigent souvent directement vers Gmail, Figma, etc. et essaient de s’y connecter. Cependant, ils ne pourront pas se connecter car ils doivent se connecter via SSO.

Conclusion: le modèle fonctionne bien pour les utilisateurs SSO, mais pour les utilisateurs non-SSO, il en résulte un UX frustrante.

Solution alternative : révélation conditionnelle du SSO

Il y a un moyen de contourner ces défis (voir l’image ci-dessous). Nous pourrions utiliser un recherche sur une seule page avec les champs de saisie d’e-mail et de mot de passe par défaut. Une fois qu’un utilisateur a saisi son email, nous détectons si l’authentification SSO est activée.

Si l’authentification unique (SSO) est activé pour cet e-mail, nous affichons une option d’authentification unique et nous l’utilisons par défaut. Nous pourrions également rendre le champ du mot de passe facultatif ou désactivé.

Si L’authentification unique n’est pas activée pour cet e-mail, nous procédons à la connexion habituelle par e-mail/mot de passe. Ce n’est pas très compliqué, mais cela évite des problèmes pour les comptes privés et professionnels.

Points clés à retenir

🤔 Les gens oublient souvent avec quelle adresse e-mail ils se sont inscrits.
🤔 Ils oublient également le service d’authentification avec lequel ils se sont connectés.
🤔 Les entreprises utilisent l’authentification unique (SSO) pour la connexion d’entreprise.
🤔 Les comptes individuels ont toujours besoin d’une adresse e-mail et d’un mot de passe pour se connecter.
✅ Connexion en 2 étapes : demander un email, puis rediriger vers le bon service.

✅ La connexion en 2 étapes remplace la connexion « sociale » pour les utilisateurs réguliers.
✅ Il oriente les utilisateurs plutôt que de leur poser des obstacles.
🤔 Les utilisateurs oublient toujours l’e-mail avec lequel ils se sont connectés.
🤔 Parfois, les utilisateurs disposent de plusieurs comptes avec un seul service.
🚫 Les connexions en 2 étapes interrompent souvent la saisie automatique et les gestionnaires de mots de passe.
🚫 Pour la plupart des utilisateurs, la connexion/pass est bien plus rapide que la connexion en 2 étapes.

✅ Mieux : commencez avec une seule page avec login et mot de passe.
✅ Lorsque les utilisateurs saisissent leur e-mail, détectez si le SSO est activé pour eux.
✅ Si tel est le cas, révélez une option de connexion SSO et définissez-y une valeur par défaut.
✅ Sinon, procédez à la connexion par mot de passe habituelle.
✅ Si les utilisateurs doivent utiliser SSO, désactivez le champ du mot de passe – ne le cachez pas.

Emballer

Personnellement, je n’ai pas testé l’approche, mais cela pourrait être un bonne alternative aux connexions sur 2 pages — à la fois pour les utilisateurs SSO et non-SSO. Gardez cependant à l’esprit que l’authentification SSO pourrait ou pourrait ne pas exiger un mot de passe, car la connexion se fait parfois via Yubikey ou Touch-ID ou des tiers (par exemple, OAuth).

De plus, à terme, les utilisateurs seront bloqués ; C’est juste une question de temps. Alors, utilisez liens magiques pour la récupération de mot de passe ou la récupération d’accès, mais ne l’exigez pas comme option de connexion régulière. La commutation entre les applications est lente et provoque des erreurs. Au lieu de cela, incitez les utilisateurs à activer le 2FA : il est à la fois utilisable et sécurisé.

Et, surtout, testez votre flux de connexion avec les outils sur lesquels vos clients comptent. Vous pourriez être surpris de voir à quel point leur expérience est brisée s’ils s’appuient sur des gestionnaires de mots de passe ou des outils de sécurité pour se connecter. Bonne chance à tous !

Ressources utiles

Rencontrez les modèles de conception d’interface intelligente

Si vous êtes intéressé par des informations similaires sur l’UX, jetez un œil à Modèles de conception d’interface intelligentenotre Cours vidéo de 10h avec des centaines d’exemples pratiques tirés de projets réels — avec une formation UX en direct plus tard cette année. Tout, des méga-listes déroulantes aux tableaux d’entreprise complexes, avec 5 nouveaux segments ajoutés chaque année. Accédez à un aperçu gratuit.

100 modèles de conception et exemples réels.
Cours vidéo de 10h + formation UX en direct. Aperçu gratuit.

(ouais)