2-Page Login Pattern, And How To Fix It — Smashing Magazine
[ad_1]
We see why Registration forms are divided into multiple screens everywhere? Instead of entering email and password, we have to enter email, go to the next page and then enter the password there. This seems inefficient to say the least.
Let’s look at why login forms are spread across multiple screens, what problem they solve, and how to create a better experience better authentication UX (Video).
This article is Part of our ongoing series To Design pattern. It is also an upcoming part of the 10h video library Smart interface design patterns and those upcoming live UX training as well as. Use code BIRDIE to save 15%.
The problem with registration forms
If there’s one thing we’ve learned over the years in UX, it’s that designing for people is difficult. This also applies to registration forms. People are remarkably forgetful. They often forget what email address they signed up with or what service they last signed in to (Google, Twitter, Apple, etc.).
One idea is to remind customers what they last logged in with and perhaps make it one Default option. However, it directly shows which account the user was on, which may be a privacy or security issue:
What if instead of showing all Options for all customers at any time, we Ask for an email firstand then check what service they last used and automatically redirect customers to the right place? Well, that’s exactly the idea behind it 2-page registrations.
Get to know 2-page logins
Maybe you’ve already seen them. While a few years ago most sign-up forms asked for an email address and password on a page, these days this is more common Initially only for email. If the user wants to continue, the form asks for a password in a separate step. Brad examines some issues of this pattern.
A common reason for dividing the registration form into multiple pages is Single Sign-On (SSO) authentication. Large companies typically use SSO for corporate registration of their employees. This means employees only log in once per day and use only one set of credentials, improving corporate security.
The UX intricacies of Single Sign-On (SSO)
SSO also helps with this Regulatory Complianceand it is much easier to grant users appropriate permissions and then immediately revoke them later. This means that when an employee leaves, all of their accounts and data can be deleted at once.
To serve both business customers and private customersCompanies use 2-step registration. Users must first enter their email address. The validator then checks which provider the email is linked to and redirects users there.
Users rarely love this experience. Sometimes they have multiple accounts (personal and work) on one service. 2-step registrations are also common Break autofill and password managers. And for most users, login/passport is much faster than two-step login.
Of course they usually exist Dedicated login pages for companies for employees to log in, but they often go straight to Gmail, Figma, etc. instead and try to log in there. However, they cannot log in because they have to log in via SSO.
Conclusion: The pattern works fine for SSO users, but for non-SSO users it results in a frustrating UX.
Alternative solution: Conditional disclosure of SSO
There is one Way to get around this these challenges (see image below). We could use one Single page search with email and password input fields as standard. Once a user enters their email address, we detect whether SSO authentication is enabled.
If there is Single Sign-On (SSO). activated for this emailwe show a single sign-on option and use that by default. We could also make the password field optional or disable.
If SSO is not enabled For this email we will continue with the regular email/password login. It’s not a huge hassle, but it saves hassle for both personal and business accounts.
Key insights
People often forget which email they signed up with.
They also forget the authentication service they used to log in.
Companies use Single Sign-On (SSO) for company registration.
Individual accounts still require email and password to log in.
Two-step registration: Request an email and then redirect to the correct service.
2-step login replaces “social” login for returning users.
It guides users instead of putting obstacles in their way.
Users still forget the email address they signed up with.
Sometimes users have multiple accounts on a service.
Two-step login often causes issues with autofill and password managers.
For most users, login/pass is much faster than two-step login.
Better: Start with a single page with login and password.
Detect as users enter their email whether SSO is enabled for them.
If this is the case, show an SSO login option and set a default.
Otherwise, continue with the regular password login.
If users need to use SSO, disable the password field – don’t hide it.
Summary
Personally I haven’t tested the approach, but it could be good alternative to 2-page logins – for both SSO and non-SSO users. However, keep in mind the SSO authentication could or maybe not require a password as login is sometimes done via Yubikey or Touch ID or third parties (e.g. OAuth).
Additionally, users will eventually be banned; it’s just a matter of time. So use it magical links for password recovery or access recovery, but do not mandate it as a regular login option. Switching between applications is slow and causes errors. Instead, require users to enable 2FA: it’s both easy to use and secure.
And the most important thing: Test your login flow with the tools your customers rely on. You’ll be surprised at how poor their experience is when they rely on password managers or security tools to log in. Good luck to everyone!
Useful resources
Learn smart interface design patterns
If you are interested in similar insights around UX, take a look Smart interface design patternsour 10h video course with hundreds of practical examples from real projects – with a live UX training later this year. Everything from mega dropdowns to complex enterprise tables – 5 new segments are added every year. Jump to a free preview.
100 design patterns and practical examples.
10h video course + live UX training. Free preview.
(yk)
[ad_2]
Source link