Best Practices for Designing Mobile App Error States

You see error states every time things go wrong in your app. It’s like trying hard to do something but experiencing an epic fail.

Errors are inevitable not only because “the err is human” but also because there is hardly any software developed so perfectly as to eliminate the chance of them. So, errors occur because users make mistakes while engaging with the user interfaces. Or they happen when the app fails. Causes can be different. But the way you mitigate the effects of an error is vital to the user experience.

Fail to handle the errors well and user frustration is ready! We all know what a frustrated user is going to do. Exactly! They are going to abandon the app. On the other hand, well-crafted error states and error messages can turn a moment of failure into a moment of joy.

Let’s now take a look at a few best practices of designing error states for a mobile app.

Think ahead of time

It’s better to avoid the injury than to clean the wound later on. So, while designing an app, think about all the in-app interactions that might result in error states. For example, it’s usually difficult to properly fill out a form on the first try. It is hard to do so when the internet connection is bad.

For example, if you are going to ask the user to choose a timeframe with the help of the date picker, then make sure to mark the past dates as unavailable. It doesn’t mean you cannot show them. It rather means that you can indicate them as inactive. You will simply avoid causing frustration to your users. Why make past dates selectable if you are going to show an error message afterward?

Find the right place for the validation message

Form validations are something to take care of. They are like a conversation with the user. If the validation message is not in the right place, it might lead to confusion. Usually, the best place to put the validation messages in is the context of action. Do not think for long: if you want to inform the user about an error here, then put the error message here, not somewhere else.

To make things clear, by “here” I basically mean at the right-hand side of the input or at least below it.

Choose the right color for the error message

Another important thing to take into account on mobile app error states is the color of the error message. There are two main rules regarding this:

1. The error text should be easy to read (in terms of color)
2. The error text should be noticeable

And there are a few color coding tricks you should be aware of:

• Red stands for error
• Green is for success
• Yellow stands for warning
• Blue stands for information

Make your error message clear enough

While you can say, “the username you have chosen is not valid,” you can also show ways as for how to fix this problem. Maybe a simple hint to try again is better than this? Think about this.

Never show dead-end error messages

Dead-end error messages are no good. They provide no useful information for the users. Just like this one:

Instead, try giving the user as much useful information as possible. Also, try to be creative.

And never ever show a raw mobile app error state like this one:

Messages like the one above are scary. Most of the time, app users are not developers, they are not tech-savvy enough to understand the context of such a message. Instead, try to tell your users what’s wrong in human words. Don’t try to look like a creepy robot!

Final notes

The best scenario would be not having to show error states at all. It is always a good idea to prevent errors from happening. But when they do occur, a well-thought error handling can teach users how to use the app without panic. With this in mind, now go make your app more joyful to use.