https://theuxshop.com/assets/js/b5607e18.c9901200.js

1"use strict";(self.webpackChunktheuxshop=self.webpackChunktheuxshop||[]).push([[3737],{9742:(e,r,n)=>{n.r(r),n.d(r,{assets:()=>h,contentTitle:()=>c,default:()=>x,frontMatter:()=>d,metadata:()=>s,toc:()=>u});const s=JSON.parse('{"id":"patterns/error-states","title":"Error States Pattern","description":"Error messages, validation feedback, system errors, and recovery paths.","source":"@site/.tmp/docs-published/patterns/error-states.mdx","sourceDirName":"patterns","slug":"/patterns/error-states","permalink":"/patterns/error-states","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":6,"frontMatter":{"id":"error-states","title":"Error States Pattern","description":"Error messages, validation feedback, system errors, and recovery paths.","sidebar_position":6},"sidebar":"patternsSidebar","previous":{"title":"Interaction Feedback Patterns","permalink":"/patterns/interaction-feedback"},"next":{"title":"Micro-interactions: The Subtle UX Language for Feedback","permalink":"/patterns/micro-interactions-feedback-language"}}');var i=n(4848),l=n(8453),t=n(9176),o=n(5920),a=n(5388);const d={id:"error-states",title:"Error States Pattern",description:"Error messages, validation feedback, system errors, and recovery paths.",sidebar_position:6},c="Error States Pattern",h={},u=[{value:"Error design principles",id:"error-design-principles",level:2},{value:"Be honest",id:"be-honest",level:3},{value:"Be specific",id:"be-specific",level:3},{value:"Be helpful",id:"be-helpful",level:3},{value:"Be human",id:"be-human",level:3},{value:"Preserve work",id:"preserve-work",level:3},{value:"Types of errors",id:"types-of-errors",level:2},{value:"Validation errors",id:"validation-errors",level:3},{value:"Permission errors",id:"permission-errors",level:3},{value:"System errors",id:"system-errors",level:3},{value:"Connection errors",id:"connection-errors",level:3},{value:"Not found errors (404)",id:"not-found-errors-404",level:3},{value:"Error message anatomy",id:"error-message-anatomy",level:2},{value:"Example structure",id:"example-structure",level:3},{value:"Visual design of errors",id:"visual-design-of-errors",level:2},{value:"Color",id:"color",level:3},{value:"Icons",id:"icons",level:3},{value:"Positioning",id:"positioning",level:3},{value:"Motion",id:"motion",level:3},{value:"Form error patterns",id:"form-error-patterns",level:2},{value:"Inline field errors",id:"inline-field-errors",level:3},{value:"Error summary",id:"error-summary",level:3},{value:"Error states on buttons",id:"error-states-on-buttons",level:3},{value:"System error patterns",id:"system-error-patterns",level:2},{value:"Toast notifications",id:"toast-notifications",level:3},{value:"Error modals",id:"error-modals",level:3},{value:"Error pages",id:"error-pages",level:3},{value:"Preventing errors",id:"preventing-errors",level:2},{value:"Smart defaults",id:"smart-defaults",level:3},{value:"Clear constraints",id:"clear-constraints",level:3},{value:"Confirmation for destructive actions",id:"confirmation-for-destructive-actions",level:3},{value:"Forgiving inputs",id:"forgiving-inputs",level:3},{value:"Error recovery",id:"error-recovery",level:2},{value:"Preserve state",id:"preserve-state",level:3},{value:"Offer alternatives",id:"offer-alternatives",level:3},{value:"Clear the error state",id:"clear-the-error-state",level:3},{value:"Accessibility requirements",id:"accessibility-requirements",level:2}];function p(e){const r={a:"a",blockquote:"blockquote",br:"br",code:"code",em:"em",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,l.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(r.header,{children:(0,i.jsx)(r.h1,{id:"error-states-pattern",children:"Error States Pattern"})}),"\n",(0,i.jsx)(r.p,{children:"Errors are inevitable. How you handle them determines whether users can recover gracefully or give up in frustration. This document covers patterns for communicating errors and helping users move forward."}),"\n",(0,i.jsx)(r.p,{children:(0,i.jsx)(r.em,{children:"Last updated: November 2024"})}),"\n",(0,i.jsx)(r.h2,{id:"error-design-principles",children:"Error design principles"}),"\n",(0,i.jsx)(r.h3,{id:"be-honest",children:"Be honest"}),"\n",(0,i.jsx)(r.p,{children:"Acknowledge what went wrong. Don't hide errors or use vague language hoping users won't notice."}),"\n",(0,i.jsx)(r.h3,{id:"be-specific",children:"Be specific"}),"\n",(0,i.jsx)(r.p,{children:'Generic errors don\'t help. "Something went wrong" gives users nothing to work with. Tell them what specifically happened.'}),"\n",(0,i.jsx)(r.h3,{id:"be-helpful",children:"Be helpful"}),"\n",(0,i.jsx)(r.p,{children:"Every error should suggest a path forward. What can users do to fix or work around the problem?"}),"\n",(0,i.jsx)(r.h3,{id:"be-human",children:"Be human"}),"\n",(0,i.jsx)(r.p,{children:"Error messages are stressful moments. Use a calm, clear, supportive tone. Avoid technical jargon and blame."}),"\n",(0,i.jsx)(r.h3,{id:"preserve-work",children:"Preserve work"}),"\n",(0,i.jsx)(r.p,{children:"Never lose user input due to an error. If a form submission fails, the user's entries should still be there when they return."}),"\n",(0,i.jsx)(r.h2,{id:"types-of-errors",children:"Types of errors"}),"\n",(0,i.jsx)(r.h3,{id:"validation-errors",children:"Validation errors"}),"\n",(0,i.jsx)(r.p,{children:"User input doesn't meet requirements."}),"\n",(0,i.jsxs)(r.p,{children:[(0,i.jsx)(r.strong,{children:"Design approach"}),":"]}),"\n",(0,i.jsxs)(r.ul,{children:["\n",(0,i.jsx)(r.li,{children:"Show immediately (on blur or submission)"}),"\n",(0,i.jsx)(r.li,{children:"Position near the problematic field"}),"\n",(0,i.jsx)(r.li,{children:"Explain exactly what's wrong"}),"\n",(0,i.jsx)(r.li,{children:"Show how to fix it"}),"\n"]}),"\n",(0,i.jsxs)(r.p,{children:[(0,i.jsx)(r.strong,{children:"Good example"}),': "Email address must include @ and a domain (e.g., ',(0,i.jsx)(r.a,{href:"mailto:[email protected]",children:"[email protected]"}),')"']}),"\n",(0,i.jsxs)(r.p,{children:[(0,i.jsx)(r.strong,{children:"Bad example"}),': "Invalid input"']}),"\n",(0,i.jsx)(r.h3,{id:"permission-errors",children:"Permission errors"}),"\n",(0,i.jsx)(r.p,{children:"User can't do what they're trying to do."}),"\n",(0,i.jsxs)(r.p,{children:[(0,i.jsx)(r.strong,{children:"Design approach"}),":"]}),"\n",(0,i.jsxs)(r.ul,{children:["\n",(0,i.jsx)(r.li,{children:"Explain why the action isn't available"}),"\n",(0,i.jsx)(r.li,{children:"Offer alternatives if they exist"}),"\n",(0,i.jsx)(r.li,{children:"Suggest who can help if appropriate"}),"\n"]}),"\n",(0,i.jsxs)(r.p,{children:[(0,i.jsx)(r.strong,{children:"Good example"}),': "You don\'t have permission to edit this document. Ask [Owner Name] for access."']}),"\n",(0,i.jsxs)(r.p,{children:[(0,i.jsx)(r.strong,{children:"Bad example"}),': "403 Forbidden"']}),"\n",(0,i.jsx)(r.h3,{id:"system-errors",children:"System errors"}),"\n",(0,i.jsx)(r.p,{children:"Something technical went wrong."}),"\n",(0,i.jsxs)(r.p,{children:[(0,i.jsx)(r.strong,{children:"Design approach"}),":"]}),"\n",(0,i.jsxs)(r.ul,{children:["\n",(0,i.jsx)(r.li,{children:"Acknowledge the problem honestly"}),"\n",(0,i.jsx)(r.li,{children:"Don't expose technical details unless relevant"}),"\n",(0,i.jsx)(r.li,{children:"Offer retry if appropriate"}),"\n",(0,i.jsx)(r.li,{children:"Provide support contact for persistent issues"}),"\n"]}),"\n",(0,i.jsxs)(r.p,{children:[(0,i.jsx)(r.strong,{children:"Good example"}),': "We couldn\'t save your changes due to a connection issue. Your work is saved locally. Try again?"']}),"\n",(0,i.jsxs)(r.p,{children:[(0,i.jsx)(r.strong,{children:"Bad example"}

1),': "Error code 5xx: Internal server failure at cluster node 3"']}),"\n",(0,i.jsx)(r.h3,{id:"connection-errors",children:"Connection errors"}),"\n",(0,i.jsx)(r.p,{children:"Network issues prevent completion."}),"\n",(0,i.jsxs)(r.p,{children:[(0,i.jsx)(r.strong,{children:"Design approach"}),":"]}),"\n",(0,i.jsxs)(r.ul,{children:["\n",(0,i.jsx)(r.li,{children:"Distinguish from other errors (it's not the user's fault)"}),"\n",(0,i.jsx)(r.li,{children:"Offer offline functionality if available"}),"\n",(0,i.jsx)(r.li,{children:"Provide automatic retry with manual option"}),"\n",(0,i.jsx)(r.li,{children:"Show when connection returns"}),"\n"]}),"\n",(0,i.jsxs)(r.p,{children:[(0,i.jsx)(r.strong,{children:"Good example"}),': "You appear to be offline. We\'ll sync your changes when you reconnect."']}),"\n",(0,i.jsx)(r.h3,{id:"not-found-errors-404",children:"Not found errors (404)"}),"\n",(0,i.jsx)(r.p,{children:"Requested content doesn't exist."}),"\n",(0,i.jsxs)(r.p,{children:[(0,i.jsx)(r.strong,{children:"Design approach"}),":"]}),"\n",(0,i.jsxs)(r.ul,{children:["\n",(0,i.jsx)(r.li,{children:"Confirm what they were looking for"}),"\n",(0,i.jsx)(r.li,{children:"Suggest where it might have moved"}),"\n",(0,i.jsx)(r.li,{children:"Provide navigation to main areas"}),"\n",(0,i.jsx)(r.li,{children:"Include search if available"}),"\n"]}),"\n",(0,i.jsx)(t.A,{variant:"note",title:"The 404 opportunity",children:(0,i.jsx)(r.p,{children:"A good 404 page prevents complete dead-ends. Include search, popular links, and a way to report broken links. Some users arrive via old links - help them find what they need."})}),"\n",(0,i.jsx)(r.h2,{id:"error-message-anatomy",children:"Error message anatomy"}),"\n",(0,i.jsx)(r.p,{children:"A complete error message includes:"}),"\n",(0,i.jsxs)(r.ol,{children:["\n",(0,i.jsxs)(r.li,{children:[(0,i.jsx)(r.strong,{children:"What happened"}),": Clear statement of the problem"]}),"\n",(0,i.jsxs)(r.li,{children:[(0,i.jsx)(r.strong,{children:"Why it happened"}),": Brief explanation (if helpful)"]}),"\n",(0,i.jsxs)(r.li,{children:[(0,i.jsx)(r.strong,{children:"What to do"}),": Specific action to resolve"]}),"\n",(0,i.jsxs)(r.li,{children:[(0,i.jsx)(r.strong,{children:"Alternatives"}),": Other paths forward if the main action can't be completed"]}),"\n"]}),"\n",(0,i.jsx)(r.h3,{id:"example-structure",children:"Example structure"}),"\n",(0,i.jsxs)(r.blockquote,{children:["\n",(0,i.jsxs)(r.p,{children:[(0,i.jsx)(r.strong,{children:"Can't upload file"}),(0,i.jsx)(r.br,{}),"\n","The file is larger than 10MB. Try compressing it or use a different file.",(0,i.jsx)(r.br,{}),"\n","[Choose different file] [Learn about file limits]"]}),"\n"]}),"\n",(0,i.jsx)(r.h2,{id:"visual-design-of-errors",children:"Visual design of errors"}),"\n",(0,i.jsx)(r.h3,{id:"color",children:"Color"}),"\n",(0,i.jsxs)(r.ul,{children:["\n",(0,i.jsx)(r.li,{children:"Red is conventional for errors"}),"\n",(0,i.jsx)(r.li,{children:"Don't rely on color alone (accessibility)"}),"\n",(0,i.jsx)(r.li,{children:"Ensure sufficient contrast"}),"\n",(0,i.jsx)(r.li,{children:"Use consistently across the product"}),"\n"]}),"\n",(0,i.jsx)(r.h3,{id:"icons",children:"Icons"}),"\n",(0,i.jsxs)(r.ul,{children:["\n",(0,i.jsx)(r.li,{children:"Error/warning icons provide additional signal"}),"\n",(0,i.jsx)(r.li,{children:"Use consistently (\u26a0\ufe0f for warnings, \u2715 or \u2298 for errors)"}),"\n",(0,i.jsx)(r.li,{children:"Position with the message text"}),"\n"]}),"\n",(0,i.jsx)(r.h3,{id:"positioning",children:"Positioning"}),"\n",(0,i.jsxs)(r.ul,{children:["\n",(0,i.jsx)(r.li,{children:"Inline errors: Next to the problematic element"}),"\n",(0,i.jsx)(r.li,{children:"Toast/snackbar: For system-level errors or confirmation failures"}),"\n",(0,i.jsx)(r.li,{children:"Modal: For critical errors requiring immediate attention (use sparingly)"}),"\n",(0,i.jsx)(r.li,{children:"Full-page: For complete failures (404, major system errors)"}),"\n"]}),"\n",(0,i.jsx)(r.h3,{id:"motion",children:"Motion"}),"\n",(0,i.jsxs)(r.ul,{children:["\n",(0,i.jsx)(r.li,{children:"Gentle attention-drawing (subtle shake, fade in)"}),"\n",(0,i.jsx)(r.li,{children:"Don't use aggressive, startling animations"}),"\n",(0,i.jsx)(r.li,{children:"Respect reduced-motion preferences"}),"\n"]}),"\n",(0,i.jsx)(r.h2,{id:"form-error-patterns",children:"Form error patterns"}),"\n",(0,i.jsx)(r.h3,{id:"inline-field-errors",children:"Inline field errors"}),"\n",(0,i.jsx)(r.p,{children:"Position: Below the field or to the side\nTiming: On blur or on submit (not on every keystroke)\nContent: Specific to what's wrong with that field"}),"\n",(0,i.jsx)(r.pre,{children:(0,i.jsx)(r.code,{className:"language-html",children:'<label for="email">Email</label>\n<input id="email" aria-describedby="email-error" aria-invalid="true">

1\n<span id="email-error" class="error">Please enter a valid email address</span>\n'})}),"\n",(0,i.jsx)(r.h3,{id:"error-summary",children:"Error summary"}),"\n",(0,i.jsx)(r.p,{children:"For forms with multiple errors:"}),"\n",(0,i.jsxs)(r.ul,{children:["\n",(0,i.jsx)(r.li,{children:"Show summary at top of form"}),"\n",(0,i.jsx)(r.li,{children:"Link each summary item to its field"}),"\n",(0,i.jsx)(r.li,{children:"Focus the summary after submission"}),"\n"]}),"\n",(0,i.jsx)(r.pre,{children:(0,i.jsx)(r.code,{className:"language-html",children:'<div role="alert" aria-labelledby="error-summary-heading">\n  <h2 id="error-summary-heading">There were 2 problems with your submission</h2>\n  <ul>\n    <li><a href="#email">Email address is invalid</a></li>\n    <li><a href="#password">Password must be at least 8 characters</a></li>\n  </ul>\n</div>\n'})}),"\n",(0,i.jsx)(r.h3,{id:"error-states-on-buttons",children:"Error states on buttons"}),"\n",(0,i.jsx)(r.p,{children:"When a form action fails:"}),"\n",(0,i.jsxs)(r.ul,{children:["\n",(0,i.jsx)(r.li,{children:"Keep button enabled (allow retry)"}),"\n",(0,i.jsx)(r.li,{children:"Show error message near button"}),"\n",(0,i.jsx)(r.li,{children:"Preserve all valid input"}),"\n"]}),"\n",(0,i.jsx)(r.h2,{id:"system-error-patterns",children:"System error patterns"}),"\n",(0,i.jsx)(r.h3,{id:"toast-notifications",children:"Toast notifications"}),"\n",(0,i.jsxs)(r.p,{children:[(0,i.jsx)(r.strong,{children:"When to use"}),": Errors that don't block continued use."]}),"\n",(0,i.jsxs)(r.p,{children:[(0,i.jsx)(r.strong,{children:"Best practices"}),":"]}),"\n",(0,i.jsxs)(r.ul,{children:["\n",(0,i.jsx)(r.li,{children:"Position consistently (often top-right or bottom)"}),"\n",(0,i.jsx)(r.li,{children:"Persist until dismissed (don't auto-dismiss errors)"}),"\n",(0,i.jsx)(r.li,{children:"Include retry action if applicable"}),"\n"]}),"\n",(0,i.jsx)(r.h3,{id:"error-modals",children:"Error modals"}),"\n",(0,i.jsxs)(r.p,{children:[(0,i.jsx)(r.strong,{children:"When to use"}),": Critical errors requiring acknowledgment."]}),"\n",(0,i.jsxs)(r.p,{children:[(0,i.jsx)(r.strong,{children:"Best practices"}),":"]}),"\n",(0,i.jsxs)(r.ul,{children:["\n",(0,i.jsx)(r.li,{children:"Use sparingly - modals disrupt flow"}),"\n",(0,i.jsx)(r.li,{children:"Clear title stating the problem"}),"\n",(0,i.jsx)(r.li,{children:'Focused action (usually "OK" or "Try again")'}),"\n",(0,i.jsx)(r.li,{children:"Don't trap users - allow closing without action when possible"}),"\n"]}),"\n",(0,i.jsx)(r.h3,{id:"error-pages",children:"Error pages"}),"\n",(0,i.jsxs)(r.p,{children:[(0,i.jsx)(r.strong,{children:"When to use"}),": Complete failures (no content can load)."]}),"\n",(0,i.jsxs)(r.p,{children:[(0,i.jsx)(r.strong,{children:"Best practices"}),":"]}),"\n",(0,i.jsxs)(r.ul,{children:["\n",(0,i.jsx)(r.li,{children:"Maintain navigation if possible"}),"\n",(0,i.jsx)(r.li,{children:"Provide ways back to working parts of the product"}),"\n",(0,i.jsx)(r.li,{children:"Include support contact for critical issues"}),"\n",(0,i.jsx)(r.li,{children:"Add personality appropriately (but don't make light of frustration)"}),"\n"]}),"\n",(0,i.jsx)(r.h2,{id:"preventing-errors",children:"Preventing errors"}),"\n",(0,i.jsx)(r.p,{children:"Better than handling errors is preventing them:"}),"\n",(0,i.jsx)(r.h3,{id:"smart-defaults",children:"Smart defaults"}),"\n",(0,i.jsxs)(r.ul,{children:["\n",(0,i.jsx)(r.li,{children:"Pre-fill with likely values"}),"\n",(0,i.jsx)(r.li,{children:"Set reasonable limits that most users won't hit"}),"\n",(0,i.jsx)(r.li,{children:"Suggest valid inputs"}),"\n"]}),"\n",(0,i.jsx)(r.h3,{id:"clear-constraints",children:"Clear constraints"}),"\n",(0,i.jsxs)(r.ul,{children:["\n",(0,i.jsx)(r.li,{children:"Show requirements before input (password rules, file limits)"}),"\n",(0,i.jsx)(r.li,{children:"Show character counts approaching limits"}),"\n",(0,i.jsx)(r.li,{children:"Disable impossible actions rather than allowing them to fail"}),"\n"]}),"\n",(0,i.jsx)(r.h3,{id:"confirmation-for-destructive-actions",children:"Confirmation for destructive actions"}),"\n",(0,i.jsxs)(r.ul,{children:["\n",(0,i.jsx)(r.li,{children:'"Are you sure you want to delete?" before permanent deleti

1on'}),"\n",(0,i.jsx)(r.li,{children:"Show what will be affected"}),"\n",(0,i.jsx)(r.li,{children:"Provide undo where possible"}),"\n"]}),"\n",(0,i.jsx)(r.h3,{id:"forgiving-inputs",children:"Forgiving inputs"}),"\n",(0,i.jsxs)(r.ul,{children:["\n",(0,i.jsx)(r.li,{children:"Accept multiple formats (phone numbers, dates)"}),"\n",(0,i.jsx)(r.li,{children:"Auto-correct obvious typos"}),"\n",(0,i.jsx)(r.li,{children:"Normalize input (trim whitespace, fix capitalization)"}),"\n"]}),"\n",(0,i.jsx)(t.A,{variant:"tip",title:"The undo pattern",children:(0,i.jsx)(r.p,{children:'Where possible, make actions reversible rather than requiring confirmation. "Deleted. [Undo]" is faster than "Are you sure?" and creates less friction while still allowing recovery.'})}),"\n",(0,i.jsx)(r.h2,{id:"error-recovery",children:"Error recovery"}),"\n",(0,i.jsx)(r.h3,{id:"preserve-state",children:"Preserve state"}),"\n",(0,i.jsx)(r.p,{children:"Never lose user data. If a long form fails to submit:"}),"\n",(0,i.jsxs)(r.ul,{children:["\n",(0,i.jsx)(r.li,{children:"Keep all entered values"}),"\n",(0,i.jsx)(r.li,{children:"Highlight only what needs fixing"}),"\n",(0,i.jsx)(r.li,{children:"Allow correction and resubmission"}),"\n"]}),"\n",(0,i.jsx)(r.h3,{id:"offer-alternatives",children:"Offer alternatives"}),"\n",(0,i.jsx)(r.p,{children:"If the requested action isn't possible:"}),"\n",(0,i.jsxs)(r.ul,{children:["\n",(0,i.jsx)(r.li,{children:"Suggest similar actions that might work"}),"\n",(0,i.jsx)(r.li,{children:"Provide contact for human help"}),"\n",(0,i.jsx)(r.li,{children:"Allow saving work in progress"}),"\n"]}),"\n",(0,i.jsx)(r.h3,{id:"clear-the-error-state",children:"Clear the error state"}),"\n",(0,i.jsx)(r.p,{children:"When users fix the problem:"}),"\n",(0,i.jsxs)(r.ul,{children:["\n",(0,i.jsx)(r.li,{children:"Remove error styling immediately"}),"\n",(0,i.jsx)(r.li,{children:"Show success confirmation"}),"\n",(0,i.jsx)(r.li,{children:"Allow them to proceed"}),"\n"]}),"\n",(0,i.jsx)(r.h2,{id:"accessibility-requirements",children:"Accessibility requirements"}),"\n",(0,i.jsxs)(r.ul,{children:["\n",(0,i.jsxs)(r.li,{children:["Use ",(0,i.jsx)(r.code,{children:'role="alert"'})," for dynamically appearing errors"]}),"\n",(0,i.jsxs)(r.li,{children:["Associate errors with fields via ",(0,i.jsx)(r.code,{children:"aria-describedby"})]}),"\n",(0,i.jsxs)(r.li,{children:["Mark invalid fields with ",(0,i.jsx)(r.code,{children:'aria-invalid="true"'})]}),"\n",(0,i.jsx)(r.li,{children:"Ensure errors are announced to screen readers"}),"\n",(0,i.jsx)(r.li,{children:"Don't use color as the only indicator"}),"\n",(0,i.jsx)(r.li,{children:"Ensure focus moves appropriately (to error summary or first error)"}),"\n"]}),"\n",(0,i.jsx)(o.A,{items:[{question:"Should I show errors as users type?",answer:"Generally no - it's annoying to see errors before you're done typing. Validate on blur (when leaving the field) or on submission. E

1xception: helpful guidance (character counts, password strength) can appear while typing."},{question:"How specific should error messages be?",answer:"As specific as possible without security implications. 'Password must include a number' is better than 'Invalid password.' But 'This email is registered' might reveal account existence - consider security context."},{question:"When should I use a modal for errors?",answer:"Rarely. Modals interrupt flow. Use them for critical, unexpected errors requiring immediate attention - not for routine validation or recoverable issues."},{question:"How do I handle errors in complex multi-step flows?",answer:"Prevent errors at each step when possible. When errors occur at submission of multiple steps, take users back to the problematic step with clear indication of what needs fixing."},{question:"What about error logging and analytics?",answer:"Log errors on the backend for debugging. Track error frequency and patterns. If many users hit the same error, improve the design to prevent it - not just the message to explain it."}]}),"\n",(0,i.jsx)(a.A,{title:"Related resources",links:[{label:"Forms Patterns",to:"/patterns/forms"},{label:"Interaction Feedback",to:"/patterns/interaction-feedback"},{label:"Accessibility Checklist",to:"/guides/accessibility-checklist"},{label:"Usability Testing",to:"/guides/usability-testing-quickstart"}]})]})}function x(e={}){const{wrapper:r}={...(0,l.R)(),...e.components};return r?(0,i.jsx)(r,{...e,children:(0,i.jsx)(p,{...e})}):p(e)}},9176:(e,r,n)=>{n.d(r,{A:()=>l});n(6540);var s=n(4164),i=n(4848);function l({variant:e="default",title:r,children:n}){return(0,i.jsxs)("div",{className:(0,s.A)("ux-callout","default"!==e&&`ux-callout--${e}`),children:[(0,i.jsx)("div",{className:"ux-callout__title",children:r||{default:"Note",tip:"Tip",warning:"Warning",note:"Field Note"}[e]}),(0,i.jsx)("div",{className:"ux-callout__content",children:n})]})}},5920:(e,r,n)=>{n.d(r,{A:()=>i});n(6540);var s=n(4848);function i({items:e}){return(0,s.jsx)("div",{className:"ux-faq",children:e.map((e,r)=>(0,s.jsxs)("div",{className:"ux-faq__item",children:[(0,s.jsx)("div",{className:"ux-faq__question",children:e.question}),(0,s.jsx)("div",{className:"ux-faq__answer",children:(0,s.jsx)("p",{children:e.answer})})]},r))})}},5388:(e,r,n)=>{n.d(r,{A:()=>l});n(6540);var s=n(6289),i=n(4848);function l({title:e="Related Resources",links:r}){return(0,i.jsxs)("div",{className:"ux-related",children:[(0,i.jsx)("div",{className:"ux-related__title",children:e}),(0,i.jsx)("ul",{className:"ux-related__list",children:r.map((e,r)=>(0,i.jsx)("li",{children:(0,i.jsx)(s.A,{to:e.to,className:"ux-related__link",children:e.label})},r))})]})}},8453:(e,r,n)=>{n.d(r,{R:()=>t,x:()=>o});var s=n(6540);const i={},l=s.createContext(i);function t(e){const r=s.useContext(l);return s.useMemo(function(){return"function"==typeof e?e(r):{...r,...e}},[r,e])}function o(e){let r;return r=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:t(e.components),s.createElement(l.Provider,{value:r},e.children)}}}]);