Argument for/against splitting login process into checking username, then ask password?

Question

My boss has insisted for a while that our login process be divided into two steps on separate pages: on the first page, ask the user's e-mail address. On the second page, either display "user found" and ask for password, or "user not found" and ask for e-mail again.

He insists it is much easier for our users who often forget their credentials or if they even have an account yet. I've long been against this approach because it forces every user to go through two steps every time they login. (I also wonder if it's a security concern, knowing that it will confirm when an email exists in our system.) I would prefer to have a more standard login page with e-mail (all of our usernames are e-mails) and password, and one very clear link for "forgot password?".

Neither of us have any hard data to support our theories, and we have more important things to do than A/B test something that he doesn't think is even a problem. I was just wondering if anyone here could provide some arguments or hard data for or against either approach. I enjoy considering UX design, but I am not an expert.

Answer 1

On the second page, either display "user found" and ask for password, or "user not found" and ask for e-mail again.

One compelling argument against the two step approach is that the proposed design would allow for any unauthenticated person to determine if an email account has registered with that site.

This is a problem both for security and for privacy.

As a user, I would not want a site to confirm for just anybody whether I have signed up for their service.

As a developer, I would not want my application to voluntarily give a malicious user an easy way to enumerate user accounts.

Either of these are pretty compelling downsides to the approach. I would recommend focusing on making the "i forgot my password/username" process easier for the small percentage that need it rather than changing the login process for everyone at the expense of their privacy and potentially their security.

Answer 2

If you want something compelling that your boss can grasp then I suggest you speak to him in the universal language known as money, dinero, ducats, dolla-dolla-bill-y'all

Your current situation

You:

Your suggested design will create a security flaw and your system is bound to get scraped for valid usernames

Boss:

Do what I say and tell the magic computer box to not be insecure

What you should aim for

You:

Designing the login system to accommodate a 2-step process with the error messages of 'User found/not found' would allow our competitors to easily obtain a list of usernames in our system. If some of the usernames match up to the usernames in their system then they will know who to target if they want to lure your users/clients away from you. Even if your usernames do not match up to theirs, your competitor will have a comprehensive list of domain names which you do business with.

Boss:

Holy crap you are right, is there anything we can do to mitigate this leakage of data?

You:

Unfortunately there is no 100% way to distinguish a real user who cannot remember their username vs a competitor trying to get data. Never displaying a 'User found/not found' message is the most secure route we can take no matter if it is a 1 or 2-step login process

Caveat

You might be giving this information away already but in a less convenient way:

Do you have an online registration page where the user is warned if the username is already taken? <-- your boss could easily throw this in your face.

^ The only difference between doing this vs the 2-step login page is that the registration page usually requires a lot more fields to get filled in and must pass other validation checks along with a Captcha or something.

Answer 3

I'm not sure if this is exactly a UX concern, but password managers (LastPass, KeePass, etc.) can be configured to automatically or semi-automatically fill in username and password fields when they appear on the same page. But as far as I know, none of them will recognize a password field by itself, without a corresponding username field. Perhaps they could be programmed to do so, and thus the "blame" for this situation should rest with the authors of the password manager and/or its browser interface, but for now the reality is that separating the username and password fields on different pages means I have to manually copy the password out of the password manager, which significantly increases the number of clicks it takes to log in.

Answer 4

The general rule is, every page of process drops the success rate by 50%. It's probably a little bit of an exaggeration, but people think of a page as one unit of work, almost regardless of how difficult it actually is. A two- or three-page wizard starts to feel burdensome.

EDIT: somebody complained to the mods that there's no citation for my answer. The only cite I have is "that's what the UI people always tell me". Perhaps some kind soul could provide either a cite that discusses the prevalence of this received wisdom or one that actually confirms it (or even debunks it).

Answer 5

The biggest risk I see to this as you mentioned is for security. HOWEVER some companies have managed to use this dual step process in a way that improves security also. Essentially what those companies did is asked each user to add an image to their profile, this image would show up after they have put in their email. If the image matches the one assigned to their profile they should put in their email address. If the image doesn't match anything on file, they show a random image (perhaps based on a hash?).

However, that does not solve your problem (or maybe it does?). Your problem of saying account found and account not found can also be solved with AJAX (or similar) by turning the field red if the email/username is not found. This removes that additional step.

Depending on how security conscious you may be the AJAX approach would be the best for UX. Normally I would say that this is a bad move and it shouldn't be done. But if you can put in safeguards to limit the number of lookups by IP / cookie. It would at least make it somewhat safer.

