Light, material, and depth signal interactivity

What it is

Fluent uses light, material, and depth to answer one question: can I act here. A surface catches highlight as the pointer approaches, interactive regions separate from the desktop by material, command layers lift slightly — not to make the UI look more “premium,” but to mark operable objects. Call this light as interactivity cue. Inert content does not catch light, swap material, or rise; things that can be acted on do.

This is not Material’s physical metaphor for “who sits on whom.” Depth there is hierarchy first. Light and material here are affordance first. An interface that gleams evenly everywhere has switched the cue off.

Why it happens

Mouse and pen travel over a surface before contact. People need a forecast that they have not yet pressed. Highlight, edge light, and material difference carry that forecast: the object under focus or pointer is picked out of the background. Touch has no hover, so depth and material difference have to work at rest — tappable blocks and read-only blocks cannot share one flat skin.

Once the cue is merely decorative, the signal-to-noise collapses. If every card is frosted and every row glows, eyes cannot pre-filter. The mechanism demands variation: light follows focus and pointer, material difference follows “command versus content,” depth follows “transient layer versus base.” All three answer interactivity, not brand mood.

Where it stops holding

High contrast, reduced transparency, and reduced motion will shut off parts of light and material; interactivity must fall back to shape, spacing, and a focus ring, and must not bet affordance on acrylic alone. In a touch-first session with no pointer, hover highlight never happens; rest-state material difference and hit size must already be in place. When visualization uses light to encode values, do not reuse that light to mark buttons. Print and static decks have no pointer; the cue does not apply.

Applying it

• Specify a catch-light / material-swap / slight-lift response for clickable, draggable, and focusable surfaces; read-only text and illustration explicitly do not catch it.
• Separate command surfaces (toolbars, flyouts) from content surfaces by material or depth; do not frost the whole window as one sheet.
• When the system reduces transparency, replace light and material with solid fills plus a focus ring; do not let operable objects vanish.
• Verify on a still with all text painted out: ask someone to mark “what can still be clicked.” Misses and false marks are light and material failing to speak. Repeat with reduced transparency on. Controls recognizable only while acrylic is on have bound affordance to decoration.

Related

• Same group: R4.10.1 The same app must work across mouse, touch, pen, and gamepad · R4.10.3 Free window size means layout cannot assume a fixed canvas
• Adjacent: R4.03 Windows platform conventions · R4.09 Core Material conventions
• Search terms: light as interactivity cue · Fluent · affordance lighting