Elevation levels need a consistent light-source assumption
Aliases: light direction · lighting model · shadow direction
What it is
Cards throw shadow down and a little right; a floating button glows on all sides; a top banner’s shadow points up. All three “have height,” yet on one screen they cannot be ranked: the lamp seems to sit on the ceiling, inside the object, and under the floor at once. Height is comparable only under a shared light-source assumption. When shadow directions fight, people do not read three storeys. They read three local effects that will not convert. A single source is usually above and to one side, the default guess for real scenes. Once the product’s lamp starts to travel, the elevation ladder comes apart.
Why it happens
Recovering shape and relative height from shadow assumes a few lamps and a direction that holds still. The visual system uses that constraint to put every penumbra on one ruler: distance from the same lit ground. Contradictory directions tell the system these shadows are not one physics, so recovery drops global height and treats each object as decoration. Omni-glow is especially damaging: it cancels “light from one side,” the object looks self-luminous, and height becomes halo radius, incomparable with a card that casts downward. Switching from top light to foot light (shadow pointing up) can also be read as a dent, flipping the height sign.
Studying it
Give one set of objects consistent upper-oblique shadows, random directions, and a mix with self-glow. Ask for a sort by “how far from the screen.” Look at rank correlation under consistency, and whether random falls toward none. You can also draw arrows for the implied light on every shadow and measure angular spread on one screen. Past about a right angle of disagreement, height ranking gets reliably worse. Full 3D rendering is unnecessary; flat projections already expose direction conflict.
Where it stops holding
Brand illustration and a hero can keep theatrical lighting if they stay out of the control-layer elevation system. A night-photography marketing page may use footlights on purpose; that is mise-en-scène, not a shadow to copy onto form controls. Some game HUDs use inner glow for selection; selected is not height, and should be named apart from elevation so engineers do not treat glow and drop shadow as one rung. If a dark theme still insists on cast shadows, the light assumption must still be consistent — consistency will not restore visibility of a shadow on a dark ground.
Applying it
- Freeze one light direction for the product (upper left, or straight above). Every drop-shadow offset points the same way. Do not let a component “look nicer” as a centred bloom.
- Keep inner glow and lit strokes for selected, error and focus. They are not a layer above drop shadow.
- At intake, overlay a new component’s shadow arrow next to arrows already on the page. Reject a mismatched direction.
- Check: on one page, draw an arrow from each object’s centre toward the darkest part of its shadow. If the bundle opens much wider than a tight cluster, retune offsets until it closes, then have people rank those objects by height. If rank is still noise, look for self-glow mixed into the cast-shadow system rather than deepening one shadow.
Related
- Same group: F3.06.1 Shadows express how elements stack · F3.06.3 Shadows are almost invisible on dark grounds
- Nearby: F7.07.2 A consistent spatial model reduces navigation confusion · F5.08.1 In dark mode, surface luminance rather than shadow expresses height · E4.16 Overlay stacking and escape
- Search terms:
light source·elevation·cast shadow·z-depth