A physical metaphor unifies hierarchy, space, and motion
Aliases: Material metaphor · paper metaphor · spatial metaphor
What it is
Material treats the interface as sheets in space: they occupy places, occlude one another, catch light, and move with mass. Hierarchy, spacing, and motion are not three separately legislated decoration systems. They are corollaries of one unifying physical metaphor. A sheet that slides in from the side is arriving from offstage; a dialog that pops is landing on a higher layer. Motion that teleports a sheet, or throws a shadow that fights the direction of travel, does not fail as “animation quality.” It breaks the spatial story.
This does not set how high a layer sits, how a ripple walks its state machine, or how color is pulled from wallpaper. Those are components after the metaphor lands. The question here is whether three kinds of expression still describe one physical world.
Why it happens
People predict screens with paper, cards, and drawers from real desks. Once the UI promises “these are sheets,” prediction switches on: what is above hides what is below, movement has a path, rest has a place. The metaphor is economical because one promise governs three jobs — who sits on whom (hierarchy), how much gap remains (space), how arrival happens (motion) — so authors need not invent a grammar per screen.
Breakage is three jobs talking past each other. Hierarchy speaks in overlap, motion speaks in fade-in as “appear,” space is a flat grid with no depth: people cannot tell whether the new thing covered the old or replaced it in place. The mechanism of unity is that every appear, move, and vanish still has a seat in the sentence “sheets in space.” If it does not, people switch to guessing.
Where it stops holding
Info-vis, maps, and 3D editors have their own spatial models; forcing sheets fights the data space. TV and desktop viewing distances differ, so the strength of the physical cue must drop; a “flippable card” from a phone becomes noise at ten feet. A brand that chooses a fully flat, depthless language is refusing the metaphor and should not borrow its motion vocabulary. Print and static marketing have no time dimension; the motion corollary does not apply, only the still of hierarchy.
Applying it
- For each kind of “appear,” pick one physical sentence — cover, slide in, expand — and reuse it across the product. Do not let the same class of dialog fade in on one screen and rise from the bottom on another.
- Keep motion paths consistent with occlusion: a sheet arriving from the right should not throw shadow changes unrelated to that travel.
- Treat leftover space as the gap between layers, not padding added for “breathing.”
- Verify by drawing key flows as a side-view section: which sheets sit above, from which edge they enter, on which layer they rest. Every place the section cannot be told is a metaphor break. Then slow the animation on device and check that travel still matches the section.