Screenshot study · Reviewed September 23, 2026
Claude sign-in: make the email handoff recoverable
The captured screens keep the submitted address, verification field and change-address route together. Loading indicators reuse the submit area, while the later notification explanation includes a visible decline action.
How does email sign-in stay understandable when the user leaves the app?
The captured screens keep the submitted address, verification field and change-address route together. Loading indicators reuse the submit area, while the later notification explanation includes a visible decline action.
Evidence and limits
Selected still images from the Aug 2026 Claude iOS collection. These show states, not verified transition order, timing, conversion, or accessibility behavior. Source copy may describe historical service conditions.
Read the decisions
01 / Claude · Aug 2026 · Still image
Offer several sign-in routes
What is visible
Google and Apple buttons appear above a personal or work email field and policy links.
Design interpretation
Keep alternative account routes discoverable while identifying their providers.
02 / Claude · Aug 2026 · Still image
Keep context above the keyboard
What is visible
The email field and legal links remain above the on-screen keyboard while the illustration becomes smaller.
Design interpretation
Test the smallest supported viewport with the keyboard open, not just the resting form.
03 / Claude · Aug 2026 · Still image
Replace the action with progress
What is visible
A spinner occupies the email submission action while the keyboard is absent.
Design interpretation
Prevent duplicate submissions and announce progress without moving the field.
04 / Claude · Aug 2026 · Still image
Place code entry inside the explanation
What is visible
The code input appears inside the email confirmation card above the numeric keyboard.
Design interpretation
Group the challenge and its purpose; support platform code autofill where appropriate.
05 / Claude · Aug 2026 · Still image
Show verification in progress
What is visible
A spinner appears beside a filled code and the change-address action is visually muted.
Design interpretation
Explain waits to assistive technology and restore recovery actions after a failure.
06 / Claude · Aug 2026 · Still image
Explain notification categories before asking
What is visible
A notification sheet shows example updates, explanatory copy, Turn on notifications and Not now.
Design interpretation
Explain the scope of alerts, including promotional messages, before the permission decision.
What to question
- Multiple provider choices can increase scanning cost; choose their order from audience needs rather than assumed popularity.
- An inline spinner saves space but needs an announced status and timeout recovery. A still image does not prove either implementation.
- The notification explanation includes several message categories. Permission to receive task updates should not be treated as blanket interest in marketing.
Try an original implementation
Explore a three-step web onboarding pattern: choose a goal, set a pace, and optionally request a reminder. Go back to revise answers without losing them.
This React example uses native form controls, keyboard navigation and focus management. It is a separate prototype with original copy and styling, not a reproduction of the source apps.
Download React sourceRequires React and Tailwind CSS. Web only; not React Native. MIT license.
Import the named OnboardingExample component into a page. Replace the final preview with your application logic; this example makes no network requests.
Practice studio · Original web demo
Step 1 of 3
What would you like to practice?
Before you ship
- Support pasted and autofilled codes without forcing manual character entry.
- Make address correction available after expired or invalid codes.
- Test the form with the keyboard open and large text enabled.
- Keep a decline route for optional notification setup.
Validate these recommendations with your own users. No conversion uplift is claimed.