UX Design Practices : Error Screens and Messages

The best error message is the one that never shows up. It is always better to prevent errors from happening in the first place by guiding users in the right direction ahead of time. But, when errors do arise, well-designed error handling not only helps teach users how to use the app as you intended, but also prevents users from feeling ignorant thus urging to display the error messages on screens.

Error occurrence while using an application :

Users often face errors while using an application, sometimes because they make a mistake and sometimes because the system fails to complete its process.

The reasons why an application throws an error could be:

1. The application does not understand user’s input

2. The application fails to complete an expected action

3. The user may not be aware of the app’s process

UX Design Practices : Error Screens and Messages

WHY PREVENTION IS NECESSARY?

Sometimes, they happen because users make mistakes. Sometimes, they happen because an app fails. Whatever the cause, these errors and how they are handled, have a huge impact on the user experience. Bad error handling paired with useless error messages can fill users with frustration, and can lead to users abandoning your app.

UX Design Practices : Error Screens and Messages

SOME POINTS TO REMEMBER!

An effective error message:

  1. The error message needs to be short and meaningful.
  2. The placement of the message needs to be associated with the field.
  3. The message style needs to be separated from the style of the field labels and instructions.
  4. The style of the error field needs to be different than the normal field.

Best UX Practices for Errors

1. Be Clear And Not Ambiguous

Write error message in clear and simple language. User should be able to understand the problem while reading an error message.

If error message is ambiguous and user is not able to find the reason of message, then it is of no use. User cannot do anything to fix the problem and it badly impacts the experience of the product.

UX Design Practices : Error Screens and Messages
2.Avoid using technical jargon.

Express everything in simple words, don’t assume users to be tech-savvy so that they understand message’s context.

Try to use simple and plain language without referring to implementation details.

If there is a need to mention technical and complex details, then place them in a troubleshooting section and direct the user so that he can resolve the issue quickly.

UX Design Practices : Error Screens and Messages
3.Incorporate Imagery And Humor Into Error States
UX Design Practices : Error Screens and Messages

Error states are an excellent opportunity to utilize icons and illustrations, because people respond better to visual information than plain text. But, you can go further and incorporate unique imagery that is branded to match your app, yet still be helpful for your users. It’s a good way to both humanize your message and communicate the app’s personality.

UX Design Practices : Error Screens and Messages
4.Be Humble — Don’t Blame User

A good error message is humble. It conveys the issues gracefully to its user without blaming him for his actions.

UX Design Practices : Error Screens and Messages

The user can perform an incorrect action again and again. But the design’s responsibility is to inform him about his mistakes in a good way.

5.Show actual field which the user missed.

Never confuse the users where he did the mistake. Show them clearly which field they missed or entered incorrect data.

A good error message has three parts: problem identification, cause details if helpful, and a solution if possible.

Whenever an error occurs, user wants to fix it as soon as possible. The error message should have enough information for user that guides him how to get out of the erroneous situation.

The message can also direct the user to some other place or person from where he can get detailed help about the problem.

UX Design Practices : Error Screens and Messages
6.Provide Appropriate Actions

Actions are important part of an error message. Appropriate actions provide guidance to user about the next step.

Actions are possible routes to solve the problem. A message can contain one or more actions for the user.

UX Design Practices : Error Screens and Messages