71
votes
The decline of username and password on the same page
Web devs: what's up with this trend? For enterprise apps, I get it…single sign-on needs to detect what your email domain is to send you to your identity provider. For consumers, I feel like it's gotta be one of these reasons:
- Users don't know about the tab key being able to move to other fields on a page
- Mobile users don't really have a tab key, despite there being "previous/next field" arrows on the stock iOS keyboard since its inception (Android users, help me out please)
- Users tend to hit Enter after typing in their username, leading to a form submission with a blank password
- Security, maybe? In the past I have sent a link and a password in separate emails or separate communication methods entirely. Are you hashing/salting these separately for better MITM mitigation?
Did your UX team make a decision? Are my password managers forever doomed to need a "keyboard combo" value for every entry from now on?
Non-devs: do you prefer one method over the other? If so, why?
Tildes maintainers: selfishly, thanks for keeping these together :)
I hate login screens where the username and password are on separate pages. It’s kind of amazing how such a little thing annoys me so much.
I hate it with a burning passion. Hasn’t it been a UI rule of thumb to avoid extra clicks since forever? It’s caused issues with password managers in the past, too, so I honestly wonder if it isn’t intentional.
It's not a solid rule, you can add operations if it makes things more familier but in this case it's not even adding clicks. Select username field, enter username, then either select the password field or submit the form, enter password. Same number of steps. The latter method is actually slightly easier as it uses more understood methods (enter to submit rather than the less well known tab to move fields)
There are issues with password managers which makes using two pages less usable though. Although if for some reason you want to stop people using password managers that might be one way to do it. Not sure why you'd want to do that but who knows why some people do things.
To be perfectly frank your explanation makes me even more upset at this practice. The only way it is the same number of clicks is if you don’t know about the tab key. It’s part of a trend that has bothered me for a very long time: breaking basic browser behaviors to appease the lowest common denominator.
Forms have been part of the web practically since the beginning. And as such they have inherited some basic behaviors that make filling them out fast and easy, like pressing tab to switch fields, return to submit, and being able to search through drop-down menus by typing in what you want. It means you can fill in the entire form using the keyboard - no need to move your hand away and slow you down. Yet I constantly see websites that break these basic behaviors. More often than not it’s the drop-down menus that get overridden for no reason other than to look prettier, and of course they don’t bother to implement the full capabilities. You have to wonder how well those work with accessibility tools.
I’m all on board with making forms more accessible, but let’s call a spade a spade; if it has less functionality than before, it’s broken. It’s one thing to override functionality to improve usability, but if you defy any way people know how how to interact with an interface, the functionality is inferior.
I don’t enjoy filling out forms. I don’t think anyone does. Adding friction to the process only makes the experience worse.
I'm fairly sure it's the same number of operations whether you know about tab or not. Let's assume that the cursor is in the relevant form field on pageload, which is good design practice and easily done with some simple JS. The shortest possible path to login on a single page system is then as follows:
In a two page system:
I'd argue the second is, all else being equal, more usable. It requires less knowledge on the part of the user. Lots of people don't know about using tab to move between fields, and that's perfectly fine. Nobody knows everything about everything. Good, usable design accounts for that.
On your broader point, while people do for all sorts of stupid (and very occasionally, sensible) reasons override default form behaviours, having two pages for username and password entry isn't necessarily doing that. I don't recall seeing tab be broken all that often, although yesterday I was filling in a form where I had to enter the year using little up and and down arrows (for some reason it wouldn't let me type) and it defaulted to 1900 which meant getting to 2022 was a fucking pain. It was car insurance though and I'm sure everything to do with insurance is the work of some kind of particularly malevolent demon.
I think two page logins is often an attempt to remove friction, not create it. In some cases I would argue that it works.
This is interesting. I'm not entirely sure I agree. If I break an interface element for 2% of the most power of power users but by doing so improve things for the remaining 98%, is that not superior, overall? I mean, personally, I'd avoid breaking anything for anyone unless absolutely necessary, but sometimes it is necessary for the greater good.
Two page logins create a whole new type of friction though:
When screen content changes, it forces my brain to also refresh and re-read the page: what happened, is this supposed to happen, what do I do now?
If my login fails, was it my password or the username that was the problem?
It's like meaningless flashes and meaningless screen flashes and meaningless page updates: we don't do that for UX reasons but why do we think this is less disruptive than simply having both fields at the same time?
While I agree with the rest, a secure system should never provide feedback about incorrect login credentials as it can leak private information. For example, “email does not have an account” or “password incorrect [implying email is good]” means someone can keep submitting to find out who does have an account.
Same goes for registration, though many do give immediate feedback, or imply it with a redirect to login, if an email is in use.
There are two problems with your comparison. The first is the assumption that the two-page login prompt is actually well designed and automatically draws cursor focus, which in my experience doesn’t happen. The second is that you are breaking apart steps that I don’t consider to be separate. Single form logins don’t require me to think about pressing tab or enter, they just have me typing in username-tab-password-enter and it’s done. With an ideal two-page login implementation its username-enter, watch and make sure the page loads, make sure the cursor is in the password field, then password-enter.
I also have a problem with your assumption of power user vs normie usability being a zero-sum game. I actually don’t have a problem with overwriting form elements to make them more friendly. I’ve seen many cases where drop-down menus have implemented a more comprehensive search feature, and that’s fantastic. The problem is when they don’t take the time to reimplement the functionality that was there before. This is why I consider them to be broken.
I am speaking only in the general case for a design pattern, not a specific implementation. We can really only have this conversation meaningfully by assuming the hypothetical UI is designed according to best practice because otherwise how do you talk about the core concept? The hypothetical bad design is getting in the way!
Now I will admit it's been a few years since I wrote a usability assessment, but back when I did used to do that sort of thing for a living, we broke down processes into atomic operations, not "things @Akir doesn't consider discrete" ;)
You might not consider typing then pressing tab discrete processes but I promise if you set up an eye tracker, it would show that your brain does. It feels seamless, but that's one of the features of being a power user. Familiar things are learned, then run as background processes. You don't need to think, and that why you get so disrupted - far more so than muggles would - by things changing, it makes you have to engage your conscious brain. That sucks, and it is something good designers should definitely try to avoid doing. I don't want my users to have to think, dammit.
But it's possible - and I'm not saying it is definitely true because I don't have any data to back this up - that changing the login process to one more familiar to more people, fewer brains get derailed. Which is a net benefit, even if it's temporarily annoying for you personally.
fwiw if we don't assume the initial form element has focus, that doesn't make any difference, it just adds more operations to the front of the list. You either click or tab there. The actual process in question, that of logging in, remains the same.
I don't think this is how it's done ideally. I just logged into gmail to see how they're doing it. There's no page reload, focus is always where expected (and because there's no reload it doesn't matter), I don't need to check - and you'd be amazed how many people don't check, they just start typing then get confused that no text is appearing. The two-screen login, as implemented by Google, is highly usable. This goes further than just logging in to my email though, because that authentication is reused all over the place, so user familiarity is there, which is super good for usability. Do things lots and they become seamless - even for muggles (power users take way less time to learn stuff). It's smart, thoughtful design and it's making the web easier for people.
Then it's an opportunity for learning.
In most cases, I'd argue that it backfired. I do not care at all about the 98% if they aren't willing to learn something so simple. They come asking me for help because I'm "good with computers" and then we both get frustrated when they ask me for something outside my actual areas of expertise.
Another way to think about it is as an opportunity to design away a problem. Bad interface design forces people to learn it's ways when it doesn't need to, good design works with what people already know. Obviously some UIs need some effort - there's no way you can jump into AutoCAD or PSpice or Cinelerra without doing some learning! But logging in to your email?
Have you got an example of that?
I think it's better to think about how we can make each other's lives easier rather than dismissing people for not knowing the stuff you know. It's either no effort or so close to no effort than makes no difference to me to login to a website over two screens and if that makes other people's lives a tiny bit easier, that's totally fine with me. It might even mean they need my help less, and that's even cooler by me.
Tab to change fields, enter to submit is a transferable basic skill. It's not specialized domain knowledge like Blender.
It's not an issue of effort for me; it's one of loading times. Both fields on the same page? One submit button. Separate pages? Two page loads, hugely and unnecessarily slow.
Perhaps you're right. If they don't need my help to log in, they may not think of me when they need help with whatever they want to do after login. If they need my login assistance, they then know I'm a reliable computer guru and flag me down for future help [yes, I'm openly bitter about some IRL people over this].
I don't disagree it's low-level knowledge, but I don't want to be the person to teach everyone that - especially when I'm not sitting over every user's shoulder while they try to use my website. Lots of people simply don't need to know something you consider basic, their lives can work perfectly well without having to go and learn how to tab between fields.
If we can design around a lack of knowledge then I think that's a net positive. My point about other software was that you can't design away AutoCAD's UI because it's extremely complex by the very nature of AutoCAD - but you can design away other, simpler interactions in other places.
There's shedloads of stuff we all don't need to know in our daily lives because someone has designed away the need for that knowledge, this isn't different just because you personally happen to have the knowledge in this instance.
I haven't checked every site out there but both Google and Microsoft's two screen logins aren't separate pages and the delay between hitting enter and starting to type your password is minimal. Maybe it's a few seconds longer for a power user, but it's probably faster for a muggle. So the overall amount of human time saved is positive because there are way more of them than us.
But really, what are you doing that a few seconds of your time is that valuable? If it's really that big a deal then get your assistant to log in for you, because someone so important that a handful of seconds matters definitely has a PA or two lying around. You're logging in to a website while sitting at your computer, you're not being interrupted in the middle of doing brain surgery. :)
Wouldn't it save even more time if everyone put in the minimal investment to learn about tabbing between fields so they could use it on every other form they encounter?
Haha, yes. One tiny downside to that plan, it requires someone to teach every computer user in the world who doesn't know how to use tab, how to use tab. Not a job I'm going volunteer for, thanks! Until someone does I think perhaps designing for how the world actually is might be a little more sensible.
However. I've been thinking a bit about this and saving some time and/or making things easier for (most) users is a not the only advantage I can see to two-screen login systems. Decoupling the authentication step from the identification step is sort of essential for the future. Passwords are rubbish and have needed to die for years, and the world is finally moving towards that. So maybe I am authenticating with a passkey or a physical device or some kind of centralised key management system or whatever. For most of those cases, all I have to do is type my username/email/whatever, press enter and I'm done. The login system can detect what I'm offering for auth and handle the process automagically if possible, falling back to manual entry when needed.
This is already happening and I'm fairly sure that's the real reason the big players like GoogSoft have two screen logins going.
Part of my frustration also stems from our awkward transition time where my password manager requires me to authenticate my fingerprint twice for one login. I should be able to authenticate with the password manager once and let it automate both screens for me.
(+1 hate). It can throw off the password manager, so then I have to manually open the app, search and copy/paste the credentials. Why??
And what's the deal with the sites that don't allow autofill?
Non-dev here, it annoys me too! It feels like an unnecessary extra step in the login process. Sometimes there's a long loading time between the username page and the password page too.
I think Google/microsoft and similar companies did it for exactly the reason you said: to handle single sign on. Other companies started doing it because “Microsoft does it, so they must have a good reason” without realizing that the good reason was single sign on.
That tracks. Microsoft trends are so bizarre…how many perfectly good desktop apps ruined their UI by replacing their menu bar with a ribbon?
Ribbon menus are fundamentally a good idea, although plenty of implementations have been absolutely crap. Especially Sibelius. Seriously, that link (20min video) really nails how not to make a ribbon menu.
If MS and Google etc do something then copying them is often deliberate, no matter what their original reasons. Because billions of people are familiar with their designs and familiarity is usable. There's no such thing as intuitive interfaces, there's only what you're used to.
Also don't forget huge corps have usability labs and test panels and test the hell out of every little change. If they do something there usually is a good reason, although that good reason might be good for muggles and annoying for power users. For what it's worth I can't think of a technical reason that SSO would require separate username and password pages.
I think Microsoft is a decent example of why this would be required. (Please note there is a dash of speculation, I haven’t actually set up Active Directory.) For locally hosted Active Directory, you can go to the login page of office.com and type in your email. If your domain is managed by a local Active Directory, it redirects to a page hosted by the company to login with the password. That is fundamentally not possible with username and password on the same page. Even if it were, the corporations setting this up may not even want that due to security issues. There are levels of hosted office 365 that are completely separate from normal 365 infrastructure. By contract, they do not and can not talk to each other (except in the way that everything on the internet talks to each other). I know this exists for the US government, and I think also for the Chinese government and maybe EU for GDPR.
Also Microsoft supports a variety of login options, including completely passwordless logins. Showing a password on the main screen is fundamentally incompatible with a passwordless login.
Ah, that makes sense - thanks for the correction. It's been a few years since I was working around this area!
We are in agreement. Guess I was hopeful that someone who had to implement this would provide some non-SSO reasons why to include results from said usability labs.
I think it’s almost entirely because of SSO. Even login screens that “feel like” they’re for consumer things can support enterprise SSO (main thing that comes to mind is apple ID).
Some may be because they want to stop users early if they try to sign in to an account that doesn’t exist, but this is misguided since it opens you up to account enumeration attacks.
You can already enumerate accounts by trying to sign up with that username/email.
Not that it even matters since no one does that. They just directly attempt to log in with an email/password from an external dump.
You shouldn't be able to do that for email signups, websites should just be letting users sign up whether the email is in use or not to prevent enumeration. Then sort that stuff out in the email they send.
I haven't seen this all that much. Google is the only example that comes to mind. Just guessing but I'd say it's either to have a confirmation step that yes you did get your email right, here's your profile pic. Or that they have multiple different authentication methods, and putting the username in lets them select the right one.
On the web, user/pass on different pages doesn't really make sense. Given a unique username (almost always an email address), there's nothing I can think of that you're going to do with it which would require a second step before you ask for the password. At least not if you didn't make really questionable decisions when designing the app.
I've always assumed it was either a misled security thing or an attempt to thwart bots. But I like the mindless trend following theory someone mentioned.
Single Sign-On. You don't want people submitting their Okta password straight to you. You need a step where you see "oh, this user works for X company who uses Y SSO, we need to redirect them to Y".
A curious thing I noticed about some sites is that, despite how it appears to the user, sometimes there doesn't even seem to be a different page: On one site, using a password manager only fills the username field, and you need to do it again for the password after clicking "continue". But on another site, after clicking continue, the password is already there!
I think this might be explained by /u/Weldawadyathink's comment in this thread:
Annoys me like crazy too. Anecdotally, I've been told it's a security thing.
Sometimes/usually it results in 2 requests to the server (once for email, once for password) so it slows down people who are trying out a ton of leaked username/password combos.
Edit: Might have misinterpreted...so I just dropped the best Android keyboard out there.
I've got you covered: Hacker's Keyboard
It works more like a real keyboard, has a proper number row, tab key, ctrl, alt, arrow keys, and the FN button also gives access keys that are immensely useful if you're remoting into other computers.
Also makes me wary when it's a keyboard but every screenshot is in landscape orientation.
I also feel like I tried it years ago and didn't like it for some reason. But I don't understand why arrow keys and dedicated number keys used to be more common back when screens were smaller, but now that there's more room for them, they've been removed.
I'm running the Fdroid version and it's running fine on an up-to-date Galaxy S21. But yea, I see last release was in 2018.
On my phone's keyboard the enter key works like a tab key until it gets to the last field on the screen. This causes annoyances for a DOS emulator thing I use online but it works for password entry. Besides that, most mobile users are using autofill for passwords anyways rendering the discussion about tab working or not working pretty moot.
Worse yet is when you first have a prompt for username, taking you to a second page that defaults to "send me a magic link", requiring you to hunt down the hyperlink that will open the actual password page.
Sometimes I feel like user-centric internet design peaked around 2012-2014.
I’ve stopped using websites that only provide that login method. There’s nothing a site/app can offer me that’s worth that amount of irritation.
Yes, most keyboard will replace make so that the "enter" button will be a "next" button instead. I have no insight into the implementation detail, but I assume it just look at input and textarea inside a form tag.
Another similar thing that drives me nuts is having login happen in a JS popup instead of having a solid, purpose built page for accepting a login. Accidentally change focus to another part of the page and suddenly anything you typed gets cleared from the form. I want a URL to put in my password manager that doesn't require a session token, but often I have to go to one page and then click a couple links to get to the actual login page.
I get the SSO argument above, honestly, but I feel like there should be a better UX around it, more intentionality that you're using SSO and not a site-local account. Maybe I have a Gmail email, but I don't want to be redirected to SSO based on that domain. If I choose to use SSO, I should be able to select that identity provider separately from entering my email address. However, this only applies to personal use; I can see corporations enforcing SSO use for their employee credentials. But even that workflow's UX could be improved.