Hi there. My name is Matei Stanca and I make websites and stuff.
As time goes on I find myself increasingly annoyed with login forms. As password managers like 1Password (which is what I use) and Chrome’s password manager (which I also sorta use) become more popular, it’s important for websites to be aware of how users go about logging into their sites.
Let’s walk through some login patterns and why I think they’re not ideal. And then let’s look at some better ways of tackling login. TL;DR; create login forms that are simple, linkable, predictable, and play nicely with password managers.
I think this may have started with Slack, but I’m seeing other digital products like Notion (which I love by the way) send users a temporary password to their email in order to login. I can appreciate the cleverness of this pattern as it avoids the rigamarole of users having to remember yet another password and building out all the “Forgot password” flow stuff. But.
- This pattern is incredibly tedious. 1. Enter email into login form. 2. Open new tab or switch programs. 3. Open your inbox. 4. Find message from service (if you don’t get distracted by other emails first). 5. Open message. 6. Copy gobbledygook password. 7. Go back to website. 8. Paste in gobbledygook password. 9. Submit login form. Holy shit.
- This doesn’t work at all with password managers, which is incredibly annoying as I want to lean on password managers to, uh, manage my passwords. With the advent of design systems we talk a lot about consistency. But it’s not just about creating consistency within your own ecosystem, it’s about being consistent with the rest of the internet.
Shopify (another service I love) annoyingly splits its login across three separate screens. Again, I can appreciate the intention here: they’re not trying to overload a user with too much info at once. And while I agree with this pattern for certain contexts (like in an e-commerce flow you typically see billing information, shipping method and address, credit card info, etc chunked out into discrete steps), this is overkill for what’s essentially a three-field form.
- Adds unnecessary steps to login – Again this is a three-field form, but now users have to slog through three screens to log in. This no doubt slows users down.
- Doesn’t work with password managers – While they sort of work, password managers are only able to fill in the one field on the page.
So what should web designers do instead? I think having a boring old predictable login form is just fine. Here’s Harvest:
Simple, concise, predictable. Works with password managers. Good stuff. Here’s some considerations:
- Have a dedicated page for login – Customer support people can direct people to a URL (domain.com/login) rather than having to spell out a bunch of instructions on where to find the login form on the page. Password managers can store that login page and with a click of a button open that page and pre-fill the form.
- Expose all required fields – If you need to enter your last name in order to log in, expose that field!
- Keep all fields on one page – login should be a swift process, not an unnecessary slog through multiple pages.
- Don’t get fancy – There may be something to the whole magic link thing and other inventive login patterns, but I think it’s important to recognize how users are used to logging in across the internet. Lean into that boring, predictable settled science.
My mom is an O.G. console cowgirl, a real-life hidden figure. Working for Ma Bell in the early ’70s, she was responsible for administrating some of the most powerful computers then in the country, the ones that drove our telephone systems. “I’m one of only seven people who know how to program these,” I remember her once bragging as she swept her hand across a clean room the size of an aircraft hanger filled to the ceiling with blinking, whirring mainframes.
But Sally Brownlee isn’t so good with computers anymore. Last March, she was hit by a car while walking her dog. Everyone survived, but Wally lives with another family now (he’s happy; I hear they have a beach house), and as for Mom, who suffered permanent brain damage, she’s not the same in innumerable ways. But in no way is the change more quantifiable to me than when I watch her stares uncomprehendingly at the keyboard of her laptop, or try and fail to use her iPad for the umpteenth time. This woman’s technical expertise launched a billion phone calls, yet now, she is routinely thwarted by what many hail as one of the most accessible UIs on the planet.
[T]he older we get, the more we act like we’re cognitively disabled: Again, according to Nielsen, people’s ability to use websites effectively declines 0.8% every year over the age of 25.
“It happens naturally,” [Lisa Seeman, a member of IBM Accessibility Research and the editor of the World Wide Web Consortium’s standards for making designs for individuals with cognitive disabilities] explains. “We get older, and even without having something like dementia, we become less capable of figuring new things out.” And this isn’t true only for seniors. Cognitive ability is a spectrum, not a binary switch: It goes down when you’re stressed, tired, depressed, hungry, or in pain. “Everybody has the same cognitive impairments when they’re stressed or depressed,” Seeman says.
In other words, cognitive accessibility isn’t just relevant for people with brain damage, like my mother. It’s relevant to everyone, from people with migraines to neophytes in emerging markets who don’t have software translated yet into their local languages.
So what’s the answer? A system-level toggle you flip to tell software you’re cognitively disabled, which then dumbs down your interfaces accordingly? Nothing so gauche, laughs Seeman. Where the industry needs to go, she says, is dynamic UIs: Interfaces that aren’t built on an assumption of computer literacy but adjust to a user’s capabilities in real time. “What we need are interfaces that meet the user where they already are,” she says.
Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms, can be extended with lots of plugins, has a beautiful, easy to use and well-documented API and a simple, readable source code that is a joy to contribute to.