1. React instantly
Let the user always be in control.
Every interaction has a corresponding reaction. All animations can be interrupted by the user at any time.
Never more than 10ms latency.*
Humans can easily perceive lags of less than a tenth of a second. Even a 50ms lag will make the experience feel sluggish and unresponsive. All animation should have less than 10ms latency.
Always interruptible or redirect-able.
An animation never has to run its course before the user can interact with the interface. In the case of responsive web where this may not be possible, designers should consider making animations as short as possible.
Left: When rapidly tapping a button the animation is interrupted and moves to its closed state immediately. Right: The animation has to finish in order to accept additional user input
Be courteous to content.
When menus take up over 50% of screen real estate, pause playback of video content so users don't miss a moment. This mechanic also aids with accessibility with regards to subtitles.
2. Move naturally
Objects should behave as they do in the real world
All objects have characteristics like mass, velocity and rigidity/elasticity. When on-screen objects behave like real-world objects, the effect feels natural and understandable. We create the effect of mass by considering the acceleration curves of the object. We create the effect of rigidity by considering springiness of the object.
Ease movement in and out.
As in the real world, an object moves slowly at first, picks up pace and then decelerates before stopping. Use bezier interpolation in your choreography to achieve this effect.
Top: Animation is eased in and out using bezier interpolation. Bottom: Animation has no easing (Linear interpolation)
Make objects feel 'light' to encourage interaction.
When a user swipes on an object that flies away after release, the object feels lighter and the interaction feels simple.
Never let objects overlap in the same plane.
Poor choreography leads your users to assume your interface is 'buggy'. Allow one animation to complete before another one begins.
Buttons should feel tactile.
Affordance should be added to buttons so they look and act like their real world counterparts.
3. Extend the mind
Interpret and enhance the user's intention.
A user's input is translated into a corresponding motion. We aim for a 1:1 relationship between what the user wants to do and the corresponding motion on screen.
Direct manipulation (Touch devices).
For most objects the user should experience that the input object is glued to the on-screen object.
Left: Card feels glued to the input area of the users finger at all times. Right: Carousel takes input from a users gesture in one direction before snapping to its completed state.
Interpret gesture force and direction (After release).
Interpret the speed, duration and direction of the user's interaction to respond with a proportional motion on release. E.g. A forceful gesture moves the object far and fast.
Generous tap areas and spacing between interactive elements.
Interactive elements such as buttons have minimum size dimensions which must be met for accessibility. In some instances it is good practice to offer hit areas that extend beyond the boundaries of the component. This offers affordance for imprecise motor function.
See Games GEL for more examples on tap areas.
Left: button has a large hit area defined offering affordance for low/impaired motor functionality. Right: No hit area has been defined meaning users have to tap the button precisely in order for a click to register.
Add hover states to animated elements.
Hover states aid with accessibility and prime the user for tap animation. Hover animations should follow mobile accessibility guidelines and not use colour only to convey meaning.
Left: Hover state has been enabled, priming a user that this is an input device. Right: No hover state enabled.
Play on release
Tap animations should play upon release (or at the end of click for desktop users). This prevents a user's thumbs obscuring the action.
4. Behave predictably
Do what the user expects.
Motion plays a key role in meeting the user's expectations of a product and its behaviour. These expectations and mental models arise from other software products and from the sum of all of the user's experiences leading up to this point.
Be a first class citizen on each platform.
Users have different expectations of a product's behaviour on Android, iOS and web. Respect user expectations by responding accordingly to platform conventions such as… long press, end of scrollviews and pull to refresh. Make the experience feel more native by inheriting platform styling features i.e. Rounded corners on buttons.
Make the experience more accessible, not less.
Motion is key to making an experience more accessible because it reduces cognitive load and perceived complexity. Users should be able to disable motion without limiting functionality. Motion is never the only way of communicating what the user can do.
Checklist
Questions to assess whether we have succeeded
Does it feel natural?
Do I feel in control?
Does it behave the way I expected it to?
Does it feel quick?