Mistake-Proof Design
Human Error: Designing for Mistakes

There is no such thing as human error. There is only bad design.
# Human Error: Designing for Mistakes There is no such thing as human error. There is only bad design. When a person makes an error, the cause is almost always a design flaw: poor feedback, misleading signifiers, bad mappings, missing constraints, or a broken conceptual model. Blaming users for errors is the designer's greatest failure. Instead, design systems that prevent errors, tolerate errors, and make recovery easy. ## Slips vs. Mistakes: The Fundamental Taxonomy Don Norman divides errors into two categories based on where the failure occurs in the action cycle. | | Slips | Mistakes | |---|-------|---------| | **Definition** | Correct intention, wrong action | Wrong intention, correctly executed | | **Cause** | Attention failure, motor error, habit | Incorrect mental model, wrong rule, faulty reasoning | | **Awareness** | User often notices immediately | User may not realize error until consequences appear | | **Example** | Clicking "Delete" when reaching for "Edit" | Using the wrong formula in a spreadsheet because the user misunderstands the data | | **Fix approach** | Make actions distinct and recoverable | Build correct conceptual models and provide better information | ---
Overview
There is no such thing as human error. There is only bad design. When a person makes an error, the cause is almost always a design flaw: poor feedback, misleading signifiers, bad mappings, missing constraints, or a broken conceptual model. Blaming users for errors is the designer's greatest failure. Instead, design systems that prevent errors, tolerate errors, and make recovery easy.
Manual install (npx, ZIP)
npx skills add wondelai/skills --skill human-error-designing-for-mistakes -g -a claude-codeConnects with Agent Alley MCP · agentalley.io/mcp
Files included
human-error.md15.9 KB
Read human-error.md here
wondelai/
Show the full text289 lines
Human Error: Designing for Mistakes
There is no such thing as human error. There is only bad design. When a person makes an error, the cause is almost always a design flaw: poor feedback, misleading signifiers, bad mappings, missing constraints, or a broken conceptual model. Blaming users for errors is the designer's greatest failure. Instead, design systems that prevent errors, tolerate errors, and make recovery easy.
Slips vs. Mistakes: The Fundamental Taxonomy
Don Norman divides errors into two categories based on where the failure occurs in the action cycle.
| Slips | Mistakes | |
|---|---|---|
| Definition | Correct intention, wrong action | Wrong intention, correctly executed |
| Cause | Attention failure, motor error, habit | Incorrect mental model, wrong rule, faulty reasoning |
| Awareness | User often notices immediately | User may not realize error until consequences appear |
| Example | Clicking "Delete" when reaching for "Edit" | Using the wrong formula in a spreadsheet because the user misunderstands the data |
| Fix approach | Make actions distinct and recoverable | Build correct conceptual models and provide better information |
Slip Types
Action-Based Slips
The user intends to perform one action but accidentally performs a similar or adjacent one.
| Subtype | Mechanism | Example | Design Prevention |
|---|---|---|---|
| Adjacent target | Clicking the wrong button because it is too close | Tapping "Delete" instead of "Edit" on mobile | Separate destructive actions from constructive ones by distance and visual style |
| Similar action | Performing a habitual action instead of the intended one | Typing your old password after changing it | Provide clear feedback when the old credential is rejected and guide to the new one |
| Description similarity | Confusing two objects that look alike | Grabbing the wrong file from a list of similar names | Make distinguishing information prominent (dates, sizes, thumbnails) |
Memory-Lapse Slips
The user forgets a step in a familiar sequence.
| Subtype | Mechanism | Example | Design Prevention |
|---|---|---|---|
| Omitted step | Skipping a step in a multi-step task | Forgetting to attach a file after writing "see attached" | Detect the omission (Gmail attachment reminder) |
| Lost place | Forgetting which step they are on | Returning to a form after an interruption and re-entering data | Persist form state; show progress indicators |
| Forgotten intention | Walking to a room and forgetting why | Opening a settings page and forgetting which setting to change | Provide search within settings; show recently changed items |
Mode Errors
The user performs the correct action for one mode while the system is in a different mode.
| Subtype | Mechanism | Example | Design Prevention |
|---|---|---|---|
| Invisible mode | The current mode is not visually indicated | Typing in all caps because caps lock is on with no indicator | Always show the current mode visually (caps lock indicator, edit/view mode badge) |
| Unexpected mode change | The system changed modes without the user noticing | Airplane auto-throttle disengages silently | Announce mode changes with prominent feedback |
| Cross-application mode | Different behavior in different apps for the same action | Ctrl+S saves in one app, does something else in another | Follow platform conventions; never repurpose standard shortcuts |
Capture Errors
A frequently performed action "captures" and overrides the intended less-frequent action.
| Subtype | Mechanism | Example | Design Prevention |
|---|---|---|---|
| Habit capture | Habitual sequence overrides intended deviation | Driving to old workplace instead of new one on autopilot | Insert interruptions at decision points in habitual sequences |
| Routine capture | A daily routine overrides a one-time variation | Opening email client instead of the report you intended to work on | Use reminders, task lists, and calendar blocks to interrupt routines |
Mistake Types
Rule-Based Mistakes
The user applies a correct rule in the wrong situation, or applies a wrong rule that seems correct.
| Subtype | Mechanism | Example | Design Prevention |
|---|---|---|---|
| Wrong rule | Applying a rule from a different context | Using "Reply All" when only "Reply" was appropriate because the user follows a "always reply all" rule | Show recipient count prominently, warn on large recipient lists |
| Misclassified situation | Correctly following a rule, but for the wrong problem type | Using the standard password reset flow when the account is actually locked (different issue, different fix) | Diagnose the situation for the user before presenting solutions |
| Outdated rule | Following a rule that used to be correct | A nurse giving a medication dose based on an old protocol | Version and timestamp all rules, policies, and procedures visible in the interface |
Knowledge-Based Mistakes
The user lacks the knowledge or has an incorrect mental model to handle a novel situation.
| Subtype | Mechanism | Example | Design Prevention |
|---|---|---|---|
| Incomplete model | The user's understanding of the system is partial | A user deletes a shared file not knowing it affects other users | Show sharing indicators and warn about impact |
| Incorrect model | The user's understanding is actively wrong | User believes setting thermostat to 90 heats the room faster | Redesign system image to teach correct model (show heating rate) |
| Analogy failure | Applying a model from one system to a different system | Expecting "undo" to work like a timeline when it actually works as a stack | Make the undo model explicit: show action history |
Memory-Lapse Mistakes
The user forgets their goal, plan, or evaluation criteria.
| Subtype | Mechanism | Example | Design Prevention |
|---|---|---|---|
| Forgotten goal | Losing track of what they set out to do | Opening the phone to set a timer but getting distracted by notifications | Provide reminders: "You opened Settings. Looking for something?" |
| Forgotten plan | Losing track of multi-step plan | Forgetting the third item in a three-item to-do after completing the first two | Show task lists, checklists, and recently started workflows |
| Forgotten evaluation | Forgetting what "success" looks like | Adjusting a photo but forgetting the original state to compare against | Provide before/after toggle, history, or comparison view |
Error Prevention Strategies by Type
Preventing Slips
| Strategy | Implementation | Prevents |
|---|---|---|
| Increase target distance | Separate destructive actions from routine actions by space and visual grouping | Adjacent target slips |
| Distinctive appearance | Make destructive buttons red, routine buttons blue | Description similarity slips |
| Confirmation for irreversible actions | "Delete this account? This cannot be undone." | Action slips with permanent consequences |
| Mode indicators | Always-visible badge showing current mode | Mode errors |
| Interrupts at decision points | "You're about to send to 500 people. Continue?" | Capture errors, memory-lapse slips |
| Auto-detection | Detect likely omissions and prompt | Memory-lapse slips (Gmail attachment warning) |
| Constraints | Disable invalid actions, enforce sequences | Multiple slip types |
Preventing Mistakes
| Strategy | Implementation | Prevents |
|---|---|---|
| Clear conceptual models | Make system behavior visible and predictable | Knowledge-based mistakes |
| Contextual information | Show relevant data at the point of decision | Rule-based mistakes |
| Undo and exploration | Let users try things safely | Fear-based inaction (a form of mistake) |
| Wizards and guides | Step-by-step assistance for complex tasks | Knowledge-based and rule-based mistakes |
| Default values | Pre-fill with the most common or safest option | All mistake types |
| Checklists | Visible task lists for multi-step processes | Memory-lapse mistakes |
| Comparisons | Show before/after, show alternatives side-by-side | Forgotten-evaluation mistakes |
Error Recovery Patterns
Undo
| Pattern | Scope | Implementation |
|---|---|---|
| Single undo | Most recent action | Ctrl+Z, "Undo" button |
| Multi-level undo | Multiple recent actions | Undo stack with history list |
| Undo toast | Time-limited reversal | "Action completed. Undo (5s)" |
| Version history | All changes over time | Named versions, autosave snapshots |
| Soft delete | Deletion recovery | Trash bin with 30-day retention |
Confirmation Dialogs
Use confirmation dialogs sparingly and only for high-consequence, irreversible actions.
| Effective Confirmation | Ineffective Confirmation |
|---|---|
| "Delete 47 files permanently? This cannot be undone." | "Are you sure you want to save?" |
| "Send this email to 1,200 subscribers?" | "Are you sure you want to close this tab?" |
| "Downgrade your account? You will lose access to premium features." | "Are you sure you want to log out?" |
The confirmation dialog trap: If you show confirmations for routine actions, users develop "dialog blindness" and click "Yes" without reading. Then the one time the confirmation matters, they click "Yes" again out of habit.
Autosave
| Feature | Purpose |
|---|---|
| Continuous autosave | No work is ever lost due to crash, timeout, or accidental navigation |
| Visible save indicator | "All changes saved" or "Saving..." shows the user the system is working |
| Named save points | Users can create explicit save points for comparison |
| Conflict resolution | When two versions exist, show both and let the user choose |
Clear Error Messages
The error message formula:
1. What happened (in plain language)
2. Why it happened (if helpful)
3. How to fix it (specific actionable steps)
4. Alternative path (if available)
Good example:
We couldn't save your changes.
Your internet connection was interrupted.
Check your connection and try again, or download a copy of your work.
[Retry] [Download Copy]
Bad example:
Error 500: Internal Server Error
Error Message Design Checklist
Content
- Message describes what happened in human language (no error codes as the primary message).
- Message explains how to fix the problem or what to try next.
- Message does not blame the user ("We couldn't process" not "You entered incorrectly").
- Message provides an alternative path when possible.
- Technical details are available but not prominent (expandable section).
Presentation
- Error appears near the source of the error (inline for form fields).
- Error is visually distinct (red border, error icon) but not alarming (avoid all-caps, exclamation marks).
- Error does not erase the user's work (form fields retain their values).
- Error is announced to screen readers (role="alert" or aria-live="assertive").
- Error is persistent until the user fixes the issue (does not auto-dismiss).
Recovery
- A clear action is provided (button, link, or instruction).
- The user can retry without re-entering information.
- If the error is systemic (server down), communicate expected resolution time.
- If the error requires support, provide a direct path to contact support with the error context pre-filled.
Designing for Error Tolerance
Error-tolerant systems assume users will make errors and minimize their consequences.
Principles of Error Tolerance
| Principle | Implementation |
|---|---|
| Reversibility | Every action can be undone. Deletion is soft. Edits are versioned. |
| Low cost of experimentation | Users can try things without fear. Preview modes, sandbox environments, and undo reduce the risk of exploration. |
| Graduated consequences | Minor actions have minor consequences. Major consequences require major confirmation. |
| Data preservation | The system never discards user data without explicit, confirmed intent. Form data survives errors, navigation, and session timeouts. |
| Graceful degradation | When something breaks, the system continues working at reduced capacity rather than failing completely. |
The Swiss Cheese Model of Errors
James Reason's Swiss Cheese Model explains how errors lead to disasters. Each layer of defense has holes (like Swiss cheese). An error becomes a disaster only when the holes in multiple layers align and the error passes through all defenses.
Layers of Defense in Digital Products
| Layer | Defense | Example |
|---|---|---|
| Layer 1: UI Constraints | Prevent the action from being possible | Disabled button, input validation, type-safe inputs |
| Layer 2: Warnings | Alert the user before they proceed | "This will delete 47 files. Are you sure?" |
| Layer 3: Immediate Feedback | Show the result so the user can catch the error | File count changes, visual confirmation |
| Layer 4: Undo / Reversal | Allow the user to reverse the action | "Undo" toast, trash bin, version history |
| Layer 5: Recovery | Restore from backup or contact support | 30-day trash retention, admin recovery tools |
For every critical action, ensure at least 3 layers of defense. If any single layer fails, the others catch the error.
Case Studies of Error-Prone Designs and Fixes
| Case | Error | Root Cause | Fix |
|---|---|---|---|
| Reply vs Reply All | Private comment sent to entire organization | Buttons adjacent, identical, equally prominent | Make "Reply" default; show recipient count before sending |
| Unsaved form on navigation | User loses form data by clicking a link | No autosave, no navigation warning | Autosave to local storage; warn on navigation; restore on return |
| Wrong file overwrite | New file silently replaces existing file | No collision warning, no version history | Detect collision and warn; keep version history |
| Medication dosage | Nurse enters 10mg instead of 1.0mg | Free-text input, no range validation, small targets | Pre-set dose dropdown; range validation; large targets |
Error Audit Checklist
Prevention
- Destructive actions are visually separated from routine actions.
- Destructive actions require confirmation (for irreversible actions only).
- Input constraints prevent invalid data entry (type, range, format).
- The system detects likely omissions and prompts the user (attachment reminders, required fields).
- Mode indicators are always visible when modes exist.
- Default values are set to the safest or most common option.
Detection
- Every action produces visible feedback within 100ms.
- Error messages appear inline near the source of the error.
- Error messages describe what happened, why, and how to fix it.
- Error messages do not blame the user.
- System state is visible at all times (saved/unsaved, connected/disconnected).
Recovery
- Undo is available for all non-destructive actions.
- Deleted items go to a recoverable trash/archive.
- Form data is preserved on error (fields are not cleared).
- Autosave prevents data loss from crashes and timeouts.
- Version history allows reverting to previous states.
- Session recovery restores work after accidental closure.
Systemic
- Errors are logged and analyzed for design improvement (not user blame).
- The most common user errors are tracked and addressed in design iterations.
- New features are tested for common slip and mistake patterns before launch.
- Error rate is a tracked product metric alongside task completion and satisfaction.
| 1 | # Human Error: Designing for Mistakes |
| 2 | |
| 3 | There is no such thing as human error. There is only bad design. When a person makes an error, the cause is almost always a design flaw: poor feedback, misleading signifiers, bad mappings, missing constraints, or a broken conceptual model. Blaming users for errors is the designer's greatest failure. Instead, design systems that prevent errors, tolerate errors, and make recovery easy. |
| 4 | |
| 5 | ## Slips vs. Mistakes: The Fundamental Taxonomy |
| 6 | |
| 7 | Don Norman divides errors into two categories based on where the failure occurs in the action cycle. |
| 8 | |
| 9 | | | Slips | Mistakes | |
| 10 | |---|-------|---------| |
| 11 | | **Definition** | Correct intention, wrong action | Wrong intention, correctly executed | |
| 12 | | **Cause** | Attention failure, motor error, habit | Incorrect mental model, wrong rule, faulty reasoning | |
| 13 | | **Awareness** | User often notices immediately | User may not realize error until consequences appear | |
| 14 | | **Example** | Clicking "Delete" when reaching for "Edit" | Using the wrong formula in a spreadsheet because the user misunderstands the data | |
| 15 | | **Fix approach** | Make actions distinct and recoverable | Build correct conceptual models and provide better information | |
| 16 | |
| 17 | |
| 18 | |
| 19 | ## Slip Types |
| 20 | |
| 21 | ### Action-Based Slips |
| 22 | |
| 23 | The user intends to perform one action but accidentally performs a similar or adjacent one. |
| 24 | |
| 25 | | Subtype | Mechanism | Example | Design Prevention | |
| 26 | |---------|-----------|---------|-------------------| |
| 27 | | **Adjacent target** | Clicking the wrong button because it is too close | Tapping "Delete" instead of "Edit" on mobile | Separate destructive actions from constructive ones by distance and visual style | |
| 28 | | **Similar action** | Performing a habitual action instead of the intended one | Typing your old password after changing it | Provide clear feedback when the old credential is rejected and guide to the new one | |
| 29 | | **Description similarity** | Confusing two objects that look alike | Grabbing the wrong file from a list of similar names | Make distinguishing information prominent (dates, sizes, thumbnails) | |
| 30 | |
| 31 | ### Memory-Lapse Slips |
| 32 | |
| 33 | The user forgets a step in a familiar sequence. |
| 34 | |
| 35 | | Subtype | Mechanism | Example | Design Prevention | |
| 36 | |---------|-----------|---------|-------------------| |
| 37 | | **Omitted step** | Skipping a step in a multi-step task | Forgetting to attach a file after writing "see attached" | Detect the omission (Gmail attachment reminder) | |
| 38 | | **Lost place** | Forgetting which step they are on | Returning to a form after an interruption and re-entering data | Persist form state; show progress indicators | |
| 39 | | **Forgotten intention** | Walking to a room and forgetting why | Opening a settings page and forgetting which setting to change | Provide search within settings; show recently changed items | |
| 40 | |
| 41 | ### Mode Errors |
| 42 | |
| 43 | The user performs the correct action for one mode while the system is in a different mode. |
| 44 | |
| 45 | | Subtype | Mechanism | Example | Design Prevention | |
| 46 | |---------|-----------|---------|-------------------| |
| 47 | | **Invisible mode** | The current mode is not visually indicated | Typing in all caps because caps lock is on with no indicator | Always show the current mode visually (caps lock indicator, edit/view mode badge) | |
| 48 | | **Unexpected mode change** | The system changed modes without the user noticing | Airplane auto-throttle disengages silently | Announce mode changes with prominent feedback | |
| 49 | | **Cross-application mode** | Different behavior in different apps for the same action | Ctrl+S saves in one app, does something else in another | Follow platform conventions; never repurpose standard shortcuts | |
| 50 | |
| 51 | ### Capture Errors |
| 52 | |
| 53 | A frequently performed action "captures" and overrides the intended less-frequent action. |
| 54 | |
| 55 | | Subtype | Mechanism | Example | Design Prevention | |
| 56 | |---------|-----------|---------|-------------------| |
| 57 | | **Habit capture** | Habitual sequence overrides intended deviation | Driving to old workplace instead of new one on autopilot | Insert interruptions at decision points in habitual sequences | |
| 58 | | **Routine capture** | A daily routine overrides a one-time variation | Opening email client instead of the report you intended to work on | Use reminders, task lists, and calendar blocks to interrupt routines | |
| 59 | |
| 60 | |
| 61 | |
| 62 | ## Mistake Types |
| 63 | |
| 64 | ### Rule-Based Mistakes |
| 65 | |
| 66 | The user applies a correct rule in the wrong situation, or applies a wrong rule that seems correct. |
| 67 | |
| 68 | | Subtype | Mechanism | Example | Design Prevention | |
| 69 | |---------|-----------|---------|-------------------| |
| 70 | | **Wrong rule** | Applying a rule from a different context | Using "Reply All" when only "Reply" was appropriate because the user follows a "always reply all" rule | Show recipient count prominently, warn on large recipient lists | |
| 71 | | **Misclassified situation** | Correctly following a rule, but for the wrong problem type | Using the standard password reset flow when the account is actually locked (different issue, different fix) | Diagnose the situation for the user before presenting solutions | |
| 72 | | **Outdated rule** | Following a rule that used to be correct | A nurse giving a medication dose based on an old protocol | Version and timestamp all rules, policies, and procedures visible in the interface | |
| 73 | |
| 74 | ### Knowledge-Based Mistakes |
| 75 | |
| 76 | The user lacks the knowledge or has an incorrect mental model to handle a novel situation. |
| 77 | |
| 78 | | Subtype | Mechanism | Example | Design Prevention | |
| 79 | |---------|-----------|---------|-------------------| |
| 80 | | **Incomplete model** | The user's understanding of the system is partial | A user deletes a shared file not knowing it affects other users | Show sharing indicators and warn about impact | |
| 81 | | **Incorrect model** | The user's understanding is actively wrong | User believes setting thermostat to 90 heats the room faster | Redesign system image to teach correct model (show heating rate) | |
| 82 | | **Analogy failure** | Applying a model from one system to a different system | Expecting "undo" to work like a timeline when it actually works as a stack | Make the undo model explicit: show action history | |
| 83 | |
| 84 | ### Memory-Lapse Mistakes |
| 85 | |
| 86 | The user forgets their goal, plan, or evaluation criteria. |
| 87 | |
| 88 | | Subtype | Mechanism | Example | Design Prevention | |
| 89 | |---------|-----------|---------|-------------------| |
| 90 | | **Forgotten goal** | Losing track of what they set out to do | Opening the phone to set a timer but getting distracted by notifications | Provide reminders: "You opened Settings. Looking for something?" | |
| 91 | | **Forgotten plan** | Losing track of multi-step plan | Forgetting the third item in a three-item to-do after completing the first two | Show task lists, checklists, and recently started workflows | |
| 92 | | **Forgotten evaluation** | Forgetting what "success" looks like | Adjusting a photo but forgetting the original state to compare against | Provide before/after toggle, history, or comparison view | |
| 93 | |
| 94 | |
| 95 | |
| 96 | ## Error Prevention Strategies by Type |
| 97 | |
| 98 | ### Preventing Slips |
| 99 | |
| 100 | | Strategy | Implementation | Prevents | |
| 101 | |----------|---------------|----------| |
| 102 | | **Increase target distance** | Separate destructive actions from routine actions by space and visual grouping | Adjacent target slips | |
| 103 | | **Distinctive appearance** | Make destructive buttons red, routine buttons blue | Description similarity slips | |
| 104 | | **Confirmation for irreversible actions** | "Delete this account? This cannot be undone." | Action slips with permanent consequences | |
| 105 | | **Mode indicators** | Always-visible badge showing current mode | Mode errors | |
| 106 | | **Interrupts at decision points** | "You're about to send to 500 people. Continue?" | Capture errors, memory-lapse slips | |
| 107 | | **Auto-detection** | Detect likely omissions and prompt | Memory-lapse slips (Gmail attachment warning) | |
| 108 | | **Constraints** | Disable invalid actions, enforce sequences | Multiple slip types | |
| 109 | |
| 110 | ### Preventing Mistakes |
| 111 | |
| 112 | | Strategy | Implementation | Prevents | |
| 113 | |----------|---------------|----------| |
| 114 | | **Clear conceptual models** | Make system behavior visible and predictable | Knowledge-based mistakes | |
| 115 | | **Contextual information** | Show relevant data at the point of decision | Rule-based mistakes | |
| 116 | | **Undo and exploration** | Let users try things safely | Fear-based inaction (a form of mistake) | |
| 117 | | **Wizards and guides** | Step-by-step assistance for complex tasks | Knowledge-based and rule-based mistakes | |
| 118 | | **Default values** | Pre-fill with the most common or safest option | All mistake types | |
| 119 | | **Checklists** | Visible task lists for multi-step processes | Memory-lapse mistakes | |
| 120 | | **Comparisons** | Show before/after, show alternatives side-by-side | Forgotten-evaluation mistakes | |
| 121 | |
| 122 | |
| 123 | |
| 124 | ## Error Recovery Patterns |
| 125 | |
| 126 | ### Undo |
| 127 | |
| 128 | | Pattern | Scope | Implementation | |
| 129 | |---------|-------|---------------| |
| 130 | | **Single undo** | Most recent action | Ctrl+Z, "Undo" button | |
| 131 | | **Multi-level undo** | Multiple recent actions | Undo stack with history list | |
| 132 | | **Undo toast** | Time-limited reversal | "Action completed. Undo (5s)" | |
| 133 | | **Version history** | All changes over time | Named versions, autosave snapshots | |
| 134 | | **Soft delete** | Deletion recovery | Trash bin with 30-day retention | |
| 135 | |
| 136 | ### Confirmation Dialogs |
| 137 | |
| 138 | Use confirmation dialogs sparingly and only for high-consequence, irreversible actions. |
| 139 | |
| 140 | | Effective Confirmation | Ineffective Confirmation | |
| 141 | |-----------------------|------------------------| |
| 142 | | "Delete 47 files permanently? This cannot be undone." | "Are you sure you want to save?" | |
| 143 | | "Send this email to 1,200 subscribers?" | "Are you sure you want to close this tab?" | |
| 144 | | "Downgrade your account? You will lose access to premium features." | "Are you sure you want to log out?" | |
| 145 | |
| 146 | **The confirmation dialog trap**: If you show confirmations for routine actions, users develop "dialog blindness" and click "Yes" without reading. Then the one time the confirmation matters, they click "Yes" again out of habit. |
| 147 | |
| 148 | ### Autosave |
| 149 | |
| 150 | | Feature | Purpose | |
| 151 | |---------|---------| |
| 152 | | Continuous autosave | No work is ever lost due to crash, timeout, or accidental navigation | |
| 153 | | Visible save indicator | "All changes saved" or "Saving..." shows the user the system is working | |
| 154 | | Named save points | Users can create explicit save points for comparison | |
| 155 | | Conflict resolution | When two versions exist, show both and let the user choose | |
| 156 | |
| 157 | ### Clear Error Messages |
| 158 | |
| 159 | **The error message formula**: |
| 160 | |
| 161 | |
| 162 | 1. What happened (in plain language) |
| 163 | 2. Why it happened (if helpful) |
| 164 | 3. How to fix it (specific actionable steps) |
| 165 | 4. Alternative path (if available) |
| 166 | |
| 167 | |
| 168 | **Good example**: |
| 169 | |
| 170 | We couldn't save your changes. |
| 171 | Your internet connection was interrupted. |
| 172 | Check your connection and try again, or download a copy of your work. |
| 173 | [Retry] [Download Copy] |
| 174 | |
| 175 | |
| 176 | **Bad example**: |
| 177 | |
| 178 | Error 500: Internal Server Error |
| 179 | |
| 180 | |
| 181 | |
| 182 | |
| 183 | ## Error Message Design Checklist |
| 184 | |
| 185 | ### Content |
| 186 | |
| 187 | [ ] Message describes what happened in human language (no error codes as the primary message). |
| 188 | [ ] Message explains how to fix the problem or what to try next. |
| 189 | [ ] Message does not blame the user ("We couldn't process" not "You entered incorrectly"). |
| 190 | [ ] Message provides an alternative path when possible. |
| 191 | [ ] Technical details are available but not prominent (expandable section). |
| 192 | |
| 193 | ### Presentation |
| 194 | |
| 195 | [ ] Error appears near the source of the error (inline for form fields). |
| 196 | [ ] Error is visually distinct (red border, error icon) but not alarming (avoid all-caps, exclamation marks). |
| 197 | [ ] Error does not erase the user's work (form fields retain their values). |
| 198 | [ ] Error is announced to screen readers (role="alert" or aria-live="assertive"). |
| 199 | [ ] Error is persistent until the user fixes the issue (does not auto-dismiss). |
| 200 | |
| 201 | ### Recovery |
| 202 | |
| 203 | [ ] A clear action is provided (button, link, or instruction). |
| 204 | [ ] The user can retry without re-entering information. |
| 205 | [ ] If the error is systemic (server down), communicate expected resolution time. |
| 206 | [ ] If the error requires support, provide a direct path to contact support with the error context pre-filled. |
| 207 | |
| 208 | |
| 209 | |
| 210 | ## Designing for Error Tolerance |
| 211 | |
| 212 | Error-tolerant systems assume users will make errors and minimize their consequences. |
| 213 | |
| 214 | ### Principles of Error Tolerance |
| 215 | |
| 216 | | Principle | Implementation | |
| 217 | |-----------|---------------| |
| 218 | | **Reversibility** | Every action can be undone. Deletion is soft. Edits are versioned. | |
| 219 | | **Low cost of experimentation** | Users can try things without fear. Preview modes, sandbox environments, and undo reduce the risk of exploration. | |
| 220 | | **Graduated consequences** | Minor actions have minor consequences. Major consequences require major confirmation. | |
| 221 | | **Data preservation** | The system never discards user data without explicit, confirmed intent. Form data survives errors, navigation, and session timeouts. | |
| 222 | | **Graceful degradation** | When something breaks, the system continues working at reduced capacity rather than failing completely. | |
| 223 | |
| 224 | |
| 225 | |
| 226 | ## The Swiss Cheese Model of Errors |
| 227 | |
| 228 | James Reason's Swiss Cheese Model explains how errors lead to disasters. Each layer of defense has holes (like Swiss cheese). An error becomes a disaster only when the holes in multiple layers align and the error passes through all defenses. |
| 229 | |
| 230 | ### Layers of Defense in Digital Products |
| 231 | |
| 232 | | Layer | Defense | Example | |
| 233 | |-------|---------|---------| |
| 234 | | **Layer 1: UI Constraints** | Prevent the action from being possible | Disabled button, input validation, type-safe inputs | |
| 235 | | **Layer 2: Warnings** | Alert the user before they proceed | "This will delete 47 files. Are you sure?" | |
| 236 | | **Layer 3: Immediate Feedback** | Show the result so the user can catch the error | File count changes, visual confirmation | |
| 237 | | **Layer 4: Undo / Reversal** | Allow the user to reverse the action | "Undo" toast, trash bin, version history | |
| 238 | | **Layer 5: Recovery** | Restore from backup or contact support | 30-day trash retention, admin recovery tools | |
| 239 | |
| 240 | For every critical action, ensure at least 3 layers of defense. If any single layer fails, the others catch the error. |
| 241 | |
| 242 | |
| 243 | |
| 244 | ## Case Studies of Error-Prone Designs and Fixes |
| 245 | |
| 246 | | Case | Error | Root Cause | Fix | |
| 247 | |------|-------|-----------|-----| |
| 248 | | **Reply vs Reply All** | Private comment sent to entire organization | Buttons adjacent, identical, equally prominent | Make "Reply" default; show recipient count before sending | |
| 249 | | **Unsaved form on navigation** | User loses form data by clicking a link | No autosave, no navigation warning | Autosave to local storage; warn on navigation; restore on return | |
| 250 | | **Wrong file overwrite** | New file silently replaces existing file | No collision warning, no version history | Detect collision and warn; keep version history | |
| 251 | | **Medication dosage** | Nurse enters 10mg instead of 1.0mg | Free-text input, no range validation, small targets | Pre-set dose dropdown; range validation; large targets | |
| 252 | |
| 253 | |
| 254 | |
| 255 | ## Error Audit Checklist |
| 256 | |
| 257 | ### Prevention |
| 258 | |
| 259 | [ ] Destructive actions are visually separated from routine actions. |
| 260 | [ ] Destructive actions require confirmation (for irreversible actions only). |
| 261 | [ ] Input constraints prevent invalid data entry (type, range, format). |
| 262 | [ ] The system detects likely omissions and prompts the user (attachment reminders, required fields). |
| 263 | [ ] Mode indicators are always visible when modes exist. |
| 264 | [ ] Default values are set to the safest or most common option. |
| 265 | |
| 266 | ### Detection |
| 267 | |
| 268 | [ ] Every action produces visible feedback within 100ms. |
| 269 | [ ] Error messages appear inline near the source of the error. |
| 270 | [ ] Error messages describe what happened, why, and how to fix it. |
| 271 | [ ] Error messages do not blame the user. |
| 272 | [ ] System state is visible at all times (saved/unsaved, connected/disconnected). |
| 273 | |
| 274 | ### Recovery |
| 275 | |
| 276 | [ ] Undo is available for all non-destructive actions. |
| 277 | [ ] Deleted items go to a recoverable trash/archive. |
| 278 | [ ] Form data is preserved on error (fields are not cleared). |
| 279 | [ ] Autosave prevents data loss from crashes and timeouts. |
| 280 | [ ] Version history allows reverting to previous states. |
| 281 | [ ] Session recovery restores work after accidental closure. |
| 282 | |
| 283 | ### Systemic |
| 284 | |
| 285 | [ ] Errors are logged and analyzed for design improvement (not user blame). |
| 286 | [ ] The most common user errors are tracked and addressed in design iterations. |
| 287 | [ ] New features are tested for common slip and mistake patterns before launch. |
| 288 | [ ] Error rate is a tracked product metric alongside task completion and satisfaction. |
| 289 |
Details
- Updated
- Sep 10, 2026
- License
- MIT
- Stars on the repo
- ★ 2,235
- Checked
- Source
- wondelai/skills ↗
- Creator
- wondelai · 319 listings
Similar skills
See all →
SkillCross-Platform Reverse Engineer
SkillBrainstorm Ideas
SkillCode Review Feedback Analyzer
SkillBug Diagnosis Framework
SkillImplement Spec
SkillPR Description WriterMore from wondelai
SkillSoftware Design Philosophy
SkillActionable Metrics Guide
SkillAdvertising Media
SkillAffordance Design
SkillLean UX in Agile Teams
SkillAMP Framework Practitioner