Initial commit with translated description
This commit is contained in:
351
references/29-patterns-onboarding.md
Normal file
351
references/29-patterns-onboarding.md
Normal file
@@ -0,0 +1,351 @@
|
||||
# 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 | |
|
||||
Reference in New Issue
Block a user