Make no mistakes with error messages

Dos and don’ts when you need to show an error message to the user.

Mabiloft
Mabiloft
5 min readApr 11, 2022

--

A perfect 404 page from Lego.

A few days ago I found myself having to close some practices on a site. In order to do so, I had to upload a document: I clicked on the upload button, selected a file and then got surprised by the following error message: “Please select the document to upload”.

I tried again, but there was no way: I wasn’t able to upload the document I selected because… er… I had to select the document to upload.

We don’t want to put shame on the platform we are talking about, so here’s a visual representation of the error.

At this point there are two options: the platform isn’t working properly or the error message is confusing and misleading. And guess what? It’s the second one, or rather, both cases.

Developing a product without errors is impossible. However it’s important to learn how to manage the errors and most importantly don’t let the users get lost into them. So let’s see what are the dos and don’ts when error messages come.

Prevent user errors

Some errors are unpredictable and may depend on malfunctions, many others are “triggered” by the user: it is important, in addition to managing these errors, to learn how to prevent them. It can be done by working on the user experience of the product, to avoid the user having unexpected behaviors not foreseen by designers and developers.

Here’s a quickly example: in a flight booking system, it is important to ensure that it is not possible for the user to select for the return flight a date earlier than the outbound flight date.

In the correct example, past dates are less visible and not clickable by the user

Of course in our mind it seems crazy to select a return flight before the outbound one, but let’s not forget that this action does not necessarily happen on purpose: it may happens to tap on the screen unintentionally, but it’s important that that click is managed properly.

There are two types of prevention that can be made: the first one is blocking the user before they do the wrong action and the second is suggesting the right thing to do. For example, on an account creation screen, you can point out the criteria for creating a strong password to the user.

Mistakes must be understandable and specific

A user who encounters an error message must alway know how to solve it.
It is not enough to write “Error” to get away when something goes wrong: you have to explain the problem in the simplest way and with the most understandable language for the user.

An “invalid_ft” error code is fine for a developer, but it is good to explain to the user that the action was stopped because the uploaded file is not the right type. Better yet to suggest the supported file types to the user

The example just reported shows a correct use of error messages, but, as we have read a few lines above, it is always better to prevent: in this specific case it would have been useful to prevent the user from selecting files with a wrong format than the valid ones.

The user must know that something has gone wrong

There is only one thing that confuses a user more than an unclear error: the total absence of the error message.

For example, think of anyone who is buying something online: the user selects the color of the object, enters the card details, clicks on the “Finalize purchase” button and then? Nothing. It happened that the user has entered an incomplete card number, but wasn’t notified of this and therefore doesn’t know what to do to fix it. This is the worst situation that can happen: the user is dissatisfied, and the site has lost the opportunity to make money by selling the item.

The errors must be visible

It seems obvious, but often errors are not immediately visible to the user and this causes confusion. It may happen that in a long page with many input fields, an error is reported in a hidden point of the page, due to the user that has scrolled to another section of the page. It’s important to pay attention to cases like this, and make sure that the error messages are always visible to the user.

One mistake doesn’t have to erase all the work done

Who has never entered data, clicked on the submit button, the page reloads and an error message appears, but all the data entered has disappeared? It has happened to me many times, and it’s really annoying.

No matter if the problem is caused by the user or by the software, it is always good to try to preserve as much as possible the data entered by the user.

Preferably, it will be very helpful (and will certainly please those who are faced with the error), suggest solutions based on the problem, or, even better, automatically correct them.

Errors must give hints on what to do next

An error doesn’t have to be catastrophic, it can also simply be a warning of a product that is no longer available in store.

In this case, giving the user some ideas is important and appreciated: in addition to showing items similar to the one requested, you can give indications on the future availability of the product, or give the possibility to notify the user when the object will be of new available.

Album artworks by Anjunadeep

In short, no one likes errors in software, but knowing how to manage them correctly can make the difference. Error messages also have their own user experience and knowing it is important.

--

--

Mabiloft
Mabiloft

We are a team of developers and designers based in Padua, Italy. We make mobile applications and web apps, using Flutter, React and React Native.