Answer 6

Google split the sign-in procedure in two pages and that resulted in many negative user responses: http://www.ghacks.net/2015/05/15/google-splits-sign-in-process-into-two-pages/

User complaints concentrate on several different aspects. First, the sign-in process takes longer to complete as it is now separated on two pages. Even if you use a single account only, you have to go through the same process as multi-account customers.

While the process may require the same number of clicks to sign-in, it breaks the flow for users who used the keyboard (tab-key) to switch between fields to login.

Second, the new process breaks most password managers which cannot fill out form information automatically anymore or sign you in automatically. At least some password managers will update their programs or offer solutions for the new Google sign-in process.

Answer 7

This approach goes against the principle of having as few steps as possible and, thus, very likely reduces user satisfaction and conversion.

Other downside is leaking of privacy (making it dead easy to check whether some email is registered or not).

The upsides I see are purely design and programming related, e.g. you get a cleaner design by not having to add password field and signup / forgot password links on the main page. So less things to worry about and draw attention to. Also sometimes, depending on the backend logic, framework or cms you are using, it could be easier to structure this process in this way. However, those are not UX related issues and your users don't gain much by that, if anything.

What is more, why would you ask for e-mail again? Its a lot of effort to type in their email on user's behalf. If you decide to go with this pattern, just show the e-email entered and have user confirm that it is correct.

Answer 8

I thought I must offer at least one reason to have a multiple page login.

The only real advantage (disadvantage in most cases) of using multiple pages, instead of one, is that the user is provided an expected flow they must carry out. This could help with sites that don't have a conventional flow or sites where the expected use case is a step-by-step process. One tactic used by sites where being a user requires payment is that it splits up content that needs to be entered to make the user feel committed in continuing.

I think there is at least one example of where the two page log-in makes sense.

Sites where the average user is not the average computer user, but instead is only on their computer when forced. Also, most users only sign in once or maybe a couple times and never need to log in again. This case is becoming less and less common.

I happen to mention this because I used to be phone support for a company that frequently had older men or women trying to figure out what they needed to do to get product(x) working for their child again. They had to enter an email and password at some point, but then didn't need it again until much later.

Quick overview on the User

