tommygeoco_ui-audit/references/11-checklist-fidelity.md

# Checklist: Improving Fidelity

Systematic checks for completing interface designs beyond the happy path.

---

## Component States

Every interactive component needs these states defined:

### Core States

☐ **Default** — Resting state, no interaction
☐ **Hover** — Cursor over element (desktop)
☐ **Active/Pressed** — During click/tap
☐ **Focus** — Keyboard navigation highlight
☐ **Disabled** — Not currently interactive
☐ **Loading** — Processing/fetching
☐ **Error** — Invalid state
☐ **Success** — Action completed

### Additional States by Component Type

**Buttons:**
☐ Primary, secondary, tertiary variants
☐ Icon-only versions
☐ With/without icons
☐ Size variants (small, medium, large)

**Inputs:**
☐ Empty, filled, placeholder
☐ Valid, invalid, warning
☐ With helper text, error message
☐ Required indicator
☐ Read-only, disabled

**Checkboxes/Radios:**
☐ Unchecked, checked, indeterminate
☐ Disabled states for each

**Toggles:**
☐ On, off, disabled
☐ With labels, without labels

**Links:**
☐ Default, visited, hover, active, focus

---

## Primary Interactions

Main actions users take with the interface.

### Click/Tap Interactions

☐ **Touch targets** — Minimum 44x44px (mobile), 32x32px (desktop)
☐ **Hit areas** — Larger than visual element when needed
☐ **Feedback** — Immediate visual response to tap
☐ **Double-click/tap** — Behavior defined or prevented

### Form Submissions

☐ **Submit button states** — Enabled only when valid
☐ **In-progress feedback** — Loading indicator
☐ **Success confirmation** — Clear completion message
☐ **Error handling** — What happens when it fails?
☐ **Re-submission** — Can users retry?

### Selection Interactions

☐ **Single selection** — Radio buttons, dropdowns
☐ **Multi-selection** — Checkboxes, multi-select
☐ **Range selection** — Shift-click behavior
☐ **Select all/none** — Bulk selection

---

## Secondary Interactions

Supporting interactions beyond primary actions.

### Hover Interactions (Desktop)

☐ **Tooltips** — Delay before showing (300-500ms)
☐ **Preview cards** — Information on hover
☐ **Menu reveals** — Dropdown on hover vs. click
☐ **State changes** — Visual feedback on hover

### Long-Press (Mobile)

☐ **Context menus** — What actions appear?
☐ **Drag initiation** — Does long-press start drag?
☐ **Haptic feedback** — Vibration on trigger?

### Keyboard Interactions

☐ **Tab order** — Logical focus sequence
☐ **Enter/Space** — Activate focused element
☐ **Escape** — Close modals, cancel actions
☐ **Arrow keys** — Navigate within components
☐ **Shortcuts** — Power user key combinations

### Gestures (Mobile/Touch)

☐ **Swipe** — Horizontal/vertical actions
☐ **Pinch/zoom** — Image viewing, maps
☐ **Pull-to-refresh** — List refresh
☐ **Drag and drop** — Reordering

---

## Content Scalability

Designs must handle variable content.

### Empty States

☐ **First-time user** — No data yet, clear CTA to start
☐ **No results** — Search/filter with no matches
☐ **Deleted content** — After removing items
☐ **Error state** — Failed to load

**Empty state must include:**
- Explanation of why empty
- What user can do (CTA)
- Visual to reduce starkness

### Minimal Content

☐ **One item in list** — Does layout still work?
☐ **Short text** — Single word titles, descriptions
☐ **Missing optional fields** — Graceful absence

### Maximum Content

☐ **Long text** — Truncation with ellipsis, tooltips
☐ **Many items** — Pagination, infinite scroll, virtualization
☐ **Long words** — Word-break behavior
☐ **Large images** — Aspect ratio handling

### Edge Cases

☐ **Special characters** — Unicode, emoji, RTL text
☐ **Numbers** — Negative, decimals, large numbers
☐ **Dates** — Different formats, timezones
☐ **Names** — Mononyms, very long names, special characters

---

## System Feedback

How the interface communicates state to users.

### Loading States

☐ **Initial load** — Skeleton screens, spinners
☐ **Action processing** — Button loading state
☐ **Background loading** — Subtle indicators
☐ **Partial loading** — Progressive content reveal

**Rules:**
- < 100ms: No indicator needed
- 100ms-1s: Simple spinner
- 1s+: Progress indicator or skeleton
- 10s+: Background processing with notification

### Success Feedback

☐ **Inline confirmation** — Check marks, color changes
☐ **Toast notifications** — Non-blocking success messages
☐ **Page transitions** — Navigate to success state
☐ **Celebrations** — Milestone achievements

### Error Feedback

☐ **Inline errors** — Field-level validation
☐ **Summary errors** — Form-level error list
☐ **System errors** — Server/network failures
☐ **Recovery guidance** — What can user do?

### Progress Indicators

☐ **Determinate** — Known duration (progress bar with %)
☐ **Indeterminate** — Unknown duration (spinner)
☐ **Steps** — Multi-step process indicator
☐ **Upload/download** — File transfer progress

---

## User Input

Handling all forms of user data entry.

### Text Input

☐ **Character limits** — Max length with counter
☐ **Input masks** — Phone, credit card, date formats
☐ **Autocomplete** — Suggestions while typing
☐ **Auto-capitalization** — Appropriate for input type
☐ **Spell check** — Enabled/disabled appropriately

### Validation

☐ **Real-time validation** — Validate as user types
☐ **On-blur validation** — Validate when leaving field
☐ **On-submit validation** — Final check before submit
☐ **Error message placement** — Below field, inline
☐ **Error message content** — Clear, actionable

### Input Types

☐ **Text** — Default, email, password, URL, search
☐ **Number** — With constraints (min, max, step)
☐ **Date/time** — Native or custom pickers
☐ **File upload** — Drag-drop, click to browse
☐ **Rich text** — Formatting toolbar

### Accessibility

☐ **Labels** — Every input has a label
☐ **Placeholders** — Not used as labels
☐ **Error announcements** — Screen reader accessible
☐ **Required fields** — Clearly indicated

---

## Navigation

Moving through the interface.

### Global Navigation

☐ **Current location** — Where am I?
☐ **Available destinations** — Where can I go?
☐ **Path taken** — How did I get here? (breadcrumbs)
☐ **Return path** — How do I go back?

### State Preservation

☐ **Browser back** — Does it work as expected?
☐ **Deep linking** — Can users share URLs to specific states?
☐ **Form state** — Is data preserved on navigation?
☐ **Scroll position** — Preserved or reset appropriately?

### Transitions

☐ **Page transitions** — Consistent animation pattern
☐ **Loading transitions** — Skeleton to content
☐ **Modal/drawer open/close** — Smooth animations
☐ **List additions/removals** — Animated changes

---

## Quick Fidelity Audit

Use this for rapid checks:

| Category | ✓ | Notes |
|----------|---|-------|
| All component states defined | | |
| Primary interactions specified | | |
| Secondary interactions specified | | |
| Empty states designed | | |
| Max content handling defined | | |
| Loading states defined | | |
| Success/error feedback defined | | |
| All inputs validated | | |
| Navigation complete | | |
| Keyboard accessible | | |