# 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 | | |