| name | interaction-design-patterns |
| description | Common interaction design patterns: forms, navigation, search, filters, onboarding, empty states, error states, loading states, and microinteractions. Each pattern includes the problem it solves, when to use it, and common anti-patterns. Use when designing user flows, choosing interaction patterns, or reviewing interaction quality. Triggers on: "interaction pattern", "form design", "navigation pattern", "onboarding", "empty state", "error state", "microinteraction", "user flow".
|
Interaction Design Patterns
Common interaction patterns with the problems they solve, when to use them, and what to avoid.
Forms
Best Practices
- Label above input — fastest scanning. Left-aligned labels are slower but good for long forms.
- One column — multi-column forms confuse the eye path.
- Group related fields — use fieldsets with clear headings.
- Inline validation — validate on blur, not on every keystroke.
- Show password toggle — always. Password managers handle generation.
- Progress indicator for multi-step forms — show steps completed and remaining.
Anti-Patterns
- Placeholder as label — disappears when user types, breaks accessibility.
- Reset button — no one wants this. Users accidentally click it.
- Mark optional fields — mark required fields with
* instead. Everything else is optional.
Navigation
Types
| Pattern | Best For | Avoid When |
|---|
| Tab bar | 3-5 top-level sections | >5 items, deep hierarchies |
| Sidebar | Complex products, many sections | Simple apps with 2-3 sections |
| Hamburger | Mobile, secondary navigation | Primary navigation on desktop |
| Breadcrumbs | Deep hierarchies (3+ levels) | Flat structures |
| Command palette | Power users, keyboard-first | Consumer apps, mobile-only |
Rules
- 3-click rule — any content within 3 taps/clicks from home.
- Current state visible — users must always know where they are.
- Consistent placement — nav doesn't move between screens.
Search
Best Practices
- Prominent placement — top-center or top-right.
- Instant results — show suggestions as user types (debounced 150-300ms).
- Recent searches — show below the input before user types.
- Empty state helpful — "No results for 'xyz'. Try: alternative spellings, broader terms."
- Filter + sort — visible when results >1 page.
Empty States
Three types, each requiring different treatment:
| Type | Example | Design |
|---|
| First-use | New user, no data yet | Illustration + what this feature does + CTA to add first item |
| User-cleared | User deleted everything | Confirmation message + undo option + CTA to add new |
| No results | Search/filter returns nothing | Clear explanation + suggestions + reset filter button |
Error States
Structure
- What happened — plain language, no jargon. "Payment failed" not "Error 402: PaymentException"
- Why it happened — be specific. "Your card was declined by your bank."
- How to fix it — actionable next step. "Try a different card or contact your bank."
Rules
- Error color (red) for the message, not the entire field. Red field = scary.
- Inline errors near the field, not a toast at the top.
- Preserve user input. Never clear a form on error.
Loading States
| Duration | Pattern |
|---|
| <100ms | Instant — no feedback needed |
| 100ms-1s | Skeleton screen |
| 1-5s | Skeleton + progress indicator |
| 5-10s | Progress + "This is taking longer than expected" |
| >10s | Progress + cancel option + estimated time |
Microinteractions
Four components: Trigger → Rules → Feedback → Loop/Mode
Examples
- Button press — scale to 0.97 on press, release on lift. Duration: 100ms.
- Toggle switch — thumb slides, color transitions. Duration: 200ms.
- Toast notification — slide in from bottom, auto-dismiss after 4s with progress bar.
- Success checkmark — stroke draws itself on completion. Duration: 300ms.
Rules
- Purposeful — every animation serves a function, never decorative.
- Subtle — 200-300ms max. Users shouldn't notice the animation, just the result.
- Consistent — same element, same animation every time.
Related Skills
- For visual design fundamentals → use
ui-visual-design
- For motion details → use
jakubkrehel/make-interfaces-feel-better
- For mobile-specific patterns → use
mobile-touch-design
- For accessibility → use
a11y-accessibility-design
