© ALL RIGHTS RESERVED
SHAV
We studied how people respond when errors interrupts the task at hand. The findings shaped a calmer approach to error management one that explains what happened, preserves progress, and offers a clear next step.
01 — RESEARCH
Why error management matters.
OVERVIEW
In the realm of digital services, the way systems communicate problems to users can significantly shape the overall experience. Error messages play a pivotal role in guiding users, maintaining trust, and ensuring successful interactions. This research explores the critical importance of effective error management in user interfaces. Multi-page forms represent a common challenge space in digital service design, where user intent, complexity, and system responsiveness intersect. When errors occur, the clarity, tone, and placement of the messages presented can either empower or frustrate users.
BUSINESS IMPACT
From a product perspective, poor error communication can increased user drop-off and lower completion rates, thus raising support costs. In high-stakes digital services, including registration forms such as the Self-Service Portal, ensuring users can complete their goals without unnecessary barriers is crucial. Even in this scenario, providing clear guidance to help users effectively handle error, contributes to a smooth user experience and minimal business resource strain. Conversely, actionable, concise error messages reduce form abandonment and the cognitive load on the user by pointing them directly toward a solution. When users know exactly what went wrong and how to resolve it, they are less likely to feel frustrated, make repeated mistakes, or abandon the task altogether. This directly correlates to fewer support requests and a more seamless digital journey.
USER’S TRUST AND EXPERIENCE
The most important reason effective error messages matter is trust. When users encounter an error, because of something which has gone wrong, they must know why. A well-crafted error message that is clear, specific, and non-technical reassures the user that the system understands the issue and is there to help resolve it.
Error messages may seem like a minor component of user interface design, but they are anything but. In multi-page forms and beyond, they are moments of truth that can either build trust or drive users away. By focusing on clarity, accessibility, and helpfulness, we can turn these critical points of friction into opportunities for guidance and reassurance. Ultimately, effective error message design is not just good UX, it ’s essential to user trust, task completion, and the success of digital services.
USABILITY HEURISTIC #9
Emphasises the importance of good error-message design: “Help Users Recognise, Diagnose, and Recover from errors.
What is error management:
A UI response whereby the system interrupts the user’s workflow to inform them of an incomplete, incompatible, or undesirable situation according to the system’s implementation. Often communicated via error messages or states.
02 — BEST PRACTICES
Communication should point forward.
COMMUNICATION
Error messages need to be intentionally designed to clearly communicate what went wrong and how users can fix it, without causing confusion or frustration
AVOID AMBIGUITY
Error text communicates the mistake and describes how it can be corrected. When creating an error message, the language must be succinct, plain and written for humans.
PROVIDE ACTIONABLE STEPS
When describing the corrective actions, it should offer specific, actionable steps to correct the problem, helping users move forward confidently.
DON’T BLAME OR MOCK THE USER
The tone must remain positive and neutral, never blaming or mocking the user. Instead, it should focus on solutions.
DISTIL TECHNICAL JARGON
A good error message should explain the issue in plain, human-friendly language, avoiding technical jargon and vague instructions.
03 — BEST PRACTICES
Make the error unmistakable.
STYLING
Errors should be clearly visible and easy to notice, using high-contrast styling to draw the user’s attention. Styling should be applied consistently across all error components to create a familiar visual language and reduce the burden on users’ short-term memory.
COLOUR
Visual cues are essential in making error messages stand out. Red is the most widely recognised colour for indicating errors, examples such as using a lighter red for borders and a slightly darker red for the message text to create clear separation from regular input fields creates this effect.
PROXIMITY
To be an effective interaction, error messages must appear directly at the location of the issue. Placing messages in proximity of the relevant input helps users understand the problem more quickly and makes the error harder to miss.
TEXT
Bolding the error text, though less prominent than colour can help it stand out from the rest of the content. In more text-heavy layouts, a subtle red underline can highlight errors without overwhelming the design.
ICONOGRAPHY
Icons like a red exclamation mark can reinforce the message, while a green check signals success. Position these icons next to the error message or within the affected field.
04 — BEST PRACTICES
Prevent early. Recover clearly.
PREVENTION
Designing safeguards to prevent errors from occurring are crucial. Timing of these error messages are core to its impact on the user’s interaction.
CONSTRAINTS
Disable the submission of a form if errors are detected
REAL-TIME VALIDATION
Provide immediate feedback as users complete each field. Provide access to a preview of the content entered before the final validation in order to give the user the possibility to make corrections before submitting the form.
HELPER TEXTS
Helper text or placeholders in a field to guide the user in filling in his information and avoid misunderstanding or data formatting errors. Additionally, providing shortcuts or auto complete in a search field to avoid misspellings in the search expression.
CONVENTIONS
Use navigation and interaction models that are already common in digital media. They are already known and mastered by users and reused, they simplify the handling of a new tool.
RECOVERY
Effective and immediate error messaging can help the user to understand the problem and how to resolve it. First, inform the user what has happened, then provide guidance on next steps or possible resolutions. Always present error states on the form.
SHORTCUTS
Offer a quick way to identify and resolve the issue.
ERROR CODES
Error codes provide a concise way to represent and communicate the nature of an error or failure within a system.
PRESERVATION
Preserve as much user-entered input as possible
BLOCKING PROGRESS
When errors block user activity on a page, the only way to move forward is to interact with the given solution. Don’t leave an error state without an error recovery instruction.