Kinetics System

Kinetics & Interaction

Kinetics System

How Interaction Influences Kinetics

Interactive motion design is deeply rooted in traditional motion graphics for TV and movies. But when motion that's functional, structual, and expressive is used purposefully within digital products, other considerations for motion design are introduced.

Reactive vs proactive motion

Reactive motion is triggered by user interaction. Proactive motion is triggered by system events. While both kinds of motion will have a Kinetics Personality, they need to be handled a little differently to create the most effective interaction.

Reactive motion tips:

  • Use ease-out acceleration. This makes the interaction feel faster. The click or tap that triggers the motion is forceful enough to act as the ease-in. Explicitly showing the ease-in could make the transition seem slower.
  • Don’t emphasize the movement: avoid ease-over, ease-under. Keep it sensible, unsurprising. Intuitively follow the interaction.
    • Clicking a “Next” button progresses a user through five sections of content. A progress indicator on the left side rail tracks completion.

Proactive motion tips:

  • Don’t overwhelm by using too many of these. Save them for opportune times when you won’t disrupt flow. Try not to show in the middle of a task, and avoid showing too many at a time.
  • Mind the lifespan of elements that will automatically disappear. There should be enough time to read and understand messages.
  • Consider emphasis. Since this is system-triggered motion, users are less likely to see it right away. Consider using ease-in-out acceleration to make it more noticeable.

Proactive motion as seen in Toasts

A toast animates into view, then fades away.

Proactive motion in Notification alert on the global navigation

A red notification dot animates on the bell icon in a global navigation bar.

Instant vs Continuous Motion

Most of the motion we think of is triggered instantly: the user or system does something, and an animation follows. Continuous motion happens in response to a continuous user or system input: the scrolling of a page, the dragging of a finger, the tilt of a device, a stream of data, etc.

  • Instant motion: easing is built into the transition.
A user taps a red minus sign icon on a navigation menu, causing the entire navigation item to slide to the left revealing a red “delete” button.
  • Continuous motion: easing comes from the interaction, like panning, scrolling, dragging, etc. Use linear interpolation (ease-none) for pan-controlled motion assets like Lottie.
As a user scrolls through an opportunity page, the continuous scrolling’s perception of speed matches that of the user
  • Snap states while swiping: you’ll need an instant motion when the user releases the pointer. Set duration based on the remaining distance.
A user swipes left on an account, revealing four action buttons.

See Motion & Mobile Devices for more on continuous interactions.

Rapid Succession

Some animations will play in rapid succession when it’s trigger is easy to set off repeatedly. This is especially common with keyboard-based interactions. Test for these scenarios to make sure the effect is not only desirable, but unlikely to harm users with vestibular issues. (Learn more about Accessible Kinetics

As user hovers over various icons in rapid succession and pauses over a single icon, a blue spotlight appears as a feedback hover
As a user hovers slowly over icons and buttons, popover tooltips appear as a feedback to the hover.

Speeding Up with Implied Direction

A key way that motion serves interaction is to make long tasks appear to go faster. You control this directly through speed and acceleration. But you can also use implied direction – pairing the beginning or end of a movement with a fade – to shorten a transition time.

Examples:

Clicking a “Next” button progresses a user through five sections of content. A progress indicator on the left side rail tracks completion.