Skip to main content

Motion

How we use motion in PIE.

Introduction

Thoughtful and appropriate motion in design can greatly enhance the user’s experience and make our products feel professional and enjoyable. There are two ways we categorise motion in our design system: functional and expressive.

Functional motion refers to that which we use as default in our UI elements to provide an enhanced experience. Expressive motion refers to motion that is more exaggerated and playful.

The objectives of these guidelines is to provide guidance for using motion in our UI elements, and to empower designers to design with motion in mind so that we can evoke an emotive experience.

Principles

These principles serve as a guide when using motion in our products.

Bright, abstract illustration depicting purposeful.

Purposeful

Motion always feels intentional and appropriate for the context it’s being used in. It aligns with the user's goals and commands focus without causing unnecessary distractions.

Bright, abstract illustration depicting smoothness.

Smooth

Motion mimics real-world physics to always look and feel fluid, natural and seamless. Motion is predictable and tells a story without feeling jarring or out of place in our products.

Bright, abstract illustration depicting responsiveness.

Responsive

Motion informs and guides our users by providing visual feedback and driving a user's attention. It reinforces hierarchy between elements and is timely to avoid feeling intrusive or sluggish.

Bright, abstract illustration depicting delightfulness.

Delightful

Motion in our products aim to delight our users and express our brand personality through enhancing the experience of our products and by using playful movements, where appropriate, to make our products more enjoyable to use.

How we use motion

Do’s & Don’ts

Do
  • Apply motion effects that are contextually relevant to the task at hand.
  • Ensure that motion effects do not slow down the user or hinder task completion.
  • Keep animations and transitions at an appropriate speed to maintain a sense of efficiency.
  • Ensure easing is always used to create smooth and natural motion.
Don't
  • Use motion for the sake of it, motion should always have a clear purpose or intent and contribute to the user experience.
  • Use motion excessively, avoid overwhelming users with excessive or distracting motion.
  • Use motion inconsistently, which can confuse users and reduce predictability.

Accessibility

We must also provide options for transitions without animation that retain context and meaning to the user so that reduced motion can be applied for users that are sensitive or averse to motion.