352 lines
7.7 KiB
Markdown
352 lines
7.7 KiB
Markdown
# 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
|
|
|
|
1. Define your activation event (what = success?)
|
|
2. Measure current baseline
|
|
3. Identify friction points
|
|
4. Test improvements
|
|
5. 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 | |
|