A flow lists the steps of one task in order, with what the person does and sees, the components and example each step uses, and where each step can lead, including the error paths. Edit this page to see how the steps are written.
Step 1: Enter email and password
Types an email address and a password, then chooses Sign in.
On screen: A form with two fields and a primary Sign in button.
Componentsbuttons
- empty state
- Both fields start empty; Sign in is available but explains what is missing.
- loading state
- Sign in shows a busy state and the fields are disabled.
Build notes: Validate on submit, not on every keystroke. Never say which of the two was wrong.
Step 2: Sign in fails
Reads the message and tries again.
On screen: The form again with a message above it; the email is kept and the password is cleared.
- error state
- The message says the details did not match, without saying which was wrong.
Build notes: Move focus to the message so a screen reader announces it. Count failed attempts server-side.
Step 3: Land on the home page
Starts using the product.
On screen: The home page, with the account menu showing their name.
- loading state
- A short loading state while the home page data arrives.
Build notes: Return to the page they were trying to reach, if there was one.
- → End of the flow