Explore Interactive Motion Design
Learning Objectives
After completing this unit, you’ll be able to:
- Identify the different types of interactive motion.
- Explain best practices for designing interactive motion.
Hello, Interactivity
When you design transitions and component motion within digital products and experiences, it's also key to think about the interactions that trigger them. The different types of interactive motion include: reactive, proactive, instant, continuous, rapid succession, and implied direction motion.
Reactive, Proactive
Reactive motion is when a user triggers an activity. For example, the animation within a progress indicator component is an example of reactive motion. As users advance through each content section, they trigger the progress indicator animation, which tracks completion on the left side rail.
An example of reactive motion within the user interface.
Proactive motion is when a system, such as an app, initiates the activity. For example, when a system animates an error icon if a user does not complete a required field and fades in information underneath the required input.
An example of proactive motion within the user interface.
Instant, Continuous
Instant motion is when a user or system performs an action, such as clicking a button or swiping on a section of a page, and animation follows. With instant motion, acceleration easing is already built into the transition.
On a touchscreen, a user swipes left, revealing four action buttons in instant motion feedback.
Continuous motion is a response to a constant user or system input, such as a user scrolling a page or data streaming to a real-time dashboard. For continuous motion, acceleration easing comes from the interaction, like scrolling through a page.
A user scrolls for information on a page.
Rapid Succession
Rapid succession motion plays in quick succession when the trigger is easy to set off repeatedly. Such as when a user hovers over various icons, and a spotlight appears as feedback to the hover when they pause on single icons. Rapid succession is common with keyboard-based interactions.
An example of rapid succession motion in the user interface.
Implied Direction
Implied direction motion is the pairing of the beginning or end of a movement with a fade to shorten a transition time. A key way that motion serves interaction is to make long tasks appear to go faster. You can control this directly through speed and acceleration. But you can also use implied direction to shorten a transition time. For example, when a user clicks a Next button, content moves to the left and fades as new content fades in, letting users know they're advancing to the next section.
An example of implied direction in the user interface.
Best Practices
For each kind of interaction, there are best practices to follow to ensure your motion design aligns with Salesforce Kinetics System goals, principles, and personality attributes.
Reactive Motion
- Do: Create functional motion to help users maintain their flow within a task and respond nimbly and sensibly to triggers. And use ease-out acceleration to make the interaction feel faster.
- Use caution with: Emphasizing the movement. Keep it sensible, unsurprising, and intuitively follow the interaction.
Proactive Motion
- Do: Consider the lifespan of elements that automatically disappear on-screen, including enough time for users to read and understand messages. And think about emphasis. Since this is a system-triggered motion, users are less likely to see it right away—consider using ease-in acceleration to make it more noticeable.
- Use caution with: How much you use proactive motion—save it for opportune times, such as a popup message at the end of a flow, when you won’t disrupt the user flow, and keep motion functional.
Instant Motion
- Do: Design so that it’s functional, enabling users to move through a flow uninterrupted. Touchscreens afford the ability to control motion instantly, triggered by a discrete gesture like a button tap.
- Use caution with: Snap states while swiping. Use an instant motion when the user releases the pointer and set the duration based on the remaining distance.
Continuous Motion
- Do: Ensure continuous gestures track 1:1 with the motion.
- Use caution: When the gesture is complete–for example, when the user lifts their finger–use a Kinetics motion to complete the transition. And ensure the speed and acceleration of this finishing motion complements the remaining travel distance of the element in motion.
Rapid Succession Motion
- Do: Test with users first to ensure the effect is desirable and unlikely to harm users with vestibular issues. Use a delay in the entry animation when users rapidly hover over UI elements to alleviate the rapid succession motion.
- Use caution with: Focus states on items during keyboard navigation—they can seem slow. Test in rapid succession and ensure keyboard interactions are desirable in rapid succession.
Implied Direction Motion
- Do: Pair fade with movement in implied direction for elements in a long task flow.
- Use caution with: Cascade-like treatments—when elements appear one after another—when you load full pages. This can cause the opposite of the intended effect to shorten transition times and contribute to an increase in perceived latency.
Next, you learn best practices for designing accessible and functional experiences using Salesforce Kinetics System guidelines.