An open drawer must be dismissible via its scrim
Aliases: scrim dismiss · tap-outside to close drawer · light dismiss
What it is
Once a drawer is open, main content sits behind a translucent scrim that means “the side is in use; the middle is not tappable.” That scrim has to be a proper close path: tap the scrim, the drawer closes. The user was invited to the edge by a temporary layer; going back should hit the blocked region, not require hunting a close control inside the drawer. This is the leave path. It is not about what the drawer holds, and it does not fold in focus trapping or keyboard dismissal.
Why it happens
A drawer temporarily moves the task from the main surface to an edge. The scrim does two perceptual jobs: it lowers contrast on the main content so it is not a click target, and it turns that large now-inert region into the target for “I want to go back.” The target is large and sits where the work just was, which matches “return by the way you were asked to leave.” If the scrim is inert, leave paths shrink to a small in-drawer button or a system Back, narrower than the enter path, and the temporary layer can trap someone at the edge. Scrim dismiss must be one-shot and unconfirmed — the drawer is not asking a question that must be answered, so close must not stack another layer. A swipe back to the edge can run in parallel; it cannot replace the scrim tap. Not everyone finds the gesture; the scrim is the largest visible object in the open state.
Studying it
After opening a drawer, compare a live scrim, an inert scrim with only a close button, and system Back only. Record the first successful close method, taps on main content that were swallowed, time to close. Independent variables: whether the scrim responds, close-button placement, whether swipe is also supported. Dependent variables: leave-path discovery, frustration taps on what still looks like main content. A live scrim should become the most-used leave path.
Where it stops holding
If the drawer is mid-edit with unsaved content, a scrim close can drop data — that is using a drawer as an editor. Either offer save/discard, or do not host that edit in a drawer. A persistent sidebar dragged from the edge has no scrim; main content stays live and “close” does not apply. A full-screen modal has no “main content beside it” to tap, so scrim dismiss is not its channel. On touch, a too-light scrim is read as main content still being interactive; the tap neither closes nor hits the main surface. Dimming has to be enough for the scrim to read as a target.
Applying it
- In the open state, cover main content with a tappable scrim; a tap closes the drawer with no second confirm.
- Dim enough that main content is clearly not the target, while still recognisable as the page just left.
- Keep a close button for people who will not tap the scrim; do not make it the only exit.
- How to check: open the drawer and ask someone to “get back to the page,” without saying how. The first hit should land on the scrim and close. Then the path exists.