MotionDraft

Why is motion important?

Motion can reduce cognitive load on users and help inform them about how to use Pleo, as well as making the product delightful to use. It can help with:

• Expectation. Motion can reduce the gap between what a user expects might happen, and what actually happens.
• Continuity. This can apply to how a user moves through a feature from end to end, and also to the consistency of the user's experience across the application.
• Narrative. How a series of discreet moments or interactions can be linked together through motion to create a coherent story.
• Relationship. Informing a user through motion about how components and interactions relate to each other, in order to guide their understanding and decision making.

These guidelines aim to help you when creating motion for your components and features. But they might not be appropriate in every use case, so use your judgement when deciding what works best.

Three factors

The motion of an element should be determined by the context of the motion, the size of the element that is moving, and the distance that the element is travelling.

Context

An element can enter, move within, or exit the screen. This context affects both the duration and the easing that should be used for motion.

Entering the screen

Elements that enter the screen should use an ease-out curve. They should start fast and slow down as they reach their destination. They should also take longer to reach their destination than elements exiting the screen. A real world example is a Drawer opening.

Moving within the screen

Elements that move within the screen should use an ease-in-out curve. They should start slow, speed up in the middle, and slow down again as they reach their destination. Their speeds sit in between entering and exiting elements. A real world example is a Button background changing on hover.

Exiting the screen

Elements that exit the screen should use an ease-in curve. They should start slow and speed up as they leave the screen. It should furthermore take less time for an element to leave the screen than it should for an element to enter the screen. A real world example is a Drawer closing.

Size

The size of the moving element should affect the duration of the motion. Larger elements (e.g a Drawer) should move slower than smaller elements (e.g a Popover). As a rough guideline, the motion of large elements affect the layout of the page (for example an Accordion) whilst a small element does not (for example a Tooltip).

Distance

The distance that an element is moving should affect the duration of its motion. Elements that are travelling a long distance should move more slowly than elements that are travelling a short distance. An example of an element travelling a long distance is a Drawer component opening or closing, and an example of an element travelling a short distance is the "thumb" in a Switch component when toggling between off and on states.

Staggered animations

If you have a collection of the same item all animating in at once, you may want to stagger the animations. For example, a list of items which are all entering the screen at the same time.

Direction

Think about the direction of the motion as an element enters or exits the screen. For example, a list item should move up as it enters the screen, and down as it exits. Which direction you choose to animate in should ideally be based on the user's expectations and the context of where the element sits on the page.

Don't go overboard

Motion should be used to enhance the user experience, not to distract from it. It should be used sparingly and with purpose. Too much motion, or extreme animations, can make for a chaotic and overwhelming user experience.

Semantic motion tokens

To help you apply the concepts described on this page, we have defined a collection of semantic motion tokens in Telescope. We use these tokens to achieve consistent motion throughout our products and features at Pleo.