Onboarding Pattern
Multi-step wizard pattern for guiding new users through account setup with clear progress indicators and privacy-first approach.
Interactive Wizard Example
A complete onboarding wizard with progress tracking, step navigation, and form validation.
Step 1 of 8
Welcome to Fidus
Your privacy-first AI personal assistant. Let's get you set up in just a few steps.
- ✓Your data stays on your device
- ✓End-to-end encryption
- ✓No selling or sharing data
Progress Indicator Patterns
Show users where they are in the onboarding process with clear visual indicators.
Linear Progress Bar
Step Indicators
✓
Account2
Privacy3
SetupNavigation Patterns
Provide clear navigation between steps with back and next actions.
Usage Guidelines
When to use
- •Initial user account creation and setup
- •Multi-step configuration processes
- •When users need context about privacy and features
- •Complex setups that benefit from step-by-step guidance
Best practices
- •Show clear progress with visual indicators
- •Allow users to skip optional steps
- •Enable going back to previous steps
- •Save progress automatically
- •Explain privacy implications early
- •Use friendly, welcoming language
Accessibility
- •Announce current step to screen readers with aria-live
- •Manage focus when moving between steps
- •Support keyboard navigation (Tab, Enter, Arrow keys)
- •Provide skip links for optional sections
- •Ensure sufficient color contrast for step indicators
Do's and Don'ts
✓ Do
- •Show progress clearly with visual indicators
- •Explain privacy protections early in the flow
- •Allow users to go back and edit previous steps
- •Provide "Skip for now" for optional steps
✗ Don't
- •Force users through unnecessary steps
- •Hide or downplay privacy implications
- •Prevent users from going back
- •Use more than 10 steps (consider grouping)
Related Components
Progress Bar
Visual progress indicators
Button
Navigation actions
Form Validation
Input validation patterns