Mobile login examples
Account access is a sequence of decisions: which identity to use, where to verify it, and how to recover. These inspected states show the choices and feedback that surround the form.
13 reviewed screens · 2 apps · Source versions shown for each example
Can someone recover without restarting?
- Keep the submitted address visible beside verification so mistakes are easy to spot.
- Offer recovery when an emailed code expires or an external provider is cancelled.
- Test with the keyboard open and large text enabled; a resting screenshot hides layout problems.
Claude · Aug 2026
Offer several sign-in routes
Google and Apple buttons appear above a personal or work email field and policy links.
Consider: Keep alternative account routes discoverable while identifying their providers.
Claude · Aug 2026
Keep context above the keyboard
The email field and legal links remain above the on-screen keyboard while the illustration becomes smaller.
Consider: Test the smallest supported viewport with the keyboard open, not just the resting form.
Claude · Aug 2026
Show the submitted-address action
A filled email field has a circular arrow action at its trailing edge.
Consider: Give icon-only submit actions accessible names and clear enabled states.
Claude · Aug 2026
Replace the action with progress
A spinner occupies the email submission action while the keyboard is absent.
Consider: Prevent duplicate submissions and announce progress without moving the field.
Claude · Aug 2026
Explain the email handoff
A card says to check email to finish signing in and offers Change email address.
Consider: Provide a recovery route before users leave the app to retrieve a code.
Claude · Aug 2026
Place code entry inside the explanation
The code input appears inside the email confirmation card above the numeric keyboard.
Consider: Group the challenge and its purpose; support platform code autofill where appropriate.
Claude · Aug 2026
Keep the code visible during entry
The verification field contains a partially entered numeric code while the change-address link remains visible.
Consider: Do not hide the recovery action merely because input has begun.
Claude · Aug 2026
Show verification in progress
A spinner appears beside a filled code and the change-address action is visually muted.
Consider: Explain waits to assistive technology and restore recovery actions after a failure.
Notion Mail · Sep 2026
Show the account-method menu
A notion.so browser sheet lists Google, Apple, Microsoft, Passkey, SSO and Email.
Consider: A rich provider menu adds flexibility but should keep each route easy to distinguish.
Notion Mail · Sep 2026
Expand the chosen email method
An email field and Continue action sit below the provider menu in the browser sheet.
Consider: Keep the active method evident when alternate methods remain visible.
Notion Mail · Sep 2026
Retain the entered address
The filled email field offers a clear control and a Continue button.
Consider: Let users correct identifiers before starting verification.
Notion Mail · Sep 2026
Request the emailed code in place
A verification-code field appears beneath the email field with a sent-to-inbox explanation.
Consider: Keep the address and challenge together so users can verify the destination.
Notion Mail · Sep 2026
Make verification submission explicit
The code is filled and a Continue action remains below the fields.
Consider: An explicit submit step can make verification easier to understand than an unexplained automatic transition.
Continue with the full context
Observations describe supplied images. Guidance is editorial interpretation, not measured conversion or accessibility results. Third-party screens remain attributed to their owners.