UX Patterns

UX Patterns & Architecture

This skill guides UX decisions that make interfaces feel intuitive and frictionless. The goal: users complete their tasks without noticing the interface.

Mantra: Don't make users think. Let them work.

Core UX Principles

1. Show What's Needed, Hide What's Not

Every element competes for attention. Earn every pixel.

• Primary actions visible, secondary tucked away
• Context determines what's shown
• Progressive disclosure over information overload

2. Keep Users Oriented

Users should always know: Where am I? Where can I go? How do I get back?

• Clear navigation hierarchy
• Visible breadcrumbs for deep content
• Consistent location indicators

3. Make Actions Reversible

Confident users move fast. Let them undo mistakes.

• Undo over confirmation dialogs
• Soft delete with recovery
• Auto-save with version history

4. Reduce Decisions

Every choice is cognitive load. Make smart defaults.

• Sensible defaults based on context
• Remember user preferences
• Offer presets over many options

5. Keep Users Informed

Never leave users wondering what's happening.

• Loading states with progress
• Clear success/error feedback
• Visible system status

Decision Framework

When Designing a Page

Ask in order:

1. What's the one job of this page?

   • If it has multiple jobs, it might need to be multiple pages
   • Every element should support that job

2. What must users see immediately?

   • Page title and context
   • Primary action
   • Enough content to understand the page

3. What can be revealed later?

   • Secondary actions → overflow menu
   • Advanced options → "Show more" or section
   • Rare features → settings or help

4. What are all the states?

   • Empty: What should user do?
   • Loading: What are we waiting for?
   • Error: How do they recover?
   • Success: What's next?

When Choosing a Pattern

When Showing Information

When Asking for Confirmation

Page Anatomy Checklist

Every page needs:

• Clear title — What is this page?
• Context — How did I get here? (breadcrumb or back)
• Primary action — What can I do? (top-right)
• Main content — Why I'm here
• Clear states — Loading, empty, error handled

Header Pattern

← Back to [Parent]                              [Secondary] [Primary]
Page Title
Optional description or metadata
[Tab 1] [Tab 2] [Tab 3]
─────────────────────────────────────────────────────────────────────

Quick Heuristics

The 3-Second Test

Show any screen for 3 seconds. User should know:

• What page is this?
• What's the main action?
• How do I get back?

The Squint Test

Blur the screen. Can you still see:

• Primary vs secondary content?
• Where to click/tap?
• Visual grouping?

The "What If" Test

• What if there's 0 items? (empty state)
• What if there's 1 item? (singular language)
• What if there's 1000 items? (pagination/virtualization)
• What if text is very long? (truncation)
• What if user is offline? (graceful degradation)
• What if action fails? (error recovery)

Reference Files

Detailed patterns organized by domain:

• navigation.md — Wayfinding, navigation hierarchy, information scent, breadcrumbs, modern nav patterns
• layouts.md — Page structure, visual hierarchy, content zones, responsive strategies, density
• simplification.md — Modern alternatives to old patterns, progressive disclosure, smart defaults, reducing complexity
• copy.md — UX writing, labels, error messages, empty states, onboarding copy
• control.md — User agency, undo patterns, keeping users informed, preventing mistakes, building trust

Anti-Patterns to Avoid

Navigation:

• Hidden navigation on desktop (hamburger menus)
• Icons without labels
• More than 3-4 levels deep
• Breaking the back button

Information:

• Showing everything at once
• Important info below the fold with no indication
• Inconsistent terminology
• Technical jargon in user-facing copy

Actions:

• "Are you sure?" for everything
• No undo for destructive actions
• "Submit" instead of specific action
• Actions that don't match their labels

Feedback:

• Silent failures
• Generic error messages ("Error")
• No loading indicators
• Auto-dismissing important messages

Quick Reference

Modern Pattern Replacements

Empty State Formula

Title:       What this area is for
Description: Why empty + what to do  
Action:      [Primary CTA]

Error Message Formula

What happened + Why (if helpful) + How to fix

Button Label Rules

• Use specific verbs: "Save changes" not "Submit"
• Match the trigger: Link says "Edit" → button says "Save"
• Destructive: Repeat the action verb in confirmation

UX Checklist

Before shipping any interface:

Structure:

• Single clear purpose per page
• Visual hierarchy guides the eye
• Primary action obvious
• Consistent layout with rest of product

Navigation:

• User knows where they are
• Clear way to get back
• No dead ends

States:

• Empty state with guidance
• Loading state with feedback
• Error state with recovery path
• Edge cases handled (0, 1, many, overflow)

Control:

• Destructive actions reversible
• System status visible
• User preferences remembered
• Clear exit from any flow

Copy:

• Labels are clear and specific
• Errors explain how to fix
• No jargon or ambiguity