motion · microinteraction · perception
Yellow fade technique
also called highlight fade (community), flash highlight (community), highlight on change (community), YFT (community)
Washing a just-changed element in colour and letting it fade back out, so a change made without a page reload is still noticed where it happened.
The wash is a receipt for something the page did without reloading. 37signals shipped it in Basecamp and wrote it up on Signal vs. Noise in February 2004, answering a question that updating a page in place had just created: the page did not reload, so what changed? A form post used to redraw everything, and the reader found their place again by reading the new page. When one row is rewritten where it sits, nothing announces it, so the technique paints that row, drains the paint away, and leaves the eye parked exactly where the change landed.
Read as a microinteraction the loop is unusually tidy, which is part of why the pattern outlived the decade that produced it. The trigger is not something the reader did to this element: it is a change arriving, from their own edit somewhere else on the page, from a write that finally came back, or from a teammate. The rules decide the scope, and the scope is most of the craft, because a wash over the container teaches nothing and a wash over the whole list teaches less than nothing. The feedback is the wash. The result is the changed content, still sitting there once the colour has gone, since the wash points at a record and never was one.
Yellow is in the name and is the least interesting thing about it. What the colour has to do is read as marked rather than as broken, at a strength that leaves the text underneath legible, and a dark interface needs a different value from the paper-white page Basecamp was drawn on. What it must not be is the only signal. Colour alone fails use of color, and a wash that has finished fading is no signal at all, so pair it with something that stays: an edited chip, an icon, a timestamp. Readers who ask for reduced motion are owed the same information without the move, which usually means the highlight simply holds, and holding only works if it was legible standing still.
Both neighbouring words are narrower than they look. A fade is the move and carries no message; this technique is a fade spending itself on one specific sentence, and a flash or a brief outline would say the same sentence differently. Optimistic UI is a rule about time, that a result may be shown before the server has agreed to it, and it says nothing at all about how the reader is meant to notice. The two pair naturally, since an optimistic change is exactly the kind that lands with no page load behind it, and a toast is what you fall back on when the change happened somewhere the reader cannot see. Where the wash earns its keep is inline edit and autosave, the two places a page routinely changes under its own reader. Where it stops earning is repetition: a wash on every keystroke is noise, and an interface that highlights everything has told you only that something, somewhere, happened.
Which word?
| If you want | say |
|---|---|
| showing which thing on the page just changed | yellow fade technique |
| an element appears or leaves without moving | fade |
| showing the result before the server confirms it | optimistic ui |
Related
Variant of: Microinteraction
See also: Inline edit