vocab.design

motion

Dimensionality

also called object dimensionality (community), origami dimensionality (community), floating dimensionality (community), spatial depth (community)

Giving interface objects a believable place in depth by folding, layering or flipping them, so a reader can tell where something went and where it will come back from.

A flat interface has no offstage. When a panel simply appears, it came from nowhere, and when it goes it goes nowhere, so a reader has nothing to remember and no expectation about how to get it back. Dimensionality is the decision to give the interface’s objects a believable third dimension: a card that folds open along its own edge, a sheet that lifts off the surface behind it, a tile that flips to show its reverse. The depth does not have to be literal or even plausible as physics. It has to be consistent, so that the same object folds back the way it folded out.

The three usual dialects are origami, layering, and flipping. Origami treats objects as sheets that crease and unfold along shared edges, so a summary can become a breakdown without the breakdown arriving as a separate screen. Layering treats them as cards stacked in front of one another, where a raised object is nearer and the one behind it is still there, which is what makes a bottom sheet feel like a thing sitting on top of a page rather than a region of it. Flipping treats an object as having two faces, front and reverse, and turns it in place: see card flip for that one on its own, and page curl for the fold and the flip working together on a single leaf.

It is worth separating from directionality, because the two are often praised in the same breath and answer different questions. Directionality is which way: it says that going deeper travels one way and going back travels the other, and it works perfectly well on completely flat panes sliding in a plane. Dimensionality is how many dimensions the interface is pretending to have: whether its objects are surfaces with edges, thickness and reverses at all. A shared axis transition is directional and flat; a card unfolding into its detail is dimensional and would still read as one object if it unfolded upwards.

The cost is that fake depth is easy to contradict. If an object folds out of the bottom edge it has to fold back into the bottom edge, and it must not be possible to see its reverse when the front is facing you, or to see it lit from a light source no other object in the scene agrees with. Once the depth is inconsistent, it stops being information and becomes decoration, at which point a plain crossfade is the more honest move. The scene is also expensive in motion terms, so gate it: readers who ask for less movement should get the state change, not the choreography, which is what prefers-reduced-motion is for.

Which word?

If you wantsay
objects need somewhere to come from and return todimensionality
motion should say where a view sits relative to anotherdirectionality

Related

See also: Spatial UI

Sources