Motion as a Signifier: Keeping Decoration Secondary to Content

An interface element that visibly reacts to a cursor hovering over it is communicating something specific: this is interactive, act on it. When that same treatment is applied to something that isn't actually clickable, the interface is making a promise it doesn't keep. This isn't a vague aesthetic complaint. There's precise, well-established vocabulary for describing exactly what's gone wrong, and it comes from foundational design literature rather than from any particular framework or design system.

Affordances and signifiers

The distinction, as defined by Don Norman (first in The Design of Everyday Things and later clarified further on his own site), is between two related but different concepts:

An affordance is the actual, real relationship between an object and a possible action. A physical button affords being pressed, whether or not anyone realizes it. A signifier is the perceptible cue that communicates where and how to act: a raised edge suggesting a button can be pushed, a label reading "PUSH." Norman introduced "signifier" specifically because "affordance" was being used loosely to mean the perceived cue itself, when his original intent was the underlying possibility for action, independent of whether it's perceived.

This distinction gives a precise name to a specific kind of interface mistake: a hover effect, border highlight, or animated shine on an element that has no underlying affordance to signify is a false signifier. It's communicating a possibility for action that doesn't exist. A visitor who learns, correctly, that a hover effect usually means "clickable" will eventually try clicking something that visually promised interactivity and got nothing, a small but real erosion of trust in every other signal the interface gives afterward.

The practical implication: before adding a hover state, a border highlight, or any effect conventionally associated with interactivity to an element, the first question is whether that element is actually interactive. If it isn't, that specific vocabulary of effects is the wrong choice, not because it's ugly, but because it's dishonest about what the element does.

What non-interactive elements can still do

None of this means static content should be visually inert. It means the kind of motion applied to something non-interactive should draw from a different vocabulary (ambient, atmospheric, present) rather than the vocabulary conventionally reserved for "this responds to you."

Material Design, Google's design system, organizes its motion guidance around three named principles: motion should be Informative, Focused, and Expressive. The second of these is the most directly relevant here. Material's own language states that motion should "show users what's essential without creating unnecessary distractions." A subtle, continuous idle animation on a card's icon, a gentle pulse in scale or opacity, running independently of any user interaction, can signal that an interface feels alive and considered without ever implying the element is something to click. The distinction from a hover effect isn't subtle once named directly: a hover effect is conditional on interaction (it only appears in response to the user), while an ambient idle animation is unconditional (it runs regardless of what the user does), and that difference alone is often enough to keep the two from being confused with each other.

Material also names a specific, useful term for coordinating motion across multiple elements: choreography, deliberately limiting how many things move at once, and in what sequence, so attention has one clear place to land rather than being pulled in several directions simultaneously. A page where every card pulses in perfect unison reads very differently from one where each card's animation is offset slightly from its neighbors. The latter avoids the visual noise of everything moving together, which itself competes with whatever text or data the cards are meant to be presenting. Material's concrete timing guidance is worth citing directly too: larger animations generally read best in the 300-400ms range, smaller ones around 150-200ms. Outside that range, motion tends to read as either sluggish or too abrupt to track comfortably.

Restraint as a design principle, not an aesthetic preference

Apple's Human Interface Guidelines make a similar argument from a different angle, and are worth quoting directly rather than summarizing: "Add motion purposefully, supporting the experience without overshadowing it," and, more bluntly, "Don't add motion for the sake of adding motion. Gratuitous or excessive animation can distract people or make them feel disconnected." The guidelines also note a preference for quick, precise animation over slower, more elaborate motion, observing that brief, well-timed animation tends to read as lightweight and often communicates information more effectively than a longer, more decorative alternative.

Apple's guidelines also describe a "realism" principle worth knowing: motion that behaves the way physical objects behave (accelerating and decelerating naturally, respecting a plausible weight and momentum) tends to aid understanding, while motion that defies those expectations tends to disorient rather than delight. This is a useful, citable justification for why a restrained, physically-plausible ambient animation reads as calmer and more trustworthy than a flashier, attention-grabbing effect: the former behaves the way the eye already expects real objects to behave, and the latter doesn't.

None of this is standard design-literature terminology dressed up as "motion hierarchy." That specific phrase isn't an established term the way "affordance," "signifier," and "choreography" are. It's simply the visual-hierarchy principle (the idea that a design should have one clear place for attention to land, with everything else visibly secondary) applied specifically to motion instead of only to layout and typography. The tools happen to differ (timing, easing, which property animates) but the underlying question is the same one visual hierarchy always asks: what should this design be showing, and does everything else in it defer to that, or fight it for attention?

Applying the distinction

In practice, this comes down to a short checklist before adding motion to any element:

• Is this element actually interactive? If yes, motion conventionally associated with interactivity (hover states, cursor-following effects) is appropriate and honest. If no, that vocabulary is the wrong choice regardless of how good it looks in isolation.
• Is the motion conditional on user action, or does it run continuously regardless of what the user does? Conditional motion implies interactivity even when that's not the intent; ambient, unconditional motion generally doesn't.
• If several elements animate simultaneously, is there a single clear point of focus, or is attention being split evenly across everything moving at once? Staggering timing slightly, or limiting how many elements animate concurrently, is usually enough to fix the latter.

None of these questions require a design background to apply consistently. They follow directly from the plain distinction between what an element actually does and what its motion claims it does.