Error Message Design
The technique of designing error messages that are clear and helpful to users when errors occur, so they understand what happened and how to respond.
What is Error Message Design?
Error Message Design is the technique of creating messages that users understand when an error occurs in a program—what happened and what to do about it. Instead of an unhelpful message like “Error 500,” you provide something like “We apologize. Please check your network connection and try again.”
In a nutshell: Like a doctor explaining “Your blood pressure is high. Take this medication” rather than just saying “You’re not feeling well.”
Key points:
- What it does: Accurately convey errors to users and show them how to respond.
- Why it’s needed: Good error messages reduce customer support costs and improve user satisfaction.
- Who uses it: Designers, developers, product managers.
Why it matters
Unhelpful error messages frustrate users and cause them to stop using the application. Research shows that about 40% of users who encounter unclear error messages stop using that application or service.
In contrast, a specific and helpful error message like “Password must be at least 8 characters and include uppercase letters and numbers” allows users to quickly solve the problem and increases trust in your brand.
How it works
Effective error messages have 5 elements.
1. What happened - Explain in plain language, not technical jargon.
2. Why it happened - Give specific reasons related to the user’s action.
3. How to fix it - Provide clear steps the user can take.
4. Visual clarity - Highlight with noticeable colors like red, use icons.
5. Kindness - Be supportive, not accusatory.
Example: “We apologize. The email address is not correct. Is there a period after the @?”
Real-world use cases
Form input errors - “Postal code must be 7 digits. Example: 123-4567”
Payment failures - “Your card was declined. Try another card or contact support.”
File uploads - “File is too large. Select an image under 10MB.”
Benefits and considerations
Improved user satisfaction is the biggest benefit. Users can solve problems quickly, increasing satisfaction.
Reduced support costs - When users can solve problems themselves, customer support inquiries decrease.
However, complexity is a challenge - Designing messages for all possible error patterns is time-consuming.
Language and culture - Services used worldwide require translation and localization.
Related terms
- User Experience — Error messages are an important part of UX.
- Interface Design — The design of error screens.
- Usability — Clear messages improve usability.
- Accessibility — Messages should be understandable to all users.
- Customer Support — Good error messages reduce support burden.
Frequently asked questions
Q: Should technical accuracy or clarity be prioritized? A: Prioritize clarity. For technical audiences, detailed information can be collapsible.
Q: Should error messages always be red? A: Usually red, but red has different meanings in different cultures. Express with icons and text too.
Q: How should they be displayed in mobile apps? A: Space is limited, so be concise. Detailed information can be revealed with a “See details” button.
Related Terms
Auto-Layout
A design feature automatically positioning and resizing UI elements. Implemented in Figma, iOS, Andr...
Breadcrumb Navigation
A navigation feature that visually displays the user's current location on a website, helping them u...
LCP (Largest Contentful Paint)
A critical Core Web Vitals metric measuring the time until the largest content element appears to us...
Mobile Optimization
The process of designing and developing websites and apps to work comfortably on smartphones, delive...
Site Navigation
The entire wayfinding system including menus, links, and search functions that enable users to move ...
UI (User Interface)
User Interface (UI) definition, types, design principles, and practical use cases explained. Learn h...