This kind of user will log-in only once-in-a-great-while to do one particular task. When they get to the main page, they may become instantly lost with all the information (even if it doesn't seem like that much). They just want to log in, do something, and get out. Simplicity is this user's friend and the less options they have, the better. If they do have choices where they are not sure what to do, they try to go with what seems the "more common" choice, which could be determined by how much screen size it has or simply which option they saw first.

Comparison of Single-Page vs Multi-Page for above User

Single Page: First time user lands on entry page. Hopefully, the log-in/register portion is highly visible for this user. They may not notice the register portion or wonder if they already registered. After all, they did register on that one site a long time ago. They proceed to guess at usernames/passwords. Eventually, they try all known combinations and realize they need to register, or they finally notice the register option.

Multi Page: First time user lands on entry page. This time, the website asks for their username. (Which, again, should be highly visible). They enter their email and the website tells them the next step. In this case that step is to register, and the user has already filled out the email.

Conclusion

I didn't really mean to write a paper, but it was important to note that the expected use and target audience of your site have a large influence on design. It could be your boss expects the kind of use or audience mentioned above, or foresees a large number of users not knowing their username because of some other system which may be similarly named or connected. Maybe your boss himself is one who always forgets which username he used, or maybe he hasn't considered the fact that you could tell him whether the username is correct on the first page. I believe in most cases for today's world, a single page for signing in should be sufficient and desirable. There are some cases otherwise, however.

Answer 9

I read a blog post a couple of years ago where Mailchimp were able to reduce failed logins by 66%, mostly due to letting users know if it was their username or password which was incorrect:

https://blog.mailchimp.com/social-login-buttons-arent-worth-it/

(EDIT: Mailchimp seem to have removed their blog - try this Internet Archive link instead: https://web.archive.org/web/20140321161148/https://blog.mailchimp.com/social-login-buttons-arent-worth-it/)

They still did it with a single page, just changed the error message.

Answer 10

This discussion focuses too much on a valid user trying to gain access. It is a huge security flaw to announce to the would-be hacker as to whether the ID and PASSWORD combination presented was bad due to id or password. Breaking log in into two parts and announcing which failed makes the hackers' job orders of magnitude easier.

I always post "Invalid ID/Password Combination"... keep the hackers guessing!

Answer 11

Purely from a user experience standpoint, I would keep it as one page, but explicitly specify why the login didn't work.

Saying something generic like "username or password was wrong" is ambiguous and leaves a lot to be desired. I find it to be a source of immense frustration, because it's not particularly helpful. Which was wrong? Was it my username or my password?

I think arguing that it's a security risk is overblown. As others have mentioned:

• virtually all sites prevent duplicate email/username logins. How is telling someone that a username/email is already in use any more safe than saying "your username was incorrect"?
• almost all "forgot password" links require that you enter your email/username for password retrieval; in almost all cases, if you enter an invalid username/email, it'll spit out a message like "this username/email does not exist in our system"; again, this is effectively the same as saying "username was incorrect" during the login process.

Answer 12

One more reason not to split the login process in two pages is that if a website does it, with time you get used to opening the site and typing your password directly. It seems to work well.

And then one day you open the site, click on the only text box that you see on screen, type in your password... And, by doing so, you reveal it to everyone who's there with you, looking at the monitor.

What has happened is that the token containing your username has expired, so this time the site is asking for your username first. Which is shown in the clear, which means that whatever you type there is visible. And even though you normally look at the screen when you type, this time you don't: since you expect the password to be hidden, you instinctively look at the keyboard, to make sure you don't mistype it, so it's not like after the first 2-3 characters you notice they are visible and stop. No, you go all the way, typing them all. Showing your whole password to everyone.

I would've already revealed my Gmail password 2 or 3 times, if there had been anyone looking at my monitor. This is terrible UX, because to prevent the security problem you have to be aware of it first, and then you have to pay attention to the screen every time, checking whether it wants your username or your password. You know the famous book "Don't Make Me Think"? Well, this login process makes you think. Sure, if it's asking for your username it won't show your avatar. But are you so startled by the absence of your avatar? I am not, not at all. When it happened to me I didn't notice it. And like everyone else I do things out of habit, without checking everything. So even if the screen is asking me for my username, if I have learnt that I have to type my password I won't bother to read, I will just type my password.

So this 2-steps login breaks a 20-year-old habit, it makes it harder to use password managers, it helps hackers identify existing usernames, and it can trick you into revealing your password.

And the advantage that they can show you your avatar or something personal, so that you know it's the legitimate website and not a phishing one, doesn't really require two separate screens. You can easily show the usual 2 fields, and when you've filled in the first one it will prevent you from typing in your password (by disabling the field) until your personal picture has been loaded, and then you'll be able to continue. If the problem is the time it takes to load your picture, it can help to have some animation that makes the wait more tolerable.

Answer 13

Unless you are just making a small page with an unimportant password, I'm going to suggest that you should only use multiple page authentication. Here's why:

1.) If security is paramount in your application, you should be using multi-factor authentication. Putting multifactor authentication on a single page can be confusing for some users, and it's better to separate each factor into their own separate page.

2.) If you want to have any type of single-sign-on functionality where a user doesn't necessarily need to enter your website using a special URL, determining which sso provider based on the user-name can be very convenient. It also provides consistency between your normal login flow and an SSO flow to have the pages on multiple pages.

3.) Logging into an application should be intended to be difficult. After all, a person's personal information is potentially included in your application. As a result, logging in should happen as part of a session that is dedicated to logging in. If a user fails to enter in information after so many attempts, then the account should be temporarily locked out. Or each successive login failure should require a longer and longer period before the user can try again. Although this is not mutually exclusive to a multiple page approach, verifying that a user's email exists through a login page is peanuts if the user cannot perform a brute-force attack on it. Limit the number of attempts the user can log in.

Answer 14

Hmmmmm. Many arguments against the two step process.

However, many financial institutions do exactly that. Many banks and brokerages. In the last three days, I logged into three financial institutions that use this method.

Answer 15

Others have commented on the security and privacy issues. I personally think they are a bit overblown (see @user34305 remarks) but in any case, it's only a reason to avoid being specific in the feedback. You can still put your login process on one page and inform the user that the username is unknown (dynamically or not) or have two pages but only display an uninformative message at the end.

But even if you end up revealing whether the email address is known to the system, there are still good reasons to keep it all on one page. One that hasn't been mentioned yet is that respecting de facto standards is generally good for usability. Don't break user habits and expectations without a good reason and careful consideration. And submitting user name/email and password on the same page seems pretty standard.

Answer 16

I would present the argument to the boss using simple maths. Suggest to him that the user ID and password could each be two digits and ask (show?) him to calculate the number of permutations to guess a valid combination (assuming only one exists in the system).

