No system can work without errors.
Error message examples: consider placement and timing
Effective error messages appear immediately after an error is committed and are strategically placed on-screen, at the optimal moment, so the user can’t miss them.
Above we have two error message examples. The left payment form uses a pop up to inform the user that they are required to fill in their details in order to make a payment. The user has to click out of the pop up to make these adjustments, which adds an additional step to their user journey. There is also the risk that the user will forget the pop up’s instruction and will be forced to return to the pop up. This can be time-consuming and frustrating — bad error message UX.
The right form uses inline validation. Clearly visible instructions immediately appear under each input field if the user leaves them blank. The user receives instant feedback and the required adjustments are clearly marked.
Error message examples: make them actionable
No matter how well-designed or strategically positioned, your error message is no good if it doesn’t offer the user a way out.
The user not only needs to know that there is a problem, but also how to rectify it. Actionable error messages are ones that tell the user what to do next in order to complete a task.
This is one of the best error message examples we’ve seen. The system not only informs the user that their email address is already in use, it also tells them how to log in by recovering their username.
Error message visual examples: make them noticeable
Error messages are a waste of time if the user doesn’t notice them. As Jakob Nielsen puts it, “the very worst error messages are those that don’t exist”. Large fonts and garish pop ups quickly become irritating. So how do you make sure your messages get through? With the right use of color.
Color is one of the best tools for user validation. Error messages are typically displayed as red text/warning icon against a white background for contrast.
Note that color should not be the only indicator of an error. In order for your web or mobile design to be accessible, Jakob Nielsen advises to include redundant cues that color-blind users can see.
With smart technology (Augmented Reality, Artificial Intelligence and Voice user interface design) on the up, human-user interaction needs to be as natural as possible. Learn more about making your prototype accessible here.
4 — Error message text examples: be specific
So you’ve mastered the error message aesthetics, you’re so close! Don’t let your design down with convoluted explanations or obscure codes and abbreviations.
Here’s some advice on how to make sure your error message is readable and has a human tone:
- Be empathetic, not technical e.g. never show raw error data such as ‘an error of type 2 has occurred’
- Be informative and precise by indicating that something has gone wrong and what it is exactly
- Be consistent by using the same tone and precision in each message
- Always give advice on how to fix the problem
As Jonathan Colman explains, a good error message is simple and clearly worded, a bad message won’t provide details about what happened, where it happened, or what to do next, and an ugly error message will completely conceal the problem.
Below are some error message text examples:
Can Error Messages have a Personality?
Murphy’s Law states that “Anything that can go wrong will go wrong”. While things go wrong, adding a little bit of humor to error messages can lighten up the environment, at least for that moment. Given this context, organizations have started to build error pages with enchanting personalities.
The World of 404s
Consider a common case of 404 Error. Huwshimi has figured an interesting way to display 404 error pages. One of them is this: “A ninja stole this page. You must return when the moon has friends and the fox is borrowed.”
Frye/Wiles Creative Agency, displays the same error using the metaphor of a missing bird.
Mobile App Hipmunk uses their mascot to deliver error messages in a soothing way. When hipmunk app stops responding due to possible internet issues, this is the error message: “Whoops! We can’t reach Hipmunk. Please make sure you’re connected to the internet, or try again later.”
When the app needs additional information, the app asks for it. In below screenshot, the app needs potential travel dates before displaying results. This is asked in a nice way, by mentioning that its difficult to show results based on existing criteria and hence, would need travel dates to show appropriate results.
One anonymous marketer at Everyday IX once, quoted,
“Imagine if all products treated digital communication as a conversation with a real human being that possesses thoughts, goals, and emotions, not just the recipient of a conglomeration of technology restraints? It wouldn’t cure all design ailments, but it would certainly soothe frustration along the way.”
As quoted above, An error message is a sensitive conversation the product initiates with a human being, at a time when something has gone wrong, sometimes, terribly wrong. At such a point in time, error message need to be emphathetic, information and helpful. Of course, error messages are life-less and non-human. Yet, they can be made human in the way they work. In short, error messages need to have a strong personality — of being a torch bearer to the user.
Do your error messages have a lively personality?
Source —
