Errors are inevitable. They may occur as users’ key in information. They may happen when an app fails. They may arise due to problems with the backend. Irrespective of the cause, how errors are handled has a considerable impact on the end user’s experience.
Poor error handling that includes confusing error messages can leave users frustrated and, in the worst case, cause them to abandon and uninstall the app. The most successful mobile apps have a knack for not just good log filtering and error prevention but also smooth error handling.
Well-designed error states can turn what was an instance of failure into an opportunity to build customer loyalty. Here’s a look at how you can design error states.
Prevention First
The first step towards handling errors is preventing them from happening in the first place. It all begins when designing the app. An experienced developer ought to be familiar with the most common interactions that could precipitate system errors.
For instance, users tend to fill forms incorrectly on their first attempt and this could cause errors if the data provided isn’t in the format required. System errors may also arise if an app fails to sync data with the host due to a poor internet connection.
By anticipating these kinds of incidents during the app design phase, you can substantially reduce the likelihood of errors. For example, you could apply format restrictions in certain fields of a form such that users are forced to key in data in the right format. We look at such form validation in more detail below.
Form Validation
A form is a medium for exchanging information. As such, it should be characterized by a coherent conversation between the user and the app. This won’t happen smoothly unless there’s a validation process. When designed and executed correctly, form validation can minimize errors and reduce uncertainty.
For example, inline validation is much more effective than post-submission validation. The process of filling a form can be tedious and time-consuming. The last thing a user wants after submitting the form is to be forced to go back and correct errors. Inline validation notifies users of wrong inputs in real-time. Also, error messages should be adjacent to the problem field to hasten troubleshooting.
Using the Right Color
Colors are a much more powerful means of communication than many people realize. The average person is more likely to remember visual content than text. Color works at an instinctive level. But not just any color will have the same effect.
For example, you can use the color red on error messages, yellow for warnings and green for successful actions.
Incorporate Imagery and Humor
Imagery can be just as powerful as color. It humanizes your message. People are better simulated by illustrations and icons than plain text. If you can brand the error imagery with your colors and logo, the better.
You could go one further and incorporate humor. It can help defuse an otherwise frustrating situation for the user. That being said, humor requires tact and won’t always be appropriate. In certain situations, humor may be viewed as a show of contempt and carelessness.
As a rule of thumb, humor works best when the error in question is simple and easy to correct. The more complex the error is, the more formal your communication should be.
Clear Message
Consider the error message ‘your email is invalid’. The wording doesn’t state what’s the exact problem with the email. Did someone else already use the email to register? Is there a typo? Is it being rejected because it’s internet email? The more articulate and reasonably detailed the error message, the better.
Sometimes, there may not be enough space near the field to fully describe the nature of the error. You could overcome this by providing a brief description of the error accompanied by a link the user could click on for a more elaborate explanation.
Do all that’s within your power to prevent errors on your mobile app. But when the errors do occur, carefully-designed error states are vital for ensuring a pleasant experience for end users.
