Overlays that need comparison should sit to the side, not the centre
Aliases: inspector panel · comparison overlay · side sheet
What it is
Translation review needs the source in one eye and the draft in the other. A centred modal over the source turns comparison into “remember a sentence, close, reopen”. Park the editor beside the source and both passages can be in view; comparison is spatial juxtaposition, not a temporal switch. A side-placed overlay is the default structure for compare-as-you-go work: the layer and the content share the viewport, rather than taking turns occupying it.
A dictionary bubble against the word, a design-tool inspector along the canvas, a refactor preview beside the file being changed — that structure. A centred confirm is not.
Why it happens
Comparison wants two patches of information near the fovea at once, a short saccade between them. A centred modal removes one of them at page scale, and comparison is forced through working memory: look at A, close, look at B, reopen. Capacity is small, and the open/close motion interrupts it. Side placement makes A and B two stable regions, left-right or above-below; saccades replace memory.
Side placement spends content width. That is a deliberate trade: one fewer column of body copy, the compare loop back. A product that maximises content width and puts tuning in a centred modal wins on width and loses on comparison.
Where it stops holding
Decisions that do not compare (subscribe or not, grant a permission) are better centred: they block the surface behind so the user is not carried off by the content while tapping. On a very narrow screen a side panel crushes the content into an unreadable strip; fall back to a half-height sheet that still shows the upper or lower half, not to a fully covering centre modal. A multi-column desktop that already has a persistent inspector should absorb the extra controls into that rail, not open a second side overlay and mint a third band.
Applying it
- Translation, annotation, inspectors, property panels — default to the left or right of the content (the side opposite the writing direction), not a fullscreen centre.
- On a narrow screen, degrade to a half-height sheet with the content behind still visible and scrollable to the row being compared.
- While the side layer is open, do not freeze scrolling of the content behind — comparison often needs the object scrolled into the remaining gap.
- How to check: with the layer open, without closing it, can both the object and the field being edited be pointed at. If a simultaneous pair cannot be pointed at, the layer is still a centred design.