| UI or UX | UI + UX - Returning-account authentication and session start flow | UI + UX - Persistent account establishment flow | UI + UX - Authentication secret entry control | UI + UX - Authenticated-session expiry and reauthentication boundary warning | UI + UX - Contactable email address capture field |
| UI guidance | Render sign in as a focused authentication surface with a clear service or destination name, account identifier field, current-password or passkey path, password-manager-friendly attributes, recovery routes, create-account route, and neutral error area. | Render account creation as a focused task with a clear reason for the account, one identifier path, new-credential fields, verification or activation state, existing-account route, and post-creation destination. | Render password entry as a labelled password field that is hidden by default, uses the correct autocomplete purpose, offers a clear show and hide control, disables spellcheck and automatic capitalization, and keeps helper and error text connected to the input. | Show a visible countdown or clear expiry time before inactivity, absolute session, or reauthentication limits can interrupt work; place the warning near the current task or as a focused dialog when immediate action is required. | Render email entry as a labelled single-line field with purpose text, type email, autocomplete email, spellcheck disabled, enough visible width for review, field-specific errors, and optional typo warning and review states. |
| UX guidance | Use sign in when users are returning to an existing account, protected resource, invitation, draft, checkout, or workspace and need to prove control of an authenticator. | Use account creation only when a persistent account is necessary for repeated access, saved data, updates, security, or legal accountability. | Use password input when a user enters an existing secret to sign in, reauthenticate, unlock a protected action, or confirm account ownership. | Use session timeout warning to balance security, privacy, accessibility, and continuity when an authenticated session is about to expire or require reauthentication. | Use email address entry when the product must contact the user, identify an account, send a receipt, invite someone, or confirm access to a mailbox. |
| Good UI | A sign-in page names the workspace, shows email or username, password with current-password autocomplete, passkey option, forgot-password link, create-account link, and a destination reminder such as Continue to Q2 budget review. | A service lets users draft an application, then asks them to create an account to save and return later with email, new password, terms acknowledgement, and a clear activation message. | A sign-in form has Email and Password fields, the password field uses autocomplete current-password, a Show button, no spellcheck, and an account-details error after failed login. | A benefits form shows Your session will end in 2 minutes, says the draft is saved, and offers Stay signed in, Save and sign out, and Sign out. | A receipt form asks for Email address, says We will only use this to send your receipt, uses type email and autocomplete email, and shows a review row before submit. |
| Bad UI | A sign-in page has four equal buttons for sign in, create account, reset password, and browse plans, with no indication of the protected destination. | A checkout asks for account registration before showing shipping cost or guest checkout even though the purchase can complete without an account. | A login form uses a normal text field named Password and leaves the secret visible on screen. | The app logs out after 15 minutes with no countdown and clears a long form. | A form uses a plain text field named Contact and later rejects it as not email-shaped after submit. |
| Good UX | A user opens a private document link, signs in with a saved passkey, and lands back on the same document with focus near the access confirmation. | A user completes most of a one-hour permit application, chooses to save progress, creates an account using the email already entered, verifies the email, and returns to the same draft. | A user pastes a generated password from a password manager, toggles Show to inspect one character, hides it again, and signs in without the value appearing later in review or history. | A user pauses while gathering documents, sees the remaining time, extends the session once, then saves the draft before policy requires reauthentication. | A user pastes alex+receipts@example.co.uk, sees it preserved exactly, reviews it on the check page, and changes it only if needed. |
| Bad UX | A user signs in from checkout and lands on a generic account dashboard, losing the cart and payment context. | A user must create an account before learning whether the service is suitable, then abandons because registration feels unnecessary. | A user cannot paste from a password manager and shortens the password to something easier to type. | A user returns from a phone call to find the form gone and a generic access denied page. | A user with a long work address cannot see enough of it to spot a typo before the service sends a reset link. |
| Best fit | Users need to access an existing account or protected destination. | Users need to save and resume drafts, regularly update their data, manage records, check ongoing status, collaborate, or protect repeated access. | The user needs to enter an existing password, passphrase, or PIN-like memorized secret. | An authenticated session can expire because of inactivity, overall lifetime, assurance policy, or reauthentication requirement. | The product must capture an email address for contact, receipt, notification, invitation, account identifier, recovery, or verification. |
| Avoid when | The user is creating a new account, choosing a new password, or verifying a new contact method. | The task is a one-off transaction that can be completed with a reference number, receipt, guest route, or emailed status link. | The value is not a secret, such as a name, email address, account number, search query, reference, or ordinary note. | There is no authenticated session boundary and the issue is ordinary navigation away. | The value is a username, label, reference, organization name, or other short text that may not be an email address. |
| Required state | Initial sign-in state with service or destination context. | Need-for-account state explaining why an account is required or beneficial at this point. | Initial hidden state with label, autocomplete purpose, spellcheck off, autocapitalization off, and show control. | Active session with no warning. | Initial state with label, purpose hint, type email, autocomplete email, spellcheck false, and adequate width. |
| Accessibility burden | Use explicit labels for identifier, password, passkey, SSO, and one-time-code controls rather than placeholder-only prompts. | Use a clear H1 such as Create an account and visible labels that say Create a password or Email address rather than ambiguous credential labels. | Use a visible label that names the password purpose, such as Password or Current password. | Warn users early enough to respond and avoid relying on a rapidly changing countdown as the only information. | Use a visible label that names the value as an email address and a hint that explains why it is requested. |
| Common misuse | Using account-specific error messages that reveal whether an identifier exists. | Forcing accounts before users can evaluate a service or complete a one-off transaction. | Using type text for passwords. | Using a client-only timer that disagrees with the server session. | Using a plain text input without email autocomplete or email keyboard support. |