UX: Error messages

As a UX designer, you know that providing a seamless and intuitive user experience is key to keeping your users engaged and satisfied with your product. But have you ever stopped to think about the importance of error messages in this process? Believe it or not, clear error messages can make or break the user experience, and here’s why.

It will help the user to find out if something goes wrong. However, not every error message is as helpful as you might think. The errors you as a developer want to see, are different from the user.

A simple error message for invalid login credentials of caffeineCritics.com

First prevent

The best errors are those that never happened. It is better to stop users from making mistakes in the first place. Below is a simple example, if you just have an input of type number for the amount of cars someone has they can fill in negative numbers, fractions and even text.

    <label>How many cars do you have</label>
    <input type="text" id="input" />

Result of the above HTML

Adding a minimum of zero, step size of 1, and type number, we make sure only valid numbers can be filled in. I added the validation on input so the error will be there directly. This will stop the user from triggering an error you need to deal with.

    <label>How many cars do you have</label>
    <input type="number" id="input" step="1" min="0" oninput="this.reportValidity()" />

Result of the above HTML

Error message

The moment you need to show an error, make sure the error message contains two things: the source and the action required. Always try to avoid “something went wrong” messages.

Error message of “Something went wrong”

A clear source

When an error appears, you should know what triggered it. If you click a button and within a fraction of a second a message appears, it will be clear. However, if you have a process that runs in the background, make sure you tell the user where the error came from. So “uploading of the image failed” will be unclear if the user did not just upload an image. If we change it to “uploading the banner image for updating your profile failed” the user knows it should go back to their profile to fix the error.

Error message of “Uploading the banner image for updating your profile failed”

Clear action required

The message “uploading the banner image for updating your profile failed” is still not perfect. The user will not know how to fix it. Do they need to try again? Was the image too big? Was the format wrong?

So to make the action clear we make it “uploading the banner image for updating your profile failed because the image was too big”
Keep in mind, the user wants to know “how to fix it” not “what went wrong”. So avoid an error “the server did not respond” and direct the user more with “something went wrong, please try again”. This is a very common mistake, we as developers want different errors compared to the user.

Error message of “Uploading the banner image for updating your profile failed because the image was too big”

Keep it short

The longer a message is, the easier it will be to misread it. Be a bit creative with crafting the message. Focus on what the user wants. The user does not want to **upload **a banner image, they just want a **new **banner image. We will use the UI to communicate that it is an error so we do not have to use words for it, this is done with a red color, big cross ,buzzing noise, ect. If the user knows the image is too big we do not have to say it has to be smaller. So “The new banner image for your profile was too big” will give all the info needed.

Error message of “The new banner image for your profile was too big”

Conclusion

Error messages are critical to UX. They help users identify issues & find solutions, improving their satisfaction with your product. But not all error messages are created equal. Follow these best practices for effective error messaging:

1. Clear and specific: provide source + action required.
2. Short & concise: avoid unnecessary details.
3. Visual cues: draw attention to the error message with color & design elements.

By following these guidelines, you can create error messages that are informative and helpful, improving your product’s overall user experience.