Website Status Messages Explained: Loading, Success and Result Feedback

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: Name the action being processed

   0:18

   Use feedback that relates to the task the visitor just attempted.

   On-screen labels: Submitted action; Current progress; Relevant wording.

2. 2

   Step 2: Distinguish progress and success

   0:30

   Saving and saved communicate different stages of the operation.

   On-screen labels: In progress; Completed; Failed operation.

3. 3

   Step 3: Report the real result

   0:42

   Do not show success before the underlying action has actually succeeded.

   On-screen labels: Confirmed outcome; Accurate message; Useful next step.

4. 4

   Step 4: Make updates programmatic

   0:54

   Appropriate status semantics can let assistive technology announce changes.

   On-screen labels: Programmatic status; Suitable announcement; Meaningful update.

5. 5

   Step 5: Avoid unnecessary focus jumps

   1:06

   A status update can communicate useful information without taking focus away.

   On-screen labels: Current focus; Available feedback; Continued task.

6. 6

   Step 6: Test the feedback journey

   1:18

   Check delayed responses, failure cases and assistive-technology output.

   On-screen labels: Slow operation; Failure feedback; Accessible announcement.

Common questions

Go further