Overlay stacking needs a depth cap
Aliases: overlay depth · stacked layers · too many surfaces
What it is
Drawers, dialogs, popovers, and action sheets can all sit above the main surface. Each added layer is another “close this first” to remember before getting back to work. A stack depth cap says these temporary layers must not grow without bound at the same moment: one layer above the main surface is already spending attention on transience; two start to confuse where return goes; three is usually lost. This limits how many layers exist at once, not whether one kind of layer may nest inside itself — that nesting is a different rule.
Why it happens
Every layer claims “handle me first.” With one, the return path is clear: close it and the main surface is back. With two, the path forks: does closing the top return to the next layer or punch through to the main surface? Working memory has to hold a layer stack, and everyday UI does not draw that stack; people guess from dimming and size. As count grows, dimming stacks on dimming, size differences compress, and the stack becomes unreadable. Temporary layers are meant to be short-lived; at high depth the short-lived starts to act like navigation without navigation’s path display. The cap is not aesthetic. It is stopping while the stack is still readable. Implementation z-index can grow forever; perceived “which layer am I on” cannot.
Studying it
From a main task, route people through 1, 2, or 3 temporary layers, do the top action, and return. Record whether they can say how many layers remain below, and how often closing one layer is taken as already being back on the main surface. Independent variables: mix of layer types (popover then dialog, and so on), whether dimming levels are distinguishable. Dependent variables: depth estimate, wrong-layer close, abandon. “Thought I was back” should rise sharply at three.
Where it stops holding
An OS permission sheet over an app dialog cannot be counted in the app’s cap, but the app should not add another. A wizard that changes page is not adding a layer; it is swapping content in one layer. A persistent master-detail or non-modal inspector is not a temporary layer and does not enter this stack. A transitional animation frame may look like two layers; count the resting state.
Applying it
- Before opening a new layer, count temporary layers already on stage. If one is already there, prefer close-old-then-open, or put the content in the current layer.
- Do not “pop another layer” to finish a sentence the current layer did not say.
- When depth is truly required, move to in-page structure or a navigation stack that shows a path.
- How to check: at the topmost action, ask “where does close take you.” A blank or wrong answer means depth is already over the cap.