With the separate login / password approach, you have a 1:100 chance of getting the correct login, and then another 1:100 of getting the correct password, so it is a 1:200 chance of getting the correct login / password combination.

Contrast this with the 1:10,000 combinations for the combined login / password approach then extrapolate.

Hell, if it comes down to it, write a simple program and make him try it. Unless he really doesn't want to protect your data (so why password it?) he has to be made to understand the basic maths associated with the two step approach and how this will affect the security.

Frankly, I wouldn't use a site that used a two step approach for this basic reason, unless some other factor (two-step...) was involved.

Answer 17

By combining the fields you might be making it more secure but the user experience will suffer. You don't need user testing to figure that out. All you need is a little bit of math.

I have 3 email addresses

I have many different passwords, maybe 9

Let's say my chances are 1 in 3 of getting my email address correct when the email field is alone email on the screen.

And my chances are 1 in 9 of getting my password correct when the password field is alone on the screen.

When you combine the fields on one screen, you are multiplying my chances of getting something wrong on that screen.

Both flows are the exact same amount of taps, so it's not a longer flow to separate the fields on separate screens.

When the fields are on the same screen

• Email field is auto focused
• After the user fills in the email field, they tap into the Password field
• The user fills the password and taps the Sign in button

2 taps total

When the fields are separated

• Email field is auto focused

• After the user fills in the email field, they tap Next

• The Password field is auto focused

• The user fills the password and taps the Sign in button

2 taps total

Users notoriously have issues in login flows and the login flow usually has the highest drop off rate.

In other words, users who have issues logging in are not a small percentage. They are a main use-case. And you have to balance making it difficult to log in (security) with making it easy to log in (user experience).

Answer 18

Security

Login systems are not required to provide feedback that an account does not exist. It is perfectly reasonable (although perhaps frustrating) for a login system to respond to all authentication errors with "bad username and password combination", and never differentiate between "no such user" and "bad password". If a system is using a two-prompt strategy, the username can get passed along in a hidden data-blob to the second of the two prompts, after which the system validates both the username and password combination.

The security nuance of all of these decisions may be better suited for the Security StackExchange community.

There are two other things to consider for this approach: users signing back into an account they previously signed into, and username typos.

Second Login / Reauthentication

Most login systems eventually expire sessions after some amount of time, or session disuse. As a usability feature, a multi-prompt system could store information in the users browser/client for the user account to pre-fill or skip the username entry page when the user has to re-authenticate after session expiry.

This functionality is implemented in "Remember Me" check boxes in many login forms. Some services provide this functionality for all users by default.

Typos

Users will inevitably typo their usernames.

Since the system isn't returning "no such user" messages, some type of visual hint would be useful to help users catch their error. Depending on the type of service (and user settings) a profile picture could be displayed, or a visual hash of their username (ex: default StackExchange profile images). This improves the chances that users notice the typo, but will not eliminate the problem.

Answer 19

Against!

UX

it breaks with convention (UX 101) --

Just like the contact page on your marketing site should be named "Contact" or "Contact Us" in order to match a convention in the mind of the user and shortcut the mental processing, the login page should have the username/email and password in the same form -- Cos this is the common convention! There is a lot of user value to meeting expectations.

it might break Password Managers --

It might make it harder for Password Managers to fill the right fields with the right values. We all [should] want Password Managers to integrate easily. Again, it's about sticking to conventions. This makes life easier for everyone.

it breaks users hearts 💔 --

It's a higher cognitive load to split it, especially given the convention point above. It's more work because it's multiple steps. Just..... don't; okay.

Security

It allows for account enumeration --

Just don't do this!

Oh, and if someone is going to say "well we don't reveal the presence of an account after the first step (username/password)"... then, why break this up at all?

Answer 20

Big tech companies started doing two steps recently. Please read this article below.

https://www.twilio.com/blog/why-username-and-password-on-two-different-pages

Answer 21

This is something I see very frequently throughout the interwebs; people are scared of giving the error message "Account does not exist", because hackers could figure out which accounts DO exist.

However, these fears are VERY unwarranted. Simply limiting the amount of times a user can attempt to "guess" a username mitigates much of the risk, just like you would limit the amount of times a user can guess at a password. In addition, if you have a public registration form anyone can check whether a specific account already exists or not anyway. With just a basic level of security precautions, this extremely convenient feature becomes just as safe as any other component.

To answer the other part of your question, why does the form need to be two separate pages? You could still have two separate checks, one for username existence and one for password correctness, but on the same page. This is how I do it, and how I would recommend others do it.