Placeholder Image

Subtitles section Play video

  • Many modern tools and programs struggle to design clearly visible error messages, which can negatively impact the user experience.

  • To avoid this, you can follow four guidelines to increase the visibility of error messages. First, display the error message close to the error source.

  • Second, use noticeable, redundant, and accessible indicators.

  • Third, design errors based on the impact.

  • And fourth, avoid prematurely displaying errors. Now let's take a look at what each of these actually mean. First, we have to display the error message close to the error source.

  • This proximity helps users recognize the error message and easily understand what it is related to.

  • Because if the error message is displayed far from the error itself, it is less likely to be seen by our users and they may struggle understanding which input the error message is related to. Second, we must use noticeable, redundant, and accessible indicators for our error messages.

  • For example, if a user had to fill out a form and missed the required field, we could increase the visibility of the error by using bold text, including a visual that indicates there's an error, and by highlighting the All of these elements should be visually distinct from the rest of the page so they are easily recognized.

  • This is why error messages are traditionally displayed in red. Third, we should design error messages based on their impact.

  • Some error messages are crucial for the user to know and might lead to severe negative consequences if they are disregarded.

  • Other error messages are good to know, but not crucial for the user journey and user experience.

  • The design of the error message should clearly indicate which of these two scenarios it addresses.

  • For example, if an e-commerce shop expects shipping delays because of bad weather conditions, this is a good information to share with their users.

  • However, they should avoid using red formatting to indicate that there is no severe error than the user encounters. Fourth and last, we must avoid displaying the error messages prematurely.

  • This is an important part of designing effective error messages.

  • Because a premature error message is like grading a test before the student even had a chance to answer.

  • This can make users feel annoyed, belittled or confused, all of which we want to avoid.

  • To get the right timing of an error message, we must consider what the expected user behavior is and how error-prone the interaction is.

  • For example, when users have to create a new password that must comply with multiple safety requirements, it is helpful to the user is typing the password.

  • This is because the complexity of the task makes it error-prone and the error message during the process of typing guides the user to avoid providing a password that is not fulfilling the safety requirements.

  • However, if a user is typing their own phone number, we should not display a premature error message that indicates that the phone number has too many digits.

  • In this scenario, we can expect the user to know how many digits their phone number has and the task overall is less prone to errors. To summarize, to make your error messages effective, they must be visible to your users.

  • To accomplish this, you should follow the four guidelines for highly visible error messages that we just discussed. Thanks for watching.

  • If you want to see more of our UX videos, take a look at these over here and consider subscribing to our channel.

  • On our website, nngroup.com, you can access our free library of over 2,000 articles.

  • You can also register for one of our UX courses that offer live hands-on UX training.

Many modern tools and programs struggle to design clearly visible error messages, which can negatively impact the user experience.

Subtitles and vocabulary

Click the word to look it up Click the word to find further inforamtion about it