ux-patterns

UX Patterns

Patterns for designing task flows, service blueprints, wireframes, and user interactions with comprehensive state coverage.

Purpose

Provides patterns for:

• Task flows with all user paths
• Service blueprints (frontstage/backstage)
• Wireframe specifications
• Error and empty state design
• Accessibility from the start

---

Core Patterns

Pattern 1: Task Flow Structure

When to use: Defining any user interaction flow.

Implementation:

## Task Flow: [Name]

**User Goal:** What they want to accomplish
**Entry Point:** Where they start
**Success:** How they know they succeeded

### Primary Path
1. [Action] -> [Response] -> [State]
2. [Action] -> [Response] -> [State]
3. [Action] -> [Response] -> [Success]

### Alternative Paths
- [Condition] -> [Alternative flow]

### Error States
| Error | Message | Recovery |
|-------|---------|----------|
| [Error] | [What happened + How to fix] | [User action] |

Benefits:

• Clear success criteria
• All paths documented
• Error recovery built-in

Pattern 2: Service Blueprint

When to use: Mapping end-to-end service experiences.

Implementation:

## Service Blueprint: [Name]

### Journey Stages
[Awareness] -> [Consideration] -> [Purchase] -> [Use] -> [Support]

### Customer Actions (per stage)
| Stage | Actions |
|-------|---------|
| [Stage] | [What customer does] |

### Frontstage (Visible)
| [Touchpoint] | [Touchpoint] | [Touchpoint] |

### Line of Visibility
---

### Backstage (Invisible)
| [Process] | [Process] | [Process] |

### Support Processes
| [System] | [System] | [System] |

### Pain Points
- **[Stage]:** [Issue] - [Evidence]

### Opportunities
- **[Stage]:** [Improvement] - [Impact]

Pattern 3: State Coverage Matrix

When to use: Ensuring all UI states are designed.

Implementation:

State	When	Content	Action
Default	Normal use	Full content	Primary action
Loading	Fetching data	Skeleton/spinner	Disabled actions
Empty	No data yet	Why empty + CTA	Create/Add action
Error	Operation failed	What + How to fix	Retry/Fix action
Success	Action completed	Confirmation	Next action
Partial	Some data	Available content	Load more