Communicating motion design
Creating specs and guidelines for collaboration
Topics in this case study
- What is a motion spec?
- Visualizing motion
- Setting up the spec
- Sharing with engineers
- Accessibility guidelines
Motion in product design
Adding motion to interaction can add additional personality, provide feedback loops and help users interact with products¹. While motion can add a human touch to a digital products, it should be included with careful consideration. Unnecessary movement can distract users from their main tasks. Designers should also keep in mind how motion can impact an accessible experience. While it may seem subtle, there is a big difference in the experience of a transition that’s 400ms instead of 250ms. Or, a linear instead of ease in transition.
Motion design is in the details
To make things more complicated, there isn’t a smooth or straightforward way to spec these details. The process if oftentimes manual, time-consuming and prone to error. I remember when I first started out creation motion specs for my prototypes, I had absolutely zero clue how to do it. Turning to the internet for help, I wasn’t able to find any resources about how designers do this. I wanted to share my thoughts on how to put together the spec (after lots of trial and error) so that other designers can use it as well.
What this case study IS about
Providing clear motion guidelines and how to create specifications for engineering partners.
What this case study is NOT about
I’ll share some quick guidelines about visualizing motion to provide context about different components to include in the spec, but I will not go into depth about motion (when to use, best practices etc). There are some really great resources out there (see below).
Additional motion design resources
What is a spec? And how should designers do it?
A motion spec is a set of guidelines about positioning, size, opacity, scale etc. to share with engineering partners. There are several ways to go about this,
Visualizing motion
Once you have the motion finalized, start with defining the easing curves for an element’s speed, opacity, and scale.
Milliseconds, seconds, minutes??
Defining milliseconds
The motion can be specced in milliseconds to communicate with engineering partners. The more granular you can be the better.
Defining Frames
Frames are used by designers and can be shown with the milliseconds in the specification guidelines. The frame rate of video is measured by the number of frames recorded or played back each second, and it is denoted as fps or frames per second.
Types of UI Motion
A quick overview
Motion curve
Motion can be thought of as a curve (except for linear). It can be slow and then increase speed or the reverse.
Linear
Do not use except in the case of circular progress indicators.
Ease in motion
An ease in motion accelerates at the beginning of the motion and decelerates at the end of the motion.
Ease out motion
Using the sharp curve (also referred to as “ease in out”) elements quickly accelerate and decelerate. It is used by exiting elements that may return to the screen at any time.
Spring motion
Spring-based motions accelerate and then decelerates toward its descending value according to the relative force of the spring. The object then vibrates for a few milliseconds at the descending value. A spring motion can be jarring, so it’s recommended to use sparingly.
Setting up the Spec
Once the motion has been defined and approved, it’s time to set up the spec. The goal of the spec is to communicate the intricacies of the motion in detail to engineering partners.
Grab duration metrics
The duration metrics can be found in Principle, After Effects or whichever prototyping tool that you’re using.
Lay out all metrics
Create the initial spec for all the metrics that you’ll need. Some of the metrics that I use frequently:
The motion spec should have the object, timing and transition metrics. Common motion metrics include position, height, scale, opacity, position, and fill changes. An object may have multiple transition metrics, but with different timing.
For example, the object may scale from 0%-10% for 10ms, the Center y may transition for 250ms and the opacity may shift from 100%-90% for 100ms.
What is the Center y?
The x and y values (similar to a curved graph value) tell the position of the component within a screen. This is especially important for mobile app design specs.
Add the distance
Lay out the distance of the motion, documenting the milliseconds and frame rate.
Add the ease curve
Once the timing has been defined, add the ease curve.
Sharing with engineers
When it comes to sharing motion specs with your engineering partners, there are several ways to accomplish this. Oftentimes you’ll collaborate closely with engineering partners to implement the spec. There may be tradeoffs that you as the designer will have to make. How important is that ease transition for a drawer? Is a component tween between an active and disabled state necessary for the overall experience?
Documenting motion guidelines
I’ve documented motion specs in docs, sheets, Figma, or Sketch. If the motion design isn’t complicated, a full visual spec might not be necessary. Taking the dot motion spec below, providing the guidelines in a sheet or document including the component transitions can be sufficient.
Dot 1:
y-axis: -6pt y-axis
color: spring animation #5A5F75 — #0AB7B7
Accessible guidelines
Motion shouldn’t last more than 5 seconds
Careful consideration should be given to motion design, especially longer than 5 seconds. Motions that are longer in duration could be disorienting for users with low vision or cognitive impairments. Additionally, Don’t flash any components or content for more than three times in a one-second period. Some additional triggering animations could include a parallax effect or my personal pet peeve, scrolljacking (taking over the motion unrelated to the user’s actions).
Provide an option to turn off motion
An affordance should be made for any components or content that scrolls, blinks or moves longer than 5 seconds to turn off or pause the motion.
Provide screenreader guidelines for users with vision impairments
Motion design can also have additional accessible guidelines for users with different requirements from the interface. Providing guidelines through accessibility role or properties so they can be announced to the user with assistive technologies.
For example, a loading indicator should include additional guidelines for screenreaders.
`This page may take some time to load`
Summarizing the spec
To summarize, following these steps should provide a specification to share with engineering.
Define the motion
Grab the metrics
Lay out all the metrics
Add duration
Add the ease, timing, etc.
Consider accessibility
[1] What do I mean by products? These are digital experiences requiring the input of users who interact with their surfaces. Product designers craft these experiences, which includes defining the problem, investigating and validating it, then exploring solutions, designing the experience and the product, testing the experience, and then launching the solution.
