E4.16.2per-layer dismiss pathdesignresearch

Each layer needs its own close path

Aliases: layer dismiss · independent close · overlay escape

What it is

Every layer on the stack must be closable on its own, without closing the layer under it, and without clearing the whole stack. A per-layer dismiss path is an exit that belongs to this layer: a popover has outside-tap or Escape, a drawer has its scrim, a dialog has cancel. Missing that exit, people can only tear down the layer below, or they stick. This is not about how deep the stack may go. It is about how each layer leaves.

Why it happens

Layers are promises with different lifetimes. A popover may live for one click; a dialog lives until the question is answered. If close is implemented only on the outermost or only on the bottom, a short-lived layer is forced to die with a long-lived one, or a long-lived one is taken down by one mistaken close. Independent paths let the top leave while the lower stays, which matches “I only wanted to put this menu away; the dialog is not answered yet.” The path also has to be discoverable: a close only the program can fire, with no visible control, is no path. Hit regions must not overlap so that one tap closes two layers — independent on paper, chained in fact. Independent does not mean “every layer gets the same ×.” It means each layer has a leave method that matches its type and that acts only on itself.

Studying it

Build a two-layer stack (a popover over a dialog). Remove the top close, remove the lower close, or let one tap chain-close both. Record whether the top can close alone, whether the lower is closed by mistake, whether people stick. Independent variables: presence of each layer’s close control, overlapping hit regions. Dependent variables: single-layer close success, chained mis-close. Chained conditions should show the highest rate of the lower layer disappearing by accident.

Where it stops holding

When the top layer is a system sheet, the app cannot give it a close path; that exit is the system’s. During an uninterruptible submit, a layer’s close path may refuse, but it must say why and return after the submit. If closing the lower logically requires the upper to go first (the upper is the lower’s child), auto-collapse the upper and then close the lower so the user still did one explicit “close current,” not one tap that detonated two layers.

Applying it

  • Register a close path for each kind of temporary layer that closes only itself, and keep it available while that layer is the top.
  • Do not let a close hit region punch through to the layer below.
  • After the top closes, the lower layer should still be there and should get its close path back.
  • How to check: open two layers and close only the top. If the lower remains, the paths are independent. If both vanish, they are chained.

Related

  • Within the group: E4.16.1 Overlay stacking needs a depth cap · E4.16.3 Back gestures must match closing one layer at a time
  • Adjacent: E4.10 Modal dialogs · E4.09 Drawers
  • Search terms: dismiss path · light dismiss · close overlay

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/E4.16.2