Designing Better Error Message for Web Form

By Taige Gao

As users have higher expectations for the websites they use, user experience and website performance have become crucial for brands. A small mistake on the website will lead to user satisfaction and the loss of users. Imagine the frustration when a user submits a form on a website and an error pops up, but the user cannot find or understand the error message.

In this blog, we will first discuss where web page error messages should appear, what color they should be shown, and when they should appear. Finally, we will focus on improving the content of error messages. Our aim is to reduce user frustration and increase user satisfaction through effective error messages.

Position

Alton et al. and Linderman and Fried studied that error messages should be displayed above form fields to attract the user's immediate attention. In contrast, Alsalamen and Shahin showed that error messages are best placed directly beneath the error. Sackler et al. supported both views and suggested that the right side outperforms the left side if an error message appears on the wrong side. For example, as shown in Figure 1, the error message appears at the top of the form which is easy for users to find and correct. We suggest that the location of the error message should be next to where the error occurred and follow the habits of most users when browsing the page.

Figure 1: Position of Error Message (from Amazon)

Color

The color of error messages in web forms is critical to user interface design. Designers must ensure that these messages are prominent enough to immediately draw users' attention to errors. Research from Powells et al., Inal and Ozen-Cinar, Chapanis and Crawford indicates that bright colors, such as red and orange, are effective in highlighting error messages. Since error messages serve as a warning, creating a high contrast between them and the website's background will make it easier for users to spot and respond to these alerts. For example, as shown in Figure 2, the error message appears at the bottom of the form and the text is colored as bright red which can easily draw users’ attention. The content of error messages should be marked with bright colors to attract the user's attention.

Figure 2: Color of Error Message (from Netflix)

Timing of Appearance

Current research disputes the optimal timing for displaying error messages. The ISO-9241 standard recommends that error messages be displayed immediately, however, Bargas-Avila et al. found that displaying error messages immediately will cause a significant increase in the number of errors made by participants when filling out forms. Users tend to ignore or close error messages without reading them while filling out forms. The appearance of error messages can cause users to feel frustrated and upset, especially if they have not completed their current task. For counterexample, in the form for registering a new user on the SPC website in Figure 3, the website begins to display error messages to the user before the user completes and submits the form. Our recommendation is to provide error messages to users after they submit the form to prevent users from getting frustrated prematurely due to errors.

Figure 3: Timing of Appearance (from SPC)

Content

The purpose of error messages is to help users discover and solve current problems; therefore, the content of error messages is the most important part. The content of a usable error message should include using polite language, using simple language, and providing users with a clear description of the error and solutions.

    1. Polite Language

One of the most important factors in designing error messages is maintaining a positive tone and avoiding blaming users (Eberts). Cuff's research indicates that the use of polite language can enhance user satisfaction and success. Additionally, designers can add appropriate apology phrases such as "please" and "thank you" to improve the user experience (Nielsen). When designing error messages, we should avoid using unfriendly words as shown in Figure 4. Using polite and apologetic language in error messages can positively affect the user experience, whereas using accusatory language may leave users with a negative impression of the software they are using.

Figure 4: Avoid Using Impolite Error Message (Image Source)

    2. Simple Language

Simple language should be used in error message design to ensure that users can easily understand the cause of the error and how to resolve it (Harbach, Marian, et al, Linderman and Fried, and Shneiderman). Complex sentence structures and difficult compound words in error messages will confuse users and is hard for them to gather the necessary information. Therefore, it is essential to avoid complex grammar and sentence structures to enhance the readability of the message. Error message design should be considered not only for expert users but also for new users. Hence, designers should use simple language and avoid using technical words for error messages.

The example displayed in Figure 5 contains technical terms which are unfriendly to most users. Ordinary users cannot find the cause and solution of the error from such information. In contrast, the revised error message in Figure 6 enables users to identify the cause of the problem and find a solution more easily. While both messages convey the same meaning, the error message in Figure 6 is more accessible to both ordinary users and technicians. Therefore, using simple language in error messages is recommended because it can increase problem-solving efficiency and user satisfaction.

Figure 5: Error Message with Technical Content (Image Source)

Figure 6: Error Message with Simple Language Content (Image Source)

    3. Description and Solution

Effective error messages must provide users with a clear description of the current error and instructions to solve the problem. Users often become frustrated when encountering errors and will abandon the current task if a solution to the problem is not found in time (Linderman & Fried). While error messages should include a clear description of the error and its solution, they should avoid excessive details that could confuse users. Figure 7 shows an example of a Microsoft account sign-in error message. The message offers a brief explanation of the error's cause: 'You’ve tried to sign in too many times with an incorrect account or password.' It also outlines the potential risks associated with the error and provides two solutions: resetting the password and signing in with a different account.

Figure 7: Description and Solution Character (Image Source)

Conclusion

Displaying form error messages is a small part of a website, but it can significantly impact users, especially if they cannot understand their mistakes. This confusion can drive them away from the site. Designers must develop clear error messages to help users comprehend and rectify issues. The quicker the error messages guide users to a resolution, the less it will affect user satisfaction.

In this blog, we conclude that error messages must have the following characteristics: error messages should appear close to where the error occurs; use bright colors, such as red; appear after the user has completed the current task; use polite language; use simple language; avoid using technical terminology and provide specific explanations of the cause of the error and how to correct it to help users easily recover and complete their tasks.