F1.09.1overlay target occlusiondesign

An overlay must not cover the object it is operating on

Aliases: picker covering target · blind adjustment · covered object

What it is

A colour chip on the canvas is being changed; the picker opens centred on the chip and the chip disappears. Which chip, and whether the new colour fits, cannot be checked in the moment. A date picker covering the row being edited, a comment box covering the sentence being annotated — the same failure: the overlay covers the object it is changing. The layer can be large and well designed. Once the object leaves sight, the operation is a blind adjustment.

What is covered is the object, not the trigger. A covered trigger is a different problem. What is missing here is the thing being changed.

Why it happens

Parameter tuning is a compare loop: change, look at the object, change again. Cut the “look” and people fall back on the last glimpse in working memory, which will not hold fine differences of colour, position or wording. The more the layer occupies the object’s own region, the cleaner the cut. Large centred panels are especially prone, because they are designed to take attention — including the scrap of attention the comparison needed.

A caret pointing at the trigger does not compensate. The caret answers “who opened this”. It does not answer “what does the object look like now”. For the seconds the object is covered, both answers are missing.

Where it stops holding

An object that was never on screen (labelling a document not yet opened) cannot be covered; the layer can sit anywhere. A fullscreen editor that replaces the object with a live preview inside the layer (a code-theme preview, a full-page layout) has moved the compare loop inside; if the preview is live, the external object is not being blocked. A game pause menu covering the game is the point of pause — that surface is not meant to be operated. A tiny tooltip covering a corner of the object still lets the loop run if the critical feature (hue, a digit, a face) remains visible.

Applying it

  • Layers used to tune while looking — colour, date, type, filters — sit outside the object’s rectangle by default, leaving its full visible area.
  • If a complete berth is impossible, at least leave the property being changed: the chip’s colour, the sentence’s wording, the avatar’s crop.
  • Do not put this kind of compare-as-you-adjust in a centred modal. Centred modals are for decisions that do not need the external object in view.
  • How to check: open the tuner, take a screenshot, and ask someone who has not been operating “which region is being changed, and what does it look like now?” Both questions must be answerable from that frame, or the object is covered.

Related

  • Same group: F1.09.2 Overlays that need comparison should sit to the side, not the centre · F1.09.3 When occlusion cannot be avoided, allow a temporary move
  • Nearby: F1.08 Overlay anchoring · F1.02 Feedback co-located with the action
  • Search terms: overlay target occlusion · blind adjustment · picker covering target

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/F1.09.1