When occlusion cannot be avoided, allow a temporary move
Aliases: peek overlay · hold to preview · draggable sheet
What it is
On a phone, a filter panel covers some part of the picture no matter where it sits — the screen is not tall enough to mint a third band. At that point the panel must be draggable, or a hold-to-preview must collapse it for a second, returning on release. A temporarily movable overlay admits that occlusion will happen, but refuses to weld the compare loop under an opaque sheet.
The iOS magnifier following a finger, map search results that pull down to reveal the map, a retouching app that hides tools on long-press — those buy a few seconds of seeing.
Why it happens
On a small viewport, “never cover” and “controls still large enough” often cannot both be true. A welded layer shuts the “look” of the compare loop for good; a movable or peekable layer turns “look” into a short, voluntary act. That act has a cost (one extra hold), paid only when comparison is needed. A welded layer makes every tweak pay the cost of not seeing, and the total is higher.
The move has to be reversible and must not drop state: drag away and back, the slider values remain; hold to see the original, release into the same parameter set. If moving commits, closes or resets, people will not move, and the mechanism might as well not have been given.
Where it stops holding
On a wide desktop “unavoidable” is rare. Side-place first; do not lead with a draggable overlay — as a default it becomes windows floating everywhere. Users who cannot drag need an equivalent button (“hide panel”). In realtime collaboration, dragging the layer must not change the object’s lock or selection, or the move will be filed as an edit. A modal that carries a legal confirmation must not be movable onto a surface that is then tappable — that would make the confirmation skippable.
Applying it
- On small screens, filter, crop and annotation panels get a hold-to-preview or a draggable title bar; on release they return to the same place and the same parameters.
- Users who cannot drag get a Hide panel button, not a gesture-only escape.
- While moved, do not commit, do not drop focus, do not change the selected object.
- How to check: change a parameter on the region the layer covers, move the layer to look, come back. If parameters reset, the layer closed, or looking required finishing and reopening the flow, the escape still cannot be used.
Related
- Same group: F1.09.1 An overlay must not cover the object it is operating on · F1.09.2 Overlays that need comparison should sit to the side, not the centre
- Nearby: F1.10 Viewport compression after the keyboard · C2.05 Finger occlusion
- Search terms:
temporarily movable overlay·peek·hold to preview