29-patterns-onboarding.md 7.7 KB
Patterns: Onboarding
Patterns for introducing users to your product and helping them reach value quickly.
What is Onboarding?
The process of helping new users understand and succeed with your product. Goal: Get users to their "aha moment" as fast as possible.
Core principle: Onboarding isn't about teaching features—it's about delivering value.
Product Tours
What: Guided walkthroughs highlighting key features.
Types
| Type | Best For |
|---|---|
| Linear tour | Simple products, sequential workflows |
| Spotlight tour | Complex products, key features only |
| Interactive tour | Learning by doing |
| Video tour | Complex concepts, emotional connection |
Implementation Guidelines
DO:
- Keep it short (3-5 steps max)
- Focus on value, not features
- Allow skipping
- Make it contextual (trigger at right moment)
- Test completion rates
DON'T:
- Force users to complete tour
- Cover every feature
- Block user from exploring
- Repeat tour without consent
- Show tour to returning users
Tour Step Anatomy
[Highlight area]
Step 2 of 4
Create your first project
Click here to start building. Projects
organize your work and team collaboration.
[Got it] [Skip tour]
● ● ○ ○ (progress dots)
Contextual Tips
What: Help that appears when and where relevant.
Types
| Type | Trigger | Example |
|---|---|---|
| Tooltips | Hover/focus | Icon explanations |
| Coach marks | First visit to area | Feature introduction |
| Hotspots | Available anytime | Pulsing indicator for help |
| Inline hints | Contextual | Empty state guidance |
Implementation Guidelines
DO:
- Appear at point of need
- Dismiss after shown once (usually)
- Focus on one thing at a time
- Be genuinely helpful
- Allow users to re-access tips
DON'T:
- Interrupt user workflows
- Show too many at once
- Repeat dismissed tips
- Block interaction
- State the obvious
Contextual Tip Timing
| Trigger | When to Show |
|---|---|
| First visit | User reaches feature for first time |
| Feature discovery | User hovers/focuses on new element |
| Error recovery | User makes mistake, offer guidance |
| Idle state | User seems stuck |
| Feature release | New feature for existing users |
Interactive Tutorials
What: Learning by doing within the product.
Benefits
- Active learning — More effective than passive
- Real context — Learning in actual interface
- Immediate value — Complete real tasks
- Verification — Confirm understanding
Implementation Guidelines
DO:
- Use real product, not simulated
- Start with high-value task
- Provide clear success criteria
- Celebrate completion
- Allow exploration
DON'T:
- Create fake practice environments
- Make tutorials too long
- Prevent users from deviating
- Penalize mistakes
- Make completion mandatory
Interactive Tutorial Structure
1. Introduction (why this matters)
2. Task instruction (what to do)
3. Action (user does the thing)
4. Confirmation (success feedback)
5. Context (what else you can do)
Checklists
What: Progress trackers for setup or learning.
Benefits
- Clear progress — Sense of advancement
- Motivation — Goal gradient effect
- Structure — Know what's next
- Completion drive — Zeigarnik effect
Implementation Guidelines
DO:
- Start with easy wins (first items)
- Show progress percentage
- Celebrate completions
- Make items actionable (link to action)
- Allow dismissal
DON'T:
- Include too many items (5-7 max)
- Make all items mandatory
- Reset progress
- Hide the checklist
- Nag about incomplete items
Checklist UI Pattern
Get Started with [Product]
━━━━━━━━━━░░░░░░ 60% complete
✓ Create your account
✓ Add your first project
✓ Invite a team member
○ Connect your calendar
○ Set your preferences
[Continue →]
[Dismiss for now]
Empty States
What: Onboarding when there's no content yet.
Empty State as Onboarding
| State | Opportunity |
|---|---|
| No projects | "Create your first project" |
| No data | "Import your existing data" |
| No connections | "Connect your tools" |
| No team | "Invite your team" |
Implementation Guidelines
DO:
- Explain what goes here
- Provide clear CTA to populate
- Show what it will look like (sample data)
- Offer templates/presets
- Be encouraging
DON'T:
- Leave completely empty
- Use generic "No data" messages
- Assume user knows what to do
- Hide the empty state help
- Make user feel lost
Empty State Anatomy
[Illustration]
No projects yet
Projects help you organize your work and
collaborate with your team.
[Create your first project]
or [Start with a template]
Progressive Onboarding
What: Spreading onboarding over time vs. all at once.
Approach
| Time | Onboarding Focus |
|---|---|
| Signup | Absolute minimum (email, password) |
| First session | Core value action only |
| Second session | Secondary features |
| First week | Deeper functionality |
| Ongoing | Advanced features, tips |
Implementation Guidelines
DO:
- Front-load value, not setup
- Introduce features when relevant
- Remember what's been shown
- Personalize based on behavior
- Celebrate milestones
DON'T:
- Dump everything at once
- Show irrelevant features
- Repeat already-learned content
- Ignore user progress
- Rush to "completion"
Progressive Disclosure Example
Day 1: "Create your first [X]"
Day 3: "You've created 3 projects! Try organizing with folders."
Day 7: "Ready for advanced filters? Here's a quick tip."
Day 14: "Power user tip: keyboard shortcuts"
Onboarding for Different Users
By User Type
| User Type | Onboarding Approach |
|---|---|
| New to category | Concept education + product tour |
| Experienced user | Skip basics, highlight differentiators |
| Returning user | Show what's new |
| Invited user | Context about who invited and why |
Segmented Onboarding
[During signup or first run]
What brings you here today?
○ I'm exploring [category] for the first time
○ I'm switching from another tool
○ I was invited by my team
○ Just browsing
[Continue]
Measuring Onboarding Success
Key Metrics
| Metric | What it Tells You |
|---|---|
| Activation rate | % reaching first value moment |
| Time to value | How long to reach aha moment |
| Tour completion | % completing onboarding steps |
| Drop-off points | Where users abandon |
| Feature adoption | Which features stick |
Optimization
- Define your activation event (what = success?)
- Measure current baseline
- Identify friction points
- Test improvements
- Monitor retention correlation
Onboarding Anti-Patterns
| Anti-Pattern | Problem |
|---|---|
| Tour torture | Forced, unskippable 15-step tour |
| Sign-up interrogation | 10 fields before seeing product |
| Feature vomit | Explaining everything at once |
| Permanent tooltips | Tips that never go away |
| Guilt tripping | "You haven't completed setup!" |
| Fake progress | Progress bars that reset |
| No escape | Can't use product without tutorial |
Onboarding Checklist
| Element | Implemented? |
|---|---|
| ☐ Clear value proposition upfront | |
| ☐ Minimal signup friction | |
| ☐ First-run experience designed | |
| ☐ Empty states guide action | |
| ☐ Contextual tips available | |
| ☐ Progress indicators visible | |
| ☐ Tours skippable | |
| ☐ Success celebrations | |
| ☐ Measuring activation |