Form Error Messages: 6 Ways to Help Visitors Recover

The six points in the video

This is a silent video. The headings, explanations and labels below reproduce the information on screen.

1. 1

   Step 1: Explain the actual problem

   0:18

   Say which information is missing or needs correcting.

   On-screen labels: Specific field; Clear problem; Plain wording.

2. 2

   Step 2: Suggest a useful correction

   0:30

   Give an example or explain the required format.

   On-screen labels: Expected information; Example format; Practical next step.

3. 3

   Step 3: Use more than a colour change

   0:42

   A red border alone may not communicate the problem.

   On-screen labels: Written message; Clear field association; Visible feedback.

4. 4

   Step 4: Keep valid information

   0:54

   Avoid making people retype details that were already correct.

   On-screen labels: Keep valid entries; Correct only the issue; Less repeated work.

5. 5

   Step 5: Make feedback discoverable

   1:06

   People using keyboards and assistive technology need the message too.

   On-screen labels: Useful focus handling; Announced status; Relevant field.

6. 6

   Step 6: Confirm successful completion

   1:18

   Distinguish a received submission from an error state.

   On-screen labels: Success confirmation; Expected next step; Working submission route.

Common questions

Go further