A shared element keeps the object's identity continuous

What it is

If the thumbnail in a list and the large image on a detail page merely fade out and fade in, people have to re-ask “is this still the item I tapped?” Morphing the same patch of pixels across the two pages solves an object correspondence problem: the visual system treats before and after as one object, not two surfaces that happen to look alike. A shared element preserves identity. It is not “a new panel growing out of a button” — that is a different object declaring belonging.

Why it happens

Attention files objects as object files: location, surface, label. Navigation breaks the file unless a spatio-temporally continuous surface welds the old location to the new one. The shared element is that weld: the thumbnail’s bounds become the large image’s bounds with no “old object dies, new object is born” in between. Once correspondence holds, people carry the original label onto the new page and search less.

When correspondence fails, two surfaces melt into each other and identity is worse than a hard cut — a cut at least offers two complete objects; a false correspondence offers a nonexistent in-between object. Common fate groups “who belongs with whom.” A shared element answers “this one is still this one.”

Studying it

Object-correspondence and tunnel-effect paradigms: when the middle is occluded or deformed, do people still report “the same one”? On interfaces, compare navigation with and without a shared surface; measure recognition (“is this the item from a moment ago?”), whether return lands on the original row, and search time on the detail first screen.

Independent variables: whether a surface is shared, magnitude of mid-frame deformation, how similar list items are. Dependent variables: identity recognition, return localisation, first-screen search time. A grid of highly similar items is the stress test: without a shared path, mix-up rates rise.

Where it stops holding

• If the two pages are not the same object (an ad slot swapped for another image), sharing forges identity and must be abandoned.
• If the user is not looking during the transition, the weld never forms; they return to an end state.
• Identity continuity does not by itself explain the spatial model: the large image may still leave people unsure which level of the hierarchy they are on.

Applying it

• From a collection to detail, morph that item’s primary visual across the two pages; do not fade in a separate image on each side.
• Share the surface that is treated as the object. Do not morph the card’s shadow and chrome along with it.
• Check: freeze a mid-transition frame and ask which list item this is. A wrong item means correspondence was not built.

Related

• Same group: F7.04.2 Extreme size change in a shared element distorts identity · F7.04.3 When a shared element cannot map, fall back to an ordinary transition
• Nearby: F7.07 Motion expressing spatial relations · F7.01.2 Motion shows where an element came from and belongs · A2.03 Continuity
• Search terms: shared element · object correspondence · hero transition