Error-Message Guidelines (2024)

Over 30 years ago, Jakob Nielsen created 10 Usability Heuristics as general guidelines for designing digital products. These heuristics equally apply today as they did back then. Usability heuristic #9 emphasizes the importance of good error-message design: "Help Users Recognize, Diagnose, and Recover from Errors." Effectively handling errors is crucial because it's one of the 5 quality components of usable experiences.

Error message: A system-generated interruption to the user's workflow that informs the user of an incomplete, incompatible, or undesirable situation according to the system's implementation.

Quality and error messages rarely go together, though. Product teams can be so focused on designing or engineering the idealistic user path that deviations from that path become a frustrating afterthought.

Visibility Guidelines

Error messages must present themselves noticeably and recognizably to users.

Display the error message close to the error's source. Reduce cognitive load by displaying an error indicator adjacent to the interface where the error occurred. Proximity helps users associate the error message content with the interface elements needing attention.

Use noticeable, redundant, and accessible indicators. Text and highlights that are bold, high-contrast, and red are conventional error-message visuals. Use this styling for the message and for the affected elements needing correction. Another technique for improving noticeability is leveraging carefully designed animations to guide the user's visual attention for corrections. Remember accessibility guidelines to aid the roughly 350 million people worldwide with a color-vision deficiency, and never use exclusively color or animation to indicate errors.

Design errors based on their impact. Design your error messages to indicate the problem's severity. For example, sometimes users only need to be warned of unexpected or potentially undesirable outcomes but can otherwise advance their workflow. Differentiate between these "good to know" messages from those posing a barrier to the user's progress. For example, conditionally displayed labels, toast notifications, or banners can be used for issues needing minimal user interaction, whereas modal dialogs require the user's attention and resolution and should be reserved for severe errors.

Avoid prematurely displaying errors. Timing is a crucial aspect of designing effective error messages. Presenting errors too early is a hostile pattern. It’s like grading a test before the student has had a chance to answer. It can make users feel annoyed, belittled, or confused. Don't assume that exploratory interactions (like the user moving text focus from a text box without filling it in) are errors. However, do consider inline, real-time errors for error-prone interactions where users are unlikely to enter the correct information on their first try. This immediate guidance reduces interaction costs for correction.

Communication Guidelines

Error messages cannot rely on visuals alone. They must contain copy to elaborate and assist the user with recovering from the error.

Use human-readable language. Error messages should be plainspoken using legible and readable text (many writing apps can give you feedback on a message's readability). Avoid technical jargon and use language familiar to your users instead. The Web's most common error message, the 404 page, violates this guideline. Hide or minimize the use of obscure error codes or abbreviations; show them for technical diagnostic purposes only.

Concisely and precisely describe the issue. Generic messages such as An error occurred lack context. Provide descriptions of the exact problems to help users understand what happened. That said, beware of excessive technical precision and accuracy that can undermine understandability. The user's mental model of how the system works likely differs from the conceptual model of how it was coded.

Offer constructive advice. Merely stating the problem is also not enough; offer some potential remedies. One example is an Out of stock message for an ecommerce website. Include details of when the product will be available again or suggest that users sign up for a restock notification by entering their emails.

Take a positive tone and don't blame the user. Write with a positive and nonjudgmental tone of voice. Don't use phrasing that blames users or implies they are doing something wrong, such as invalid, illegal, or incorrect. The proper usage of any system lies with its creators and not with the system's users, so the system must gracefully adapt and not shift blame. Avoid humor since it can become stale if users encounter the error frequently.

Efficiency Guidelines

Good errors go beyond just explaining but protect the user's effort and time. Offer accelerators to resolve the situation or share a bit of instruction to aid users' understanding and hopefully avoid the problem in the future.

Safeguard against likely mistakes. The very worst error messages are those that don't exist. When users make a mistake and receive no feedback, it can create a cascade of misunderstanding, wasted effort, and frustration. Years ago, email apps would dutifully send your email even though it referred to an attachment you forgot to include. Now, most apps will detect this situation and prompt you with an error message before sending it, thus sparing you embarrassment.

Preserve the user's input. Let users correct errors by editing their original action instead of starting over. For example, display the original text entered into a text field even if it does not match the requirements for that field and allow the user to modify it.

Reduce error-correction effort. If possible, guess the correct action and let users pick it from a small list of fixes. For example, instead of just saying City and ZIP code don't match, let users click on a button for the city that matches the ZIP code they entered.

Concisely educate on how the system works. Explain to your users how the system works and how to resolve an error. If additional information is required, use hypertext links to connect a concise error message to a page with supplementary material or an explanation of the problem. (Don't overdo this, though.)

Mitigate Failure with Novelty in Dire Situations

The above guidelines are essential and applicable to all error messages. That said, there is one last guideline to consider when the system becomes incapable of serving users in any functional capacity:

Mitigate total failure with novelty. Errors are unenjoyable for everyone involved as they interfere with user and business goals. Yet sometimes users may encounter an error so catastrophic (e.g., overloaded servers) there is no recourse but to wait or try again later. It's these specific moments (which should be rare and avoided at all costs) where blending an apology with something surprising or novel may salvage a disappointing situation that users will likely remember due to negativity bias and the peak-end rule. Don't underestimate the challenge of communicating humility and delight — especially if user input is in jeopardy or the context has severe implications for users. Yet this tactic might enhance memorability and sustain user interest with low-stakes experiences until the system resumes functioning.

Conclusion

Interactions between humans and computers are constantly evolving, but there will inevitably be mistakes, misunderstandings, and, thus, a need for error messages. Follow these guidelines to ease these frustrating moments and help the user accomplish their task efficiently and with renewed confidence.