423 lines
10 KiB
Markdown
423 lines
10 KiB
Markdown
# User Flow Template
|
|
|
|
Use this template when mapping user journeys through your interface.
|
|
|
|
## User Flow Structure
|
|
|
|
### Flow Overview
|
|
|
|
**Flow Name:** [Descriptive name of the flow]
|
|
**Primary User:** [Which persona is this for?]
|
|
**User Goal:** [What is the user trying to achieve?]
|
|
**Success Metric:** [How do you measure successful completion?]
|
|
|
|
### Flow Diagram
|
|
|
|
```
|
|
Entry Point → Step 1 → Decision Point → Step 2 → Success
|
|
↓
|
|
Error Recovery → Step 2
|
|
```
|
|
|
|
### Detailed Steps
|
|
|
|
#### Entry Point
|
|
**Where does the user start?**
|
|
- Homepage
|
|
- Landing page
|
|
- Email link
|
|
- Search result
|
|
- Social media
|
|
- Direct URL
|
|
|
|
**User context at entry:**
|
|
- What do they know?
|
|
- What are they expecting?
|
|
- What device are they likely using?
|
|
|
|
---
|
|
|
|
#### Step 1: [First Action]
|
|
**What the user does:** [Description]
|
|
**What they see:** [Screen/page description]
|
|
**What they think:** [Expected mental model]
|
|
|
|
**Potential friction points:**
|
|
- Unclear what to do next?
|
|
- Too many options?
|
|
- Missing information?
|
|
|
|
**Design considerations:**
|
|
- Clear call-to-action
|
|
- Helpful guidance
|
|
- Error prevention
|
|
|
|
---
|
|
|
|
#### Decision Point: [Choice or Condition]
|
|
**Condition:** What determines the path?
|
|
**Options:**
|
|
- **Option A:** → [Next step if A]
|
|
- **Option B:** → [Next step if B]
|
|
- **Option C:** → [Next step if C]
|
|
|
|
**Design considerations:**
|
|
- Make options clearly distinct
|
|
- Provide context for decision
|
|
- Allow easy return/correction
|
|
|
|
---
|
|
|
|
#### Step 2: [Next Action]
|
|
[Repeat step structure as needed]
|
|
|
|
---
|
|
|
|
#### Success State
|
|
**What success looks like:**
|
|
- Task completed
|
|
- Clear confirmation
|
|
- Next steps offered
|
|
|
|
**What the user feels:**
|
|
- Satisfied
|
|
- Confident
|
|
- Ready to continue
|
|
|
|
---
|
|
|
|
#### Error/Alternative Paths
|
|
|
|
**Common errors:**
|
|
1. [Error type] → [Recovery path]
|
|
2. [Error type] → [Recovery path]
|
|
|
|
**Exit points:**
|
|
- Where might users abandon flow?
|
|
- Why would they leave?
|
|
- How to prevent or recover?
|
|
|
|
---
|
|
|
|
## Example User Flows
|
|
|
|
### Example 1: E-commerce Purchase Flow
|
|
|
|
**Flow Name:** First-Time Product Purchase
|
|
**Primary User:** Sarah (busy professional, mobile-first)
|
|
**User Goal:** Buy running shoes quickly and confidently
|
|
**Success Metric:** Completed purchase, confirmation email received
|
|
|
|
**Flow:**
|
|
|
|
```
|
|
Homepage → Product Search → Product Details → Add to Cart
|
|
↓
|
|
Size Selection Modal Cart Review → Checkout
|
|
↓ ↓
|
|
Confirm Selection Shipping Info → Payment → Confirmation
|
|
↓ ↓ ↓
|
|
Added Notification Saved Address Saved Card
|
|
↓ ↓
|
|
Review Review
|
|
```
|
|
|
|
**Detailed Steps:**
|
|
|
|
**Entry: Homepage**
|
|
- User arrives from Google search "running shoes"
|
|
- Expecting: Shoe selection, easy browsing
|
|
- Device: Mobile (70% of traffic)
|
|
|
|
**Step 1: Search**
|
|
- User types "running shoes women" in search
|
|
- Sees: Grid of products with images, prices, ratings
|
|
- Friction: Too many options (300+ results)
|
|
- Solution: Smart filters (size, brand, price)
|
|
|
|
**Step 2: Product Detail**
|
|
- User taps product card
|
|
- Sees: Large images, reviews, size chart, "Add to Cart" CTA
|
|
- Friction: Uncertain about size
|
|
- Solution: Size guide, reviews mention fit
|
|
|
|
**Decision: Size Selection**
|
|
- Modal appears with size options
|
|
- Context: Size chart visible, "True to size" indicator
|
|
- Required: Must select size to add to cart
|
|
|
|
**Step 3: Add to Cart**
|
|
- Success toast: "Added to cart"
|
|
- Options: "Continue shopping" or "View cart"
|
|
- 60% continue shopping, 40% checkout immediately
|
|
|
|
**Step 4: Cart Review**
|
|
- Shows: Product, size, quantity, price
|
|
- Edit options: Change quantity, remove item
|
|
- Clear CTA: "Proceed to Checkout"
|
|
|
|
**Step 5: Checkout**
|
|
- Shipping address (saved if returning user)
|
|
- Payment method (saved if returning user)
|
|
- Order review
|
|
- Single page vs multi-step based on A/B test
|
|
|
|
**Success: Confirmation**
|
|
- Order number displayed
|
|
- Email confirmation sent
|
|
- Estimated delivery date
|
|
- Next step: "Track order" or "Continue shopping"
|
|
|
|
**Error Paths:**
|
|
- **Out of stock:** Show similar products
|
|
- **Payment declined:** Clear error, retry option
|
|
- **Shipping address invalid:** Suggest corrections
|
|
|
|
**Exit Points:**
|
|
- Search results (too many options → better filters)
|
|
- Product page (price too high → show value, reviews)
|
|
- Checkout (unexpected shipping cost → show earlier)
|
|
|
|
---
|
|
|
|
### Example 2: SaaS Onboarding Flow
|
|
|
|
**Flow Name:** New User Account Setup
|
|
**Primary User:** David (IT Director, desktop user)
|
|
**User Goal:** Set up secure team account with proper permissions
|
|
**Success Metric:** Team invited, first project created, security configured
|
|
|
|
**Flow:**
|
|
|
|
```
|
|
Sign Up → Email Verification → Profile Setup → Team Setup
|
|
↓
|
|
Invite Team → Security Settings → First Project
|
|
```
|
|
|
|
**Detailed Steps:**
|
|
|
|
**Entry: Sign Up Page**
|
|
- Arrived from marketing site "Start Free Trial"
|
|
- Expectations: Professional, secure, straightforward
|
|
- Concerns: Data security, team permissions
|
|
|
|
**Step 1: Account Creation**
|
|
- Work email required (no personal emails)
|
|
- Strong password requirements shown
|
|
- Company name field
|
|
- See: Security badges, privacy policy link
|
|
|
|
**Step 2: Email Verification**
|
|
- Confirmation email sent immediately
|
|
- Clear instructions in email
|
|
- Return to product after verification
|
|
- Fallback: Manual verification link
|
|
|
|
**Step 3: Profile Setup**
|
|
- Role selection (Admin/User)
|
|
- Department (for categorization)
|
|
- Use cases (for personalization)
|
|
- Optional: Profile picture
|
|
|
|
**Step 4: Team Invitation**
|
|
- Add team members by email
|
|
- Assign roles (Admin/Editor/Viewer)
|
|
- Bulk upload option for larger teams
|
|
- Can skip (but encouraged to invite at least 1)
|
|
|
|
**Step 5: Security Configuration**
|
|
- Two-factor authentication setup
|
|
- SSO integration option
|
|
- IP whitelist option
|
|
- Compliance requirements checklist
|
|
|
|
**Step 6: First Project**
|
|
- Guided project creation
|
|
- Template selection
|
|
- Import existing data option
|
|
- Sample data for exploration
|
|
|
|
**Success: Dashboard**
|
|
- Welcome message
|
|
- Team status visible
|
|
- Quick action buttons
|
|
- Link to comprehensive documentation
|
|
|
|
**Progressive Disclosure:**
|
|
- Critical: Email, password, role
|
|
- Important: Team invites, security
|
|
- Optional: Advanced settings, integrations
|
|
|
|
---
|
|
|
|
### Example 3: Mobile App First Use
|
|
|
|
**Flow Name:** Fitness App First Workout
|
|
**Primary User:** Marcus (personal trainer, mobile-first)
|
|
**User Goal:** Complete first workout tracking
|
|
**Success Metric:** Workout logged, felt easy and quick
|
|
|
|
**Flow:**
|
|
|
|
```
|
|
App Launch → Permission Requests → Goal Setting → First Workout
|
|
↓
|
|
Exercise Selection → Timer → Completion
|
|
```
|
|
|
|
**Detailed Steps:**
|
|
|
|
**Entry: App Launch**
|
|
- First time opening app
|
|
- Just downloaded from App Store
|
|
- Expecting: Quick start, not lengthy setup
|
|
|
|
**Step 1: Permissions**
|
|
- Health data access (for tracking)
|
|
- Notifications (for reminders)
|
|
- Camera (for progress photos)
|
|
- Each explained with benefit
|
|
|
|
**Step 2: Goal Setting**
|
|
- Fitness goal (lose weight, gain muscle, maintain)
|
|
- Experience level (beginner, intermediate, advanced)
|
|
- Available time per workout
|
|
- Can modify later
|
|
|
|
**Step 3: First Workout Prompt**
|
|
- "Ready for your first workout?"
|
|
- Pre-selected based on goals
|
|
- "Quick Tour" option for UI explanation
|
|
- Can browse workouts instead
|
|
|
|
**Step 4: Exercise Selection**
|
|
- Simple list of exercises
|
|
- Tap to add to today's workout
|
|
- Popular/recommended highlighted
|
|
- Search for specific exercises
|
|
|
|
**Step 5: During Workout**
|
|
- Exercise name and demo GIF
|
|
- Timer for sets/reps
|
|
- Easy logging (checkmarks or swipes)
|
|
- Minimal UI, maximum screen space
|
|
|
|
**Success: Completion**
|
|
- Celebration animation
|
|
- Workout summary
|
|
- Share option
|
|
- "Schedule next workout" CTA
|
|
|
|
**Recovery Paths:**
|
|
- Paused mid-workout → "Resume" or "End"
|
|
- Closed app → "Continue workout" on reopen
|
|
- Different exercise → Easy swap
|
|
|
|
---
|
|
|
|
## User Flow Best Practices
|
|
|
|
### Keep Flows Simple
|
|
|
|
**Minimize steps:**
|
|
- Every step is a chance to lose users
|
|
- Combine steps where logical
|
|
- Remove unnecessary fields
|
|
|
|
**Progressive disclosure:**
|
|
- Show only what's needed now
|
|
- Reveal advanced options later
|
|
- Don't overwhelm upfront
|
|
|
|
### Provide Clear Paths
|
|
|
|
**Visual clarity:**
|
|
- Clear primary CTA at each step
|
|
- Secondary options less prominent
|
|
- Breadcrumbs for multi-step processes
|
|
|
|
**Feedback:**
|
|
- Show current step
|
|
- Indicate steps remaining
|
|
- Confirm actions taken
|
|
|
|
### Handle Errors Gracefully
|
|
|
|
**Prevention:**
|
|
- Validate as user types
|
|
- Clear input format examples
|
|
- Disable impossible choices
|
|
|
|
**Recovery:**
|
|
- Specific error messages
|
|
- Clear fix instructions
|
|
- Easy return to previous step
|
|
|
|
### Test and Iterate
|
|
|
|
**Methods:**
|
|
- User testing (observe real users)
|
|
- Analytics (where do users drop off?)
|
|
- A/B testing (compare variations)
|
|
- Support tickets (common problems)
|
|
|
|
**Iterate:**
|
|
- Remove friction points
|
|
- Simplify complex steps
|
|
- Add helpful context
|
|
- Test again
|
|
|
|
---
|
|
|
|
## User Flow Checklist
|
|
|
|
- [ ] Clear entry point identified
|
|
- [ ] User goal explicitly stated
|
|
- [ ] Each step has clear purpose
|
|
- [ ] Decision points well-defined
|
|
- [ ] Success state described
|
|
- [ ] Error paths mapped
|
|
- [ ] Exit points identified
|
|
- [ ] Friction points noted
|
|
- [ ] Mobile considerations included
|
|
- [ ] Accessibility considered
|
|
- [ ] Analytics tracking planned
|
|
- [ ] Alternative paths documented
|
|
|
|
---
|
|
|
|
## Common Flow Patterns
|
|
|
|
### Linear Flow
|
|
**When to use:** Simple, sequential tasks
|
|
**Example:** Sign up, checkout, form submission
|
|
|
|
### Hub and Spoke
|
|
**When to use:** Dashboard with multiple features
|
|
**Example:** Social media app, productivity tool
|
|
|
|
### Guided Flow
|
|
**When to use:** Complex processes needing explanation
|
|
**Example:** Tax software, loan application
|
|
|
|
### Open-Ended Flow
|
|
**When to use:** Exploration and discovery
|
|
**Example:** Shopping, content browsing
|
|
|
|
---
|
|
|
|
## Mapping Tools
|
|
|
|
**Simple flows:**
|
|
- Text outline (like these examples)
|
|
- Whiteboard sketch
|
|
- Sticky notes
|
|
|
|
**Complex flows:**
|
|
- Flowchart tools (Figma, Miro, Lucidchart)
|
|
- Specialized UX tools (Overflow, FlowMapp)
|
|
- Collaborative tools for teams
|
|
|
|
**Key:** Choose tool that helps thinking, not impresses stakeholders
|