Onboarding
Onboarding patterns guide new users from sign-up to their first meaningful action. These patterns prioritise progressive disclosure — reveal complexity only when the user is ready for it.
Interactive Example
A four-step wizard with progress indicators, back navigation, and a skip option. Click through the steps.
Step 1 of 4 — Welcome
Welcome to Sitka
Set up your workspace in four quick steps. You can always change these settings later.
Principles
One question per step
Each step in a wizard should ask for exactly one piece of information or decision. Combining steps increases drop-off.
Show progress
Users need to know how much is left. A progress bar or step indicator reduces abandonment by setting expectations.
Always allow skipping
Never gate completion on optional information. Provide a visible skip path for every step that is not strictly required.
Defer everything non-essential
Ask only for what you need to deliver immediate value. Collect payment, preferences, and advanced settings later.
Celebrate completion
The final step should feel like an arrival. A brief success state signals that setup is done and transitions the user into the product.
Persist across sessions
If a user abandons onboarding, resume where they left off. Never restart the wizard on re-entry.
Step Types
| Type | When to use | Skip allowed? |
|---|---|---|
| Welcome | First step only. Explain value, set expectations, no data entry. | No |
| Account setup | Name, avatar, timezone — things that personalise the experience. | No (required) |
| Integration | Connect external tools. Each integration is independent. | Yes |
| Team invite | Only show if the product has collaboration features. | Yes |
| Preferences | Theme, notifications, defaults. | Yes |
| Completion | Confirm setup is done and route to the product's core value. | No |
Rules
Use a wizard for 3–7 steps
Fewer than 3 steps don't need a wizard — a single form is clearer. More than 7 steps signals the onboarding has too much scope.
Don't use a modal for onboarding
Onboarding needs space. Modals signal a temporary interruption; full-screen or dedicated-page layouts signal that setup matters.
Name the back button 'Back'
"Previous" is ambiguous. "Back" is unambiguous. Always include it from step 2 onwards.
Don't ask for optional info upfront
Payment details, billing address, and advanced preferences don't belong in onboarding. The user hasn't seen value yet.