Login Page
The gateway to your product. Design login screens that are fast, trusted, and reduce friction to returning users.
What is it?
A login screen is the authentication gateway that allows returning users to access their accounts. It is one of the most frequently-used screens in any product and one of the most commonly mis-designed. Its primary job is to get authenticated users back to their work as fast as possible, with minimum friction.
Why it matters
Every obstacle on the login screen is a bounce. Users forget passwords, try multiple emails, get frustrated by broken error messages, and abandon the product. A login screen that takes 30 seconds versus 10 seconds is not a trivial difference for a product used daily. First impressions for new users also start here.
Best Practices
- Offer SSO (Google, GitHub, Apple) as the primary option — it is genuinely faster and more secure for most users.
- "Remember me" should be checked by default — make it opt-out, not opt-in.
- "Forgot password" link should be visible before the user fails, not only after.
- Show/hide toggle on the password field — prevents mis-type frustration.
- Auto-focus the email field on page load.
- Error messages for wrong credentials should not specify which field is wrong ("Incorrect email or password" — not "No account with that email" which reveals account existence).
- Separate login and signup clearly — but provide easy navigation between them.
- "Continue with Google" buttons must match Google's branding guidelines.
- Support for password managers — inputs must have correct name and autocomplete attributes.
- Don't force a CAPTCHA on every login — only after multiple failed attempts.
Common Mistakes
- No SSO options — forcing password creation and management unnecessarily.
- "Remember me" unchecked by default — most users don't toggle it, then must log in every session.
- Error messages that reveal account existence: "No account found with that email."
- No visible "Forgot password" link — users have to fail first to find it.
- CAPTCHA on every login attempt — penalizes legitimate users.
- Login and signup on the same form with no clear visual distinction.
- Password fields without show/hide toggle.
Checklist
Research & Theory
Friction and Drop-off Rates
Every additional field or step in a login flow reduces completion rates. Research consistently shows that SSO adoption reduces login failure rates by 30–60%.
Why it's relevant
The fastest path to authentication is the best path. SSO wins because it removes the password memory problem entirely.
Real-World Examples
Linear
Login with Google as the primary CTA. Email login as secondary. Clean, single-focus screen. Auto-focus on email. No CAPTCHA on first attempt.
Notion
Continue with Google dominates the screen. Email/password is secondary. Clear "Switch to signup" navigation. Fast, focused, no distractions.
Vercel
Continue with GitHub (relevant to their developer audience). Then Google. Email last. They understand their users' preferred auth method and lead with it.