Showing a notice must not jump the layout
Aliases: reflow · CLS · error pushing layout
What it is
Once an inline notice enters the document flow, it pushes fields, buttons, and help text below it. Layout shift is that jump: controls the user is looking at or about to hit change position when a notice appears or vanishes. This is separate from whether the notice sits next to the field. Adjacency solves ownership; shift destroys spatial stability. Two lines of red appearing on blur can slide the next input out from under the pointer, so the click lands on the field after that, or the page feels as if it scrolled itself.
Why it happens
People continue an action by the screen coordinates of a control: the eye is already on the next box, the finger is already down. Inserting height translates every later coordinate while the motor plan still aims at the old one. The result is a wrong click, a wrong selection, or a sense that focus jumped. Shift also breaks reading: help text under the gaze is pushed away and has to be found again. Validation often fires on blur, on each key, or on submit—moments when attention has already been sent to the next action, not to “watch for errors.” Reserved height can kill the jump, but empty space itself speaks, suggesting a caption that was always meant to be there. What must stay put is the pixels currently in use, not the page’s total height forever.
Where it stops holding
If the first error appears outside the viewport and the user has not yet aimed at the next control, reflow is barely noticed; let the notice expand enough to finish the sentence. In grids, growing a cell is more local than reflowing a whole column; scrolling inside the cell can be better than shoving later rows. Animating the height open does not cancel the coordinate change; it only schedules the mis-click mid-motion, which is harder to debug. Keyboard users do not aim by pointer coordinates; for them the damage is a scroll offset that hitchhikes and context that disappears. If focus remains on the original field, the harm is smaller than for mouse users.
Applying it
- Reserve a minimum height under the field for the notice, or seat it in spacing that already exists between this field and the next, so the first error does not shove later items.
- When an error appears or clears, do not move a control currently under the pointer or focus; if something must move, let it be a block further down that is not yet a target.
- For multi-line errors, use an icon beside the field that expands, rather than letting every sentence lengthen the form again.
- Verify by recording the frame where blur triggers an error, and checking whether the pixels under the pointer changed. If they did, the shift is already a mis-click risk.