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

1. What must users see immediately?

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

1. What can be revealed later?

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

1. 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](references/navigation.md) — Wayfinding, navigation hierarchy, information scent, breadcrumbs, modern nav patterns
• [layouts.md](references/layouts.md) — Page structure, visual hierarchy, content zones, responsive strategies, density
• [simplification.md](references/simplification.md) — Modern alternatives to old patterns, progressive disclosure, smart defaults, reducing complexity
• [copy.md](references/copy.md) — UX writing, labels, error messages, empty states, onboarding copy
• [control.md](references/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