Motion is not only style. In interface design, motion can support usability by clarifying expectation, continuity, narrative, and relationship.
This week introduces Issara Willenskomer's 12 Principles of UX in Motion and connects each principle to motion design decisions students can build in After Effects. The goal is not to memorize effect names. The goal is to understand what motion is doing for the user's comprehension.
Keyframes, eases, masks, parenting, cameras, and effects are the construction tools. They make motion happen, but they do not automatically make motion useful.
UX motion answers the question: what does this movement help the user understand? It can show where something came from, what changed, what matters next, or how objects relate.
As you read the article, separate the principle from the technique. A principle explains why motion supports usability. A technique is one possible visual execution.
Motion should reduce the gap between what the user expects and what the interface does. If a panel behaves like a physical object, its timing should feel believable.
Motion helps the user follow changes within one scene and between scenes. It prevents interface states from feeling like disconnected screenshots.
Motion creates a sequence: this happened, then this happened, now this is the result. That sequence helps the user build a mental model.
Motion can show which objects belong together, which object controls another, and which elements are primary, secondary, or background.
Object behavior aligns with user expectations when temporal events occur.
AE build: Graph Editor, speed curves, spatial interpolation.
Staggered timing defines relationships and hierarchy when new elements or scenes appear.
AE build: sequenced keyframes, layer offsets, precomp timing.
Linked movement creates spatial and temporal relationships between interface objects.
AE build: parent pick whip, null controllers, inverse/delayed movement.
An object changes utility while maintaining continuity, like a button becoming a progress indicator.
AE build: shape morphs, scale/roundness changes, path animation.
Numbers, labels, or data change dynamically so the user can follow the meaning of the update.
AE build: text animators, counters, source text keyframes.
Revealing or concealing part of an object creates continuity and clarifies utility.
AE build: masks, track mattes, shape-layer reveals.
Layered objects use spatial position to show which content sits above, below, in front, or behind.
AE build: stacked layers, opacity, blur, shadow, z-order timing.
A new object is created from an existing one, giving the user a clear origin story for duplicated content.
AE build: duplicated layers, animated copies, repeater setups.
Background or secondary scenes are partially hidden so the user understands another space exists without losing the current context.
AE build: blur, dimming, translucency, modal overlays.
Different objects move at different rates to establish temporal hierarchy and separate primary content from ambient content.
AE build: layered position keyframes, camera depth, 2.5D space.
Objects appear to have spatial origin, depth, or physical orientation as they enter, leave, fold, or rotate.
AE build: 3D layers, card flips, fold reveals, camera/null rigs.
Camera-like movement preserves spatial narrative while moving into, out of, or across interface spaces.
AE build: camera moves, scale transitions, null-controlled zoom systems.