Feedback in place
The feedback of an action happens where it happened: the container shows that it is working and how it ended, and the words come right above.
On this page
The rule
Every action that takes time or changes a state answers in the very container where it happened: while it runs, the container dims and a hand-drawn stroke spins in the middle; at the end, a check in moss or an X in wine, and the Notice comes in right above, with the words. No toast in a corner of the screen.
Test result:
The three states
Saving…
Saved
Not saved
The sequence
- Loading: the dim comes in (320ms) and the stroke spins until the answer arrives. The container takes no taps, and a second submit is ignored.
- It worked: the check is drawn in moss, stays for a moment, and the dim leaves. The success Notice comes in right above.
- It failed: the X is drawn in wine, stays for a moment, and the dim leaves. The error Notice comes in above and takes focus; what the person wrote is still there.
- Reduced motion: nothing spins or gets drawn; the drawing appears finished, and the word says the rest.
Do and don’t
Do
The form dims and shows the check; the "Reminder saved" notice appears right above it.
Feedback shows where the person is looking, on any screen size.
Don’t
A "Saved!" toast in the bottom corner of the window that disappears in 3 seconds.
On a 4K screen, the corner is half a meter from the form: the person saves and does not see whether it worked.
Writing
- Loading: the verb in -ing ("Saving…", "Deleting…").
- End: one or two words ("Saved", "Not saved"). The Notice carries the whole sentence and what to do.
Components
- StatusOverlay: the dim, the drawing and the word.
- Notice: the words of the result, above the container.
- Large screens: why feedback does not go to the corner.