All posts
Product
·
·
5 min read
Designing a sign-in form people finish
Four details from a year of testing: field order, error timing, social buttons and remembering the last method.
Hana Sato
Product Designer
We test the prebuilt sign-in flow with five new people every month. None of them have seen Lintel before, and most have never thought about sign-in at all. Here’s what a year of watching them taught us.
Ask for the email first
A single email field converts better than email and password together. There’s less to read, and once we know the address we can offer the right next step: a passkey, a code or a password.
Show errors when people pause
Validating on every keystroke flags a half-typed address as wrong. We wait until the field loses focus or the person stops typing for a second, then show one specific message under the field.
Social buttons go above the form
People who want Google sign-in look for it first. Putting the buttons above the email field cut the time to choose a method by almost half in our tests, without reducing email sign-ups.
Remember the last method
If someone used GitHub last time, we show GitHub first with a small note. It’s the single change that made returning sign-ins feel fastest.
Keep reading.
More from the blog.
Product
·
Passkeys are ready. Here's how we turned them on by default
What we learned switching passkeys on for 9,000 products, and the fallbacks that kept sign-in working for everyone else.
Tobias Lindqvist
Security
·
Why your sign-in page should never say “wrong password”
Small copy decisions that stop account enumeration without making the page harder to use.
Kwame Asante
Guides
·
A practical guide to organizations and roles
How to model teams, invitations and permissions so your B2B plan doesn't need a rewrite in a year.
Aarav Mehta