Motion

Easing

Easing mimics the way real-world objects accelerate and slow down over time. It applies to all UI elements exhibiting motion.

The opposite of easing is linear motion. UI elements displaying linear motion go from stationary to full-speed, and full-speed to stationary, instantaneously. Such behavior exists nowhere in the physical world and appears halting to users.

Overlay

In 2D space, there is no depth, and UI elements may only move along the X or Y axis. Overlay creates the illusion of foreground/background distinction in the 2D space of UIs. By simulating depth, overlay allows elements to be hidden and revealed according to user needs.

Information hierarchy is an important consideration when employing overlay. For example, the first thing users should see in a note-taking app is a list of their notes. Then, overlay could be used to unveil secondary options for each message—like Delete or Archive.

Offset and Delay

When several UI elements move at the same time and speed, users tend to group them together and overlook the possibility that each element may have its own functionality.

Offset and delay creates hierarchy between UI elements that are moving at the same time and communicates that they are related, yet distinct. Instead of complete synchronization, the timing, speed, and spacing of elements are staggered, resulting in a subtle “one after another” effect.

As users journey between screens, offset and delay signals that multiple interaction options exist.

Cloning

Cloning is a motion behavior wherein one UI element splits off into others. It’s a clever way to highlight important information or interaction options.

When UI elements materialize within an interface, they need a clear point of origin that links to an element already on-screen. If elements simply burst or fade into existence out of nowhere, users lack the context needed for confident interactions.

Parenting

Parenting links the properties of one UI element to the properties of others. When a property in the parent element changes, the linked properties of child elements also change. All element properties may be linked to each other.

For instance, the position of a parent element can be tied to the scale of a child element. When the parent element moves, the child element increases or decreases in size.

Parenting creates relationships between UI elements, establishes hierarchy, and allows multiple elements to communicate with users at once. For this reason, parenting is most impactful when used in real-time interactions.

Obscuration

Picture a frosted glass door. It requires interaction to open, but it’s possible to discern (to some extent) what awaits on the other side.

Obscuration works the same way. It presents users with an interface that calls for interaction while simultaneously revealing a hint of the screen to follow. Navigation menus, passcode screens, and folder/file windows are common examples.

Transformation

Transformation occurs when one UI element turns into another. For example, a download button transforms into a progress bar, which transforms into a completion icon.

From a UX perspective, transformation is an effective way to show users their status in relation to a goal. This is especially helpful when the progression between UI elements is linked to a process with a start and a finish (e.g., downloading a file).

Parallax

Parallax is displayed when two (or more) UI elements move at the same time but at different speeds. Here again, the intent is establishing hierarchy.

• • Interactive elements move faster and appear in the foreground.
• • Non-interactive elements move slower and recede to the background.

Parallax steers users toward interactive UI elements while allowing non-interactive elements to stay on-screen and preserve design unity.

Value change

Representations of value (numerical, text-based, or graphic) are abundant in digital interfaces, appearing in products ranging from banking apps to personal calendars to eCommerce sites. Because these representations are tied to datasets that exist in actuality, they are subject to change.

Value change communicates the dynamic nature of data representations and informs users that data is interactive and may be influenced to some extent. When values are introduced without motion, users’ willingness to engage with the data decreases.

Dimensionality

Dimensionality makes it seem as though UI elements have multiple interactive sides, just like objects in the physical world. The behavior is achieved by making elements appear as if they are foldable, flippable, floating, or bestowed with realistic depth properties.

As a narrative device, dimensionality implies that the different sides of a UI element are linked and makes for seamless screen transitions.

Masking

Masking is the strategic revealing and concealing of parts of a UI element. By altering the shape and scale of an element’s perimeter, masking signals a change in utility while allowing the element itself to remain identifiable. For this reason, detailed visuals like photographs and illustrations are ideal candidates.

From a usability perspective, designers can implement masking to show users that they are progressing through a series of interactions.

Dolly and Zoom

Dolly and zoom allow users to "travel" through UI elements spatially or increase their scale to reveal greater levels of detail.

• • Dolly: Dolly occurs when the user's point of view gets closer to (or further from) a UI element. Imagine a person with a camera walking up to a flower to get a closer shot.
• • Zoom: With zoom, the user's point of view and the UI element remain fixed, but the element increases (or decreases) in size within the user's screen. Now imagine that the person stays put and uses the camera's zoom feature to make the flower appear larger.